July 4, 201115 yr Hello, I've only just joined the forum today so forgive my cheekiness for asking for help already I've been working on my portfolio site and was mucking around with tables in Dreamweaver to see what they can do. I now want to build the site with div tags and CSS but I am having trouble with the alignment of my logo and navigation. When I do what I think I should be doing the navigation ends up floating over the logo when I decrease the size of the window. Here is how I want my site to look and sit when the window is increased and decreased: http://www.victoriaosbornedesign.com/portfolio.html How can I achieve the logo and navigation to sit like this? I thought by doing this in the HTML: <div id="wrapper"> <div id="header"><img src="images/logo.gif" alt="Victoria Osborne logo" width="475" height="108"/> </div> <div id="nav"> </div> <div id="footer"> </div> </div> Then this in the CSS: body { margin: 0; padding: 0; } #wrapper { width: 100%; } #header { height: 120px; width: 50%; float: left; } #nav { height: 120px; width: 50%; float: right; } I thought it would work but the nav div with the rollovers go over my logo. Please help! Thanks! T
July 4, 201115 yr This should be confirmed by someone more experienced, but perhaps try adding...? HTML <html> <head> <link href="style.css" rel="Stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"><img src="images/logo.gif" alt="Victoria Osborne logo" width="475" height="108"/> </div> <!-- end header --> <div id="nav"> <ul id="menu"> <li>test1</li> <li>test2</li> <li>test3</li> </ul> </div> <!-- end nav --> <div id="footer"> </div> <!-- end footer --> </div> <!-- end wrapper --> </body> </html> CSS body { margin: 0; padding: 0; } #wrapper { width: 100%; } #header { height: 120px; float: left; } #nav { height: 120px; float:right; } ul#menu li { display: inline; } Edited July 4, 201115 yr by idny99
July 4, 201115 yr Author Hi! Thanks for your reply idny99. Unfortunately it's not working, the navigation still bumps out of place when the window is decreased in size and gets too close to the logo
July 4, 201115 yr What I would do is change the layout once it gets below a certain size using media queries thats if I understand correctly Have a look here
July 4, 201115 yr try this <html> <head> <link href="style.css" rel="Stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"><div id="logo"><img src="images/logo.gif" alt="Victoria Osborne logo" width="475" height="108"/></div><!--logo--> <div id="nav"> <ul id="menu"> <li>test1</li> <li>test2</li> <li>test3</li> </ul> </div> <!-- end nav --> </div> <!-- end header --> <div id="footer"> </div> <!-- end footer --> </div> <!-- end wrapper --> </body> </html> body { margin: 0; padding: 0; } #wrapper { width: 100%; } #header { height: 120px; float: left; } #nav { float:right; } ul#menu li { display: inline; } #logo{float:left;} also have look at this layout liquid vs fixed width layouts Edited July 5, 201115 yr by sash_oo7
July 5, 201115 yr Author Hi Sash_007 thanks for this. It's still not working though. The nav sits underneath the logo, I need it to sit beside the logo. Thanks for sending through the links, I'll have a read through and hopefully make sense of it!
July 5, 201115 yr Hi Tina I'm a novice too but maybe I can help. I had the same problem, when you restore down everything looks a mess! See this post: http://www.webdesignerforum.co.uk/topic/50685-website-looks-a-mess-when-restoring-down/ When I used a body div everything worked fine! I'm guessing I needed that div because of my inexperience with website design (dont see other sites having to do it). Does this help?
July 5, 201115 yr What you should really be doing when your website is resized is moving things around so it's best optimised for whatever size it's currently at, check out this or this for example, and this article for the reasoning behind it. If you absolutely insist on a mobile-unfriendly solution, you can set min-width on your container.
July 5, 201115 yr What you should really be doing when your website is resized is moving things around so it's best optimised for whatever size it's currently at, check out this or this for example, and this article for the reasoning behind it. If you absolutely insist on a mobile-unfriendly solution, you can set min-width on your container. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>victoriaosbornedesign</title> <meta http-equic="Content-Type" content="text/html;charset=utf-8"/> <style type="text/css"> body { margin: 0; padding: 0; } #wrapper { width: 1040px; margin:0 auto; } #header { height: 120px; float: left; background:grey; width:1040px; } #nav { float:right; margin:80px 80px 0 0; } ul#menu li { display: inline; padding: 0 40px 0 0; } #logo{float:left;background:red;margin:10px 0 0 0;} </style> </head> <body> <div id="wrapper"> <div id="header"><div id="logo"><img src="images/logo.gif" alt="Victoria Osborne logo" width="475" height="108"/></div><!--logo--> <div id="nav"> <ul id="menu"> <li>test1</li> <li>test2</li> <li>test3</li> </ul> </div> <!-- end nav --> </div> <!-- end header --> <div id="footer"> </div> <!-- end footer --> </div> <!-- end wrapper --> </body> </html> Edited July 5, 201115 yr by sash_oo7
July 5, 201115 yr Author Thanks sash_oo7!! That seems to be working now, will test properly and read through the code this evening. Renaissance-Design, it's not that I am an insisting on mobile-unfriendly, it's just my knowledge is very basic and trying not to get overwhelmed. I'll be able to adapt my design in the future once I understand more. I'll be reading your articles with interest so thanks for these!
July 5, 201115 yr Author Hi Webtastic, it did a bit thanks! There is loads I need to take in! Thanks! Hi Tina I'm a novice too but maybe I can help. I had the same problem, when you restore down everything looks a mess! See this post: http://www.webdesignerforum.co.uk/topic/50685-website-looks-a-mess-when-restoring-down/ When I used a body div everything worked fine! I'm guessing I needed that div because of my inexperience with website design (dont see other sites having to do it). Does this help?
Create an account or sign in to comment