SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Zealot godfather999's Avatar
    Join Date
    Sep 2011
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to place logo and nav in the same line with 100% width?

    How to place logo and nav in the same line with 100% width?




    Code:
    <div id="top_header">
    			<img id="logo "src="images/pic.png" />
    			<nav id="navi">
    				<ul>
    					<li>Item</li>
    					<li>Item</li>
    					<li>Item</li>
    					<li>Item</li>
    					<li>Item</li>
    					<li>Item</li>
    				</ul>
    			</nav>
    		</div>
    Code:
    #logo{
    	display:block;
    	float:left;
    	height:31px;
    	width:81px;
    }
    #navi{
    	width:400px;
    }
    #navi ul li{
    	display: inline;
    }
    #navi li{
    	padding:7px;
    	display:inline-block;
    	list-style:none;
    }

  2. #2
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To place the logo in line with the navigation you could just declare a float:left on the image. What do you mean "with 100% width?"

  3. #3
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The reason it isn't working the way you have it is syntax: <img id="logo "src="images/pic.png" />

    Change to <img id="logo" src="images/pic.png" />

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Both of those are good answers.

    I'm only posting because I wanted to see the comic sans in my post too : )


    *edit oh gawd this is lovely. I may post like this from now on

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2011
    Posts
    31
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Both of those are good answers.

    I'm only posting because I wanted to see the comic sans in my post too : )


    *edit oh gawd this is lovely. I may post like this from now on
    FUUUUUUUUUUUUUUU

  6. #6
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    You could also use negative margins instead of float, since images tend to be fixed size.... I'd have to see what it is you are trying to do both for real content and actual image but it looks to me like you're already thinking presentation before you even have your content marked up semantically... hence the presence of an IMG tag on what is quite likely NOT a content image.

    Of course the wasteful and pointless HTML 5 asshattery and extra DIV for nothing probably isn't helping matters either... since you're basically using them to apply style that could just be put on the UL itself. (why I consider header, nav, content, section and all those new tags to be useless pointless idiotic rubbish setting coding practices BACK to 1998)

    Off Topic:

    @stomme -- another reason I use a user.css; I'm seeing arial here.


Bookmarks

Posting Permissions

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