www.webdeveloper.com
Results 1 to 7 of 7

Thread: Nav Bar kicking my ass!

  1. #1
    Join Date
    May 2014
    Posts
    8

    Nav Bar kicking my ass!

    Hi guys and gals.

    I am pretty much a rookie with web dev and I need a little help.

    I am having some problems with my navigation bar/social media icons/logo mix.

    I am trying to make my logo centered top which works, I want my 3 social icons to float to the right (still at the same height on the page) and my nav bar underneath.

    My social icons are getting shoved down onto the nav bar which firstly I don't want, secondly it sends my nav bar off center.

    Can anybody help me out here?

    (HTML 5 BTW)

    Thank
    ARookieDesigner

  2. #2
    Join Date
    Mar 2012
    Posts
    1,559
    We need you to post the relevant code, or give a link.

  3. #3
    Join Date
    May 2014
    Posts
    8
    I apologize. I will edit it into the OP. Give me a few minutes.

  4. #4
    Join Date
    May 2014
    Posts
    8
    Here is my code, couldn't find how to edit :s


    I think I may have lost the structure of my code though, probably extremely messy, but I am an extreme rookie. Please be patient

    RELEVANT HTML CODE:
    Code:
    <body>
    
        <header>
          <a href="index.html" id="logo">
            <img style="margin:0px auto;display:block"  src="Images/logo3.png" alt="logo" >
          </a>
          <a href="https://instagram.com/" >
          	<img style="float:right" src="Images/twitter.png" alt="The Strength Factory's Instagram" >
          </a>
          <a href="https://www.facebook.com/" >
          	<img style="float:right" src="Images/facebook.png" alt=" Facebook" >
          </a>
          <a href="https://twitter.com/" >
          	<img style="float:right" src="Images/twitter.png" alt="Twitter" >
          </a>
          <nav>
            <ul>
              <li><a href="index.html" class="selected">Home</a></li>
              <li><a href="about-us.html">About Us</a></li>
              <li><a href="contact-us.html">Contact Us</a></li>
              <li><a href="our-coaches.html">Our Coaches</a></li>
              <li><a href="our-services.html">Services</a></li>
            </ul>
          </nav>
        </header>
    RELEVANT CSS CODE:
    Code:
    /***********************
    GENERAL
    ***********************/
    
    body {
    	font-family: sans-serif; 
    }
    
    #wrapper {
     	max-width: 940px;
     	margin: 0 auto;
     	padding: 0 5%;
    }
    
    a {
     	text-decoration: none;
    }
    
    /***********************
    HEADER
    ***********************/
    
    header {
     	float: left;
     	margin: 0 0 30px 0;
     	padding:5px, 0 0 0;
     	width: 100%;
    }
    
    #logo {
     	text-align: center;
     	margin: 0;
    }
    
    h1 {
     	font-family: sans-serif; 
     	margin: 15px 0;
     	font-size: 1.75em;
     	font-weight:normal;
     	line-height: 0.8em;
    }
    
    h2 {
     	font-size: 0.75em;
     	margin: -5px 0 0;
     	font-weight: normal;
    }
    
    
    /***********************
    NAVIGATION
    ***********************/
    
    nav {
    	text-align:center;
     	padding: 10px;
     	margin: 20px 0 0;
    }
    
    nav ul{
     	list-style:none;
     	margin: 0 10px;
     	padding: 0;
    }
    
    nav li {
     	display: inline-block;
    }
    
    nav a {
    	font-weight: 800;
    	padding: 15px 10px;
    }
    
    
    /***********************
    COLORS
    ***********************/
    
    body {
     	background-color: #fff;
     	color: #999;
    }
    
    
    header {
     	background:#fff;
    }
    Last edited by jedaisoul; 05-24-2014 at 04:50 PM. Reason: quote tags changed to code tags

  5. #5
    Join Date
    May 2014
    Posts
    936
    A good first step would be to get some semantic markup in there; and probably axe the HTML 5-tardery while at it. You seem to have presentational images in the markup, no logical document structure, no opening heading, run-on sentence of logo and social links, and that's without even talking the HTML 5 code bloat, incomplete font stacks, line-height shorter than the font size, mixing of metrics, and dozens of other "how not to build a website" code.

    Though I'd suspect having the (pointless HTML 5-tard) HEADER tag floated left, with the menu INSIDE it, is probably a contributor to your issues. Again though, part of why I think HTML 5 just sets coding practices BACK a decade or more.

    I'd have to see what it is you are trying to do live to have some idea what you are aiming for on appearance (as what you have coded makes no sense), but a good start would be to get semantic markup in there and axe the "HTML 5 for nothing".

    Code:
      <h1>
        <a href="/">
          Site title
          <span></span>
        </a>
      </h1>
      
      <ul id="socialLinks">
        <li class="instagram">
          <a href="https://instagram.com/">
            Instagram
            <span></span>
          </a>
        </li>
        <li class="facebook">
          <a href="https://www.facebook.com/" >
            Facebook
            <span></span>
          </a>
        </li>
        <li class="twitter">
          <a href="https://twitter.com/" >
            Twitter
            <span></span>
          </a>
        </li>
      </ul>
      
      <ul id="mainMenu">
        <li><a href="index.html" class="current">Home</a></li>
        <li><a href="about-us.html">About Us</a></li>
        <li><a href="contact-us.html">Contact Us</a></li>
        <li><a href="our-coaches.html">Our Coaches</a></li>
        <li><a href="our-services.html">Services</a></li>
      </ul>
    All those empty span would be for gilder-levin image replacement, that way the page gracefully degrades images off and it gets presentational images the devil out of the markup. On the social icons it would also mean you could leverage the incorrectly named "CSS sprites" to reduce the number of handshakes to speed up load times.

    Though centering a logo next to right positioned social icons is ASKING for it to fail -- hope you plan on media queries in there when your layout gets too tiny for it.

    But if you really want to go there -- as the h1 would have a image replacement (akin to your IMG tag) it's a fixed height element, I'd set a negative bottom margin equal to it's height to ride the social icons up next to it. Remember, negative margins reduce an elements size "in flow", so a negative bottom margin equal to it's height would ride the social links up over the H1. You then just pad the bottom of #socialLinks to push #mainMenu down, being sure to set a clear:both on #mainMenu since I'd assume #socialLinks would be floated.
    Java is to JavaScript as Ham is to Hamburger.

  6. #6
    Join Date
    May 2014
    Posts
    8
    Confused.com

    I'm new so don't know all the jargen.

  7. #7
    Join Date
    May 2014
    Posts
    936
    Well, lemme explain some of the jargon.

    Markup -- your HTML

    Content -- stuff in your document that isn't HTML. Typically your CDATA -- character data -- aka plaintext... Basically the stuff that's ACTUALLY important on your page. Images CAN be content if they are... well, the content you are trying to deliver. Images that are part of the theme/template/skin is NOT content.

    Semantic markup -- saying what things ARE not what they'll look like. You have a list of social media icons, make them a list. You have a heading, make it a numbered heading (H1..H6). If it's a grammatical paragraph, make it a P. Beware that mis-using semantic tags can be just as bad -- see the idiocy people do of sticking single images into paragraph tags, or using paragraphs/lists inside forms without FIELDSET and LABEL.

    Logical document structure -- putting your content in an order that would still make sense if HTML and your skin never even existed.

    Proper heading orders -- Using numbered headings properly; which is to say a H1 is the heading under which everything on the page is a subsection, h2's are the start of subsections of the h1's, h3's are the start of subsections of the H2 before it, and so forth, with HR (horizontal rule) indicating a change in topic/section where a numbered heading is unwanted/unwarranted -- and since user agents are SUPPOSED to let you navigate headings, and headings indicate section changes, that's what makes HTML 5's idiotic SECTION and NAV tags redundant pointless code bloat.

    Separation of presentation from content -- anything that says what stuff looks like has NO BUSINESS IN YOUR HTML -- this isn't 1997 at the peak of the browser wars. The same goes for presentational (aka non-content) images. If it's part of the theme, it doesn't belong in an img tag. To that end things like logo's, which are presentational affectations of text, have no business in your markup.

    Gilder-Levin image replacement -- a method of absolute positioning a content-less element, like <span></span> over the text inside it's parent, to hide it underneath an opaque background image. This is so that:

    1) You have plaintext for search engines and screen readers to see.

    2) Images off, the text is shown -- a lot of users on metered connections disable images, you don't want a giant blank space or ugly ALT text there.

    3) You can leverage the incorrectly named "CSS Sprites" if desired quite easily using this technique.

    CSS Sprites -- a horribly wrong name for a very useful technique of using a single image made up of smaller images, that you slide around as a background to reveal the part you want to use. Reduces the number of file requests to the server and as such can result in a faster loading page.

    ... and with Google's "panda" update penalizing content-lean, image-heavy, slow-loading pages, you should learn that one ASAP!

    Flow -- how elements interact with each-other on the page normally. Floating an element partly "removes it from flow" in that non-floated non-overflow-overridden elements will pass behind the floated element. Absolute positioning an element removes it from flow entirely -- other elements will pretend it's not there.

    Then there's relative positioning, which is a pain in the ass and horribly mis-used by a lot of people starting out. (did it myself a decade ago)... when you set something to position:relative it is still in flow -- if you set left:50px you will move where it is DRAWN 50px left, but it will be treated as if it has not been moved in 'flow' -- aka how other elements act towards it.

    Any other jargon you didn't get? Feel free to ask.

    Some other advice:

    Numeric font-weights are unreliable cross-browser and cross-font. Frankly, only BOLD and NORMAL should really be used for font-weight if you care about it actually working. That font-weight:800 will likely look different in all three major browser engines, even more different across OS -- and it might be ignored outright in some systems.

    Avoid setting inline-block on block-level elements (like LI) , legacy IE will ignore it. If you can get away with it, set them to display:inline and then set display:inline-block on it's child -- like those nice anchors you have there.

    It's probably not a good idea to set a heading font smaller than your content.

    If you change your font-size, redeclare your line-height. Line-heights do NOT inherit properly. (even with the 'use no metric' nonsense the jacktards over at SitePoint claims works -- which it doesn't). Good rule of thumb in that case is that if you're going to make a change in size, you might as well use the full condensed font declaration where you set "weight style size/line-height family". Ends up damned near the same amount of code, and makes it clear what's being set.

    Do not set line-heights shorter than the font-size, it can clip off text top and bottom.

    I'd toss together CSS to go with that markup I posted before, but I'm not clear what you are aiming for in terms of looks with that.
    Java is to JavaScript as Ham is to Hamburger.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles