...

View Full Version : Major positioning issue (images)



CrashNsink
05-23-2012, 02:56 PM
What I want it to look like -> Only the chick with the phrase 'Foodstant Delivery is relevant' (http://i418.photobucket.com/albums/pp270/ravenoz_bucket/index1.png)

I previously used position:absolute to get the images to be lined up correctly.

But it has its drawbacks and now I am attempting to use margins to align the 3 images together once again but unfortunately, I can't :(

The 'delivery' block keeps being stuck at the time despite having a lager margin-top value compared to the other two images..

Html code :
<!doctype html>

<html>
<head>
<meta charset="UTF-8"/>
<title> Foodstant Delivery </title>
<link rel="stylesheet" type="text/css" media="screen" href="stylo.css" />
<link rel="shortcut icon" href="favicon.ico" />
</head>

<body>

<figure>
<img id="com" src="images/combo31.png" alt="Foodstant Delivery logo" width="1000" height="700" />
</figure>

<nav id="hnavbar">
<ul id="hli">
<li><a id="home" href="index.html">Home</a></li>
<li><a id="menu" href="menu.html">Menu</a></li>
<li><a id="cu" href="ContactUs.html">Contact Us</a></li>
<li><a id="au" href="aboutus.html">About Us</a></li>
<li><a id="tc" href="TC.html">Terms & Conditions</a></li>
<li><a id="job" href="jobs.html" target="_blank">Jobs</a></li>
<li><a id="yo" href="order.html">Your Order</a></li>
</ul>
</nav>

</body>


</html>

CSS code:


/* Foodstant Delivery */

* {
margin: 0;
padding:0;
}
body { font-family: 'Comic Sans MS',Verdana,Helvetica,Courier New,sans-serif;
background:url("images/bg.jpg");
}
/* home page */
#hnavbar{
border:1px solid blue;
font-size:2em;
margin:-3em 0 0 0;
}
#hnavbar ul li {
list-style-type:none;
width:325px;
display:inline;
padding:0 13px 0 13px;
}
#com {
border:1px solid blue;
margin-top:-5%;
margin-left:13.5%;
padding-bottom:;
}


/* home page */

Nitro3k
05-23-2012, 07:04 PM
Could you provide the dimensions of the 3 images?

A workaround for such things is placing 1 image correctly and using "position: relative;" with correct left/top values to position the other ones after that.

COBOLdinosaur
05-23-2012, 07:55 PM
Margins and floats require width to render correctly.

The absolute positioning gets messed up because the position is relative to the page instead of a parent element. If you apply position:relative to the figure, then you can position within the figure to have better control.

The problem is just incomplete and sloppy CSS. tighten it up so you have real control.


Cd&



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum