Click to See Complete Forum and Search --> : like pyro's?
DanUK
12-26-2003, 06:53 PM
Hi there.
Hopefully you'll read this pyro! Or anyone else that can help it's much appreciated.
I'm working on a new design, of which is shown below, but I wondered like on the webdevfaqs.com site that pyro made, there is absolutely no tables, it's just CSS - i heard that this is the best way to do it, but how hard would it be for me to incorporate what i've done below into that type of thing?
Many thanks (as you'll see by the doctype i'm trying to stick to XHTML 1.0 Strict):
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
I've been meaning to create one myself, but haven't had time to do so yet, so those links will have to suffice for the time being.
Paul Jr
12-26-2003, 08:02 PM
I looked at this and I attempted to recreate the layout using CSS. But, I've run into a snag. So, as a learning experience, I was wondering if someone could take a look at the attached code.
The width of the three main content <div>s breaks in opera 7, and there seems to be a slight problem with the right border of the left <div> in Moz and NS.
There is a commented out style in the .css file, which, if left uncommented, fixes the opera problem, but screws it up for NS.
Since I ran into this problem, I figured I'd post it here and see if I can't learn anything.
DanUK
12-26-2003, 08:14 PM
thank you guys.
Paul, what can i say, wow, how long did it take to get it that near???
There's literally only a few things that aren't as it looked like when you view that html code i pasted, firstly the height of the different bits look different, but i guess that's because there's no content and whatnot - but not sure why the html seemed that way and that doesn't, and the way it doesn't stretch fully to the edge of the page allt eh way round, and no border.
But the rest looks fab, really, thank you so much.
EDIT: just added in the content, and the three columns as it were don't seem to go next to each other, they all are on the left, one beanth the other all squashed, WEIRD!!!
Paul Jr
12-27-2003, 06:30 AM
Originally posted by skydan
thank you guys.
Paul, what can i say, wow, how long did it take to get it that near???
There's literally only a few things that aren't as it looked like when you view that html code i pasted, firstly the height of the different bits look different, but i guess that's because there's no content and whatnot - but not sure why the html seemed that way and that doesn't, and the way it doesn't stretch fully to the edge of the page allt eh way round, and no border.
But the rest looks fab, really, thank you so much.
EDIT: just added in the content, and the three columns as it were don't seem to go next to each other, they all are on the left, one beanth the other all squashed, WEIRD!!!
body {
margin:0.6em;
padding:0;
border:2px solid #000;
}
Remove the code in red, and there will be no window padding or border.
Yeah, I read your post and then added some fake latin (winkwink (http://www.code4ever.com/free/fake_latin.htm)), and things went a bit screwy. I'll take a look at it, and see what I can do. In the mean time, I'm sure some talented, nice, helpful person might come along and give us a hand? ;);)
***EDIT***
Using the browsers which I have available at my disposal, I seem to only have a problem with the left, right, and center <div>'s acting as though they were absolutely positioned. They overlap the rest of the content below them.
Hmmm, this seems a bit too complex for my limiited CSS experience. The <div>'s have their width set as a percentage of the window, so, without any padding or margin they line up just fine; but when padding or margin is added, things go a bit wrong. I am quite sure there is an easier solution to making a layout exactly, or near enough, like the one you wanted using CSS, than the one I posted.
Heheh, still new and all, thought I'd give it a shot.
DanUK
12-27-2003, 01:08 PM
Hi there and thanks.
Hopefully someone will come and give their modifications too!
I managed to stop them all going on top of each other, probably not the right way, not sure what it was either!
Thanks again.
Paul Jr
12-27-2003, 09:59 PM
I had an epiphany while sitting in the chair with the massager running! I can't believe I didn't remember this.
To stop the content from over-lapping the bottom links, and the footer, add clear: both; to the the ID normlinks. That will make sure the bottom links and footer are pushed down by the content.
The only other problem is the thing about getting the width of all the content <div>'s to fit.
DanUK
12-28-2003, 06:32 AM
Ahh yes!!! Wonderful thank you!
Now there's just two things that aren't as they should've been, well actually 3, but I resolved one but I'm not sure if it's right.
Firstly, the "right" block has more information than the left, so that's fine, it seems to go all the way to the bottom with that line you gave to meet the normlinks, however the left doesn't, there's a white space between the end of the content in the left, and beginning of the normlinks, i wanted it to be that grey colour all the way down to meet the normlinks, is that possible?
Secondly, can I add a image to the right hand side of the left, and an image to the left hand side of the right, as this is a "checkerboard" affect so there's dots, if not - perhaps I could do this with a border or suchlike?
The thing that I resolved, but I'm nto sure whether I could've done this another way was that in the footer I wanted text on the left hand, and the right, but on the same "line" as it were. Using text-align for left and right worked, but they were not on the same "line" - so I used a table.
Once again, many many thanks for all this! :)
It's very much appreciated.
DanUK
12-28-2003, 09:25 AM
okay more problems.
I've attached the html and also the CSS.
You'll see when you make it smaller that the right goes out of line and ends up stacking next to left, when it should just be left - center - right at all times.
Not sure why this is occuring! Any ideas on this and the previous post?
Thanks in advance.
EDIT: Fixed the weird moving right, did this by:
right: float right
left :float left
center: no float
You can see how it looks now - because there's another problem, the right hand block is half way down the page! This is absolutely weird hehehe!
http://www27.brinkster.com/daniel4/
thanks.
DanUK
12-28-2003, 04:32 PM
okay sorted that problem.
The left/right need to be in the html BEFORE the center, as it needs to be in the sequence of the floats before a non-float, i.e. i couldn't have left (float), center (no float), right (float).
That's sorted that.
However... I wonder if someone can help me please. Can anyone let me know why on http://www27.brinkster.com/daniel4/index.html how i can get the left/right/center to "stretch" vertically all the way to normlinks div, and also why the center looks completely wrong, in IE in the wrong place, in my Konqueroer - there's a massive gap between the edge of center? Thanks.
Paul Jr
12-28-2003, 04:50 PM
Eep, I only test in IE 6, Moz 1.5, FB 0.7, Opera 7, and NS 7.1... So maybe some one could come in here and offer a bit o' help? ;) This seems to be a bit out of the small circle of my expertese.
DanUK
12-29-2003, 08:52 AM
Ok guys, made some small progress, and thank you Paul Jr for your efforts, it is indeed becoming a nightmare isn't it!?
I've managed to i believe some issues out from the original queries I posted, by changing the css and editing these two bits to:
Secondly, the problem still remains, that now the left block is "shooting through" the normlinks and div and not just "meeting" the normlinks div - how can I get the left/center/right to just nicely sit on top of the normlinks div at all times?
Any other suggestions that you can give me for this, as I'm sure more is wrong!? ar emuch appreciated.
Once again thanks.
As always, the updated is at http://www27.brinkster.com/daniel4/index.html
and:
http://www27.brinkster.com/daniel4/styles.css
DanUK
12-29-2003, 02:42 PM
guys please if anyone has another way of doing this or can spot the things i've done wrong, PLEASE help!
I've been at this for over 3 days now - and you know what it's like, you begin to stop seeing things - it's making my nerves bad now!!!
Thank you in advance.
Paul Jr
12-29-2003, 07:09 PM
The left side is shooting down over the footer div(s) because you have position:absolute; set in the leftside div. position:absolute; will remove the element from the document's normal flow, thus making the other elements react as if the div was not there at all.
DanUK
12-29-2003, 07:50 PM
Yes that's fixed that, thank you.
So what remains is, getting the left/center/right sitting nicely on the normlinks div at all times so that grey continues all the way down the side...
Getting somewhere?
Thanks again!!!
EDIT: Sorry, forgot to mention, it's all up at www27.brinkster.com/daniel4 :)
DanUK
12-30-2003, 07:50 AM
No ideas on this guys, please?
Maybe this idea is just not for CSS, as it works so well in just tables...
Any help is really much appreciated.
thanks.
Paul Jr
12-30-2003, 10:15 AM
If you check out this thread (http://forums.webdeveloper.com/showthread.php?s=&threadid=24278), then you might find an answer to your problem... or not, as the situation seems. :(
DanUK
12-30-2003, 10:59 AM
Hi Paul, thanks.
I've given up on this layout, so i've tried a new, and it's a lot more successful.
There's just one issue. If you check in the mani HTML forum there's a new thread for it.
I just want to say a massive thanks for your help throughout this one - and a happy new year. it's really appreciated. Hopefully this new problem with my new css/layout will be a bit simpler to fix!
Paul Jr
12-30-2003, 11:05 AM
Originally posted by skydan
Hi Paul, thanks.
I've given up on this layout, so i've tried a new, and it's a lot more successful.
There's just one issue. If you check in the mani HTML forum there's a new thread for it.
I just want to say a massive thanks for your help throughout this one - and a happy new year. it's really appreciated. Hopefully this new problem with my new css/layout will be a bit simpler to fix!
Alrighty ;).
pyro, I I took a look at that site...is there a way to keep it from looking all messed up when I resize my window?
Paul Jr
02-24-2004, 08:31 PM
Originally posted by AnacondaAndy
pyro, I I took a look at that site...is there a way to keep it from looking all messed up when I resize my window?
Looks fine to me.
AnacondaAndy
02-24-2004, 08:41 PM
When I make the window really small they overlap eachother....
pyro
02-24-2004, 08:48 PM
That's because it uses absolute positioning... Either way, it doesn't overlap until around 400-450 pixels or so, and who do you know that runs around with their browser sized that small? ;)
AnacondaAndy
02-24-2004, 09:00 PM
You have a good point there...lol :p ;) thanks....
Yippy! 100 post...lol ;)
webdeveloper.com
Copyright Internet.com Inc., All Rights Reserved.