CSS Forum

**Heeter** · 11:03 PM

Hey All,

I am trying to figure out why my index page keeps putting the background on top of my text. I am working with three files:

default.css, layout.css, and index.html

In my index, I have this part in the code:

Code:

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>hcctech.ca</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
    @import url("layout.css");
-->
</style>
</head>

Now the background is on top of the text, but I remove the:

Code:

<style type="text/css">
<!--
    @import url("layout.css");
-->
</style>

I can see the text on the index page only.

I am trying to move to a tableless css layout on my Homepage.

Can anyone figure this one out for me, Thanks.

Heeter

**Heeter** · 11-16-2006, 11:49 AM

Bump

Sorry for the bump so soon, but I need help,

Thanks,

Heeter

**Nahele** · 11-16-2006, 12:52 PM

Are you working with "z-index" values?

if your site is online, you may want to post up a link to your index page

**LadynRed** · 11-16-2006, 01:40 PM

Yes, this is impossible to debug unless we can see ALL of the code. An on-line link would be easiest for all.

**Heeter** · 04:14 PM

Thanks for responding

The link to my work in progress homepage is : http://www.hcctech.ca/xhtml/homepage.html

Access to the files in question is: www.hcctech.ca/xhtml

My existing homepage is: www.hcctech.ca but my goal to remove all tables from my existing.

Thanks again for responding

Heeter

**LadynRed** · 05:05 PM

Ok... why do you have this ?

<link href="layout.css" rel="stylesheet" type="text/css" style="background-repeat: repeat;" /

#logo h1, #logo h2 {
display: none;
}

No way you're going to see your text with the headers set to be HIDDEN !

and this ??
#label1 b, #label2 b {
display: none;
}

#menu b {
display: none;
}

Your text isn't being covered up, you're HIDING it. Take out all that 'display:none' and your text appears. Perhaps you misunderstood the meaning of display: none ? Once your text shows up, you're going to have to adjust the placement.

I would also suggest:
change your menu id's to classes, makes them re-usable.

**Nahele** · 11-16-2006, 05:08 PM

I'm assuming you are talking about the text that should be at each "title" divistions, menu text and logo text...if so, your background is not covering the text, you are hiding it

Code:

.title b {
	display: none;
}

Code:

#menu b {
	display: none;
}

Code:

#logo h1, #logo h2 {
	display: none;
}

**Nahele** · 11-16-2006, 05:09 PM

oh, ya beat me to it!

**Heeter** · 11-16-2006, 06:36 PM

YAHOO, AWESOME!!!!!

Thanks a million, to both of you!!!

I see Text!!!

If you don't mind, could you please tell me about what you meant about Menu ID to classes concerning my situation.

Again, Thanks, been beating my head against the wall since trying to move to table-less setup.

Heeter

**Nahele** · 11-16-2006, 06:55 PM

Quote:

Originally Posted by Heeter

If you don't mind, could you please tell me about what you meant about Menu ID to classes concerning my situation.
Heeter

your background image for all menu items (images/homepage04.jpg - images/homepage10.jpg) appear to be the same image so change each of these entries in html to class="menu_item" or whatever

and

replace

Code:

#menu1 { background: url(images/homepage04.jpg) no-repeat left top; }
#menu2 { background: url(images/homepage05.jpg) no-repeat left top; }
#menu3 { background: url(images/homepage06.jpg) no-repeat left top; }
#menu4 { background: url(images/homepage07.jpg) no-repeat left top; }
#menu5 { background: url(images/homepage08.jpg) no-repeat left top; }
#menu6 { background: url(images/homepage09.jpg) no-repeat left top; }
#menu7 { background: url(images/homepage10.jpg) no-repeat left top; }

with

Code:

.menu_item {background: url(images/homepage04.jpg) no-repeat left top;}

then remove images 5-10

**Heeter** · 11-16-2006, 07:07 PM

But by doing that, wouldn't it be just putting one menu item across the top ?

Thanks, Nahele

Heeter

**Nahele** · 11-16-2006, 07:44 PM

No, you see the css for .menu_item will apply to every instance where class="menu_item", so if you have...

HTML Code:

<div id="menu">
	<ul>
		<li><a href="#" class="menu_item" accesskey="1" title=""><b>Home</b></a></li>
		<li><a href="#" class="menu_item" accesskey="2" title=""><b>Products</b></a></li>
		<li><a href="#" class="menu_item" accesskey="3" title=""><b>Services</b></a></li>
		<li><a href="#" class="menu_item" accesskey="4" title=""><b>News</b></a></li>
		<li><a href="#" class="menu_item" accesskey="5" title=""><b>Support</b></a></li>
		<li><a href="#" class="menu_item" accesskey="6" title=""><b>About Us</b></a></li>
		<li><a href="#" class="menu_item" accesskey="7" title=""><b>Contact Us</b></a></li>

	</ul>
</div>

then each occurance of class="menu_item" will have the same settings...