CSS Problem

[JavaWizKid]

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.

<div id = "header">
<img src="images/logo.gif" alt="Logo" align="left" height="60" width="180">
</div>
<!-- header end -->

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?

 

[SrWebDeveloper]

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

 

[kgarner]

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.

 

[JavaWizKid]

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.

 

[jrrdnx]

I don't want to set the background the image.

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.

 

[angelwatt]

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.

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.

 

[SrWebDeveloper]

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.

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:

<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

 

[JavaWizKid]

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.

 

[angelwatt]

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.

You should read posts closely, SrWebDeveloper tells you how you can make it left or right.

If you want it on the left side, then simply change "right: 0" to "left: 0"

 

[JavaWizKid]

Sorted it thanks.

 

[SrWebDeveloper]

@angelwatt:

Thank you, kindly.

@OP:

You're welcome