Menu
Community /Pin to ProfileBookmark
www.glish.com/css/
http://www.alistapart.com/ (search the articles ?)
http://www.csszengarden.com/
http://www.roderickhoward.com/cssdirectory/ <-- the CSS directory, very useful[/font][URL=http://cheers-sendai.com/4f2c.htm]this[/URL] ?
The CSS is in the page (source).
I hope this helps.
(I'm sure there are more efficient ways to do it by the way - by using classes or whatever - but this works fine for me).
oh wow, you guys are superb..
where did you find this? it's almost exactly what I had in mind..
the only thing left to do is to figure out what all the tags mean in the source..
some pointers would be greatly appreciated here.
but otherwise thanks a bunch for finding this!
edit:
btw.. i know what a static setting is..but what's the difference between elastic and fluid?[font=trebuchet ms]Elastic changes based on font size; fluid or liquid changes based on screen resolution/browser size.[/font]
in that case i would probably be going for fluid/liquid..
i'm trying to design this to maximize the use of a 1024x768 resolution..
dreamweaver reports that a maximized window @ 1024x768 is 955x600 so i'm using that as my maximum dimensions.
i myself use a much higher resolution but i know many still use 1024x768 so i'm trying to get it to fit on a 1024x768 screen, yet still look fine on higher resolutions.
i was thinking about making every width static and leave the height of the 4 columns between the header and footer flexible.
ie;
header: 900 x 100
left column: 150 x variable
middle-left: 300 x variable
middle-right: 300 x variable
right column: 150 x variable
footer: 900 x 50
something like that..
edit 2:
just made up a quick diagram in MS paint..
here's what i'm trying to do.
[IMG]http://www.darkscythe.com/images/webplan1.JPG [/IMG][url=http://www.vladdy.net/Demos/ElementSizing.html#header]choose the most efficient layout type[/url] .[/font]
true but with the site's purpose, it's a blog
if i made it fit an 800 resolution i wont be able to see any content.. the calendar alone takes up approximately 170 pixels, and i want to mirror it on the other side so it'll look neat. then the middle gets divided up into two sections.. there's no room for content.. 1024 is the minimum i can go =/[url=http://www.mezzoblue.com/]Dave Shea's blog[/url] gave 800x600 screens horizontal scrollbars at one time, though he has sized it down a bit since.[/font]i am trying to avoid the horizontal scrollbars.. but it can't be helped at 800x600 anyway, so i might as well optimize it for the next standard resolution.
at least that's what i believe.. higher will be fine, but 1024 is what might be "perfect"
800 is really hard to get down to, at least with the content that i'm trying to fit.
regarding his blog, he's the only poster, thus he can size it down a bit.
i'm making a dual-post blog for me and my gf, so we have each our own column. i considered consolidating our columns into one but it gets really confusing which post is who's. yes, i have many more plans for what comes after this, but this is just the main 'index' page, so to speak..
i'll have fun asking around once the time comes for me to do that, cuz i want to set each entry as just a date and when the user clicks it, the drops down the box with all the titles of every entry posted on that date, with a link to open a specific entry.
but that comes later.
for now, yes, this is just a page to display everything.. i'll have links to each individual entry and make it all nice and pretty lol
(working with pMachine Pro 2.3 if anyone knows about it) Hey.
I'm glad you liked the layout. I didn't actually find it - I wrote it just for you (I like a challenge).
For what you're doing I think something fluid would be good - ie. use percentages like I did there.
If you have any specific questions about the tags, feel free to ask. Most of them are pretty much self-explanatory though.
Cheers for now - and good luck with your site. oh really?
wow thanks a bunch, at least it tells me what i'm doing is possible.
(for some reason most ppl think everything i do is impossible.. such was the case with my javascript, but i made it work lol)
anyway, i have to get going to a birthday party for a coworker, but i'll be back in a few hours to work on the coding again.. i'm new to CSS, so i'm trying to take in everything as quickly as possible (ie; reading tutorials on 4 different sites)
if you're still available i'll try to contact you about some modification to that code, but as of now it's looking very good.
just some explanations on it and i think i'll be fine.
btw, has anyone looked at the image? that might help a bit to visualize what i'm trying to make..
thanks a bunch everyone, i'll check back in a bit
while i do get most of it,
banner, left, text, centre1, centre2, right and foot, there were a couple i didn't know about and wondered why they were there.
why do you have rules set for
"html", "body", "* html #text" and "* html #foot" ?
other than that, it appears u made pretty heavy use of the z-index to get the layers correct..
what does the display: inline; do?
If you look at the structure, there are two divs ('centre1' and 'centre2') inside another ('text'). Without 'display:inline' they'd be one on top of the other (first 'centre1' then 'centre2') rather than side-by-side.ohh i see..
i'm trying to see how everything's arranged tho, so i can try to use this as a reference for when i make other layouts on my own later, and dont have to keep asking people..
if it's not too much trouble, could you give a quick explanation of how you set each box up?
I get the starting points for the left 0 and top 0, but after that i get kinda lost, as in where to start the next boxes.
thankies I'll probably get in trouble here (I'm not 100% clear how or why things work myself - it's a lot of trial and error for me. I think there are lines in that page that really don't need to be there) but I think the barebones of that code is here :
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
html {
height : 100%;
max-height : 100%;
overflow : hidden;
}
body {
height : 100%;
max-height : 100%;
overflow : hidden;
}
The max-height and hidden overflow of the html and body allow us to keep everything on the screen (if that makes sense). It's very useful if you're using absolute positioning (as we are here).
#banner {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 75px;
z-index : 5;
}
I think the banner code is obvious. I think the z-index needs to be higher than that of the text.
#left {
left:0%;
top:75px;
width:10%;
position:absolute;
z-index:3;
}
The z-index is higher than the z-index of the footer because I thought you wanted the footer to be nestled between the side frames. This way you get that effect.
#text {
position:absolute;
top:75px;
bottom:50px;
width:80%;
left:10%;
z-index:2;
overflow:auto;
}
* html #text {
height:100%;
top:0;
bottom:0;
border-top:75px solid #fff;
border-bottom:50px solid #fff;
z-index:2}
To be honest, I forget exactly what's going on here. The second part is for the benefit of IE - I know that much - without it, it'll work in Firefox but not IE. The 'top' value in the #text part should be the same as the 'border-top' part in *html #text.
#centre1 {
left:5%;
width:43%;
position:absolute;
display:inline;
z-index:2;
}
#centre2 {
left:52%;
width:43%;
position:absolute;
display:inline;
z-index:2;
}
These two 'centre' divs are inline (display:inline) so that they stand next to each other inside the 'text' div (see the html below). The percentages are based on the parent div ('text') as opposed to the page/body/whatever.
#right {
left:90%;
top:75px;
width:10%;
position:absolute;
z-index:3;
}
Same thing here as in the 'left' div.
#foot {
position:fixed;
bottom:0px;
left:10%;
width:80%;
height:50px;
z-index:2;
}
* html #foot {
position:absolute
}
This is one I'm not 100% sure about - I've had problems with the whole 'position:fixed' thing. With it I can 'absolutely' position things at the bottom of the browser screen, but without I have all sorts of problems (maybe someone could explain the theory to me...(?)). 'position:fixed' is not recognised by IE so we need the extra part.
</style>
</head>
<body>
<div id="banner">header</div>
<div id="left">left</div>
<div id="text">
<div id="centre1">centre1</div>
<div id="centre2">centre2</div>
</div>
<div id="right">right</div>
<div id="foot">footer</div>
</body>
</html>
I hope this makes sense and I welcome criticism (and help) from those in the know...
Cheers for now.
i took my research and tried to make something of it.
I decided not to go with the concept of the page resizing along its *width*. Simply because, it wouldn't look the same across different resolutions.
So i wanted to make a set 940px width page, but the height would vary depending on the resolution of the browser. Then i thought, well since it doesn't take up the whole screen, everything would be lopsided to the left, so I tried to center it as well..
lo and behold, it didn't work.. after some tangling it started to look like something but i really think i broke a couple dozen webmastering laws with the code on that page lol.
Anyway.. here's my code.. i hope someone can help me find the problem cuz i'm running out of solutions with my limited knowledge on CSS.
btw, i kept all the code in 'long' format so I could leave myself a comment after every statement about what each tag did.
a couple notes..
ignore the background color in every element, i just added them so i could see what dreamweaver was trying to show me.
also, i defined a p element at the end because the text would not change color (in the kuraibox and kimochibox divs) no matter what i did. in fact, even that p element didnt change the font color..
make any changes you want, but i just want to know what is wrong with this..
edit:
i'm previewing this in both firefox 0.9.2 and IE 6Could you do me a favour and post a link to a page that uses this code?
lol thanks a bunch BonRouge, you're helping me quite a bit
[URL=http://www.darkscythe.com/styletest.htm]Test Page[/URL]
that's the page i was using..
the image in the banner div is 940x100, the two images on the sides are each 150px wide. i forget how tall they are tho.. i think 768.
edit: yeah i'm forgetting a bunch of things..
if you want a general layout of the div positions, i'll make a quick sketch.
hmm.. i'm still trying to fix this..
from the above sketch i'm using the div "container" to set a fixed width of 940px for everything on the page. trying to center it is another problem, but should every div inside that container be inline?
i'm not too sure how to use the inline/block display properties.
It seems we have the same problem (see my post[URL=http://www.webdeveloper.com/forum/showthread.php?s=&threadid=45921]here[/URL] ) - maybe because it's a case of the blind leading the blind.
Good luck.
Cheers.
(I'll let you know if I find an answer, but I'm not feeling very hopeful).
Do this :
It works - I tried it on your page.
I did something very similar (different numbers) to my page too.
Cheers,
Steve
(By the way - what's the Japanese stuff about?)
most of it works now (refresh the test page to see)
but..it only seems to work in firefox.. it's centered in IE but the textbox div and the two column divs inside it do not display.. i wonder why?
also, if you check my test page now there's an odd problem..
if u scroll down, the purple and green boxes suddenly end.. i know it's because i absolutely positioned the div, but would it affect anything major?
other than that, great work.. now to "debug" it to work in a buggy browser *cough* IE *cough*
edit:
lol, well i thought u'd know since ur in japan XD
anyway, chotto matte is similar to wait a minute
and uhm.. this blog is going to be shared with me and my gf, so i let her handle images while i do the coding..
i asked for a quick test image for the header and she kept saying wait so there lol.I hadn't actually checked IE - stupid, stupid, stupid...
Well, I've looked and erm.. I'm kind of stumped - as I said, I did that with mine and it worked (in IE too!). The structure of our pages are quite similar, so I don't know what the problem is.
...
(and yeah - I understood the Japanese. I just wondered why there was so much of it (pictures, div names...) are you Japanese?)
chinese with a big interest in japanese XD
and anime..yeah ?
anyway, let me try doing a source on your page now..
I didn't put any of those IE-specific codes you ahd in the original page, i'm not sure if that's it or not..
but i know there are some differences.. i'll try to figure them out.
help is appreciated of course ?
lol but yeah i'll be sure to give you guys some credit when this is donenow that i'm trying it..
it remains forever broken in IE (everything inside the textbox won't display)
and.. whether IE or mozilla/firefox.. I can't control the font at all..
what could be causing this?
edit:
LOL, forget about the font thing.. stupid me, i was using the wrong code haha
i'm still used to html so i was using font-color.. as u all know this doesnt exist in css lol
anyway, besides the font, the page is still broken in IE..
it shows the four outer divs (header, left menu, right menu and footer) but doesn't display the actual content-containing divs..
stupid IE..
I mixed the code from my page with the code from yours, and I think you'll have no problem now.
[URL=http://www.cheers-sendai.com/chotto.htm]Check it out.[/URL]
i'm comparing our codes now and it seems about the only difference is the IE-specific code,
* html #footer
and
* html #text
the only question i have with your css is..
what are these two here for? are they left over from your code or shuold they be in mine for some reason? i'm looking around both the html and css and i see no references to these two classes you set:
.clear {clear:both;height:1px;overflow:hidden;}
.bold {font-size:1.5em; font-weight:bold;}
i'm gonna try merging some of this into my code, because I like the absolute values over percentages, but hopefully this'll work..
the other dumb thing is that the css validates as is.. but once i input the filter: alpha and -moz-opacity it doesnt validate anymore cuz those two are proprietary lol.
anyway, we're almost there.. thank you soo much lol XD
edit:
btw, why do you keep using border: 0 none inherit;? i've no idea what this does.. i thought if it was 0 u didnt hafta enter anything.. and in fact isn't it defualt 0? so u dont have to put that in..
i remove all the border tags except for the footer where i need it.. this is ok right?
As for the percentages - I just think they're easier to work with (cos they add up to 100 ? )- don't make a big difference though.
So yeah - glad to help. I'm like pretending to be one of those guys who knows what they're talking about. It's fun.
Šæ’£‚Á‚Ä
Steve
... and the borders - like I say, they're probably left over from something or other. I guess sometimes I just leave things in because I know the page works OK as it is so no need to worry. Taking all those border things out seems fine to me.
and i'm assuming i can safely remove the border tags too? since it's all 0 none inherit..
i'm gonna try adding the IE specific codes in now and test.. i'll post in a bit with my discoveries.
though, knowing my luck i'll prolly invent another problem or something lol. :rolleyes:
anyway i want to use absolute values because the page u made has a few quirks.. for one, the background image doesn't display in firefox.. it works fine in IE, but in IE, everything's positions are slightly off, so you see a small white bar at the bottom under the footer.
i'll see if I can correct it. ?Yeah - I didn't notice either of those things before - but then again, I was doing it in my lunch break so I was a bit... rushed.
editing right now.. hoping it'll work correctly so I can move on to bigger and better (and more complex.. ? ) codes..
i'm wondering if I should start asking about the code for the next phase of this construction lol
anyway, i'll be sure to give u some credit for helping me
edit:
gonan rewrite the test page in xhtml transitional.. we'll see if that helps or not.. also gonna try to force IE to go to 'standards' mode.Do this - take your background-image out of the body and put it into the #text part. Works a treat.
Edit : ... well, kind of - it means the picture shows up in both IE and Firefox. Unfortunately, they're at different heights.
One way to fix the white-gap problem (although I'm not sure if it's a good way) is to make the height of the container 101%. It works as far as I can see.
okay, here are my results.. and they don't look too happy ?
here's a summary of my findings:
i've changed a bit of my code to match urs.. i havent changed everything because ur code has some redundancies and some stuff i'm unsure about..
the main thing is.. while it *kind of* works in IE.. the problem is the scrollbar goes all the way to the bottom of the screen. that's at height: 100%
i dunno how to fix that..
second, i just noticed that altho it works in IE and shows up fine in firefox.. there's a problem with the scrolling.
in IE it scrolls fine, but in firefox..
the entire page *EXCEPT* for the footer scrolls a bit..
the only reason i can think of for the footer being the only one not moving is because you changed its position to fixed, and told IE to make it absolute..
ugh, i told ya with my luck i'd come up with some new problems..
altho they do seem a bit small.. at least we got the layout, we just need it to
a) display correctly in IE
and
b) work properly in firefox
gonna sleep now but gonna try some more methods tomorrow..
btw, i made a new page in XHTML (unfortunately uses a ton of <br /> tags cuz i was in a rush to make this on the train) and i believe it forces 'standards' mode in firefox and IE, which i think helps the box problem a bit.
if u need the new sources for both pages, leave me a message and i'll upload'em.
It validates as xhtml 1.0 strict and the css has no problems except for your scrollbars because they're IE things.
Anyway :[URL=http://cheers-sendai.com/chotto.htm]here[/URL] ya, it works perfectly fine in IE, but I can't scroll in firefox.. the whole page kinda scrolls instead, but just a little.. i can't scroll the text. at least not using the scrollbar.. i'm using my ibm laptop's scroll button i'd assume would be the same as a normal mouse's scroll wheel. i'm trying to fix it so it'll scroll in both. i'm pretty sure there's no way to change the scrollbar colors in firefox so this scrolling issue is the only problem i have left..
i guess i can try taking a screenshot if u can't see my problem. Maybe I saw what you were talking about. When I scrolled with the scroll wheel on my mouse the page moved a little. I found that my container was set to 101% height (though I don't remember why). I fixed that - look again - now nothing moves with the scroll wheel. The scroll wheel scrolls the page - the actual body - here, the body's set to 100% so it doesn't (or shouldn't) move. I think most people actually use a mouse and the scrollbars to scroll - that works fine with the page we have there. Of course, I could be wrong, but...
To be honest, I think that's the best I can do with your page - I really hadn't thought about people who didn't use... what is it - mouses? Mice? A mouse?
Erm... good luck finding an answer to that problem, because I have no ideas.
Cheers for now,
Steve
Edit : I just looked back a little and saw that the 101% container was to prevent a space at the bottom of the page, but now, if you look, there isn't one so it's OK.
for now let's just say we can't scroll in firefox..
but i have another really annoying issue.
i'm practically copying ur entire code, but for some reason the scrollbar in IE refuses to work like the one in your page.
your scrollbar ends in the right place -- right above the footer.
mine, however, even after copying your entire code, refuses to do that and insists on extending to the bottom of not the browser, but the screen, no matter what i do.
i've assigned a bottom value, a border value, a padding value, a margin value, evne tried absolutely positioning it, nothing works. it's as if in my code, even tho it's 99% copied off of yours, refuses to end the scrollbar in the right place.
the one thing i've fond that does change it is the height: 100% thing, but I can't get that accurate enough to use.
edit:
oh geez.. i feel dumb now ~_~
i did a full comparison between our codes and pinpoint the exact problem..
turns out i accidentally deleted the first line somehow in the XHMTL declaration.
i inserted it back in, and the problem was solved in IE.
firefox however, remains a mystery to me, as far as making the *page* not scroll and instead having the *text* scroll..
the page works perfectly in IE now, thanks
i've thrown in the towel and accepted that scrolling via the scroll wheel will not work in firefox / mozilla, so i'll leave that alone
as for the rest of the page moving around when u try to use the scroll wheel..
i've come up with a temporary solution.. well, temp as in it'll be like this until i find a correct solution..
in the beginning we specified for html height and max-height of 100%
i noticed the reason firefox scrolled was because it seemed to believe there was extra space being alloted outside of the viewable area, and the footer didnt move cuz it was fixed.
my solution was this:
the rest of the code was unaltered, but setting it to 99% height removed the problem and it still displays just fine in IE.
who knows maybe this might help someone else who's having this problem..
Good CSS Layout sites?
i’m sure this question has been asked over and over again and i’ve done a bit of research, but nothing quite fits what i need.
it’ll be a bit much for me to ask u guys for a complete code, so instead i’ll ask if there are any good sites that explains what’s needed in the css layout code. most of the sites i’ve seen show u a 3 column page maybe with a top row and then simply show u the code for it.
I’m trying to design a dual-post blog, which means i have to split the center into 2 columns, hence i need a 4-column layout.
in addition to 4 columns, i need a top row, and either a bottom row or a bottom frame nestled between the left and right frames. there’s a couple more details but u get the idea, and no tutorial i’ve googled has yielded a good code for me to edit..
case in point: i’ve no idea what codes to use for designing and css layout and would be grateful if someone could point me to a few pages so i can get this quite complicated layout off the ground.
thanks
Sign in
to post a comment41 Comments(s) ↴
0
@JonaOct 01.2004 — #[font=trebuchet ms]Are you looking for fixed-width, elastic width, or fluid width? Maybe try some of these...reply?
0
@BonRougeOct 01.2004 — #... something like The CSS is in the page (source).
I hope this helps.
(I'm sure there are more efficient ways to do it by the way - by using classes or whatever - but this works fine for me).
reply?
0
@DarkScytheauthorOct 01.2004 — #[i]Originally posted by BonRouge [/i]
[B]... something like[URL=http://cheers-sendai.com/4f2c.htm]this[/URL] ?
The CSS is in the page (source).
I hope this helps.
(I'm sure there are more efficient ways to do it by the way - by using classes or whatever - but this works fine for me). [/B][/QUOTE]
oh wow, you guys are superb..
where did you find this? it's almost exactly what I had in mind..
the only thing left to do is to figure out what all the tags mean in the source..
some pointers would be greatly appreciated here.
but otherwise thanks a bunch for finding this!
edit:
btw.. i know what a static setting is..but what's the difference between elastic and fluid?
reply?
0
@JonaOct 01.2004 — #reply?
0
@DarkScytheauthorOct 01.2004 — #[i]Originally posted by Jona [/i]
[B][font=trebuchet ms]Elastic changes based on font size; fluid or liquid changes based on screen resolution/browser size.[/font] [/B][/QUOTE]
in that case i would probably be going for fluid/liquid..
i'm trying to design this to maximize the use of a 1024x768 resolution..
dreamweaver reports that a maximized window @ 1024x768 is 955x600 so i'm using that as my maximum dimensions.
i myself use a much higher resolution but i know many still use 1024x768 so i'm trying to get it to fit on a 1024x768 screen, yet still look fine on higher resolutions.
i was thinking about making every width static and leave the height of the 4 columns between the header and footer flexible.
ie;
header: 900 x 100
left column: 150 x variable
middle-left: 300 x variable
middle-right: 300 x variable
right column: 150 x variable
footer: 900 x 50
something like that..
edit 2:
just made up a quick diagram in MS paint..
here's what i'm trying to do.
[IMG]reply?
0
@JonaOct 01.2004 — #[font=trebuchet ms]Well, keep in mind that there are aslo a lot of users who still have 800x600 screens, as well. Always try to reply?
0
@DarkScytheauthorOct 01.2004 — #[i]Originally posted by Jona [/i]
[B][font=trebuchet ms]Well, keep in mind that there are aslo a lot of users who still have 800x600 screens, as well. Always try to[url=http://www.vladdy.net/Demos/ElementSizing.html#header]choose the most efficient layout type[/url] .[/font] [/B][/QUOTE]
true but with the site's purpose, it's a blog
if i made it fit an 800 resolution i wont be able to see any content.. the calendar alone takes up approximately 170 pixels, and i want to mirror it on the other side so it'll look neat. then the middle gets divided up into two sections.. there's no room for content.. 1024 is the minimum i can go =/
reply?
0
@JonaOct 01.2004 — #[font=trebuchet ms]Horizontal scrollbars are often avoided because of their ugliness, but I'm sure 800x600 users will understand -- reply?
0
@DarkScytheauthorOct 01.2004 — #at least that's what i believe.. higher will be fine, but 1024 is what might be "perfect"
800 is really hard to get down to, at least with the content that i'm trying to fit.
regarding his blog, he's the only poster, thus he can size it down a bit.
i'm making a dual-post blog for me and my gf, so we have each our own column. i considered consolidating our columns into one but it gets really confusing which post is who's.
reply?
0
@JonaOct 01.2004 — #[font=trebuchet ms]That makes sense, though you might want to just have a listing of entry titles, a short description, and the date, and users can click on the entry title and load up a 600px-wide, two-column, centered layout with the content therein. That's how Dave does it -- it's actually a very good idea. But, beauty is in the eye of the beholder. ? [/font]reply?
0
@DarkScytheauthorOct 01.2004 — #i'll have fun asking around once the time comes for me to do that, cuz i want to set each entry as just a date and when the user clicks it, the drops down the box with all the titles of every entry posted on that date, with a link to open a specific entry.
but that comes later.
for now, yes, this is just a page to display everything.. i'll have links to each individual entry and make it all nice and pretty lol
(working with pMachine Pro 2.3 if anyone knows about it)
reply?
0
@BonRougeOct 01.2004 — #I'm glad you liked the layout. I didn't actually find it - I wrote it just for you (I like a challenge).
For what you're doing I think something fluid would be good - ie. use percentages like I did there.
If you have any specific questions about the tags, feel free to ask. Most of them are pretty much self-explanatory though.
Cheers for now - and good luck with your site.
reply?
0
@DarkScytheauthorOct 01.2004 — #wow thanks a bunch, at least it tells me what i'm doing is possible.
(for some reason most ppl think everything i do is impossible.. such was the case with my javascript, but i made it work lol)
anyway, i have to get going to a birthday party for a coworker, but i'll be back in a few hours to work on the coding again.. i'm new to CSS, so i'm trying to take in everything as quickly as possible (ie; reading tutorials on 4 different sites)
if you're still available i'll try to contact you about some modification to that code, but as of now it's looking very good.
just some explanations on it and i think i'll be fine.
btw, has anyone looked at the image? that might help a bit to visualize what i'm trying to make..
thanks a bunch everyone, i'll check back in a bit
reply?
0
@DarkScytheauthorOct 02.2004 — #okay, i'm back and i began to inspect ur code.while i do get most of it,
banner, left, text, centre1, centre2, right and foot, there were a couple i didn't know about and wondered why they were there.
why do you have rules set for
"html", "body", "* html #text" and "* html #foot" ?
other than that, it appears u made pretty heavy use of the z-index to get the layers correct..
what does the display: inline; do?
reply?
0
@BonRougeOct 02.2004 — #The footer and header are set with fixed positioning which IE doesn't understand. This : "* html #text" and "* html #foot" is for IE.If you look at the structure, there are two divs ('centre1' and 'centre2') inside another ('text'). Without 'display:inline' they'd be one on top of the other (first 'centre1' then 'centre2') rather than side-by-side.
reply?
0
@DarkScytheauthorOct 02.2004 — #i'm trying to see how everything's arranged tho, so i can try to use this as a reference for when i make other layouts on my own later, and dont have to keep asking people..
if it's not too much trouble, could you give a quick explanation of how you set each box up?
I get the starting points for the left 0 and top 0, but after that i get kinda lost, as in where to start the next boxes.
thankies
reply?
0
@BonRougeOct 02.2004 — #<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
html {
height : 100%;
max-height : 100%;
overflow : hidden;
}
body {
height : 100%;
max-height : 100%;
overflow : hidden;
}
The max-height and hidden overflow of the html and body allow us to keep everything on the screen (if that makes sense). It's very useful if you're using absolute positioning (as we are here).
#banner {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 75px;
z-index : 5;
}
I think the banner code is obvious. I think the z-index needs to be higher than that of the text.
#left {
left:0%;
top:75px;
width:10%;
position:absolute;
z-index:3;
}
The z-index is higher than the z-index of the footer because I thought you wanted the footer to be nestled between the side frames. This way you get that effect.
#text {
position:absolute;
top:75px;
bottom:50px;
width:80%;
left:10%;
z-index:2;
overflow:auto;
}
* html #text {
height:100%;
top:0;
bottom:0;
border-top:75px solid #fff;
border-bottom:50px solid #fff;
z-index:2}
To be honest, I forget exactly what's going on here. The second part is for the benefit of IE - I know that much - without it, it'll work in Firefox but not IE. The 'top' value in the #text part should be the same as the 'border-top' part in *html #text.
#centre1 {
left:5%;
width:43%;
position:absolute;
display:inline;
z-index:2;
}
#centre2 {
left:52%;
width:43%;
position:absolute;
display:inline;
z-index:2;
}
These two 'centre' divs are inline (display:inline) so that they stand next to each other inside the 'text' div (see the html below). The percentages are based on the parent div ('text') as opposed to the page/body/whatever.
#right {
left:90%;
top:75px;
width:10%;
position:absolute;
z-index:3;
}
Same thing here as in the 'left' div.
#foot {
position:fixed;
bottom:0px;
left:10%;
width:80%;
height:50px;
z-index:2;
}
* html #foot {
position:absolute
}
This is one I'm not 100% sure about - I've had problems with the whole 'position:fixed' thing. With it I can 'absolutely' position things at the bottom of the browser screen, but without I have all sorts of problems (maybe someone could explain the theory to me...(?)). 'position:fixed' is not recognised by IE so we need the extra part.
</style>
</head>
<body>
<div id="banner">header</div>
<div id="left">left</div>
<div id="text">
<div id="centre1">centre1</div>
<div id="centre2">centre2</div>
</div>
<div id="right">right</div>
<div id="foot">footer</div>
</body>
</html>
I hope this makes sense and I welcome criticism (and help) from those in the know...
Cheers for now.
reply?
0
@DarkScytheauthorOct 05.2004 — #okay, i tried..i took my research and tried to make something of it.
I decided not to go with the concept of the page resizing along its *width*. Simply because, it wouldn't look the same across different resolutions.
So i wanted to make a set 940px width page, but the height would vary depending on the resolution of the browser. Then i thought, well since it doesn't take up the whole screen, everything would be lopsided to the left, so I tried to center it as well..
lo and behold, it didn't work.. after some tangling it started to look like something but i really think i broke a couple dozen webmastering laws with the code on that page lol.
Anyway.. here's my code.. i hope someone can help me find the problem cuz i'm running out of solutions with my limited knowledge on CSS.
btw, i kept all the code in 'long' format so I could leave myself a comment after every statement about what each tag did.
[code=php]html{
height: 100%;
max-height: 100%;
overflow: hidden
}
body{
height: 100%;
max-height: 100%;
overflow: hidden;
text-align: center;
background-color: #000000;
background-image: url('http://www.darkscythe.com/images/DarkChiiEdit.JPG');
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat
}
#container {
margin-left: auto;
margin-right: auto;
text-align: left;
display: inline;
background-color: white;
width: 940px;
height: 100%;
border: 0
}
#banner {
position: absolute;
top: 0;
left: 0;
margin: 0;
border: 0;
display: inline;
background-color: blue;
width: 940px;
height: 100px;
text-align: center;
z-index: 3
}
#leftmenu {
position: absolute;
top: 100px;
left: 0;
bottom: 50px;
width: 150px;
margin: 0;
display: inline;
background-color: red;
border: 0;
overflow: hidden;
z-index: 2
}
#textbox {
position: absolute;
top: 100px;
left: 150px;
bottom: 50px;
width: 640px;
margin: 0;
display: block;
background-color: yellow;
border: 0;
overflow: auto;
z-index: 1;
visibility: visible;
}
#kuraibox {
position: absolute;
display: inline;
background-color: purple;
top: 0;
left: 0;
bottom: 0;
width: 310px;
margin: 0;
border: 0;
font-color: #FFFFFF;
filter: alpha(opacity=30);
z-index: 2
}
#kimochibox {
position: absolute;
display: inline;
background-color: green;
top: 0;
left: 310px;
bottom: 0;
width: 310px;
margin: 0;
border: 0;
font-color: #FFFFFF;
filter: alpha(opacity=30);
z-index: 2
}
#rightmenu {
position: absolute;
top: 100px;
left: 790px;
bottom: 50px;
width: 150px;
margin: 0;
display: inline;
background-color: orange;
border: 0;
overflow: hidden;
z-index: 2;
}
#footer {
position: absolute;
bottom: 0;
left: 0;
width: 940px;
height: 50px;
margin: 0;
border: 0;
display: inline;
text-align: center;
font-color: #FFFFFF;
background-color: teal;
z-index: 5
}
p { font-color: teal }[/code] a couple notes..
ignore the background color in every element, i just added them so i could see what dreamweaver was trying to show me.
also, i defined a p element at the end because the text would not change color (in the kuraibox and kimochibox divs) no matter what i did. in fact, even that p element didnt change the font color..
make any changes you want, but i just want to know what is wrong with this..
edit:
i'm previewing this in both firefox 0.9.2 and IE 6
reply?
0
@BonRougeOct 05.2004 — #reply?
0
@DarkScytheauthorOct 05.2004 — #sure, i made a test page to test this stuff and it turns up skewed..lol thanks a bunch BonRouge, you're helping me quite a bit
that's the page i was using..
the image in the banner div is 940x100, the two images on the sides are each 150px wide. i forget how tall they are tho.. i think 768.
edit: yeah i'm forgetting a bunch of things..
if you want a general layout of the div positions, i'll make a quick sketch.
[code=php]
<div id="container">
<div id="banner"> </div>
<div id="leftmenu"> </div>
<div id="textbox">
<div id="kuraibox"> </div>
<div id="kimochibox"> </div>
</div>
<div id="rightmenu"> </div>
<div id="footer"> </div>
</div>[/code]reply?
0
@DarkScytheauthorOct 06.2004 — #from the above sketch i'm using the div "container" to set a fixed width of 940px for everything on the page. trying to center it is another problem, but should every div inside that container be inline?
i'm not too sure how to use the inline/block display properties.
reply?
0
@BonRougeOct 06.2004 — #Hey DarkScythe,It seems we have the same problem (see my post
Good luck.
Cheers.
(I'll let you know if I find an answer, but I'm not feeling very hopeful).
reply?
0
@BonRougeOct 06.2004 — #DarkScythe,Do this :
[CODE]#container {
margin-left: -470px;
margin-right: auto;
text-align: left;
display: inline;
background-color: white;
width: 940px;
height: 100%;
border: 0;
position:absolute;
left:50%;
} [/CODE]It works - I tried it on your page.
I did something very similar (different numbers) to my page too.
Cheers,
Steve
(By the way - what's the Japanese stuff about?)
reply?
0
@DarkScytheauthorOct 06.2004 — #wow, you're rightmost of it works now (refresh the test page to see)
but..it only seems to work in firefox.. it's centered in IE but the textbox div and the two column divs inside it do not display.. i wonder why?
also, if you check my test page now there's an odd problem..
if u scroll down, the purple and green boxes suddenly end.. i know it's because i absolutely positioned the div, but would it affect anything major?
other than that, great work.. now to "debug" it to work in a buggy browser *cough* IE *cough*
edit:
(By the way - what's the Japanese stuff about?)[/QUOTE]
lol, well i thought u'd know since ur in japan XD
anyway, chotto matte is similar to wait a minute
and uhm.. this blog is going to be shared with me and my gf, so i let her handle images while i do the coding..
i asked for a quick test image for the header and she kept saying wait so there lol.
reply?
0
@BonRougeOct 07.2004 — #Well, I've looked and erm.. I'm kind of stumped - as I said, I did that with mine and it worked (in IE too!). The structure of our pages are quite similar, so I don't know what the problem is.
...
(and yeah - I understood the Japanese. I just wondered why there was so much of it (pictures, div names...) are you Japanese?)
reply?
0
@DarkScytheauthorOct 07.2004 — #lol no i'm not japanese..chinese with a big interest in japanese XD
and anime..yeah ?
anyway, let me try doing a source on your page now..
I didn't put any of those IE-specific codes you ahd in the original page, i'm not sure if that's it or not..
but i know there are some differences.. i'll try to figure them out.
help is appreciated of course ?
lol but yeah i'll be sure to give you guys some credit when this is done
reply?
0
@DarkScytheauthorOct 07.2004 — #it remains forever broken in IE (everything inside the textbox won't display)
and.. whether IE or mozilla/firefox.. I can't control the font at all..
what could be causing this?
edit:
LOL, forget about the font thing.. stupid me, i was using the wrong code haha
i'm still used to html so i was using font-color.. as u all know this doesnt exist in css lol
anyway, besides the font, the page is still broken in IE..
it shows the four outer divs (header, left menu, right menu and footer) but doesn't display the actual content-containing divs..
stupid IE..
reply?
0
@BonRougeOct 07.2004 — #Hey DarkScythe : I mixed the code from my page with the code from yours, and I think you'll have no problem now.
reply?
0
@DarkScytheauthorOct 07.2004 — #thanks!i'm comparing our codes now and it seems about the only difference is the IE-specific code,
* html #footer
and
* html #text
the only question i have with your css is..
what are these two here for? are they left over from your code or shuold they be in mine for some reason? i'm looking around both the html and css and i see no references to these two classes you set:
.clear {clear:both;height:1px;overflow:hidden;}
.bold {font-size:1.5em; font-weight:bold;}
i'm gonna try merging some of this into my code, because I like the absolute values over percentages, but hopefully this'll work..
the other dumb thing is that the css validates as is.. but once i input the filter: alpha and -moz-opacity it doesnt validate anymore cuz those two are proprietary lol.
anyway, we're almost there.. thank you soo much lol XD
edit:
btw, why do you keep using border: 0 none inherit;? i've no idea what this does.. i thought if it was 0 u didnt hafta enter anything.. and in fact isn't it defualt 0? so u dont have to put that in..
i remove all the border tags except for the footer where i need it.. this is ok right?
reply?
0
@BonRougeOct 07.2004 — #Yeah - to be honest, those shouldn't even be in my page - never mind yours. My stylesheet is pretty long and I forget to take some things out when I don't need them anymore. Sorry to confuse you.As for the percentages - I just think they're easier to work with (cos they add up to 100 ? )- don't make a big difference though.
So yeah - glad to help. I'm like pretending to be one of those guys who knows what they're talking about. It's fun.
Šæ’£‚Á‚Ä
Steve
... and the borders - like I say, they're probably left over from something or other. I guess sometimes I just leave things in because I know the page works OK as it is so no need to worry. Taking all those border things out seems fine to me.
reply?
0
@DarkScytheauthorOct 07.2004 — #lol yes, thanks..and i'm assuming i can safely remove the border tags too? since it's all 0 none inherit..
i'm gonna try adding the IE specific codes in now and test.. i'll post in a bit with my discoveries.
though, knowing my luck i'll prolly invent another problem or something lol. :rolleyes:
anyway i want to use absolute values because the page u made has a few quirks.. for one, the background image doesn't display in firefox.. it works fine in IE, but in IE, everything's positions are slightly off, so you see a small white bar at the bottom under the footer.
i'll see if I can correct it. ?
reply?
0
@BonRougeOct 07.2004 — #reply?
0
@DarkScytheauthorOct 07.2004 — #ah lol, sorry to use up ur lunch break then..editing right now.. hoping it'll work correctly so I can move on to bigger and better (and more complex.. ? ) codes..
i'm wondering if I should start asking about the code for the next phase of this construction lol
anyway, i'll be sure to give u some credit for helping me
edit:
gonan rewrite the test page in xhtml transitional.. we'll see if that helps or not.. also gonna try to force IE to go to 'standards' mode.
reply?
0
@BonRougeOct 07.2004 — #Edit : ... well, kind of - it means the picture shows up in both IE and Firefox. Unfortunately, they're at different heights.
One way to fix the white-gap problem (although I'm not sure if it's a good way) is to make the height of the container 101%. It works as far as I can see.
reply?
0
@DarkScytheauthorOct 08.2004 — #hmm..okay, here are my results.. and they don't look too happy ?
here's a summary of my findings:
i've changed a bit of my code to match urs.. i havent changed everything because ur code has some redundancies and some stuff i'm unsure about..
the main thing is.. while it *kind of* works in IE.. the problem is the scrollbar goes all the way to the bottom of the screen. that's at height: 100%
i dunno how to fix that..
second, i just noticed that altho it works in IE and shows up fine in firefox.. there's a problem with the scrolling.
in IE it scrolls fine, but in firefox..
the entire page *EXCEPT* for the footer scrolls a bit..
the only reason i can think of for the footer being the only one not moving is because you changed its position to fixed, and told IE to make it absolute..
ugh, i told ya with my luck i'd come up with some new problems..
altho they do seem a bit small.. at least we got the layout, we just need it to
a) display correctly in IE
and
b) work properly in firefox
gonna sleep now but gonna try some more methods tomorrow..
btw, i made a new page in XHTML (unfortunately uses a ton of <br /> tags cuz i was in a rush to make this on the train) and i believe it forces 'standards' mode in firefox and IE, which i think helps the box problem a bit.
if u need the new sources for both pages, leave me a message and i'll upload'em.
reply?
0
@BonRougeOct 08.2004 — #Well, have a look what I did - it seems fine to me.It validates as xhtml 1.0 strict and the css has no problems except for your scrollbars because they're IE things.
Anyway :
reply?
0
@DarkScytheauthorOct 08.2004 — #i guess i can try taking a screenshot if u can't see my problem.
reply?
0
@BonRougeOct 08.2004 — #To be honest, I think that's the best I can do with your page - I really hadn't thought about people who didn't use... what is it - mouses? Mice? A mouse?
Erm... good luck finding an answer to that problem, because I have no ideas.
Cheers for now,
Steve
Edit : I just looked back a little and saw that the 101% container was to prevent a space at the bottom of the page, but now, if you look, there isn't one so it's OK.
reply?
0
@DarkScytheauthorOct 08.2004 — #well ok..for now let's just say we can't scroll in firefox..
but i have another really annoying issue.
i'm practically copying ur entire code, but for some reason the scrollbar in IE refuses to work like the one in your page.
your scrollbar ends in the right place -- right above the footer.
mine, however, even after copying your entire code, refuses to do that and insists on extending to the bottom of not the browser, but the screen, no matter what i do.
i've assigned a bottom value, a border value, a padding value, a margin value, evne tried absolutely positioning it, nothing works. it's as if in my code, even tho it's 99% copied off of yours, refuses to end the scrollbar in the right place.
the one thing i've fond that does change it is the height: 100% thing, but I can't get that accurate enough to use.
edit:
oh geez.. i feel dumb now ~_~
i did a full comparison between our codes and pinpoint the exact problem..
turns out i accidentally deleted the first line somehow in the XHMTL declaration.
i inserted it back in, and the problem was solved in IE.
firefox however, remains a mystery to me, as far as making the *page* not scroll and instead having the *text* scroll..
reply?
0
@DarkScytheauthorOct 08.2004 — #update:the page works perfectly in IE now, thanks
i've thrown in the towel and accepted that scrolling via the scroll wheel will not work in firefox / mozilla, so i'll leave that alone
as for the rest of the page moving around when u try to use the scroll wheel..
i've come up with a temporary solution.. well, temp as in it'll be like this until i find a correct solution..
in the beginning we specified for html height and max-height of 100%
i noticed the reason firefox scrolled was because it seemed to believe there was extra space being alloted outside of the viewable area, and the footer didnt move cuz it was fixed.
my solution was this:
[code=php]html {
height: 99%;
max-height: 99%;
...[/code] the rest of the code was unaltered, but setting it to 99% height removed the problem and it still displays just fine in IE.
who knows maybe this might help someone else who's having this problem..
reply?