Grow your CSS skills. Land your dream job.

>:( styling problem

  • # September 13, 2008 at 6:03 pm

    aaaaargh I’m really annoyed…
    I just started work on my wordpress blog (finally) and no sooner had I inserted the header I was having to troubleshoot. It seems when I end my header div like so: <div id="header"></div> the header won’t show up, at all. if i end the div tag like this though ><div/> its shows up, but when I validated it it failed, so i changed the div tag end to the correct and it validated fine but didn’t show my header… bummer :shock:

    Below is the code:
    HTML

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    >



    and

    CSS

    Code:
    /*
    Theme Name: Alex Rogahn
    Theme URI: http://alexrogahn.com/
    Description: Theme of Alex Rogahn’s personal blog
    Version: 1.0
    Author: Alex Rogahn
    Author URI: http://alexrogahn.com/
    */

    /* Global reset */
    /* Based upon ‘reset.css’ in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */
    *, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
    table { border-collapse:collapse; border-spacing:0 }
    fieldset, img { border:0 }
    address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
    ol, ul, li { list-style:none }
    caption, th { text-align:left }
    h1, h2, h3, h4, h5, h6 { font-size:100% }
    q:before, q:after { content:”}
    a { text-decoration:none }

    /* Global reset-RESET */
    /* The below restores some sensible defaults */
    strong { font-weight:bold }
    em { font-style:italic }
    * a { position:relative } /* Gets links displaying over a PNG background */
    a img { border:none } /* Gets rid of IE’s blue borders */

    body {
    background: #232323;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 62.5%;
    }

    #header {
    background: url(images/header.png) repeat-x;
    }

    I’d really appreciate it if some one would help me out :P

# September 13, 2008 at 6:34 pm

a div tag by itself is empty. Even if you give it a background color. You have to give it a width and height for it to show up. Even if you put a background image in it won’t show up without a width and height

so you should only have

<div id="header"></div>

this is wrong <div />

so ad width:300px; height: 300px; to your header style. Where 300px is the width and height of your header.png

#header { background: url(images/header.png) repeat-x; width: 300px; height: 300px; }

# September 13, 2008 at 6:39 pm

omg I cant believe I missed that I really should brush up on my css :lol: …

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".