|
13-05-2008, 22:42 | #1 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
Thread Tools | |
Display Modes | |
|
|