10 replies [Last post]
loke
Offline
newbie
Last seen: 15 years 49 weeks ago
Timezone: GMT+1
Joined: 2003-08-14
Posts: 8
Points: 0

hey!
i need a background image inside a table.
problem is, if i just insert an image, in centers, no matter what i do. and i want it in the top left corner of the table.

i aslo want it as a background, as in "i want to be able to write on top of the picture". how do i do this?

Sven
Sven's picture
Offline
Enthusiast
Brisbane, Australia
Last seen: 12 years 6 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2003-03-12
Posts: 166
Points: 0

"background"-positioning in tables?

Would you be able to post the HTML, or even better, a link to a page, that shows the problem?

loke
Offline
newbie
Last seen: 15 years 49 weeks ago
Timezone: GMT+1
Joined: 2003-08-14
Posts: 8
Points: 0

here:

just go to http://loketing.togetherhost.com/ (not finished at all..)
and something's wrong with the tables. should i just create the whole thing with css..? is that possible?

exorcyze
Offline
Regular
Last seen: 15 years 51 weeks ago
Joined: 2003-07-30
Posts: 18
Points: 0

"background"-positioning in tables?

You can control the positioning of a background image using CSS with something like:

.myclass {background: url(test.jpg) top left no-repeat;}

More info here:
http://www.w3schools.com/css/css_background.asp

loke
Offline
newbie
Last seen: 15 years 49 weeks ago
Timezone: GMT+1
Joined: 2003-08-14
Posts: 8
Points: 0

ok, help me out here..

