Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie
Hi all,
Vanilla are planning an update to the site on April 24th (next Wednesday). It is a major PHP8 update which is expected to boost performance across the site. The site will be down from 7pm and it is expected to take about an hour to complete. We appreciate your patience during the update.
Thanks all.

Help a HTML / CSS Novice out!

Options
  • 01-08-2014 8:38pm
    #1
    Swift66
    Registered Users Posts: 139 ✭✭


    Starting HTML / CSS, running through first example in Book 'Web Design in Easy Steps', anyway here is code I've saved to Notepad .html and it looks nothing like the web page image in the book when opened, the only styling that is showing up is a yellow background for the header and the rest of it has a blue background. The instructions are really poor so I'm as what's wrong and what's right - if anything!! Go ahead lads murder it, I can take it.

    <!DOCTYPE html>

    <html>

    <head>
    <title>title titke title</title>

    <style type="text/css">

    .wrapper {background-color: blue; width:80em; }
    .header {background-color: yellow;}
    .sidebar {background-color: red;}
    .footer {background-color: green;}
    .pullquote {font-family: serif;font-size: 2em; }
    .article {background-color: white; }

    </style>

    </head>

    <body>

    <div class="wrapper">

    <div class= "header"> <header> Header HTML here</header> </div>

    <div class= “sidebar”><p>Sidebar HTML here</p> </div>

    <div class= “article”> <p>Article HTML here: Well hello , iygefigweiygwieygfiyegwfiygywefgiywegifewgfufufititfoyfufutfuifututduutdutdutduitdutditdydtdydtrstrstediuofuyftutftcrcty

    <div class= “pullquote”><aside><p>Pullquote HTML here: "iuqiueiriuefguigewriu2i23ugriuefg"</P></aside> </div>
    Article ends here.</p> </div>


    <div class= “footer”> <p>Footer HTML here: FOTER FOOOOOOOOOTER</p></div>

    </div>

    </body>


    </html>


Comments

  • Options
    #2
    Maximus Alexander
    Registered Users Posts: 13,080 ✭✭✭✭Maximus Alexander


    Only the "wrapper" and "header" styles are being displayed because the quotation marks you have put around the other styles are not correct.

    You want " instead of “ and ”.


  • Options
    #3
    tricky D
    Closed Accounts Posts: 9,700 ✭✭✭tricky D


    A few points:
    • Switch to different editor from the Notepad that comes with Windows. Try Notepad++ or one from this thread: http://www.boards.ie/vbulletin/showthread.php?t=2057254285 Not all of them would be the best for starting out.
    • Use html5 semantically, and for more readable and elegant markup.
      • Instead of <div class= "header"> <header> Header HTML here</header> </div> use <header> Header HTML here</header>;
      • <div class= “article”> <p>Article HTML here: Well hello , iygefigweiygwieygfiyegwfiy use <article> <p>Article HTML here: Well hello ; iygefigweiygwieygfiyegwfiy</p></article>
      • <div class= “pullquote”><aside><p>Pullquote HTML here: "iuqiueiriuefguigewriu2i23ugriuefg"</P></aside> </div> use <aside><p>Pullquote HTML here: "iuqiueiriuefguigewriu2i23ugriuefg"</P></aside>
      • <div class= “footer”> <p>Footer HTML here: FOTER FOOOOOOOOOTER</p></div> use <footer> <p>Footer HTML here: FOTER FOOOOOOOOOTER</p></footer>
      • Most of the reasoning for html5 introducing header, article, section, aside, footer etc was to do away with <div class="header"> type of stuff and give them a more semantic and logical naming scheme. If you really need to you can add a class to those instead of to a div. It also makes it easier to find your way around the markup instead of figuring out which div is which, or more importantly which end div tag.
      • Also you could look at removing the wrapper div and apply the wrapper styling via the body tag.
    • Learn to use a html validator. While browser renderers are very forgiving, it's better to use valid markup from the beginning to prevent bad habits. Later, much much later, you could start with the less than valid shortcuts, once you know better what you are doing. Validation for css is also available.
    • Look at separating your css into a separate file. Much easier for managing css across multiple files and there's a thing about separating content and styling.

    There's a few tips for starters.

    hth/gl


  • Options
    #4
    John_C
    Registered Users Posts: 1,029 ✭✭✭John_C


    Another tip; if you're asking for help online, it's good to put your code into jsFiddle or one of the equivalent sites like this:
    http://jsfiddle.net/F4pfa/

    It makes it easier for experienced people to take a quick look and (hopefully) spot any problems.


  • Options
    #5
    Swift66
    Registered Users Posts: 139 ✭✭Swift66


    Cheers lads, that was a great help, I'm not even sure how I got the angled quotation marks!

    I'll definitely try Notepad ++ or similar, those HTML5 tags defo look neater than the 'div' tags. I've only used the W3 schools validator once or twice thus far - are there any better ones out there??

    I'll take a look at the jsfiddle link.

    Thanks


Advertisement