Web Design Forums

key_uk · 02-04-2006, 13:15

hello, I have the same problem I did before of another site, which I didnt sort out. basically this is my site: http://www.cse.dmu.ac.uk/~p04288752/csci1404/Website/ as you can see the stroll box is at the bottom of the page, I want it on top of the gray box above it. But the only way I can seem to do it is by putting top:-500px, which leaves space at the bottom of the page where the stroll was. How can I get round this? here is teh bit of code for the stroll box:

<div class="news container" style="height: 440px; width: 510px; overflow: auto; margin:0 auto; left:40px; position:relative; z-index:2;">
<p> contents goes here </p>
</div>

can anyone please help me?

Redge · 02-04-2006, 13:18

Couldn't you just slice the layout and use an iframe or expanding tables?

key_uk · 02-04-2006, 13:39

im not using tables and will i-frames validate?

smallbeer · 02-04-2006, 13:54

why haven't you just got the news within #header2 (which I think is the grey box).

Code:

<div id="header2">
<div class="news container">
...
</div>
</div>

may I suggest you go and learn what you're doing?

key_uk · 02-04-2006, 16:18

Quote:

Originally Posted by smallbeer

may I suggest you go and learn what you're doing?

thats what im doing

e.boal · 02-04-2006, 16:54

damn straight! smallbeers profile - year of birth 2000. that makes you 6. dont act like it - this is a "help me" thread!

smallbeer · 02-04-2006, 18:01

Quote:

Originally Posted by a 6 year old

why haven't you just got the news within #header2 (which I think is the grey box)?

I helped. again. he chose to ignore it. again.

key_uk · 02-04-2006, 19:07

Quote:

Originally Posted by smallbeer

I helped. again. he chose to ignore it. again.

I didnt ignore it, I put into the the header2 div and it worked, it works all fine in IE but when I view it in FF it breaks up, anyone know wot I could do so it would fine in both. I would be very grateful for any help given.

thank you

smallbeer · 02-04-2006, 19:40

well update the link with the news within the #header2 div then. that would be a start.

Lose the xml prologue on the first line. That puts IE into quirks mode.

Code:

<?xml version="1.0" encoding="utf-8"?>

Add a proper doctype

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Code:

#bar { width:800px;top:0; left: 16px; margin:0 auto;
	position:relative;}

#header { width:590px;top:5px; left: 28px; margin:0 auto;
	position:relative;}
	
#header2 { background-image:url(header2.jpg);width:590px; height:500px; top:1px; left: 28px; margin:0 auto;
	position:relative;}
	
#header3 {width:570px; top:-14px; left: 17px; margin:0 auto;
	position:relative;}

#menu { width:180px;top:5px; height:500px; left: 17px; float:left; margin:0 auto;
	position:relative;}
#menu2 { width:180px;top:-534px; left: 17px; margin:0 auto;
	position:relative; z-index:2; float:left;}

What is going on there? top: -534px, left: 17px, top: 1px, left: 28px blah blah.

How do you expect to have a clue where to start there?

smallbeer · 02-04-2006, 20:17

a 6 year old can do better in 10 minutes. measurements might be out but you get the idea.

http://www.lifeofsmallbeer.co.uk/crap/butcher/

help yourself. you're welcome.

datahound · 02-04-2006, 21:05

key_uk · 02-04-2006, 21:21

k thanks, im gonna give it a try now.

did you put all the images as div backgrounds? if you did how did you do the content part as there is 3 images, how can I put them 3 images in one background? im im really confuessed

smallbeer · 03-04-2006, 04:00

Code:

<div id="content">

<div id="main_content">news floated right</div>

<div id="sub_content">menu floated left</div>

</div>

I merged the two column images into one and used it as a background for #content. This means that both columns with always look like they're the same height.

http://www.lifeofsmallbeer.co.uk/cra...content_bg.gif

the top image for the menu is a background of #sub_content, and the top image of the news box is a background of #main_content.

your code was such a mess it was easier to redo it and hope you might gain from the new version.

LadynRed · 03-04-2006, 15:55

It would help a great deal if you didn't position everything on the page. Laid out correctly using source order and document flow it should not be necessary to position every single div.

key_uk · 03-04-2006, 19:54

hello again,
Thanks alot smallbeer you have been a great help, one last thing I see you have used this in your code:

background: url('content_bg.gif') repeat-y;

background: url('bar2.jpg') no-repeat bottom left;

background: url('header3.jpg') no-repeat top left;

what do these do and mean,
thanks key_uk

smallbeer · 03-04-2006, 21:04

what it says on the tin basically.

Quote:

Originally Posted by key_uk

background: url('content_bg.gif') repeat-y;

