13 replies [Last post]
mistermax
Offline
newbie
Last seen: 16 years 2 weeks ago
Joined: 2007-01-16
Posts: 5
Points: 0

Hi there- I'm new to these forums, so apologies if this is posted in the wrong place.

I'm trying to create a background image fof a column. This is my first go at CSS, so I'm working off a template I found that set a background colour, just changing the command.

the section of CSS looks like this...

#lh-col{
 position: absolute;
 top: 61px;
 left: 0px;
 width: 180px;
 border: 1px solid #333333;
 background-image: url('brick_tex.GIF')
 color: #F7A900;
 margin: 0;
 padding: 0;
 height: 500px;
 z-index: 1;
 }

and the displaying page calls it like this...


Left Column

The left col can be used for navigation links, search box etc.



Well Trust Forums.

However, the image isn't displayed in the background.

The image is contained in the same directory (just trying it locally in a folder before uplocaing it to site)as the html and css. I've also tried a leading slash on the filename?
mod edit/ posted code fixed for display. Please use <code> tags to display code.

ChristinaG
Offline
Regular
Northampton
Last seen: 14 years 50 weeks ago
Northampton
Joined: 2006-11-30
Posts: 29
Points: 0

As far as I'm aware, don't

As far as I'm aware, don't use the quote marks around your background image file name.
i.e. background-image: url (brick_tex.GIF)

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Better to use shorthand

Better to use shorthand 'background' property, and you're missing a closing semicolon

One thing before you follow the wrong path, read upon why not to use absolute positioning for main layout (sticky on the subject somewhere).

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

mistermax
Offline
newbie
Last seen: 16 years 2 weeks ago
Joined: 2007-01-16
Posts: 5
Points: 0

I've tried both those

I've tried both those changes, so the presentation code looks like this:

#lh-col{
position: absolute;
top: 61px;
left: 0px;
width: 180px;
border: 1px solid #333333;
background: url(brick_tex.PNG)
color: #F7A900;
margin: 0;
padding: 0;
height: 500px;
z-index: 1;
}

but it still doesn't display?

(Thanks for the pointer on absolute positions, I'll look into it later on)

EDIT **** IGNORE ME! I'd forgotten the semi-colon on the line end...

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 39 weeks 6 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

So have you fixed the

So have you fixed the original problem?

Verschwindende wrote:
  • CSS doesn't make pies

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Daft question deleted

Blah

mistermax
Offline
newbie
Last seen: 16 years 2 weeks ago
Joined: 2007-01-16
Posts: 5
Points: 0

I thought I had fixed it, I

I thought I had fixed it, I saw the background work.. but once only. I reloaded the page and it disappeared.

ClevaTreva - is that just a sig about doctype, or is that something I should do?

ta

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Its in my sig, but if you

Its in my sig, but if you don't have one, GET ONE NOW.

Either HTML 4.01 Strict or XHTML 1.0 Strict is my advice. I prefer XHTML, but that's just me.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 39 weeks 6 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Can you post all your code,

Can you post all your code, CSS and HTML please?

Verschwindende wrote:
  • CSS doesn't make pies

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi Looking at the OP, the

Hi

Looking at the OP, the line of css with the background image in is missing the ending semi-colon

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

ClevaTreva wrote:Hi Looking

ClevaTreva wrote:
Hi

Looking at the OP, the line of css with the background image in is missing the ending semi-colon

three times thats been refered to, by the OP, yourself, and originally me! :rolleyes: people just don't really read posts do they?

and if we are dealing with a lack of DTD :curse:

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

mistermax
Offline
newbie
Last seen: 16 years 2 weeks ago
Joined: 2007-01-16
Posts: 5
Points: 0

Here's the code...

okay, here we go...

/* Layout Stylesheet */

body{
padding:0;
margin: 0;
}

#lh-col{
position: absolute;
top: 61px;
left: 0px;
width: 180px;
border: 1px solid #333333;
background: url(brick_tex.PNG);
color: #F7A900;
margin: 0;
padding: 0;
height: 500px;
z-index: 1;
}

#rh-col{
position: absolute;
top: 61px;
right: 0px;
width: 180px;
border: 1px solid #333333;
background: #C1281A;
color: #333333;
margin: 0px;
padding: 0px;
height: 500px;
z-index: 1;
}

#hdr{
height:60px;
background:#eeeeee;
color:#333333;
margin:0;
padding:0;
border: solid #333333;
border-width: 1px 1px 0 1px;
}

#c-col{
position: relative;
margin: 0 181px 20px 181px;
border: 1px solid #333333;
background: #ffffff;
color: #333333;
padding: 20px;
z-index: 3;
}

/* Presentation Stylesheet */

h4 {
margin:0;
padding: 5px 0;
}

p:first-letter {
font-size: 90%;
font-weight: bold;
color:#FFA63A;
}

Max and Lesley Russell

Header Content Here

Our Home Page

Ver 0.1

This is the first page of our website.

Not much currently!


This will be a place to :

  • Store all our photos
  • Leave messages for family
  • Link to cool things

Filler Content

This is an initial format for our website, using CSS.


Left Column

The left col can be used for navigation links, search box etc.



Well Trust Forums.


Right Column

More links?
Advertisements?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

As already mentioned in the

As already mentioned in the edit on your first post, please use the code tags (third button from the right) when posting code.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

mistermax
Offline
newbie
Last seen: 16 years 2 weeks ago
Joined: 2007-01-16
Posts: 5
Points: 0

will do in future, got it

will do in future, got it working using the advice here, ta!