Hi !!!
I have been wanting to post this topic for three weeks, but I never got the time.
I'm warning you, this is a MASSIVE thing...
I feel stupid, because I'm sure it's something quite simple. but...
So, as I don't like people asking the others to do everything for them, I can tell you I have already tried some things, but they didn't work. I can provide them, I just have to switch on my mac, but I think it's quite worthless.
I joined an image, with a lot of explanations on it, so it's quite heavy.
bascially, what I want to do is to have a layout which is compatible with lower and higher screen resolutions that's what it has been created for ( 1024 x 768 ).
What I was thinking of ( and trying to do without any success ) was to assign the body a background image ( the column and menu space on the left ) with a fixed position, and create a big div where I would put all the things, with a background image which would be : right repeat-y.
It didn't work fine. ( if I find the css, I'll provide it ASAP )
So, basically, if you feel like it, you can have a look at my image ( joined file ).
My website is here : Fake Page (<!-- m --><a class="postlink" href="http://enfantsdelo.free.fr/fake.php">http://enfantsdelo.free.fr/fake.php</a><!-- m -->)
edit : that's what I had done earlier. It's ugly, but I was just trying to get the two columns ( background ) and the scrollable div to display fine until I added things...
Test (<!-- m --><a class="postlink" href="http://enfantsdelo.free.fr/testdesign.php">http://enfantsdelo.free.fr/testdesign.php</a><!-- m -->)
For the css, ( I have three of them, as you can see ), the one for the positioning of things is css.css
You can use the one included in the test page. css (<!-- m --><a class="postlink" href="http://enfantsdelo.free.fr/csstest.css">http://enfantsdelo.free.fr/csstest.css</a><!-- m -->)nobody ???
You never want anything easy do you!
How long have we got to come up with a solution? Also what browsers does it need to be perfect in - it doesn't look like something that will be easy to get working in everything...Dave !!!!!
*hugs*
Hmmm... for me, it needs to be perfect in all browsers... ( yeah, I'm not the easy kind ).
And... I have exactly... 9 days !!!
I know, the time is very short...
But is it really soooo difficult ?
I was thinking of all those centered layouts, you know, where the center div shrinks according to the width of the page...
I mean, with tables, it would be easy to do, but of course, I don't want to use divs...Your layout would be easy without the scrollable div... with it it becomes just a little harder... lol
I'm giving it a go on my other machine, so I'll let you know what I find...Hi Ness
Could you possibly zip the source files for us? I'm losing files when I save it.Yes, of course !
which files do you want ? The crappy try I've done, or the files for the real website with the 300 lines long css ???
Strange that you're losing the files... O__olol
preferably the originals, but really speaking I just need the graphics and the menu css...all that ???
mm...
Ok, I don't have them on my computer ( I'm on the mac ) but I'll try to Download them...
You like the orange version, if I remember ???
I'll give you the map.php page, as well as the images, the three css ( the inner css, the css for the design, and the css for the colors )...
1 minute...ok, so here it is. I modified it so that you wouldn't have to deal with my php switcher on top of the rest...
The images are all ( or should all be ) in the folder named 3.
You miss plus.gif and minus.gif, but those are not important at all...
Basically, they look like this .: and this :.
Thanks a lot, Dave !!! ( try to make something I can understand... )
edit : I almost forgot to give you the two images I was thinking of using for the new version of the site ( so that you can put one on the left, one on the right, and the rest as a background color... they are called test1.gif and test2.gif )lol ok Ness
The preliminary findings of the executive committee will be released in the next 6 to 12 hours... lolyou know what, Dave ? You're really a sweetheart !!!!Shh! Don't tell anyone - it's a secret...
So umm... I've managed the layout to be sort of what you want, but I'm having a few problems integrating your menu, news etc back in...
I've attached a zip file of the working layout (ie6, 5.5, Firefox 0.7, Opera 7.2, haven't tried anything else.)
However... As I'm altering things I'm making the stylesheets in my own way, which may not match your stylesheet switcher, so I guess I need to bring it back for you to look at...
Also, at some resolutions, when the menu expands it will go underneath the news scroller, which could be a problem.
So if you take a look at it, perhaps you can then tell me how your stylesheet switcher works, so I can modify the styles to their appropriate stylesheets.
Alternatively I could explain how the layout works and you could then have a go at finishing it. What would you rather do? How rushed are you for this deadline?Update: See new zip file.
I've done the bottom roundels and the right graphics.
Edit: How does your menu and news scroller work? i.e. where do I find the appropriate styles?Dave !!!
I hope you didn't spend all night on it !!!
Thanks a lot for the page, it's cool !!!!
I think you've already done too much for me... Explain me quickly which changes you made, and I'll finish it myself...
You've done the hardest part !!!
I still have to study that a bit harder to know how you did it, but... waooo, it's working fine !!! ( the scrollable div is not scrollable anymore in IE for mac, but I might be able to fix that... )
Thanks thanks thanks !!! ( you already were on my website's thank you page, but I'll definately write something more just next to your name !!! )
You deserve a really big hug !!!Umm, actually about an hour, but Dan took over our internet pc, so I couldn't upload it for you...
I'll come round to collect the hug later lol
So, the page is now made of a number of blocks.
body and html have height 100% as part of the 100% height hack.
#left is the menu, and it is the block that occupies from the left to 277px, absolutely positioned so it doesn't affect anything else.
#right is the right version and contact things, absoutely positioned from the top right.
#head is height 20%, but it flows in the document body to push #center downwards.
#center has left and right margins to clear the left and right borders, but no width, so it expands to fill the space between them. #center has height 60%.
#footer slots in below it - because all the divs are block level elements they sit underneath each other, so the only three in the document flow are #head, #center and #footer.
#news is absolutely positioned from the bottom left.
The roundels in #footer are centered, and then have margins left and right of 3%, so they gradually expand as the width increases, but not quite perfectly.
Umm I can't think of anything else, but ask if you have any queries...This link <!-- m --><a class="postlink" href="http://www.l-c-n.com/IE5tests/overflow/">http://www.l-c-n.com/IE5tests/overflow/</a><!-- m --> might help for your ie5 mac problems. I did research it a while ago with someone, so I'll look for the thread, but I don't think our solution is any use here...Simple question : does the mainpage also have a scrollbar on the pc, or is it just my mac going crazy again ? Because on FF and Safari, I have a scrollbar showing, and the news not in view, far down the page... I have wondering if that was due to the positionning...Yes - if you change it to 75% from the top then it works.Thanks a lot !!!
I don't think I'll have time to do anything before tomorrow evening, but I'll try to get at it ASAP !!!!
Thanks thanks thanks !!!
( and very soon, I'll be posting in the website review section... I hope you'll pass by !!! )I will if you send me a link lolDave, another problem has shown up ( sorry... ). If I set the page to 75%, the layout is all messed up, and most of all, the little bar on the right is not going to the end of the page... It's stopping right where the center div stops...
I wonder if that can be solved... Maybe with the faux columns strategy ?Never mind, Dave, I found a way to do it !!!
Now, I need to redo everything, and base it all on the new layout... pfff.... I'm happy I used php...
6 files to do, and that's all...
But of course, I need to redo the css...
BTW, I didn't know right and bottom were standards attributes for positioning...
I have been wanting to post this topic for three weeks, but I never got the time.
I'm warning you, this is a MASSIVE thing...
I feel stupid, because I'm sure it's something quite simple. but...
So, as I don't like people asking the others to do everything for them, I can tell you I have already tried some things, but they didn't work. I can provide them, I just have to switch on my mac, but I think it's quite worthless.
I joined an image, with a lot of explanations on it, so it's quite heavy.
bascially, what I want to do is to have a layout which is compatible with lower and higher screen resolutions that's what it has been created for ( 1024 x 768 ).
What I was thinking of ( and trying to do without any success ) was to assign the body a background image ( the column and menu space on the left ) with a fixed position, and create a big div where I would put all the things, with a background image which would be : right repeat-y.
It didn't work fine. ( if I find the css, I'll provide it ASAP )
So, basically, if you feel like it, you can have a look at my image ( joined file ).
My website is here : Fake Page (<!-- m --><a class="postlink" href="http://enfantsdelo.free.fr/fake.php">http://enfantsdelo.free.fr/fake.php</a><!-- m -->)
edit : that's what I had done earlier. It's ugly, but I was just trying to get the two columns ( background ) and the scrollable div to display fine until I added things...
Test (<!-- m --><a class="postlink" href="http://enfantsdelo.free.fr/testdesign.php">http://enfantsdelo.free.fr/testdesign.php</a><!-- m -->)
For the css, ( I have three of them, as you can see ), the one for the positioning of things is css.css
You can use the one included in the test page. css (<!-- m --><a class="postlink" href="http://enfantsdelo.free.fr/csstest.css">http://enfantsdelo.free.fr/csstest.css</a><!-- m -->)nobody ???
You never want anything easy do you!How long have we got to come up with a solution? Also what browsers does it need to be perfect in - it doesn't look like something that will be easy to get working in everything...Dave !!!!!
*hugs*
Hmmm... for me, it needs to be perfect in all browsers... ( yeah, I'm not the easy kind ).
And... I have exactly... 9 days !!!
I know, the time is very short...
But is it really soooo difficult ?
I was thinking of all those centered layouts, you know, where the center div shrinks according to the width of the page...
I mean, with tables, it would be easy to do, but of course, I don't want to use divs...Your layout would be easy without the scrollable div... with it it becomes just a little harder... lol
I'm giving it a go on my other machine, so I'll let you know what I find...Hi Ness
Could you possibly zip the source files for us? I'm losing files when I save it.Yes, of course !
which files do you want ? The crappy try I've done, or the files for the real website with the 300 lines long css ???
Strange that you're losing the files... O__olol
preferably the originals, but really speaking I just need the graphics and the menu css...all that ???
mm...
Ok, I don't have them on my computer ( I'm on the mac ) but I'll try to Download them...
You like the orange version, if I remember ???
I'll give you the map.php page, as well as the images, the three css ( the inner css, the css for the design, and the css for the colors )...
1 minute...ok, so here it is. I modified it so that you wouldn't have to deal with my php switcher on top of the rest...
The images are all ( or should all be ) in the folder named 3.
You miss plus.gif and minus.gif, but those are not important at all...
Basically, they look like this .: and this :.
Thanks a lot, Dave !!! ( try to make something I can understand... )
edit : I almost forgot to give you the two images I was thinking of using for the new version of the site ( so that you can put one on the left, one on the right, and the rest as a background color... they are called test1.gif and test2.gif )lol ok Ness
The preliminary findings of the executive committee will be released in the next 6 to 12 hours... lolyou know what, Dave ? You're really a sweetheart !!!!
Shh! Don't tell anyone - it's a secret...So umm... I've managed the layout to be sort of what you want, but I'm having a few problems integrating your menu, news etc back in...
I've attached a zip file of the working layout (ie6, 5.5, Firefox 0.7, Opera 7.2, haven't tried anything else.)
However... As I'm altering things I'm making the stylesheets in my own way, which may not match your stylesheet switcher, so I guess I need to bring it back for you to look at...
Also, at some resolutions, when the menu expands it will go underneath the news scroller, which could be a problem.
So if you take a look at it, perhaps you can then tell me how your stylesheet switcher works, so I can modify the styles to their appropriate stylesheets.
Alternatively I could explain how the layout works and you could then have a go at finishing it. What would you rather do? How rushed are you for this deadline?Update: See new zip file.
I've done the bottom roundels and the right graphics.
Edit: How does your menu and news scroller work? i.e. where do I find the appropriate styles?Dave !!!
I hope you didn't spend all night on it !!!
Thanks a lot for the page, it's cool !!!!
I think you've already done too much for me... Explain me quickly which changes you made, and I'll finish it myself...
You've done the hardest part !!!
I still have to study that a bit harder to know how you did it, but... waooo, it's working fine !!! ( the scrollable div is not scrollable anymore in IE for mac, but I might be able to fix that... )
Thanks thanks thanks !!! ( you already were on my website's thank you page, but I'll definately write something more just next to your name !!! )
You deserve a really big hug !!!Umm, actually about an hour, but Dan took over our internet pc, so I couldn't upload it for you...
I'll come round to collect the hug later lol
So, the page is now made of a number of blocks.
body and html have height 100% as part of the 100% height hack.
#left is the menu, and it is the block that occupies from the left to 277px, absolutely positioned so it doesn't affect anything else.
#right is the right version and contact things, absoutely positioned from the top right.
#head is height 20%, but it flows in the document body to push #center downwards.
#center has left and right margins to clear the left and right borders, but no width, so it expands to fill the space between them. #center has height 60%.
#footer slots in below it - because all the divs are block level elements they sit underneath each other, so the only three in the document flow are #head, #center and #footer.
#news is absolutely positioned from the bottom left.
The roundels in #footer are centered, and then have margins left and right of 3%, so they gradually expand as the width increases, but not quite perfectly.
Umm I can't think of anything else, but ask if you have any queries...This link <!-- m --><a class="postlink" href="http://www.l-c-n.com/IE5tests/overflow/">http://www.l-c-n.com/IE5tests/overflow/</a><!-- m --> might help for your ie5 mac problems. I did research it a while ago with someone, so I'll look for the thread, but I don't think our solution is any use here...Simple question : does the mainpage also have a scrollbar on the pc, or is it just my mac going crazy again ? Because on FF and Safari, I have a scrollbar showing, and the news not in view, far down the page... I have wondering if that was due to the positionning...Yes - if you change it to 75% from the top then it works.Thanks a lot !!!
I don't think I'll have time to do anything before tomorrow evening, but I'll try to get at it ASAP !!!!
Thanks thanks thanks !!!
( and very soon, I'll be posting in the website review section... I hope you'll pass by !!! )I will if you send me a link lolDave, another problem has shown up ( sorry... ). If I set the page to 75%, the layout is all messed up, and most of all, the little bar on the right is not going to the end of the page... It's stopping right where the center div stops...
I wonder if that can be solved... Maybe with the faux columns strategy ?Never mind, Dave, I found a way to do it !!!
Now, I need to redo everything, and base it all on the new layout... pfff.... I'm happy I used php...
6 files to do, and that's all...
But of course, I need to redo the css...
BTW, I didn't know right and bottom were standards attributes for positioning...