adds the content_bg.gif as a background image and repeats it down the y axis - vertically.

Quote:

Originally Posted by key_uk

background: url('bar2.jpg') no-repeat bottom left;

adds the bar2.jpg as a background image , doesn't repeat, to the bottom left (of #header). You'll notice #header has 20px bottom padding. 10px of that is for this image and the other 10px is the space between this and the main masthead image.

Quote:

Originally Posted by key_uk

background: url('header3.jpg') no-repeat top left;

adds the header3.jpg as a background image , no repeat, top left. top left is actually default so that's not needed.

key_uk · 04-04-2006, 09:53

ok cheers smallbeer, thanks for all your help

02-04-2006, 13:15	#1 (permalink)
key_uk Senior Member Join Date: Mar 2006 Location: Shropshire Posts: 143	Same problem again hello, I have the same problem I did before of another site, which I didnt sort out. basically this is my site: http://www.cse.dmu.ac.uk/~p04288752/csci1404/Website/ as you can see the stroll box is at the bottom of the page, I want it on top of the gray box above it. But the only way I can seem to do it is by putting top:-500px, which leaves space at the bottom of the page where the stroll was. How can I get round this? here is teh bit of code for the stroll box: <div class="news container" style="height: 440px; width: 510px; overflow: auto; margin:0 auto; left:40px; position:relative; z-index:2;"> <p> contents goes here </p> </div> can anyone please help me?

02-04-2006, 13:54	#4 (permalink)
smallbeer I Ain't Losing Any Sleep™ Join Date: Apr 2003 Posts: 5,205	why haven't you just got the news within #header2 (which I think is the grey box). Code: <div id="header2"> <div class="news container"> ... </div> </div> may I suggest you go and learn what you're doing?

02-04-2006, 21:21	#12 (permalink)
key_uk Senior Member Join Date: Mar 2006 Location: Shropshire Posts: 143	k thanks, im gonna give it a try now. did you put all the images as div backgrounds? if you did how did you do the content part as there is 3 images, how can I put them 3 images in one background? im im really confuessed Last edited by key_uk : 02-04-2006 at 22:04.

03-04-2006, 04:00	#13 (permalink)
smallbeer I Ain't Losing Any Sleep™ Join Date: Apr 2003 Posts: 5,205	Code: <div id="content"> <div id="main_content">news floated right</div> <div id="sub_content">menu floated left</div> </div> I merged the two column images into one and used it as a background for #content. This means that both columns with always look like they're the same height. http://www.lifeofsmallbeer.co.uk/cra...content_bg.gif the top image for the menu is a background of #sub_content, and the top image of the news box is a background of #main_content. your code was such a mess it was easier to redo it and hope you might gain from the new version.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

02-04-2006, 13:18	#2 (permalink)
Redge Registered User Join Date: Apr 2006 Posts: 33	Couldn't you just slice the layout and use an iframe or expanding tables?

02-04-2006, 13:39	#3 (permalink)
key_uk Senior Member Join Date: Mar 2006 Location: Shropshire Posts: 143	im not using tables and will i-frames validate?

02-04-2006, 16:54	#6 (permalink)
e.boal Loveable loser. Join Date: Apr 2006 Location: Newcastle Posts: 231	damn straight! smallbeers profile - year of birth 2000. that makes you 6. dont act like it - this is a "help me" thread!

02-04-2006, 20:17	#10 (permalink)
smallbeer I Ain't Losing Any Sleep™ Join Date: Apr 2003 Posts: 5,205	a 6 year old can do better in 10 minutes. measurements might be out but you get the idea. http://www.lifeofsmallbeer.co.uk/crap/butcher/ help yourself. you're welcome.

02-04-2006, 21:05	#11 (permalink)
datahound Spare Parts Join Date: Jan 2005 Location: Bracknell Forest Posts: 5,118

03-04-2006, 15:55	#14 (permalink)
LadynRed Senior Member Join Date: Mar 2006 Posts: 147	It would help a great deal if you didn't position everything on the page. Laid out correctly using source order and document flow it should not be necessary to position every single div.

03-04-2006, 19:54	#15 (permalink)
key_uk Senior Member Join Date: Mar 2006 Location: Shropshire Posts: 143	hello again, Thanks alot smallbeer you have been a great help, one last thing I see you have used this in your code: background: url('content_bg.gif') repeat-y; background: url('bar2.jpg') no-repeat bottom left; background: url('header3.jpg') no-repeat top left; what do these do and mean, thanks key_uk

04-04-2006, 09:53	#17 (permalink)
key_uk Senior Member Join Date: Mar 2006 Location: Shropshire Posts: 143	ok cheers smallbeer, thanks for all your help

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)