PDA

View Full Version : Problem margin - padding.



Kitten
Apr 25th, 2010, 05:29 PM
I am trying to create some margin inside the "idag, poll and content" boxes but whatever I try I can not seem to get it working. The text keeps pushing against the edge of the boxes.

This is the CSS:


#wrapper {
text-align: left;
margin: 0px auto;
padding: 0px;
border:0;
width: 990px;
}

#header {
margin: 0 0 15px 0;
}

#idag {
float: left;
width: 510px;
margin-right: 5px;
background-color:#FFFFFF;
}

#poll {
float: right;
width: 130px;
background-color:#FFFFFF;
}

#content {
float: left;
width: 340px;
}

#footer {
clear: both;
}

.left {
width: 510px;
margin: 0 0 0 0;
}

.middle {
width: 340px;
margin: 0 0 0 0;
background-color:#FFFFFF;
}

.right {
width: 130px;
margin: 0 0 0 0;
}

body {background: url("../images/body.jpg") repeat;}

img {border: 0px;}

hr {background-color:#FFFFFF; width: 480px; color: #c0c0c0; background-color: #c0c0c0;}


a:link {color:#5fb61d; text-decoration: underline;}
a:visited {color:#5fb61d; text-decoration: underline;}
a:hover {color:#5fb61d; text-decoration: underline;}
a:active {color:#5fb61d; text-decoration: underline;}



This is the HTML:


<html>
<head>
<title>Motstand</title>
<link rel="stylesheet" type="text/css" href="css/mystyle.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<?php include('includes/header.php'); ?>
<?php include('includes/links.php'); ?>
</div>
<div id="container">
<div id="idag">
<img src="images/idag.gif" /><br />
<p class="left">Dit is slechts een test om te zien hoe het allemaal werkt. Of <a href="link.php">links intern of extern</a> werken en hoe een zin wordt afgebroken indien hij het einde van de regel haalt.</p>
<hr>
<p class="left">See how the next topic appears</p>
</div>

<div id="content">
<img src="images/nyheter.gif" />
<p class="middle">Dit hier is een nieuwsbericht.</p>
<br />
<img src="images/tidigare.gif" />
<p class="middle">Dit hier is een nieuwsbericht.</p>
</div>

<div id="poll">
<img src="images/poll.gif" /><br />
<p class="right">Poll ingave.</p>
</div>
</div>
<div id="footer"></div>
</div>


</body>
</html>

Excavator
Apr 25th, 2010, 05:53 PM
Hello Kitten,
The first thing I notice is the missing DocType :eek:. You MUST use a DocType Declaration. See the link in my sig about DocTypes. I would recomend you use an HTML 4.01 Strict.

For padding to work correctly you will need to understand the box model (http://www.w3.org/TR/CSS2/box.html).
The box model shows how your content cannot be wider than it's container. It also shows how margin/padding/border all count when figuring out total widths.

Your #container is the same width as your #wrapper - 990px
#idag is 510px wide plus 5px margin for total of 515px
#content is 340px wide
and #poll is 130px


For a total of 985px

That fits inside #container fine right now but, when you start adding padding it will fall apart quickly if you don't subtract from the widths to make up for it.

Try this -


#idag {
float: left;
width: 490px;
margin-right: 5px;
background:#f00;
}
#content {
float: left;
width: 320px;
background:#0f0;
}
#poll {
float: right;
width: 110px;
background:#0ff;
}
#idag, #content, #poll {
padding: 10px;
}

Kitten
Apr 25th, 2010, 06:27 PM
That created some space for the text indeed but messed up the entire lay-out.

Link to an image of how it looks now: http://img218.imageshack.us/img218/803/questionp.gif

I tried to stay to the box model and just create boxes inside of boxes.

Excavator
Apr 25th, 2010, 06:53 PM
The contents of #poll cannot exceed #poll's width either. The box model must be followed all the way through.

How wide is poll.gif?

Kitten
Apr 25th, 2010, 07:07 PM
The contents of #poll cannot exceed #poll's width either. The box model must be followed all the way through.

How wide is poll.gif?

130 px.

But I changed the code and started completely at new to see if I could get it to work in a different way. But I come across the problem that when I create padding inside a box the padding is also added to the image.

How I would like it is that the image is above the box and that the padding only applies to the text in the box.

This is the new CSS:


#mainbox {
text-align: left;
margin: 0px auto;
padding: 0px;
border:0;
width: 990px;
}

#header {
width: 990px;
margin: 0 0 15px 0;
}

#entry {
float: left;
width: 510px;
background-color:#FFFFFF;
}

#boxes {
float: left;
width: 340px;
background-color:#FFFFFF;
}

