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 */
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 */