i've been trying different things now, this is BEFORE i come to the background-thing.. i started over.
thought i'd try building it otherwise.
i'm using tables (should i only use css?), and it works fine ( http://loketing.togetherhost.com/css.htm ), the only problem is, that everything's not in the top corner. so i apply some css ( http://loketing.togetherhost.com/css2.htm ), and something wrong happens. my "spacer" image becomes 1px wide. the point with this image is to adjust the width of the page, so that there's no background on either side.
what should i do? i'm starting to get a bit frustrated here.. i started over today, and used a whole day, just trying to figure out that background-thing... :?

loke
Offline
newbie
Last seen: 15 years 49 weeks ago
Timezone: GMT+1
Joined: 2003-08-14
Posts: 8
Points: 0

again...

hehe..
been trying different stuff, now.
got it this time, i think.
still, some problems with the style on font types. i have problems assigning "abilities" to the fonts. they're supposed to be Verdana, 12px, black, and absolute positioned on top of the background image.
here's the code:

skriv { color: #000000; font-family: "Verdana, Arial, Helvetica, sans-serif"; position: absolute; left: 95px; top: 59px; z-index: 2; font-size: 12px }

the image is z-index 1.

but still. the font stays nowhere near my defined position, it is times new roman or something, wrong size, and black since that's the default color, i guess..

when i use it, i type <skriv>text here</skriv> but nothing happens.. what's the matter?
btw, if i set it as a class, it works. but ONLY for one font.. if i use two fonts, only one of them works, or none. what excactly am i supposed to do?

Pob
Offline
Enthusiast
Hampshire UK
Last seen: 8 years 6 weeks ago
Hampshire UK
Timezone: GMT+1
Joined: 2003-08-16
Posts: 60
Points: 5

&quot;background&quot;-positioning in tables?

Hi Ioke,

I'm not sure what you are trying to do but you have major problems with your css.

I lifted this code from your main.css file

<HTML>
<HEAD>
<TITLE>grå css</TITLE>
<STYLE TYPE="text/css">
<!--
norm         { color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; position: absolute; left: 95px; top: 59px; z-index: 2; font-size: 15px }
overskrift   { color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; position: absolute; left: 95px; top: 59px; z-index: 3; font-size: 20px }
nyhet        { color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; position: absolute; left: 95px; top: 59px; z-index: 4; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: outset; border-color: #b5b5b5; background-color: #b5b5b5 }
.marg        { margin-left: 10px }
IMGBG        { position: absolute; left: 0px; top: 0px; z-index: 1; background-color: #cdcdcd }
IMG1         { position: absolute; background-color: #cdcdcd }

a:link       {color: #666666; text-decoration: none;}
a:visited    {color: #333333; text-decoration: none;}
a:active     {color: #000000; text-decoration: none;}
a:hover      {text-decoration: underline;}

.a  		 { position: absolute; left: 0px; top: 0px }
.b           { position: absolute; left: 152px; top: 0px }
.c  		 { position: relative; left: 0px; top: 0px }
.d           { position: absolute; left: 90px; top: 54px; z-index: 1 }	


-->
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>

For a start there should be nothing else except CSS in this external file. Most compliant browsers will choke on this (although you might get away with it in IE). There should only be CSS and CSS comments tags (not html comment tags not even style tags just the css styles).

Also you have described a style like this:

norm         { color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; position: absolute; left: 95px; top: 59px; z-index: 2; font-size: 15px }

There is no html tag called norm! It must be a class or an id. e.g. .norm or #norm. (remember a specific ID can only be used once per page a class can be used many times). When you apply a style directly to a an html tag then you code it like this.

body {margin:0px;padding:0px;}

The above example is also the answer to one of your problems in making the background image cover the whole width of the page. A page by default has margins all around it. The standard way to get rid of those margins is by setting the margin in the body style to 0px. (The padding:0px is there to satisfy Opera that uses paddings for its margins.)

Quote:

when i use it, i type <skriv>text here</skriv> but nothing happens.. what's the matter?

What's that! <skriv> !!You can't make your own html tags up. Did you mean: <p class="skriv">text here</p>.

Once you've sorted that lot out then things may start to work better Wink

Hope that helps.

Paul

loke
Offline
newbie
Last seen: 15 years 49 weeks ago
Timezone: GMT+1
Joined: 2003-08-14
Posts: 8
Points: 0

thanks!

ok, the thing about the wrong tags is because i updated the site from time to time, and it was probably different when you checked in. but thanks for the advice! it worked now..

only problem is: is there any way to use word-spacing to make the text fit the page? i've tried using % as a unit, but it only registers px, pt and so on.

and also, is it possible to make the text change when you put you mouse over it, or do i need javascript for that? and even if i can do it with css, will the alignment change once the text does?

loke
Offline
newbie
Last seen: 15 years 49 weeks ago
Timezone: GMT+1
Joined: 2003-08-14
Posts: 8
Points: 0

i fixed it..!

ok, i just built the site slightly different. if you want to see how it ended up, just go to http://loketing.togetherhost.com/ and tell me what you think. i should warn you though: it uses JS, and it is Norwegian only.
but please tell me if it doesn't work properly or anything at all. any feedback is appreciated.

and one more thing: can anybody tell me what the problem is with the two top images, in the top left and right corner? they're supposed to come close to eachother, but they are separated by like 250px.. any clues?

Pob
Offline
Enthusiast
Hampshire UK
Last seen: 8 years 6 weeks ago
Hampshire UK
Timezone: GMT+1
Joined: 2003-08-16
Posts: 60
Points: 5

&quot;background&quot;-positioning in tables?

Hi,

Quote:

only problem is: is there any way to use word-spacing to make the text fit the page? i've tried using % as a unit, but it only registers px, pt and so on.

Not exactly sure what you mean by "make the text fit the page"! Have you got an example of what you are trying to do.

%,px,pt etc refer to the size of the font. If you set the font size to be 150% then it will be 150% times its parent (or default) font size.

e.g. If the body has been set to 10px the you set a paragraph <p> to font-size:150% the the text in the <p> will be 15px etc.

Word spacing will place more space between words as specified :
e.g.word-spacing: 25px; Will put 25px worth of space between each word. (letter spacing works similarly but between letters.)

Quote:

is it possible to make the text change when you put you mouse over it, or do i need javascript for that?

If you turn the text into a link then you make the text (or background )change colour/size with css. If you are talking about swapping images then its usually done with javascript although you can swap the background image of a link on mouse hover using css which is similar.

eg. changing background color on rollover:

a:link {
	color: #000000;
	background-color: #FFFFCC;
	text-decoration: none;
}
a:hover {
	color: #FFFFCC;
	background-color: #000000;
}

Html code:

<a href="#">Hello </a>

Of course you could set this up with a class just for specific areas:

.classname a:link {
	color: #000000;
	background-color: #FFFFCC;
	text-decoration: none;
}
.classname a:hover {
	color: #FFFFCC;
	background-color: #000000;
}

Then in html:

<div class="classname">
<a href="#">Hello </a>
</div>

or another way to do it is:

a.classname:link {
	color: #000000;
	background-color: #FFFFCC;
	text-decoration: none;
}
a.classname:hover {
	color: #FFFFCC;
	background-color: #000000;
}

Then in html:

<a class="classname" href="#">Hello </a>

(If you wanted you could set a background image in the link and swap that over on mouse over as well.)

Not sure if any of this is what you meant, but there you go anyway;)

Paul

d3signmonk3y
d3signmonk3y's picture
Offline
Enthusiast
Toledo, Ohio
Last seen: 15 years 51 weeks ago
Toledo, Ohio
Timezone: GMT-4
Joined: 2003-07-29
Posts: 59
Points: 0

&quot;background&quot;-positioning in tables?

Hey Loke,

I looked at the site in IE 5.1 on Mac OS 9.2.2 and there seems to be a problem with the content appearing about 50px below where it's supposed to when the page loads. It fixes itself if you resize the window, though.

Also there is a horizontal scroll bar.

As for the space between the top graphics, the table column that seperates the two images has a spacer gif that is 212px wide in it at the bottom of the table.