Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How do i use <div> to layer and format my website

    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.

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

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Shhsh,
    Nesting div elements is easy if you remember a couple things. The first is the box model - See the box model here. 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.
    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 -
    Code:
    <!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>
    Last edited by Excavator; 01-25-2012 at 08:15 PM. Reason: added nested div element
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello Shhsh,
    Nesting div elements is easy if you remember a couple things. The first is the box model - See the box model here. 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.
    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 -
    Code:
    <!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.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Shhhsh View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Shhhsh View Post
    attached it to a <center tag>.
    <center> tag 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 and here.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    <center> tag 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 and here.
    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:

    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?
    Last edited by Shhhsh; 01-26-2012 at 02:48 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •