...

View Full Version : Where did my background go?



intcon
03-30-2009, 12:25 AM
Hello!!

I have an 800px wide header, that will contain 2 lines of navigation right aligned (about 500px wide) and the logo, left aligned 600 px wide. so i thought (yes, i am a CSS newbie and clueless with it) if i used the logo as a background, and had it left aligned, the two lines of navigation would just float gracefully over the top of the logo and if i margined correctly, they would intersect like puzzle pieces (logo has a bottom jutting out part, nav has a jutting out top part) ...i feel like i'm close to having it, but the background image won't show..

here's the header css

#header {
margin: 0px;
background-image:url('images/logo.jpg');
background-repeat: no-repeat;
background-attachment:fixed;
background-position: left;
}
and then in the HTML i have the 2 divs for the navigation inside the header tag....
i originally had the logo as a png, and through that might be causing problems but nope...must be something with my (less than brilliant) coding....but hey, i'm learning!!!

carrie

thanks in advance for any help, i soooo appreciate it!!

Apostropartheid
03-30-2009, 12:26 AM
You really shouldn't have the logo as a background. It's a semantic and real part of the page, instead of being just decoration. What if a blind person goes to your site? They hear nothing.

VIPStephan
03-30-2009, 12:32 AM
You really shouldn't have the logo as a background. It's a semantic and real part of the page, instead of being just decoration. What if a blind person goes to your site? They hear nothing.

Not if you have a page heading (h1) as title.

intcon, do you happen to have floated elements inside that header element? Set the header’s overflow to “auto” and see what it does. And please post your entire HTML and CSS because that snippet doesn’t tell us anything about the issue.

intcon
03-30-2009, 12:55 AM
thanks cyan...i'll remember that....

i don't have the floated elements in the header as of yet, but have the coding for them ready to go in...

here's both codes...


body {
margin:0px auto;
padding:0;
border:0;
width:800px;
background:#000;
background-image:url('images/background.jpg');
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 12px;
color:white;
text-align: center;
}
#wrapper {
padding: 0px;
border:0;
width: 800px;
margin:0px auto;
text-align: left;
}
#header {
margin: 0px;
background-image:url('images/logo.png');
width: 419px;
height: 141px;
background-repeat: no-repeat;
background-attachment:fixed;
background-position: left;
overflow: auto;
}
#side-a {
float: left;
width: 400px;
}

#side-b {
float: right;
width: 225px;
}

#content {
float: left;
width: 21%;
}

#footer {
clear: both;
background: #000;


and the html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link href="evans.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="wrapper">
<div id="header"> </div>
<div id="container">
<div id="side-a"><img src="images/flash.jpg" width="396" height="269"></div>

<div id="content"> CONTENT </div>
<div id="side-b"> SIDE B </div>
</div>
<div id="footer"> FOOTER </div>
</div>

</body>

</html>


and here's what the header is supposed to look like when it's finished...

http://www.dobeaddo.com/evans/header.jpg

this is before i put in all of the navigation and other fun goodies i've been working on! but the header/image/navigation issue keeps foiling me as the best way to lay it out....

thanks again for your input....

carrie

timgolding
03-30-2009, 01:12 AM
Nowhere in your code have you got a reference to header.jpg.
Which is the reason its not displaying here. Do you want it to go at the top? Can you just replace header in your css with


#header {
background-image:url(header.jpg);
background-position:left center;
background-repeat:no-repeat;
height:125px;
margin:50px 0 0;
width:800px;
}


And see how this works

timgolding
03-30-2009, 01:26 AM
Ah no sorry i see what your trying to do you want that little logo to be the background then your gonna apply html over the top as text and links?

your logo is 201 x 65 px and is called logo.png not logo1.png so those should be changed. then just put the correct margins in and i think remove background-attachment:fixed;

like so



#header {
margin: 0px;
background-image:url('images/logo.png');
width: 201px;
height: 65px;
margin-top:8px;
margin-bottom:51px;
background-repeat: no-repeat;
background-position: left;
}


You should maybe get firebug to help with messing with this sort of thing

intcon
03-30-2009, 01:42 AM
ok! that worked, i can see it now...thanks! i always hate it when it's something stupid/easy, but on the other hand i'm glad it wasn't anything too horrible! i;m just installing firebug as well..thanks for the tip!

