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 8 of 8
  1. #1
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts

    Semantics; what's the best way to do this?

    I have a header that's made from three parts, and I want to know what I should make the header from (which tags).
    1) a 1x240 background image. Over this background image, I will put my h1 and h2.
    2) an image that will go to the left of 1)
    3) an image that will go to the right of 1)

    This is what I had in mind:
    Code:
    <img src="images/header_left.jpg" style="float:left;"><div style="background:url(images/header.jpg) repeat-x; height:240px; float:left;"><h1>tarnow thingy</h1><h2>tagline goes here</h2></div><img src="images/header_right.jpg" style="float:left;">
    Now I don't know if i got the floats right, or if i need to add a float to the div too.

    I just edited the code. This isn't good because the middle part doesn't stretch out as far as I'd like it to. Will I have to specifiy the width: to exactly how much I want it to be?
    Last edited by croatiankid; 11-01-2006 at 11:53 AM.

  • #2
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    How best to go about adding the imagery largely depends on the actual imagery you want to add and which markup should be used.
    It's likely that you could add the imagery as backgrounds of just the h1 and h2 elements themselves.

    Can we see a mockup of the entire header?

  • #3
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Over the day I managed to finish a good deal of the entire web page lol. Of course, here it is. I changed the css in the meantime, here it is:
    Code:
    h1
    {
    color:#ffa500;
    font-size:62px;
    margin:45px 0px 0px 0px;
    }
    h2
    {
    color:#666666;
    margin-top:10px;
    font-size:24px;
    margin-bottom:0px;
    }
    .header
    {float:left;}
    div#head
    {
    background:url(images/header.jpg) repeat-x;
    height:200px;
    float:left;
    width:564px;
    text-align:center;
    }

  • #4
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    It seems that you're still thinking in terms of flat layouts, rather than 'layers'.
    As the imagery is part of a fixed width layout, there's very little reason why you couldn't add is as the background of a header div.

    e.g.
    Code:
    #header {
    	margin: 0 auto;
    	width: 770px;
    	height: 200px;
    	background: url(header_bg.jpg) no-repeat center top;
    }
    Code:
    <div id="header">
    	<h1>Pivotal Resources</h1>
    	<h2>tagline goes here...</h2></div>
    </div>
    The imagery you're adding is what you'd really consider 'content' as it doesn't impart any actual information. It's decorative, atmospheric. You should aim to add decorative imagery through CSS, not as img elements.
    Only images which carry proper content should be implemented as img elements.
    Last edited by Bill Posters; 11-02-2006 at 09:14 AM.

  • #5
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts
    i'm not sure if i'm understanding you. How can I have the whole header in one div? Do you think i should use
    Code:
    <div id="header">
    		<div id="left"></div>
    		<div id="head"><h1>Pivotal Resources</h1><h2>tagline goes here...</h2></div>
    		<div id="right"></div>
    </div>
    where left and right would have float: left and background images respectively? and height and width specified? Using empty divs for layout purposes is bad. or maybe i didn't understand you, could you please make a neater code?

  • #6
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    There's no actual need to break the image up into three parts.
    The handshake is not sufficiently important to make into its own image file.

    This is how you seem to be 'seeing' the layout…


    …when you could/should be seeing it as…



    Create a single image from the three parts you currently have…


    …and use that as the background for the #header div.
    Then simply position and style your h1 and h2 elements within that.

  • #7
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts
    OHHHHH lol. This is what happens me too often, I do something in a more complicated way than I should. thanks a bunch

  • #8
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts
    could you check this out?
    I have a similar problem with the people.jpg in the div to the left of the main content. What should i use to make it look like that? i have nothing to put in that div (content-wise), but I want the picture to be at the top, and the color to span to the bottom.
    Last edited by croatiankid; 11-03-2006 at 11:18 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
    •