Simple CSS & HTML code help

Discussion in 'CSS' started by xtazi35, Dec 11, 2009.

  1. #1
    Hi,

    I am kind of new to CSS, HTML and PHP and only know very few stuffs. My problem is i have a wordpress blog and i want to just put 3 seperate christmas .gif graphics around the header. I know this can be easily done withh CSS by making <div> but i don't know the exact code to be written in CSS and the HTML code in the page template..

    so if someone could help me, it would be great.

    Thank you :)
     
    xtazi35, Dec 11, 2009 IP
  2. Wogan

    Wogan Peon

    Messages:
    81
    Likes Received:
    3
    Best Answers:
    2
    Trophy Points:
    0
    #2
    Well, right after your opening <body> tag, you'll add 3 tags, like so:

    <div class="my-header-1"><img src="http://path.to/christmas1.gif"></div>
    <div class="my-header-2"><img src="http://path.to/christmas2.gif"></div>
    <div class="my-header-3"><img src="http://path.to/christmas3.gif"></div>
    HTML:
    Then in your CSS:

    .my-header-1, .my-header-2, .my-header-3 { position: absolute; }
    .my-header-1 {
    top: 10px;
    left: 10px;
    }
    .my-header-2 {
    top: 50px;
    left: 50px;
    }
    .my-header-3 {
    top: 100px;
    left: 100px;
    }
    Code (markup):
    By editing the top: and left: of each header, you can control the position of the image on the page, and use that to line it up with the header. Other than that, it might be a better idea to simply edit the pictures directly into the header itself (as a .jpg).
     
    Last edited: Dec 12, 2009
    Wogan, Dec 12, 2009 IP
  3. xtazi35

    xtazi35 Member

    Messages:
    167
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    28
    #3
    Thank you so so so much :) Really that was very helpful of you.
     
    xtazi35, Dec 12, 2009 IP