I'm sure you'll see me again..lol....this is the best and fastest forum i've ever posted to for help - and you all have the right answers! love it!:thumbsup:

carrie

timgolding
03-30-2009, 02:00 AM
Cool. Glad to be of assistance. Would be cool if you clicked the 'Thank user for helpful post button' just bellow the post when a user helps. Its nice for me to get my thanked counter up :D

timgolding
03-30-2009, 10:30 AM
I had a thought last night. If you are going to be wanting to put html in side header then you should make the header the full width and height of the banner example you shown. that is 800px x 125px then you should put your logo in as a standard html image, with the required margin.

CSS


#header {
width: 800px;
height: 125px;
}

#header img{
margin-top:8px;
margin-bottom:51px;
}


HTML


<div id="header">
<img src="images/logo.png" alt="Evans" />
</div>

That will allow you to add html around the image you will need to look into floating divs to help putting the text on the right. The code shown has another advantage in that you can have an alt tag for your logo which will improve accessibility for visually impaired people.

intcon
03-30-2009, 03:29 PM
well, that did put the logo where i wanted it, but i did

<div id="header">
<img src="images/logo.png" alt="Evans" />

right floated in my 2 navigation elements and then ended with the header /div and now my navigation dropped down below the logo....even if i move the header /div up to right behind the image the navigation still drops down under the logo...tried a clear in the CSS in the #header but nope, that's not it either...bummer.

carrie

timgolding
03-31-2009, 12:18 AM
Yes i forgot to warn you that you that when using float:right you will need to put your right floated div above the header in the HTML like so (don't ask me why!). Oh and you are correct to use clear, well clear:none;

CSS:


#header img{
margin-top:8px;
margin-bottom:51px;
float:left;
clear:none;
}

#top_navigation
{
float:right;
clear:none;
text-align:right;
}


HTML


<div id="header">
<div id="top_navigation">
<a href="">Home</a> | <a href="">The Artist</a> | <a href="">Contact Us</a> | <a href="">FAQs</a> | <a href="">Login</a>
</div>
<img src="images/logo.png" alt="Evans" />
</div>


I noticed you have a login link on your navigation. Does that mean you plan to have a login script on your site? That should be fun helping you with that :D You'll need a server side scripting language and an SQL database for that.

intcon
03-31-2009, 02:31 AM
and it almost works! lol....oh i suck at this so bad.....but i keep trying! ok...so here's what i have...is it easier to just point you to the page and link to the CSS or have it posted on here? I'll link, and if you prefer it the other way, let me know and i'll post it as well...
HTML (http://www.monarchcottages.com/evans/test8/index.html)

CSS (http://www.monarchcottages.com/evans/test8/evans.css)

as you can see the logo took off behind the main picture ....do i need to move the CSS around so the navigation is above the header? i've played with it moving the HTML around to different areas, but something always seems to get bumped to exactly the wrong spot....tell me it's something easy! and i'll tell you I don't have to worry about the login part...lol...it goes to a different website entirely! yeah!

carrie

Excavator
03-31-2009, 04:36 AM
Hello intcon,

There's a few basic problems with your #header.

#header is 800px wide x 141px high
logo.png is 419px X 141px Plus your nav-b at 550px wide makes a total width of 969px
#header is the full width of it's containing div so there's no need to float it

Your 141px high logo.png doesn't really fit over the background image, the bar on the bottom runs through the "life transformed into art" slogan.

Without adjusting any image sizes, have a look at this - http://nopeople.com/intcon/

intcon
03-31-2009, 04:42 AM
thanks for pointing that out excavator! i was trying to get the bottom navigation to fit almost like a puzzle piece above the art slogan so they would mesh..and only be 800px wide...maybe it would be easier to split the logo into two parts? that's why i originally had it as a background, so that they wouldn't "bump" into each other and make it too wide, or am i just making this more complicated than it needs to be? it's my first total CSS layout, so of course i totally appreciate any guidance! if you look at the picture i posted above of how the top header is supposed to look, you can see the meshing idea...

carrie

Excavator
03-31-2009, 04:56 AM
The Evans part will fit fine, just crop that out.
The slogan is just text and, since search engines like text, why not make that a heading?
Like this - http://nopeople.com/intcon/
Still need to pick a suitable font for the <h1> of course.

Excavator
03-31-2009, 04:58 AM
Oh yeah, are you able to find the CSS and view the markup? I don't know what your abilities are or what programs your using.
I could either upload the code for you or tell you how to grab it right off the demo page I've posted if you like.

intcon
03-31-2009, 05:18 AM
ah..i see....yeah, i can grab the html and css...been doing websites (with tables! :eek:) for many years, but this is my first full layout in css..its a wee bit nervewracking...lol...i'll need to move the bottom navigation up a bit but that shouldn't be a problem..otherwise i see how you did it...i'll print it out, lol and study it a bit more...that seems to help me work out the layout in my head so the next one will be easier! ( i hope! )
i'll be posting again - several font questions coming up next, but i'll make a new subject for that...:p
i appreciate your input...it's always great to find people out there who are willing to lend their expertise to those of us in dire need of assistance!

carrie

timgolding
03-31-2009, 10:57 AM
The reason that the image doesn't fit is because it is 419px wide. So the navigation divs are forcing it down. The float only works if the divs don't overlap. I agree with excavator that you should consider turning the slogan part of the image into a heading tag, <h1> or something. However I don't know how common that font it. for instance if that is an uncommon font and not likely to be installed on your users browsers and is important to your brand image then you may still want to keep it as part of your image. The disadvantage of that would be that the text from the slogan would not be very well indexed in search engines as it would only have the slogans alt tag to go on and search engines like google would place far more weight on a heading than an alt tag. So you'd need to ask yourself whats more important maintaining brand image, increasing search engine indexing for that text. Anyway if you are going to keep the slogan as part of the image you need to look at overlapping the elements. This can be achieved by absolute or relative postioning. Relative would be easier in this case because you can just tell it how much to bump it upwards. With top property. Setting top to a negative value in pixels which is how far to move it up




#header {
margin: 0px;
width: 800px;
height: 141px;

}
#header img{
margin-top:8px;
margin-bottom:8px;
position:relative;
top:-114px;
}


If you are thinking you are going to maintain the slogan as an image then another idea would be to shop it up and have the slogan separate from the logo so that you can give it a different alt attribute. With regards to having the slogan as a heading you can still leave the floats in and just put the heading below all that lot




<div id="header">
<div id="nav-a">
<p class="nav">
<a href="index.html">home</a>
|
<a href="rod_evans.html">the artist</a>
|
<a href="company.html">contact us</a>
|
<a href="cotnact.html">log in</a>
</p>
</div>
<div id="nav-b">
<div id="qm0" class="qmmc qmsh" style="z-index: 11;">
<a class="qmparent" href="http://www.opencube.com/buy_now.asp">Buy Now!</a>
<div id="" class="" style="z-index: 21; left: 0px; top: 20px;">
<a href="javascript:void(0)">portrait video</a>
<a href="javascript:void(0)">senior video</a>
<a href="javascript:void(0)">painting video</a>
</div>
<a class="qmparent" href="javascript:void(0)">portrait gallery</a>
<div id="" class="" style="z-index: 21; left: 0px; top: 20px;">
<a href="javascript:void(0)">testimonials</a>
<a href="javascript:void(0)">products</a>
<a href="javascript:void(0)">book now</a>
<a href="javascript:void(0)">purchase gift cards</a>
</div>
<a class="qmparent" href="javascript:void(0)">graduation gallery</a>
<div id="" class="" style="z-index: 21; left: 0px; top: 20px;">
<a href="javascript:void(0)">faq</a>
<a href="javascript:void(0)">book now</a>
<a href="javascript:void(0)">purchase gift card</a>
<a href="javascript:void(0)">testimonials</a>
<a href="javascript:void(0)">session types</a>
<a href="javascript:void(0)">book now</a>
</div>
<a href="javascript:void(0)">blog</a>
<a href="javascript:void(0);">book now</a>
<span class="qmclear"/>
</div>
<script type="text/javascript">
1qm_create(0,false,0,500,false,true,true,true,false);
</script>
</div>
<img alt="Evans" src="images/logo.png"/>

<h1>Life Transformed into ART</h1>
</div>

Hope this helps? P.S I like your site, looks nice :D

intcon
03-31-2009, 04:39 PM
thanks for the info tim....i'll check that out this evening when i have some free time! as for the fonts, he said i can use whatever is close, he understands the font issue so that's not a problem (thank goodness!)

carrie



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum