...

View Full Version : How do i use <div> to layer and format my website



Shhhsh
01-25-2012, 08:39 PM
Hi all,

I am new to CSS, but not completely new to coding. I usually pick things up with coding pretty quickly, but not <div>. I'm aware you can lay things out using tables and that perhaps suits me better, but it seems to me that <div> is the preferred function today. I'm struggling with how to put <div>'s inside of <div's>. When i layout my website i visualise it as a load of boxes. This is fine, but it is when i want to put a box inside of a box that my trouble comes.

Basically, in the code below, i wish to put 2 <div>'s inside of the current one. The first div sets the background of the banner. Now i wish to have the word "Hello" centered in a borderless box with a margin from the left of 139px, width 192px and height 66px and another saying "Shhhsh" directly below it of the same margin, width and height. Can anyone help me? I don't have a website with this already on i'm afraid. Thank you in advance.


<!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" xml:lang="en" lang="en">
<head>
<title>Banner</title>
<meta http-equiv="content-type"
content="text/css; charset=utf-8"/>
</head>
<body style="margin:0">
<div class="banner" style="background-color: #00B050; width:100%; height:132px">
</div>
</body>
</html>

Excavator
01-25-2012, 09:11 PM
Hello Shhsh,
Nesting div elements is easy if you remember a couple things. The first is the box model - See the box model here (http://www.w3.org/TR/CSS2/box.html). The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.


The other would be not to use too many div elements. see this link about divitis (http://www.apaddedcell.com/div-itis).
Your "Hello" and "Shhsh" don't seem to need to be in their own divs.

In this example, I put your text in heading tags (http://www.w3schools.com/tags/tag_hn.asp) -
<!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;
}
#container {
width: 800px;
margin: 30px auto;
padding: 0 0 300px;
overflow: auto;
background: #ccc;
}
#nested_div {
height: 300px;
width: 760px;
margin: 20px auto;
background: #00b050;
}
h1, h2 {
line-height: 66px;
width: 192px;
margin: 0 0 0 139px;
}

</style>
</head>
<body>
<div id="container">
<div id="nested_div">
<h1>Hello</h1>
<h2>Shhsh</h2>
<!--end nested_div--></div>
<!--end container--></div>
</body>
</html>

Shhhsh
01-26-2012, 01:19 AM
Hello Shhsh,
Nesting div elements is easy if you remember a couple things. The first is the box model - See the box model here (http://www.w3.org/TR/CSS2/box.html). The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.


The other would be not to use too many div elements. see this link about divitis (http://www.apaddedcell.com/div-itis).
Your "Hello" and "Shhsh" don't seem to need to be in their own divs.

In this example, I put your text in heading tags (http://www.w3schools.com/tags/tag_hn.asp) -
<!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;
}
#container {
width: 800px;
margin: 30px auto;
padding: 0 0 300px;
overflow: auto;
background: #ccc;
}
#nested_div {
height: 300px;
width: 760px;
margin: 20px auto;
background: #00b050;
}
h1, h2 {
line-height: 66px;
width: 192px;
margin: 0 0 0 139px;
}

</style>
</head>
<body>
<div id="container">
<div id="nested_div">
<h1>Hello</h1>
<h2>Shhsh</h2>
<!--end nested_div--></div>
<!--end container--></div>
</body>
</html>

Thanks for your help mate. Just taking a look at the box model now. Out of interest, would you suggest doing it this way for all my CSS? I'd seen it done this way, but i have been using style in the actual div tags.

Excavator
01-26-2012, 01:55 AM
but i have been using style in the actual div tags.

That's called "inline styles" and it can be useful sometimes because it overridess all other styles. "Attached/internal" or "linked/external" styles is the other two options, linked being preferred since it's the most widely affecting method.

See the 3 different types of CSS here (http://vineetgupta22.wordpress.com/2011/07/09/inline-vs-internal-vs-external-css/).

Shhhsh
01-26-2012, 02:11 AM
Thanks for your help both of you. I've now managed to achieve what i was looking for and it is good advice on the ability to override certain things to make it easier. Out of interest, is there any other tags that i can attach an id to that won't affect the text. Obviously <h1> sets the text style to be a heading, but when i don't want it to be this way, nor do i wish it to be a new paragraph, is there any tags that do nothing where i can a style class, to avoid constant <div tags>.

I'm guessing this is an extremely basic html question, but it will make my life much easier as so far i've only attached it to a <center tag>. :)

Excavator
01-26-2012, 03:19 AM
attached it to a <center tag>. :)

:eek: <center> tag (http://www.w3schools.com/tags/tag_center.asp) is deprecated and should not be used.
For styling text you have LOTS of options, there are paragraph tags, span tags and more. See styling text here (http://www.w3schools.com/css/css_text.asp) and here (http://www.w3.org/wiki/Text_styling_with_CSS).

Shhhsh
01-26-2012, 03:32 AM
:eek: <center> tag (http://www.w3schools.com/tags/tag_center.asp) is deprecated and should not be used.
For styling text you have LOTS of options, there are paragraph tags, span tags and more. See styling text here (http://www.w3schools.com/css/css_text.asp) and here (http://www.w3.org/wiki/Text_styling_with_CSS).

Ha. My html comes from about a decade ago. I think back then it was in more common use, as was the <table> layout of a web page. The <span> tag will do the job. Cheers.

All, bar the text-align: center; part. How do i center text using <SPAN id="banner_text"> with following code:


#banner_text {
color: #fff;
text-align: center;
line-height: 66px;
font-size: 36pt;
}

EDIT: I've worked out how to do it just using <div> tags, but with no other tags it looks a bit odd. Would you use a new tag personally?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum