PDA

View Full Version : How to move my box down


blimp
06-16-2009, 11:22 PM
Just when I through I was starting to understand css.

I'd like to move the <div id="slideshow">SLIDESHOW</div> box 400px down so it sits just below where my menu nav will go.

Do I use padding, margins or something else....?

I'm confused


This is my 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" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #000;
}
#wrapper {
height: 1000px;
width: 955px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-image: url(images/background1.jpg);
background-repeat: no-repeat;
}
#slideshow {
background-color: #000;
height: 300px;
width: 400px;
margin-left: auto;
margin-right: auto;
color: #FFF;
font-family: Verdana, Geneva, sans-serif;
}
-->
</style>
<link href="css/style_sheet.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="slideshow">SLIDESHOW</div>
</div>
</body>
</html>

blimp
06-16-2009, 11:26 PM
I think i've just worked it out.

in my #slideshow style, I added

#slideshow {
background-color: #000;
height: 300px;
width: 400px;
margin-left: auto;
margin-right: auto;
color: #FFF;
font-family: Verdana, Geneva, sans-serif;
top: 400px;
position: relative;

which brought it down, is this the right way to do this?

domedia
06-16-2009, 11:53 PM
Do you know what margin and padding are and the difference between them?

Depending on the design, I'd use one of them.

blimp
06-17-2009, 01:09 AM
Sure do domedia,

1. Padding handles the spacing within the element

2. Margins controls the spacing between elements

What I did was make the slideshow container relative to my wrapper div and then set the position by adjusting the top value.

This worked perfect :-)

blimp
06-17-2009, 02:09 AM
domedia,

I've just tried it this way and its not working for me.

Can you please guide me in where I have gone wrong?


I've created a main wrapper:

#wrapper {
height: 1000px;
width: 955px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-image: url(images/background1.jpg);


and then within that wrapper div, I've added a menu div


#menu {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFF;
text-align: center;
letter-spacing: 2px;
height: 20px;
width: 700px;
margin-top: 300px;
margin-left: auto;
margin-right: auto;

But what happens is the margin-top: 300px is pushing my wrapper div down.

How do I set my wrapper div to remain in its original position?


This is a snapshot when previewed in Safari


http://img132.imageshack.us/img132/7510/picture2khm.jpg



this is how I want it to look


http://img26.imageshack.us/img26/2899/picture3r.jpg


The only way I could figure it out was to to add a relative state on the menu div, then position it 250px from the top

#menu {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFF;
text-align: center;
letter-spacing: 2px;
height: 20px;
width: 700px;
margin-left: auto;
margin-right: auto;
position: relative;
top: 250px;


so how would I do it with margins?

domedia
06-17-2009, 04:49 AM
It's an issue of collapsing margins. I think Eric Meyer wrote a good explanation of it somewhere.

The solution is to remove the large top margin from the menu, and add it as top padding of the wrapper instead.

blimp
06-17-2009, 04:58 AM
domedia,

Just out of curiosity, is it ok the way I've done it?

First add a wrapper div, then add the menu div inside the wrapper div. Set the menu div as relative and add a top position?

domedia
06-18-2009, 03:31 PM
Yeah, it's ok. I do it myself. Wrap everything inside a div.