PDA

View Full Version : cant get my image to go below the nav links


silverglade
06-16-2009, 04:58 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

@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

<!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
06-16-2009, 05:09 PM
i finally figured it out after 30 minutes. i added clear: both; to heart image. thanks. derek:)

silverglade
06-16-2009, 05:46 PM
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

@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

<!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>

MagicPower
06-16-2009, 06:02 PM
the div containing the text on the left (asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfa) is #right_content. Jus float this div to the right and that should solve the problemo.

silverglade
06-16-2009, 06:13 PM
magicpower you are AWESOME!! this stumped me for almost 2 hours. thanks for giving me my life back LOL> derek:mrgreen:

MagicPower
06-16-2009, 06:31 PM
ur welcome.

domedia
06-16-2009, 07:57 PM
<div id="right_content">asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfa</div> Never develop with words like these. They will never appear on your website anyways, and HTML/CSS is limited when it comes to automatically breaking up words.

silverglade
06-16-2009, 11:58 PM
ok thank you domedia.:)