cedric Posted May 27, 2009 Share Posted May 27, 2009 Can somebody tell me how to solve my problem?I have a logo and a menu. Both display good with big screens but at 1024 I would like the left margin to be alot smaller. How can I make that happen?HTML: <?xml version="1.0" encoding="ISO-8859-1" ?><!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"><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><link rel="stylesheet" type="text/css" href="css/general.css" /><title>Insert title here</title></head><body><script type="text/javascript" src="wz_tooltip.js"></script><div id="logo" style="left: 8%"><img id="logoimg1" src="img/d.png" alt="logo" /><img id="logoimg2" src="img/p.png" alt="logo" /></div><div id="header"> <ul><li><a href="index.html" id="ahome" onmouseover="Tip('Home')" onmouseout="UnTip()" >Home</a></li> <li class="slash">|</li> <li><a href="index.html" id="ahome" onmouseover="Tip('Het begin')" onmouseout="UnTip()" >Het begin</a></li> <li class="slash">|</li> <li><a href="index.html" id="ahome" onmouseover="Tip('Parket')" onmouseout="UnTip()" >Parket</a></li> <li class="slash">|</li> <li><a href="index.html" id="ahome" onmouseover="Tip('Deuren')" onmouseout="UnTip()" >Deuren</a></li> <li class="slash">|</li> <li><a href="index.html" id="ahome" onmouseover="Tip('Interieur')" onmouseout="UnTip()" >Interieur</a></li> <li class="slash">|</li> <li><a href="index.html" id="ahome" onmouseover="Tip('Gratis')" onmouseout="UnTip()" >Gratis offerte</a></li> <li class="slash">|</li> <li><a href="index.html" id="ahome" onmouseover="Tip('Contact')" onmouseout="UnTip()" >Contact</a></li> </ul></div></body></html> CSS: * { margin: 0px; padding: 0px;}body { background-image:url("../img/test1.jpg"); background-repeat: repeat-x, repeat-y;}#header { position: relative; top: -120px; left: 20%; min-width: 800px; max-height: 20px; margin-left: 150px;}#header ul li { float: left; list-style: none; padding: 0 5px;}#header ul li a { font-size: 16px; font-family: castellar; color: #663300; text-decoration: none; font-weight: bold; font-variant: small-caps; letter-spacing: 1px;}.listitem[title] { color: red}#logo { position: relative; top: 40px; left: 6%; min-width: 350px;}#logoimg2 { position: relative; top: 60px; left: -100px;} Thanks for taking a look Link to comment Share on other sites More sharing options...
jlhaslip Posted May 28, 2009 Share Posted May 28, 2009 Difficult for us to analyse what is happening without a visual representation.Can you post a link to the page, please? That way we see the image, etc. and its behaviour. Link to comment Share on other sites More sharing options...
cedric Posted May 28, 2009 Author Share Posted May 28, 2009 http://www.frituurdekouter.be/pages/contact.htmlDon't look at the contactgegevens and the map positions! I'm working with that at the moment.When I use screen 1024*768 the last line of the menu 'contact' is out of screen.So the img and the menu should move more to the left than it does now.But it should still look good in very large screen because that is what the client uses (22inc) Link to comment Share on other sites More sharing options...
Ingolme Posted May 28, 2009 Share Posted May 28, 2009 I'm on 1024x768. I can see the "Contact" of the menu in my screen, however, there are unnecessary scrollbars both horizontally and vertically.All this relative positioning is really messing up your page, it is the thing that's causing all your problems. you should use things that follow the flow of the page (float, clear, margin and padding) instead of being independent. Link to comment Share on other sites More sharing options...
cedric Posted May 28, 2009 Author Share Posted May 28, 2009 Ok thanks foor the tip!I'll make sure I change the css. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.