HTML/CSS - What am I doing wrong

Neodite

Neodite

Neodite

Soldato
Joined
10 Sep 2008
Posts
2,570
Location
Grendon
So it's been a long time (About 10 years) since I have bothered to make a website.

I have most of the PHP coded that I want to use (Not great and messy, but it works for now) So decided to start on the design.

And at the first hurdle I have been stopped :confused:

I'm sure it is stupidly simple and I am just being a retard (Or I am just way off the mark, I'm not sure) But what I am trying to do for now, is have a background image set at the top of the page with a logo in the top right of that.

The logo displays fine, but the BG image does not display anything.

E.G

LOGO PIC |||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||

With the ||| being the background picture.

Code that I have.

Code: 
<HTML>

 <HEAD>
 
  <TITLE>DESIGN - Testing</TITLE>
  
  <link rel="stylesheet" href="styles/main.css" />

 </HEAD>

<BODY>

  <div class="header"> 
    <h1><img src="images/logo.png"
	width="236" height="36" alt="Home" border="0" /></h1>
  </div>

Blah Blah

</BODY

</HTML>

And the CSS

Code: 
body {

  font-size: 13px;
  font-family:Century Gothic, Helvetica, sans-serif;
  color: #333;
  margin:0px;
  padding: 25px;
}

#header {

  background-image: url(images/test.png);
}

Again, sorry if this is a stupid question. Last time I did this iframes was cool :cool:
 
Are you floating the H1 or the logo image? If so then header will have no height and so won't display a background. Either clear the float or give #header a fixed height
 
Doesn't sound like that's what he's after as that would mean the background would be behind the logo.

It looks more like the path to your image is wrong as I can't see any obvious problems with the code.

The link to your file from the CSS is relative to the CSS file, not the HTML page it is being displayed from.

As such, because your main.css is in a "styles" folder the path from the CSS to your image is "../images/test.png" (this will navigate "up" one folder then look look for your images folder)

Alternatively, if your images folder is on the root of your website, you can use "/images/test.png" (the "/" at the beginning means start from root)

Your current paths, both in your HTML and CSS will have relative links which will be a problem if you duplicate your page and put them in folders etc.

The same is true for HTML links. I.e. you'll very likely want to do all links like "/about/index.html" rather than just "about/index.html" so that no matter where the file is that has that link it's always going to the same folder from the root folder rather than from the relative location of the HTML file.
 
Nope, even just using..

Code: 
<HTML>

 <HEAD>
 
  <TITLE>DESIGN - Testing</TITLE>
  
  <link rel="stylesheet" href="styles/main.css" />

 </HEAD>

<BODY>

  <div class="header"> 
    WHY YOU KNOW SHOW
  </div>

Blah Blah

</BODY

</HTML>

Does not display the image
 
Oh, it's worth pointing out that the "/" method won't work if you're just playing with HTML files on your desktop.

You'll need to use the "../" syntax.
 
RoyMi6 said:
Doesn't sound like that's what he's after as that would mean the background would be behind the logo.

It looks more like the path to your image is wrong as I can't see any obvious problems with the code.

The link to your file from the CSS is relative to the CSS file, not the HTML page it is being displayed from.

As such, because your main.css is in a "styles" folder the path from the CSS to your image is "../images/test.png" (this will navigate "up" one folder then look look for your images folder)

Alternatively, if your images folder is on the root of your website, you can use "/images/test.png" (the "/" at the beginning means start from root)

Your current paths, both in your HTML and CSS will have relative links which will be a problem if you duplicate your page and put them in folders etc.

The same is true for HTML links. I.e. you'll very likely want to do all links like "/about/index.html" rather than just "about/index.html" so that no matter where the file is that has that link it's always going to the same folder from the root folder rather than from the relative location of the HTML file.
Click to expand...

I have it as

images
- test.png
styles
- main.css
index.html

Tried with ../images/test.png

So it is now

Code: 
body {

  font-size: 13px;
  font-family:Century Gothic, Helvetica, sans-serif;
  color: #333;
  margin:0px;
  padding: 25px;
}

#header {

  background: url(..images/test.png) top right no-repeat;
}

And with " too.

Could it be my browser? Not sure what the latest firefox is, but I am using

Firefox version 15
and
IE 8

*EDIT*

Also tried with "../" as yes I am just playing on the PC atm
 
You've also defined your "header" as an ID in your CSS, but are calling a class in the HTML.

Either change:
Code: 
<div class="header"> to <div id="header">
or
Code: 
#header to .header
 
You must log in or register to reply here.
Back
Top Bottom