html/css trouble

HollyThirtyFive · 13-05-2008, 22:42

Hi,

I've started teaching myself html/css and have struck a problem! I wanted to create an orange background with white content background in the middle.
However like the jpeg shows the border up until the body main div. (i may be talking gobbledy gook lol I've only been learning a week!)

(there is text in the black boxes but i've blocked it for now as its only draft ramblings!)

My codes are:
css:

html:

I want to make the borders go all the way to the bottom of the page. But can't figure out what needs changing!

Help very much appreciated

HollyThirtyFive · 13-05-2008, 22:53

Also this is my original mock up made on PS before I even attempted Dreamweaver so its very rough, but gives some idea of what I want :-)

Mark · 13-05-2008, 23:02

Had a bit of bother reading your code because it's so small, but got there in the end.

I can't remember if the background-color attribute applies to the margins of a div. I suspect it probably does. The easiest solution I can come up with (though not necessarily the most "correct" one) is to specify a border for the wrapper div, and specify a colour as well.

Start with something like:

border: 10px solid #FF6600;

and adjust from there.

Another option is to use two divs, one inside the other. Specify a smaller width for the inner one and put the background colour there.

PS - I'm personally not particularly keen on fixed width divs (even though I used them on my own site). They assume a particular monitor resolution which your viewer may not have. If you have to use them - and you often do, then I believe the current best option is to go for something that'll fit on 1024x768.

iCraig · 14-05-2008, 00:34

How wide (in pixels) is your header? Header being the white box containing the logo and menu etc.

Apply that width to your "Main" DIV.

HollyThirtyFive · 14-05-2008, 08:22

When I changed the width of the main to 1200 px which is the length of the header. This happened:

hmm

Thanks for the help!

Mark · 14-05-2008, 08:50

Changing the width of the "main" div won't help you, because it's the "wrapper" div that's causing the problem with the background. In fact, the "main" div has to be less than 930px wide - otherwise it'll float below the picture on the right as you've found out.

You can either try the border suggestion from my post, or this:

Add another div - call it "content" (or somesuch). Make it 1100px wide. Move the background-color setting from the "wrapper" div to this new div. In the HTML code, add this new div so that is contains both the existing "photo" and "main" divs, but not the "header" div. I'm not sure whether or not it'll need to contain the "navigation" div as well - experiment.

iCraig · 14-05-2008, 10:27

Ah, didn't spot the wrapper DIV. Mark's second solution is what I'd try.

HollyThirtyFive · 15-05-2008, 08:20

I tried them both but when I tried marks second suggestion the whole background went orange hmm so I think I will start again from scratch incase there is a tiny error somewhere. I'm following a book about design and the website in there has a similar border to what I'm aiming for except when I did it nothing happened lol

Davey_Pitch · 15-05-2008, 08:54

Any chance you could post up the html and css files? If I could play around with them I'm sure I could get it working.

HollyThirtyFive · 15-05-2008, 13:09

That would be cool :-) thanks! I'll do it when I get home later!

I've gone and got myself confused now by editing things and cant get it back to the orignal image

But if you can fiddle around with it that will be great!

13-05-2008, 22:42	#1
HollyThirtyFive Tinkerbell Join Date: Jul 2006 Location: Burgess Hill, West Sussex Posts: 743	html/css trouble Hi, I've started teaching myself html/css and have struck a problem! I wanted to create an orange background with white content background in the middle. However like the jpeg shows the border up until the body main div. (i may be talking gobbledy gook lol I've only been learning a week!) (there is text in the black boxes but i've blocked it for now as its only draft ramblings!) My codes are: css: html: I want to make the borders go all the way to the bottom of the page. But can't figure out what needs changing! Help very much appreciated __________________ Debut album "Waking Up" Avaliable on all iTunes stores, Amazon Mp3 Special Hand Made Ltd Edition: £10 via Paypal

13-05-2008, 22:53	#2
HollyThirtyFive Tinkerbell Join Date: Jul 2006 Location: Burgess Hill, West Sussex Posts: 743	Also this is my original mock up made on PS before I even attempted Dreamweaver so its very rough, but gives some idea of what I want :-) __________________ Debut album "Waking Up" Avaliable on all iTunes stores, Amazon Mp3 Special Hand Made Ltd Edition: £10 via Paypal

13-05-2008, 23:02	#3
Mark Screaming Orgasm Join Date: Jul 2006 Location: Newbury Posts: 15,194	Had a bit of bother reading your code because it's so small, but got there in the end. I can't remember if the background-color attribute applies to the margins of a div. I suspect it probably does. The easiest solution I can come up with (though not necessarily the most "correct" one) is to specify a border for the wrapper div, and specify a colour as well. Start with something like: border: 10px solid #FF6600; and adjust from there. Another option is to use two divs, one inside the other. Specify a smaller width for the inner one and put the background colour there. PS - I'm personally not particularly keen on fixed width divs (even though I used them on my own site). They assume a particular monitor resolution which your viewer may not have. If you have to use them - and you often do, then I believe the current best option is to go for something that'll fit on 1024x768. Last edited by Mark; 13-05-2008 at 23:08.

14-05-2008, 00:34	#4
iCraig iCustom User Title Join Date: Jul 2006 Posts: 2,250	How wide (in pixels) is your header? Header being the white box containing the logo and menu etc. Apply that width to your "Main" DIV. __________________

14-05-2008, 08:22	#5
HollyThirtyFive Tinkerbell Join Date: Jul 2006 Location: Burgess Hill, West Sussex Posts: 743	When I changed the width of the main to 1200 px which is the length of the header. This happened: hmm Thanks for the help! __________________ Debut album "Waking Up" Avaliable on all iTunes stores, Amazon Mp3 Special Hand Made Ltd Edition: £10 via Paypal

14-05-2008, 08:50	#6
Mark Screaming Orgasm Join Date: Jul 2006 Location: Newbury Posts: 15,194	Changing the width of the "main" div won't help you, because it's the "wrapper" div that's causing the problem with the background. In fact, the "main" div has to be less than 930px wide - otherwise it'll float below the picture on the right as you've found out. You can either try the border suggestion from my post, or this: Add another div - call it "content" (or somesuch). Make it 1100px wide. Move the background-color setting from the "wrapper" div to this new div. In the HTML code, add this new div so that is contains both the existing "photo" and "main" divs, but not the "header" div. I'm not sure whether or not it'll need to contain the "navigation" div as well - experiment.

14-05-2008, 10:27	#7
iCraig iCustom User Title Join Date: Jul 2006 Posts: 2,250	Ah, didn't spot the wrapper DIV. Mark's second solution is what I'd try. __________________

15-05-2008, 08:20	#8
HollyThirtyFive Tinkerbell Join Date: Jul 2006 Location: Burgess Hill, West Sussex Posts: 743	I tried them both but when I tried marks second suggestion the whole background went orange hmm so I think I will start again from scratch incase there is a tiny error somewhere. I'm following a book about design and the website in there has a similar border to what I'm aiming for except when I did it nothing happened lol __________________ Debut album "Waking Up" Avaliable on all iTunes stores, Amazon Mp3 Special Hand Made Ltd Edition: £10 via Paypal

15-05-2008, 08:54	#9
Davey_Pitch I iz speshul Join Date: Jun 2006 Location: Liverpool Posts: 6,296	Any chance you could post up the html and css files? If I could play around with them I'm sure I could get it working. __________________ Our deepest fear is not that we are inadequate. Our deepest fear is that we are powerful beyond measure. It is our light, not our darkness, that most frightens us. Your playing small does not serve the world. There is nothing enlightened about shrinking so that other people won't feel insecure around you. We are all meant to shine as children do. It's not just in some of us; it is in everyone. And as we let our own lights shine, we unconsciously give other people permission to do the same. As we are liberated from our own fear, our presence automatically liberates others.

15-05-2008, 13:09	#10
HollyThirtyFive Tinkerbell Join Date: Jul 2006 Location: Burgess Hill, West Sussex Posts: 743	That would be cool :-) thanks! I'll do it when I get home later! I've gone and got myself confused now by editing things and cant get it back to the orignal image But if you can fiddle around with it that will be great! __________________ Debut album "Waking Up" Avaliable on all iTunes stores, Amazon Mp3 Special Hand Made Ltd Edition: £10 via Paypal