1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Help with HTML

Discussion in 'BlackHat Lounge' started by SpellZ, Jul 29, 2009.

  1. SpellZ

    SpellZ Regular Member

    Joined:
    Feb 8, 2009
    Messages:
    357
    Likes Received:
    312
    Location:
    Toronto, ON
    So here's a HTML layout:

    But then it says



    ... In which part do you add the second piece?
     
  2. venusweb

    venusweb Newbie

    Joined:
    Apr 20, 2009
    Messages:
    5
    Likes Received:
    1
    Occupation:
    Freelance Software Engineer
    Location:
    New Delhi, India
    I may will be able to help you, BUT I am not able to understand your Question, Can you please elaborate ?
    It seems I am missing something :)
     
  3. SpellZ

    SpellZ Regular Member

    Joined:
    Feb 8, 2009
    Messages:
    357
    Likes Received:
    312
    Location:
    Toronto, ON
    Step 2 - Quick Early Layout

    The first thing we'll do is a quick overall layout in HTML with some barebones CSS just to make sure we've got a solid foundation. We can also check it in the major browsers (IE7, IE6, Firefox, Safari) just to make sure we're on a solid footing. There is nothing worse than coming back all the way to the beginning to fix browser compatibility issues. It's much better to do it as you go.
    So we're building the first mockup, we can see a few things:

    1. The design is centred. That immediately tells us we have to wrap it in a container and then centre that container.
    2. Essentially the design is a series of horizontal blocks. Sometimes the blocks have two columns, sometimes one. So we can do it as a series of <div>'s. This is good because we can then mix and match elements into different pages as you'll see later.
    3. We have a footer which is a different colour. This means the background needs to be that colour, in case the users browser stretches. So the footer will need to sit in a different container to the main stuff.
    So here's a HTML layout:
    <!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>Creatif</title>
    <link href="style.css" rel="stylesheet" type="text/css" />

    </head>

    <body>
    <div id="main">

    <div class="container">

    <div id="header">

    Logo / Menu

    </div>

    <div id="block_feature">

    Featured Content

    </div>

    <div id="block_content">

    Content

    </div>

    </div>

    </div>

    <div id="footer">

    <div class="container">

    Footer Stuff Goes in Here

    </div>

    </div>
    </body>
    </html>


    As you can see there are two segments: the #main area and the #footer area. Inside each we have a <div class="container"> element which will be fixed width and centred. Then inside the main container we just have a sequence of <div>'s. Now let's add a little CSS as follows:
    body {
    margin:0px; padding:0px;
    background-color:#131211;
    }

    #main {
    background-color:#c4c0be;
    }
    #footer {
    color:white;
    }
    .container {
    width:950px;
    margin:0 auto;
    border:1px solid red;
    }

    So we're setting the body's background colour to the dark brown of the footer. Then the #main area has the lighter background. Finally you can see the .container elements have a width of 950px and are centred using margin: auto. We've also added a red border just so you can see where the elements are on the page.
     
  4. SpellZ

    SpellZ Regular Member

    Joined:
    Feb 8, 2009
    Messages:
    357
    Likes Received:
    312
    Location:
    Toronto, ON
    where do I put the entire "body {" code?
     
  5. SpellZ

    SpellZ Regular Member

    Joined:
    Feb 8, 2009
    Messages:
    357
    Likes Received:
    312
    Location:
    Toronto, ON
    Yeah, no luck either huh?

    I'm not sure where to place that damn thing LOL
     
  6. geezer101

    geezer101 Junior Member

    Joined:
    Mar 15, 2009
    Messages:
    139
    Likes Received:
    121
    Location:
    UK
    Create a new file called style.css and paste that code in there, then it should work!
     
  7. SpellZ

    SpellZ Regular Member

    Joined:
    Feb 8, 2009
    Messages:
    357
    Likes Received:
    312
    Location:
    Toronto, ON
    No, no, no

    It neeeeeds to be in the same file:confused:
     
  8. Choronzon

    Choronzon Power Member

    Joined:
    Apr 20, 2008
    Messages:
    559
    Likes Received:
    376
    Put it just before the </head> tag
     
  9. geezer101

    geezer101 Junior Member

    Joined:
    Mar 15, 2009
    Messages:
    139
    Likes Received:
    121
    Location:
    UK
    Well that would work, but if you want it in the same file, paste it between the <head> tags and add <style type="text/css"> CONTENT HERE </style>
     
    • Thanks Thanks x 1
  10. SpellZ

    SpellZ Regular Member

    Joined:
    Feb 8, 2009
    Messages:
    357
    Likes Received:
    312
    Location:
    Toronto, ON
    Hmm... Okay, thanks a lot :)
     
  11. shylesson

    shylesson Power Member

    Joined:
    Jan 10, 2008
    Messages:
    665
    Likes Received:
    2,090
    Location:
    ‹^›‹(•¿•)›‹^›

    Naw it can be put in the css file. That's why it says : Now let's add a little CSS as follows:


    Just add it anywhere in your css file and you are good mate.

    You see this line in your html:
    That will call your css file. So what you have to do is create a css file, put in that css info that he tells you to put in
    save it and make sure the html is updated with the proper filename, and boom there ya have it.
     
    • Thanks Thanks x 1
  12. SpellZ

    SpellZ Regular Member

    Joined:
    Feb 8, 2009
    Messages:
    357
    Likes Received:
    312
    Location:
    Toronto, ON
    Ohhhh! Okay! Got'cha!