CSS Problem

Discussion in 'Web Design and Development' started by JavaWizKid, Jan 9, 2009.

  1. JavaWizKid macrumors 6502a

    Joined:
    Sep 18, 2008
    #1
    Hi I'm having a bit of trouble with coding my website. I want the header to have a background colour and fill the area that all the content is in.

    I don't know why this isn't working.

    HTML:
    <div id = "header">
    <img src="images/logo.gif" alt="Logo" align="left" height="60" width="180">
    </div>
    <!-- header end -->
    Code:
    body
    {
    	margin: 0;
    	padding: 0;
    	text-align:center;
    	color: white;
    	font: small Arial, Helvetica, Verdana,sans-serif; 
    }
    
    #header
    {
    	background: aqua
    }
    It works when I replace the image with text but why doesn't it work with the image there?
     
  2. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #2
    Images display "on top" of background fill colors and text in elements, by default. If you need to fill a div with a background color, remove the img tag inside the div. If the background is supposed to be the image, remove the img tag inside the div and change the header CSS to:

    background-image: url('images/logo.gif')

    Doing that also allows you to add text in the div.

    There are other options available such as background repeating horizontally and vertically, for that check this page out.

    -jim
     
  3. kgarner macrumors 68000

    kgarner

    Joined:
    Jan 28, 2004
    Location:
    Utah
    #3
    I suspect that your image does not have any transparent areas. Since the header div has no specified height or width it is defaulting to the size of the contents. In this case that is your logo image. I suspect that the header actually has a background color, but since the image as no transparency you can't see it.
     
  4. JavaWizKid thread starter macrumors 6502a

    Joined:
    Sep 18, 2008
    #4
    I don't want to set the background the image. The image is the logo in the top right. I want it to be like Macrumors, the (Mac Forums > Special Interests > Web Design and Deevlopment > CSS Problem) bit.
     
  5. jrrdnx macrumors member

    jrrdnx

    Joined:
    Nov 13, 2008
    Location:
    Indiana
    #5
    Then I would either edit your image so that it has transparent areas allowing the background to show through, or specify the height and width of your header so that it's larger than your image showing your background color around the image.
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    I think either we're confused about your problem, or you're confused about the solutions being offered. Do you have an example page we can see or maybe take a screen shot and attach it to your post so we can see the setup.
     
  7. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #7
    In CSS how you insert any image into a div is using the background-image: url() command I listed above. The forum here puts its logo on the left, but it seems like you want it on the right, and use aqua as a fill for whatever is on the left all the way over to the margin.

    If so, this is how you do that in CSS, tested/works:

    Code:
    <style>
    div#container {
       position: relative;
       height: 60px;
       background-color: aqua
    }
    div#mylogo {
       position: absolute;
       right: 0;
       width: 180px;
       height: 60px;
       background-image: url('/skins/default/images/header/logo.gif')
    } 
    </style>
    
    <div id="container">
      <div id="mylogo"></div>
    </div>
    Replace the background image I used with your own and adjust the widths and heights to match the image size. If you want it on the left side, then simply change "right: 0" to "left: 0"

    I created a div container set with relative positioning for the aqua fill set to the same height as the logo, put another div set to absolute positioning inside, used the right: 0 to set the margin to 0 pixels to right justify it, the logo width/height and image. Once you learn about positioning and alignment in CSS, it's pretty darned easy.

    Please try my code before replying - if this is not what you wanted, please do as angelwatt advised, we need more input. Thank you.

    -jim
     
  8. JavaWizKid thread starter macrumors 6502a

    Joined:
    Sep 18, 2008
    #8
    I don't want it on the right. I want there to be a filled rectangle with colour that goes from the left hand side to the right hand side of the page. Inside that "box" my title would be on the left.
     
  9. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #9
    You should read posts closely, SrWebDeveloper tells you how you can make it left or right.

     
  10. JavaWizKid thread starter macrumors 6502a

    Joined:
    Sep 18, 2008
  11. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #11
    @angelwatt:

    Thank you, kindly.

    @OP:

    You're welcome :)
     

Share This Page