CSS Forum

**silverglade** · 06-16-2009, 12:56 PM

hi, im not sure why, but i cant get my image to go below the nav links on the right. any help greatly appreciated. thank you. derek

here is the page im talking about.

http://derekvanderven.com/jewelry_gallery/index.html

here is the css to the page

Code:

@charset "utf-8";
/* CSS Document */


body {
margin: 0;
padding: 0;
background-color:#ECE0E8;
}

#wrapper {
overflow: auto;
margin: 0 auto 0 auto;
width: 800px;
height: 768px;
background-image: url(images/jewelry_background.jpg);
background-repeat: no-repeat;
border: 3px solid #2F1D13;
}

#heart_image {
    float: left;
    width: 200px;
    height: 144px;
    margin-top: 100px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: 0px;
 
}
/**********************links nav*************************/

#bottom_links {
 
    width: 200px;
    height: 300px;
     
    float: left;
    margin-top: 250px;
    margin-right: 0px;
    margin-bottom: 0;
    margin-left: 145px;

}
#bottom_links ul li a:link, #bottom_links ul li a:visited {
font-weight:bold;
color:#8F4C77;
text-decoration:none;
font-size:150%;
display:block;
height:1.8em;
}
#bottom_links ul li a:hover, #bottom_links ul li a:active{
color: #699CB8;
text-decoration:none;
}
#bottom_links ul li {
position:relative;
left:-20px;
list-style-type:none;
}

and here is the html for the page

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if lt IE 7]>
<link href="iefixes.css" rel="stylesheet" type="text/css" /> <![endif]--> 
<link href="jewelry.css" rel="stylesheet" type="text/css"/>
<title>Untitled Document</title>
 </head>

<body>

<div id="wrapper">
<div id="bottom_links">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Collection</a></li>
<li><a href="#">Testimonies</a></li>
<li><a href="#">FAQ's</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div><!--end bottom links-->  

<div id="heart_image"> <img src="images/heart.png" height="144"/></div>
<!--end heart image -->

</div><!--end wrapper-->
</body>
</html>

**silverglade** · 01:45 PM

i finally figured it out after 30 minutes. i added clear: both; to heart image. thanks. derek

edit- now i have a new problem, i cant get my text on the right to go over to the right without being affected by the divs on the left. any help greatly appreciated. thanks. derek.

here is the page im talking about

http://derekvanderven.com/jewelry_gallery/index.html

here is the new css for the page

Code:

@charset "utf-8";
/* CSS Document */


body {
margin: 0;
padding: 0;
background-color:#ECE0E8;
}

#wrapper {
overflow: auto;
margin: 0 auto 0 auto;
width: 800px;
height:768px;
background-image: url(images/jewelry_background.jpg);
background-repeat: no-repeat;
border: 3px solid #2F1D13;
}

#heart_image {
    clear: both;
    float: left;
    width: 200px;
    height: 144px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: 155px;
 
}

/*****************************right content***********************/

#right_content {
float: left;
    width: 300px;
    color: #8F4C77;
     margin: 0 auto 0 200px;
}

#right_content p {
text-indent: 20px;
padding: 10px;
}
/**********************links nav*************************/

#bottom_links {
 
    width: 200px;
    height: 300px;
     
    float: left;
    margin-top: 250px;
    margin-right: 0px;
    margin-bottom: 0;
    margin-left: 145px;

}
#bottom_links ul li a:link, #bottom_links ul li a:visited {
font-weight:bold;
color:#8F4C77;
text-decoration:none;
font-size:150%;
display:block;
height:1.8em;
}
#bottom_links ul li a:hover, #bottom_links ul li a:active{
color: #699CB8;
text-decoration:none;
}
#bottom_links ul li {
position:relative;
left:-20px;
list-style-type:none;
}
/************************footer*************************/

#footer {
margin: 0 auto 0 auto;
width: 100%;
color: #CC6699;
background-color: #ECE0E8;
text-align: center;
}
 
 #footer a:link , #footer a:visited  {
text-decoration: none;
color: red;
}
#footer a:active, #footer a:hover {
text-decoration: none;
color: #CC6699;
}

and here is the html for the page

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if lt IE 7]>
<link href="iefixes.css" rel="stylesheet" type="text/css" /> <![endif]--> 
<link href="jewelry.css" rel="stylesheet" type="text/css"/>
<title>Untitled Document</title>
 
<style type="text/css">
<!--
.style3 {font-size: x-large}
-->
</style>
</head>

<body>

<div id="wrapper">
<div id="bottom_links">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Collection</a></li>
<li><a href="#">Testimonies</a></li>
<li><a href="#">FAQ's</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div><!--end bottom links-->

<div id="right_content">asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfa</div>
<!--end right content-->
<div id="heart_image"> <img src="images/heart.png" height="144"/></div>
<!--end heart image -->
 
</div><!--end wrapper-->

<div id="footer">&copy; site design by<a href="http://derekvanderven.com"> derekvanderven.com </a></div>
</body>
</html>

**silverglade** · 06-16-2009, 02:14 PM

nevermind like after 2 hours i fixed it. i changed the position of the div i think, and floated the content div right. thanks .derek