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 ttttt's Avatar
    Join Date
    Oct 2005
    Posts
    372
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Repeated Image Header

    Hi,
    Basically, I'm trying to build a website with a gradient header and some text, or logo, over it, like here: http://www.istockphoto.com .
    I just can't work out how to do it.
    Can you help?
    Thanks,
    ttttt
    http://openoffice.org/- Microsoft Office without the Microsoft.
    [home page][forum]
    Versatile, free software

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Can you show us some code so we can see what your trying to do?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder ttttt's Avatar
    Join Date
    Oct 2005
    Posts
    372
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, I'm trying to make a header like in the website I linked to. I don't have any code at the moment, all I have is the idea.
    Thanks For The Reply,
    ttttt
    http://openoffice.org/- Microsoft Office without the Microsoft.
    [home page][forum]
    Versatile, free software

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    I'm sorry, it's really easy, I was just feeling pretty dumb explaining basics to someone that's got more than 300 posts on this board.

    Once you get your image the way you like, just make it the background of a div. Then it's no big deal to place text in the div like normal and the picture will still be in the background.

    CSS would be
    Code:
    #header {
    	width: 765px;
            height: 140px;
    	margin:0 20px 0 0;
    	background-image: url(img/gradient1.png);
    }
    and markup would look like...
    Code:
    <div id="header">
    <h1>company slogan here</h1>
    </div>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder
    Join Date
    Nov 2006
    Posts
    247
    Thanks
    13
    Thanked 26 Times in 24 Posts
    It's a little difficult to explain not knowing what exactly what you have to work with, but I'll give it a shot:

    ----------

    CSS:
    Code:
    #header {
    display: block;
    background: #FFF url('background_gradient_img.gif') 0 0 repeat-x;
    margin: 0;
    padding: 0;
    width: 780px;
    height: 80px;
    }
    
    #logo {
    float: left;
    width: 200px;
    height: 80px;
    border: 0;
    }
    
    #nav {
    float: right;
    margin: 0;
    padding: 10px 15px 0 0;
    width: auto;
    height: auto;
    }
    
    #nav a {
    color: #FFF;
    }
    HTML:
    Code:
    <div id="header">
    <a href="www.yoursite.com"><img id="logo" src="sitelogo.gif" /></a>
    
    <div id="nav">
    <a href="#">Link Here</a> | 
    <a href="#">Link Here</a> | 
    <a href="#">Link Here</a> | 
    <a href="#">Link Here</a>
    </div>
    </div>
    ----------

    That should give you what you're looking for. Of course you'll have to edit heights and widths to suit your layout, but it'll look a lot like the example you showed.
    Last edited by Majoracle; 12-09-2006 at 10:04 PM.

  • #6
    Regular Coder ttttt's Avatar
    Join Date
    Oct 2005
    Posts
    372
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Both of those don't work. That's basically what I've already tried.
    Can you help?
    Thanks,
    ttttt
    http://openoffice.org/- Microsoft Office without the Microsoft.
    [home page][forum]
    Versatile, free software

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    To do it like they did on the page you link to, just look at their code. They are showing you how by doing it.
    I think to get any more specific help than we've given already your going to have to be more detailed in explaining what your trying to do.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    Regular Coder ttttt's Avatar
    Join Date
    Oct 2005
    Posts
    372
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Don't worry, solved.
    Last edited by ttttt; 12-10-2006 at 01:19 PM.
    ttttt
    http://openoffice.org/- Microsoft Office without the Microsoft.
    [home page][forum]
    Versatile, free software


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •