4 Replies - 1364 Views - Last Post: 19 May 2012 - 03:03 PM

#1 jpm0004  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 20
  • Joined: 21-April 12

Basic Question: CSS and HTML, Logo not showing up

Posted 18 May 2012 - 08:34 PM

Here is the HTML code for the header:
<body id="home">
<ul class="hide"><li><a href="#body">Skip to content</a></li></ul>
<div id="container">
	<div id="header">
	    <h1></h1>		
	</div>
    



Here is the CSS code for the header (the CSS Designer added comments to help, but I'm ignorant in this matter):
[u]/* Logo */
/*
#header h1 { 
	font-family: "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; 
	font-size: 2.3em;
	font-weight: normal;
	color: #099;
	margin: 0;
	padding: 40px 0;
	letter-spacing: -1px;
	}
#header h1 a { text-decoration: none; color: #099; }
#header h1 a:hover { text-decoration: none; }
#header h1 span { color: #fff; }/*

/* if you would like to replace the logo with 
an image, comment out the above logo code and
uncomment the following */
[/u]
#header h1 {
	background: url(../img/logo.gif) no-repeat;
	width: 300px;
	height: 113px;	
	margin: 0;
	float: left;
	}	
#header h1 a {
	display: block;
	height: 100%;
	text-indent: -9999px;
	outline: none;
	}




This is what the page looks like: Attached Image
This is what the page should look like (with my logo replacing the title text):Attached Image
And this is my logo (a 300px-113px png, transparent alpa):Attached Image

Is This A Good Question/Topic? 0
  • +

Replies To: Basic Question: CSS and HTML, Logo not showing up

#2 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3730
  • View blog
  • Posts: 6,017
  • Joined: 08-June 10

Re: Basic Question: CSS and HTML, Logo not showing up

Posted 18 May 2012 - 09:20 PM

One thing strikes me as odd. You say: url(../img/logo.gif), but your header image is a PNG image, not a GIF. Are you sure the URL is correct?

Other than that I can't see anything that should cause this to fail.
Edit: Although, I have to wonder what the float: left; is doing there?


On a different topic, I was never a big fan of pushing text off-screen like that. Just using a <img> with the off-screen text as an alt value seems like a much better choice. - From a SEO perspective, the crawlers are probably smart enough to figure out that alt text on an image wrapped in h1 tags is fairly important, while they are probably not overjoyed to find off-screen text. - From an accessibility perspective, the <img> alt tag should be used instead of the image on screen-readers and other text-based browsers, so both techniques would come down to the same result on those.

This post has been edited by Atli: 18 May 2012 - 09:21 PM

Was This Post Helpful? 0
  • +
  • -

#3 jpm0004  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 20
  • Joined: 21-April 12

Re: Basic Question: CSS and HTML, Logo not showing up

Posted 18 May 2012 - 10:08 PM

I thought that my logo extension may have come up. The file name is actually logo.gif. After being unsuccessful in getting the image to appear using a .png, I changed the name and the extension. I also pulled the float:left off (that was actually put there by the CSS designer.)

The formatting now looks good, but my image still isn't appearing. Should there be any code between the <h1></h1> tags in the HTML source, or does just declaring the tags and styling it in the CSS all I should have to do? Like I said, I'm new to web designing, so you'll have to excuse my ignorance. Also, is the url(../blha blah) a normal way to call up an image file?
Was This Post Helpful? 0
  • +
  • -

#4 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3730
  • View blog
  • Posts: 6,017
  • Joined: 08-June 10

Re: Basic Question: CSS and HTML, Logo not showing up

Posted 18 May 2012 - 11:09 PM

You renamed a PNG to .gif? That's probably not a great idea, although the browsers probably recognize it as a PNG based on the data itself rather than the extension. - In any case, the extension should have no bearing on this issue. It would be better to rename it back to .png.

I'm still not seeing any problem in there that would cause this. Some URL irregularity is still the best bet. Could you show me the exact paths to the CSS and PNG files?

Quote

Should there be any code between the <h1></h1> tags in the HTML source, or does just declaring the tags and styling it in the CSS all I should have to do?

H1 are block elements, so it should be enough to define a width and height in the CSS. It probably wouldn't hurt to put something in there though, even if it's just a &nbsp; entity. (It's just a space character.)

Quote

Also, is the url(../blha blah) a normal way to call up an image file?

Yes, it's how you specify URLs in CSS styles. The contents of the url(...) call should be a standard, Unix-like file path. So url(../img/logo.gif) would go one directory up, then into the "img" folder there, and try to find a "logo.gif" file. - Note that this is relative to the CSS file, not the HTML file the CSS file is attached to.
Was This Post Helpful? 0
  • +
  • -

#5 jpm0004  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 20
  • Joined: 21-April 12

Re: Basic Question: CSS and HTML, Logo not showing up

Posted 19 May 2012 - 03:03 PM

Sorry, I didn't actually just change the extension. I used GIMP and actually exported a copy of it over to .gif. So that shouldn't be causing a problem.

My true file path for image files is: C:\Documents and Settings\Josh\Desktop\Slingshot\GraniteGlass\img\logo.gif, which I have tried to no avail.

File path for CSS is: C:\Documents and Settings\Josh\Desktop\Slingshot\GraniteGlass\css\style.css and CSS link in my HTML code is <link href="css/style.css" rel="stylesheet" type="text/css" />

I am still getting the problem... it sucks because I don't want to move forward until I fix this.

This post has been edited by jpm0004: 19 May 2012 - 03:06 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1