1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Need Some Help Fine-Tuning Code Please

Discussion in 'HTML & Website Design' started by VanceVP, Nov 23, 2016.

0
  1. #1
    I have completely reworked the code for a project I have been working on and I need a bit of help fine-tuning the code.

    My styling looks like:
    

/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
    margin:0;
    padding:0;
}

img, fieldset {
    border:none;
}

/* fix for legacy iOS and windows Mobile devices */
@media (max-width:512px) {
    * {
        -webkit-text-size-adjust:none;
        -ms-text-size-adjust:none;
    }
}

/* fix for HDX displays like the Kindle Fire HDX */
@media
    (-webkit-min-device-pixel-ratio:2) and (min-width:1600px),
    (min-resolution:172dpi) and (min-width:1600px)
{   
    html { font-size:200%; }
}

body {
    margin: 0;
    padding: 0;
    border: 0;   
    width: 100%;
    background: #88A0BB;
    min-width: 600px; 
    font-size: 110%;
}
a {
    color: #000;
}
a:hover {
    color: blue;
    text-decoration: none;
}

h1, h2, h3 {
    margin: .8em 0 .2em 0;
    padding: 0;
}

h1 {
    font-size: 2.5em;
    text-align: center;
}

h2 {
    font-size: 1.5em;
    margin-top: -1em;
}

p {
    margin:.4em 0 .8em 0;
    padding-top: 1.25em;
    font-size: 110%;
}

#contentWrapper {
    max-width: 60em;
    margin: 0 auto;
    padding-top: 0.1em;
    overflow: hidden;
    background: #FFF;
    -webkit-box-shadow:
        0 0 1px 1px #000,
        0 0 1.5em 0.1em #321;
    box-shadow:
        0 0 1px 1px #000,
        0 0 1.5em 0.1em #321;
}

#leftColumn {
    background: #FFF;
    width: 16em;
    margin: 2em 0 0 1em;
    background: url("/images/logo.jpg") no-repeat;
}

#leftColumn ul {
    padding: 12em 0 3em 1em;
    width: 13.5em;
    list-style-type: none;
}

#leftColumn ul li a {
    text-decoration: none;
    color: #000;
    padding: 1em;
    background-color: #FFF;
    display: block;
}

#leftColumn ul li a:visited {
    color: #000;
}

#leftColumn ul li a:hover  {
    color: #000;
    font-weight: bold;
    background-color: #E7E7E7;
}

.weatherLink {
    padding-left: -4em;
}

#mainContent {
    width: 39em;
    margin: -66em 0 0 20em;
    padding-bottom: 3em;
}

#footer {
    margin-top: 1.5em;
    text-align: center;
    font-size: 0.8em;
    font-family: arial,helvetica,sans-serif;
    height: 2em;
    padding: 1em 0 0.5em 0;
    background: #ECECFF;
}

#footer span {
  margin-right: 40px;
}

@media (max-width:50em) {
    body {
        min-width:192px; /* CSS3 possible, so let it go narrower */
    }
    h1 {
        font-size: 225%;
    }
    h2  {
        font-size: 100%;
    }
    #leftColumn {
        display: none;
    }
    .weatherLink {
        display: none;
    }
    #mainContent {
        float: left;
        width: auto;
        margin: 1em 1em 0 1em;
    }
    #footer {
        width: 100%;
    }
}
    Code (markup):
    And my html looks like:
    

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head>   
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    <title>Butler County's Best RC Flying Club-The BAMS</title>
    <meta name="description" content="We welcome all who are interested in flying fixed wing radio controlled airplanes at Butler County's Best RC Flying Club" />
    <meta name="keywords" content="radio control, radio controlled airplanes, r/c, flying club, radio control club, radio control flying, rc flying club, r/c flying club" />
    <meta name="robots" content="index, follow" />
    <link rel="stylesheet" type="text/css" href="screenA.css" media="screen" />   
    <link rel="shortcut icon" href="favicon.png">
   
    <!-- Start WOWSlider.com HEAD section -->
    <link rel="stylesheet" type="text/css" href="engine1/style.css" />
    <script type="text/javascript" src="engine1/jquery.js"></script>
    <!-- End WOWSlider.com HEAD section -->
   
</head>
<body>
   
<div id="contentWrapper">
    <!-- Start WOWSlider.com BODY section -->
    <div id="wowslider-container1">
    <div class="ws_images"><ul>
            <li><img src="data1/images/beautiful_fall_day_for_flying.jpg" alt="Beautiful Fall Day For Flying" title="Beautiful Fall Day For Flying" id="wows1_0"/></li>
            <li><img src="data1/images/enjoying_a_day_of_flying.jpg" alt="Enjoying A Day Of Flying" title="Enjoying A Day Of Flying" id="wows1_1"/></li>
            <li><img src="data1/images/ready_for_flight.jpg" alt="Ready For Flight" title="Ready For Flight" id="wows1_2"/></li>
            <li><a href="http://wowslider.com/vi"><img src="data1/images/pilot_skills_demonstrated.jpg" alt="jquery slider" title="Pilot Skills Demonstrated" id="wows1_3"/></a></li>
            <li><img src="data1/images/preparing_for_a_fall_flight.jpg" alt="Preparing For A Fall Flight" title="Preparing For A Fall Flight" id="wows1_4"/></li>
        </ul></div>
        <div class="ws_bullets"><div>
            <a href="#" title="Beautiful Fall Day For Flying"><span><img src="data1/tooltips/beautiful_fall_day_for_flying.jpg" alt="Beautiful Fall Day For Flying"/>1</span></a>
            <a href="#" title="Enjoying A Day Of Flying"><span><img src="data1/tooltips/enjoying_a_day_of_flying.jpg" alt="Enjoying A Day Of Flying"/>2</span></a>
            <a href="#" title="Ready For Flight"><span><img src="data1/tooltips/ready_for_flight.jpg" alt="Ready For Flight"/>3</span></a>
            <a href="#" title="Pilot Skills Demonstrated"><span><img src="data1/tooltips/pilot_skills_demonstrated.jpg" alt="Pilot Skills Demonstrated"/>4</span></a>
            <a href="#" title="Preparing For A Fall Flight"><span><img src="data1/tooltips/preparing_for_a_fall_flight.jpg" alt="Preparing For A Fall Flight"/>5</span></a>
        </div></div><div class="ws_script" style="position:absolute;left:-99%"><a href="http://wowslider.com/vi">carousel slider</a> by WOWSlider.com v8.2</div>
    <div class="ws_shadow"></div>
    </div>   
    <script type="text/javascript" src="engine1/wowslider.js"></script>
    <script type="text/javascript" src="engine1/script.js"></script>
    <!-- End WOWSlider.com BODY section -->
   
        <div id="leftColumn">
            <?php include("nav-menu.php"); ?>
                    <br>
        <!-- end #leftColumn --></div>
                <div class="weatherLink">
                    <span style="display: block !important; padding-left: 3em; width: 215px; text-align: center; font-family: sans-serif; font-size: 12px;"><a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:16061.1.99999&bannertypeclick=wu_travel_plane1" title="West Sunbury, Pennsylvania Weather Forecast" target="_blank"><img src="http://weathersticker.wunderground.com/weathersticker/cgi-bin/banner/ban/wxBanner?bannertype=wu_travel_plane1&pwscode=KPABUTLE3&ForcedCity=West Sunbury&ForcedState=PA&zip=16061&language=EN" alt="Find more about Weather in West Sunbury, PA" width="215" /></a><br><a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:16061.1.99999&bannertypeclick=wu_travel_plane1" title="Get latest Weather Forecast updates" style="font-family: sans-serif; font-size: 12px" target="_blank">Click for weather forecast</a></span></span>
                </div>
       
       
        <div id="mainContent">
            <h1>Welcome To The BAMS</h1><br>
                    <center><h2> A Fixed Wing, Radio Controlled Airplane Flying Club</h2></center>
                   
                    <p>If you are interested in building or flying fixed wing, radio control (R/C) airplanes or just enjoy great company, then you have come to the right place! The BAMS (Butler Aircraft Modelers Society) is an excellent club to help you get started in this hobby.
                    </p>
                    <p>If you are already a pilot, you will find The BAMS to be a very diverse group of pilots who are interested in the many different facets of this wonderful hobby. We fly anything from foamies to big balsa planes and everything in between. 
                    You will find that with us, there is no more satisfying sense of accomplishment than seeing the creation that you built fly for the first time! All of our members enjoy the hobby and enjoy spending time and sharing their experience and know-how with others that are interested too.</p>
                    <p>
                    The simple truth of the matter is that you just will not find a friendlier group of fliers anywhere.</p>
                    <p>
                    If you are new to the sport of radio controlled airplanes, we offer an excellent training program during the warmer months. Because we know how difficult and expensive it can be to try to learn to fly rc airplanes on your own, we do everything we can to teach, support and assist new pilots. We believe that in order to truly enjoy this hobby/sport, you need to learn not only how to fly safely, but to properly build and maintain your aircraft. And you can always count on our members to help out when yo need it.</p>
                    <p>
                    Please take a few minutes to browse around our website and get to know a little about our club. If you are interested in learning more about radio controlled airplanes, feel free to visit us at the field. We invite you to join our club and enjoy some fun with us along with the benefits of being a member of The BAMS!</p>
                    <p>
                    Our park-like field is just north of Butler, located between Routes 308 and 38. It features large beautiful grass runways, a covered pavilion with picnic tables, and full restroom facilities. We utilize the field for more than just flying. Our members fly year-round and during the flying season, we conduct monthly business and membership meetings at the field. We also hold monthly picnic's for our members and their families.</p>
                    <p>
                    If you would like to come out and visit with us, <a href="field.php">click here</a> for a map to our field.</p>
                    <p>
                    Again, if you want to learn to safely operate and fly radio controlled airplanes, join The BAMS and get the training you need. Take part in our new pilot training program that is second to none. Our training starts in May of each year.</p>
                    <p>
                    If you would like to participate in our training program or just want more information, please feel free to contact Club President, Carl McCall, by email at corg@netzero.net and he will get you signed up and ready to start flying.</p>
        <!--end #mainContent --></div>
       
        <div id="footer">
            All contents &copy; 2016 . . . All Rights Reserved.
        </div>
   
<!-- end #contentWrapper" --></div>

</body>
</html>
    Code (markup):
    My first question deals with the alignment of my #mainContent. If you check the code, I had to force #mainContent to line up at the top where I wanted it. What am I doing wrong or how to I go about making it line up without have to force it?

    My next problem is that I am trying to learn how to make sites responsive and while I think I am making some small progress, a lot of it just is not sinking in.

    Anyway, I have the media query partially set up (I hope). My first question is, do I have it set up correctly?

    My second question is, are there some standard break points that I should be

    My final question about the way I have the media query set up is, the footer is lining up directly under the slider instead of at the bottom where it belongs and other than forcing it to the bottom setting the margin, I have no clue what I am doing wrong.

    And finally, I would like to find out what it would cost me to have one of the experts here write the code to take my navigation list and make it so that when the page is reduced it shows the hamburger thing?

    One of the members here has tried to explain how to do this to me, but I am not getting it. I think he got frustrated with my ignorance and I am not real sure that I blame him. I am not the sharpest knife in the drawer, but I am just not catching on to how it is suppose to work. So instead of alienating myself further, I am willing to pay someone to do it, if the price is reasonable. Otherwise, I will just leave the site setup for desktop viewing.

    Thanks in advance for any help with this . . .
     
    VanceVP, Nov 23, 2016 IP
  2. VanceVP

    VanceVP Member

    Messages:
    113
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    33
    #2
    Just an update. Don't want anyone to think that I am just looking for someone to fix the problem for me.

    So I did some more digging and I think I got my problem with the footer fixed. Flexbox in the media query pretty much fixed it right up.

    Hopefully my other two problems are a simple little thing for the experts and I can learn how to fix my problems and finally put this project to rest.
     
    VanceVP, Nov 23, 2016 IP
  3. VanceVP

    VanceVP Member

    Messages:
    113
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    33
    #3
    Completely disregard this thread.
     
    VanceVP, Nov 26, 2016 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    Too late, I've already read it and it is burned onto my retinas. Tell you what, I'll ignore your next thread and we'll be even. ;-)

    gary
     
    kk5st, Nov 26, 2016 IP
  5. VanceVP

    VanceVP Member

    Messages:
    113
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    33
    #5
    LOL

    That works for me. I've gotten use to being ignored this past week. Makes me feel right to home.
     
    VanceVP, Nov 27, 2016 IP
  6. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #6
    It's a common trend here. How many times I posted a CSS / HTML related question only to figure it out on my own an hour later or scrapping the whole thing altogether. The best thing one can do before posting a question here is to keep working on their project until all options have been exhausted.
     
    qwikad.com, Nov 27, 2016 IP