#poll {
float: right;
width: 130px;
background-color:#FFFFFF;
}

#spacer {
float: left;
width: 5px;
}

body {background: url("../images/body.jpg") repeat;}

img {border: 0px;}

hr {background-color:#FFFFFF; width: 480px; color: #c0c0c0; background-color: #c0c0c0;}


a:link {color:#5fb61d; text-decoration: underline;}
a:visited {color:#5fb61d; text-decoration: underline;}
a:hover {color:#5fb61d; text-decoration: underline;}
a:active {color:#5fb61d; text-decoration: underline;}

And here the new HTML (will add the doctype when I got it to work;)):


<html>
<head>
<title>Motstand</title>
<link rel="stylesheet" type="text/css" href="css/try.css" />
</head>
<body>
<div id="mainbox">
<div id="header">
<?php include('includes/header.php'); ?>
<?php include('includes/links.php'); ?>
</div>

<div id="entry">
<img src="images/idag.gif" />
<p>This is a test entry to see how it formats inside the main entry box called "idag". Looking if the formatting of yor text goes as expected is a important point in webdesign.</p>
<hr />
<p>This is a test entry to see how it formats inside the main entry box called "idag". Looking if the formatting of yor text goes as expected is a important point in webdesign.</p>
</div>

<div id="spacer">&nbsp;</div>

<div id="boxes">
<img src="images/nyheter.gif" />
<img src="images/tidigare.gif" />
</div>

<div id="spacer">&nbsp;</div>

<div id="poll">
<img src="images/poll.gif" />
</div>
</div>
</body>
</html>

Kitten
Apr 25th, 2010, 07:12 PM
I got it to work in the entry. Would this be a good way to write the CSS for it? Then place #entryheader and #entrycontent inside #entry.



#mainbox {
text-align: left;
margin: 0px auto;
padding: 0px;
border:0;
width: 990px;
}

#header {
width: 990px;
margin: 0 0 15px 0;
}

#entry {
float: left;
width: 510px;
background-color:#FFFFFF;
}

#entryheader {
float: left;
width: 510px;
background-color:#FFFFFF;
}

#entrycontent {
float: left;
width: 490px;
background-color:#FFFFFF;
margin: 10 10 10 10;
}

#boxes {
float: left;
width: 340px;
background-color:#FFFFFF;
}

#poll {
float: right;
width: 130px;
background-color:#FFFFFF;
}

#spacer {
float: left;
width: 5px;
}

body {background: url("../images/body.jpg") repeat;}

img {border: 0px;}

hr {background-color:#FFFFFF; width: 480px; color: #c0c0c0; background-color: #c0c0c0;}


a:link {color:#5fb61d; text-decoration: underline;}
a:visited {color:#5fb61d; text-decoration: underline;}
a:hover {color:#5fb61d; text-decoration: underline;}
a:active {color:#5fb61d; text-decoration: underline;}

Excavator
Apr 25th, 2010, 07:24 PM
Originally Posted by Excavator
The contents of #poll cannot exceed #poll's width either. The box model must be followed all the way through.

How wide is poll.gif?

130 px.
130px PLUS the padding. Remember, margin/padding/border all count when figuring total width.

If you put poll.gif as a background of #poll, you can margin #poll's contents down to clear it.

Something like this -
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: #FC6;
}
#mainbox {
text-align: left;
margin: 0px auto;
padding: 0px;
border:0;
width: 990px;
}
#poll {
float: right;
width: 110px;
padding: 30px 10px 0;
background:#fff url(images/poll.gif) no-repeat top;
}
</style>
</head>
<body>
<div id="mainbox">
<div id="poll">
<p>
some text here
some text here
some text here
some text here
</p>
</div>
</div>
</body>
</html>



And here the new HTML (will add the doctype when I got it to work):That is a backward approach!

Kitten
Apr 25th, 2010, 07:47 PM
Doing that how would I then create a box under the poll box with a different header?

Wrap those 2 inside a box?

Kitten
Apr 25th, 2010, 08:11 PM
I added HTML strict to the top but now no padding or margin is working at all...:confused:

Excavator
Apr 25th, 2010, 11:30 PM
I added HTML strict to the top but now no padding or margin is working at all...:confused:

Can you link us to the test site? That would be easiest.

Kitten
Apr 26th, 2010, 08:50 AM
Can you link us to the test site? That would be easiest.

I managed to solve the problem. Now I am facing some padding problem differences in IE and Firefox but I will open a new topic for that.

Thanks for all the help.

Dormilich
Apr 26th, 2010, 08:56 AM
Now I am facing some padding problem differences in IE and Firefox but I will open a new topic for that.

IE uses a different box model (where the width property includes padding and border).