PDA

View Full Version : my div box is not positioning properly


silverglade
05-14-2009, 08:47 PM
hi, my box position wont change in dreamweaver design view when i add a top margin to it. and when i go all the way to margin-top:400px, it doesnt respond right in browser or in dreamweaver. in dreamweaver it just sits there. also my text inside the div box shows up in different spots in IE6 and FF. also, i had to put on a height to my wrapper div and take off overflow:auto; for it to display the background image correctly and not get a scrollbar.. any help greatly appreciated. here is a sample page of what im talking about.

http://derekvanderven.com/elegant_shoes/location.html

here is the css

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

#wrapper {
overflow: auto;
width: 820px;
height: 650px;
background-image: url(new_images/black_slices/shoes_top.gif);

margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
body {
background-color: #000000;
font-family: "Times New Roman", Times, serif;
margin: 0 ;
padding: 0;

}




#copyright {
margin: 20px auto 0 auto;
text-align:center;
color: #000000;
width: 820px;
height: 30px;
}

a:link {
color: #000000;

}
a:visited {
color:red;
}
a:hover {
color: red;
}
a:active {
color: red;
}

p
{
text-indent: 20px;
}

/*****************SHOES NAVIGATION****************/

#toplinks {
font-weight:bold;
width:800px;
height: 60px;
font-size: 24px;
margin-right: auto;
text-align: center;
margin-top: 15px;
margin-bottom:0;
margin-left: auto;
}
#toplinks ul {
list-style-type:none;
margin:0;
padding:0;
}
#toplinks ul li {
display:inline;
margin:0 15px;
line-height:3em;
}
#toplinks ul li a:link, #toplinks ul li a:visited {
color:#000;
text-decoration:none;
height:3em;
}
#toplinks ul li a:hover, #toplinks ul li a:active{
color:red;
text-decoration:none;
}


/********************BOTTOMLINKS CODE***************/

#bottomlinks {
font-weight:bold;
width:800px;
height: 60px;
font-size: 24px;
margin-right: auto;
text-align: center;
margin-top: 550px;
margin-bottom: 0;
margin-left: auto;
}
#bottomlinks ul {
list-style-type:none;
margin:0;
padding:0;
}
#bottomlinks ul li {
display:inline;
margin:0 15px;
line-height:3em;
}
#bottomlinks ul li a:link, #bottomlinks ul li a:visited {
color:#000;
text-decoration:none;
height:3em;
}
#bottomlinks ul li a:hover, #bottomlinks ul li a:active{
color:red;
text-decoration:none;
}
/******************ABOUT CODE******************/

#about_wrapper {

margin: 0 auto 0 auto;
width: 820px;
height: 650px;
background-image: url(new_images/black_slices/shoes_blank.jpg);
background-repeat: no-repeat;


}




#about_info {
width: 600px;
height: 400px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}








/****************SHOES CODE***************/
#shoes_wrapper {

margin: 0 auto 0 auto;
width: 820px;
height: 650px;
background-image: url(new_images/black_slices/shoes.jpg);
background-repeat: no-repeat;


}



/***************************NEWS CODE************************/
#news_wrapper {

margin: 0 auto 0 auto;
width: 820px;
height: 650px;

background-image: url(new_images/black_slices/shoes_blank.jpg);
background-repeat: no-repeat;
}

#infobox {
width: 400px;
height: 400px;
margin-top: 300px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

}
#infobox p {
padding: 10px;
text-indent: 10px;

}


/**************************LOCATION CODE************************/

#location {
margin: 0 auto 0 auto;
width: 200px;
height: 200px;
text-align: center;
color: black;
}
and here is the html

<!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" />
<link href="elegant.css" rel="stylesheet" type="text/css"/>
<title>Elegant Shoes -our shoes</title>
</head>

<body>
<div id="news_wrapper">




<div id="toplinks"><ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="shoes.html">Shoes</a></li>
<li><a href="press.html">Press</a></li>
<li><a href="news.html">News</a></li>
<li><a href="location.html">Location</a></li>
<li><a href="contact.html">Contact</a></li>
</ul></div>



<div id="infobox">rthsfghdfghfdshf


</div>

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

coloeagle
05-14-2009, 10:49 PM
Looks like you are wanting the infobox to be centered in the page.
For IE try adding text-align:center;

You may then need to add text-align:left; for the paragraphs.

Remember that the top margin will be counted from the bottom of the div above it.

silverglade
05-15-2009, 08:35 AM
thanks. i got the div to be centered with margin 0 auto 0 auto, and i get the text approximately where i want it to be. but it shows up differently in dreamweaver than in ff and ie6. in dreamweaver it is further up, and in the browser its further down. also, in dreamweaver when i type text in the code between the div, or even in design view, the text flows outside of the div when i want the text to wrap inside the div as i type or code it. any more help greatly appreciated. thanks for looking at my code :) derek

coloeagle
05-15-2009, 11:02 PM
Not sure why the text flows outside when using DW. Have been playing around with your page and all seems to be working fine.
Remember that if you want to have your text positioned normally and not centered, you need to add text-align:left; to the infobox p declarations.

silverglade
05-15-2009, 11:19 PM
thanks very much for replying. i got the text to wrap in the div in DW finally , it might have just been my mistake of doing something wrong. hehe. thank you for the text align tip. yer the best coloeagle. derek:mrgreen: