Problem getting images to stagger properly
I am currently designing my first web site using CSS and am stuck as to how to get 4 images in my sidebar to stagger properly. Currently they are showing up side by side. See this link - http://www.freewebs.com/foxdencreations/
Now the images should show up as shown on attached file.
I have tried using ul li float left and float right. I believe that I will have to use position:absolute but am not sure how to code the HTML or the CSS.
Here is my code for each:
<!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 name="generator" content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="foxden_home.css" />
<title>Foxden Creations</title>
</head>
<body>
<div id="border-top">
</div>
<div id="header">
<h1>Foxden Creations and Jewelry</h1>
</div>
<div id="necklace">
</div>
<div id="middle">
<ul id="nav">
<li id="nav-home"><a href="#">Home</a></li>
<li id="nav-about"><a href="about.html">About Us</a></li>
<li id="nav-necklaces"><a href="necklaces.html">Necklaces</a></li>
<li id="nav-earrings"><a href="earrings.html">Earrings</a></li>
<li id="nav-bracelets"><a href="bracelets.html">Bracelets</a></li>
<li id="nav-lanyards"><a href="lanyards.html">Lanyards</a></li>
<li id="nav-bookmarks"><a href="bookmarks.html">Bookmarks</a></li>
<li id="nav-request"><a href="request.html">By Special Request</a></li>
</ul>
<div id="sidebar">
<img src="images/blk_slvr_necklace.png" />
<img src="images/pnk_blk_lanyard.png" />
<img src="images/pnk_blk_bookmark.png" />
<img src="images/slvr_wht_cross_necklace.png" />
</div>
<div id="content">
<h2>Welcome to Foxden Creations</h2>
<p>Here you will find unique, hand-crafted beaded jewelry that will set you apart from the crowd.</p>
<p>Please come in and look around, I am sure there is something that will catch your eye.</p>
<p>I also take special orders if you don't find what you are looking for! Just fill out the form on the <a href="request.html">"By Special Request"</a> page.</p>
</div>
</div>
<!-- end "middle" div -->
<div id="footer">
<p>Copyright © 2007 Foxden Creations - All Rights Reserved.</p>
<p>Site design by Foxden Web Solutions</p>
</div>
<div id="border-bottom">
</div>
</body>
</html>
CSS:
html {
background: #18222E;
}
body {
width: 767px;
margin: 2em auto;
position: relative;
}
#header {
background: url(images/border/header.gif);
}
h1, h2
{
margin-top: 0;
}
h1 {
background: url(images/foxden_creations_logo.png) no-repeat 2em 0;
height:147px;
text-indent: -9999em;
margin: 0;
}
#middle {
background: url(images/border/middle.gif);
overflow: hidden;
}
#content {
margin: 0 100px;
}
#sidebar {
float: right;
width: 300px;
margin: 30px;
padding: 0;
background: yellow;
display: inline;
}
#footer {
clear: both;
background: url(images/border/footer.gif);
font: bold x-small Arial, Helvetica, sans-serif;
color: #FFF;
text-align: center;
}
#footer p {
margin: 0;
}
/* Let's get some images on the nav buttons! */
ul#nav {
background: yellow;
float: left;
width: 175px;
margin: 0 0 0 15px;
padding: 0;
list-style: none;
text-align: center;
display: inline;
}
ul#nav li {
width: 85%;
margin: 1em auto;
}
ul li a {
display: block;
height: 39px;
text-indent: -999em;
}
ul li#nav-home a {
background: url(images/buttons/home.png);
}
ul li#nav-about a {
background: url(images/buttons/aboutus.png);
}ul li#nav-necklaces a {
background: url(images/buttons/necklaces.png);
}
ul li#nav-earrings a {
background: url(images/buttons/earrings.png);
}
ul li#nav-bracelets a {
background: url(images/buttons/bracelets.png);
}
ul li#nav-lanyards a {
background: url(images/buttons/lanyards.png);
}
ul li#nav-bookmarks a {
background: url(images/buttons/bookmarks.png);
}
ul li#nav-request a {
background: url(images/buttons/request.png);
}
#necklace {
position: absolute;
top: 30px;
right: 1em;
background: transparent url(images/jewelry.png) no-repeat;
height: 324px;
width: 158px;
left: 574px;
}
#border-top {
background: url(images/border/top.gif);
height: 41px;
}
#border-bottom {
background: url(images/border/bottom.gif);
height: 39px;
}
Could someone please correct my code so that the effect I want works?
Thanks.
Originally Posted by Raffles
Bookmarks