SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard
    Join Date
    Apr 2004
    Location
    dublin
    Posts
    2,036
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Site Header Design!

    I want to make my site header more obvious and clear to users. At the moment it clashes somewhat with the header background image.

    http://www.dublincil.org/

    Any thoughts on what should I do.

    Should I change the color? If so to what?

    Thanks.

    Kevin.

  2. #2
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi Kevin, I agree that something needs to be done! The writing and logo are nearly unreadable!
    Why no define a gradient going from right to left and overlay the background image onto that. That way you would have space form your logo and a contrasting background for the text. Also it would avoid repeating the image three time to fill the header on large screens!

    Cheers as always

    SpikeZ
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could start with changing the fonts in header. Also, it`s hard to read what`s around the "sunny" logo on the left.

  4. #4
    _ silver trophy ses5909's Avatar
    Join Date
    Jul 2003
    Location
    NoVa
    Posts
    5,466
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by spikeZ
    Hi Kevin, I agree that something needs to be done! The writing and logo are nearly unreadable!
    Why no define a gradient going from right to left and overlay the background image onto that. That way you would have space form your logo and a contrasting background for the text. Also it would avoid repeating the image three time to fill the header on large screens!

    Cheers as always

    SpikeZ
    I agree with SpikeZ. Also, perhaps fade the image some more and do something to make the Text stand out more. Do something bold with it.
    Sara

  5. #5
    SitePoint Wizard
    Join Date
    Apr 2004
    Location
    dublin
    Posts
    2,036
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    SpikeZ,

    How can I do this??

    The text heading is in html. What can I use in CSS to style this??

    What effect should I make to the background image? Using fireworks.

    Cheers,

    Kevin.

  6. #6
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,271
    Mentioned
    252 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by obrienkev
    SpikeZ,

    How can I do this??

    The text heading is in html. What can I use in CSS to style this??

    What effect should I make to the background image? Using fireworks.

    Cheers,

    Kevin.
    An example:

    What you need to do is a gradient image, let's say, of 20 px wide and 1px high. I am going to imagine that the background color is white, and the this image (a gif, probably) fades from whatever color to white. You could implement the following css:
    Code:
    .header{ background: #FFF; url(background.gif);repeat-y;}
    Then, you can put it in your HTML code, in the header div
    Code:
    <body>
    
    <div class="header"> whatever text or content </div>
    
    ....
    rest of page
    
    ....

    This is just one way of doing it.


Bookmarks

Posting Permissions

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