Jump to content

Positioning


cedric
 Share

Recommended Posts

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

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

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...