Preserved Topic: New CSS site.

Having fun with this! Now, if someone will give me constructive feedback, I'll greatly appreciate it
edit: remvoed old url ... see below for site link

Feel free to start anywhere!



[This message has been edited by Allewyn (edited 12-21-2001).]

yup it busts up pretty well in NN4.x good read though!

I like the colors. I always like a site that utilizes blue. The center window adds a nice touch. Do you plan on linking the "Admiration" images to the left?

Besides that its looking good to me!

Skatefx I disagree there about the colours, yea blue is nice but not bright blue it's a bit of a eye killer, I think you might want to think about the bright blue for the links. In some parts it looks good and some not that well (IE- Good - Far right, Bad - The main text (centre of page)). Plus the orange boarder does not really go with a all blue page does it?, Well Apart form that disagree about the bright blue and the boarder colour I like it for what it is "ramblings of allewyn" I hope you ramble a lot because I love seeing what people think about things .

Browser check (just because people with different browsers might want to read you ramble (just like me).

IE 6 = Fine
NS 4 = A whole new page layout
NS 6 = Don't know if my browser, but no right hand bar and main content, I did try it three times but still the same (Hhhmmm)
Opera = OK bit the centre blue is half under the image links


Chris C

Allewyn: As has already been reported there appear to be problems with your CSS:

1. For starters I'd never give the BODY overflow: hidden unless you had a good reason set it to auto.

2. Typewriter seems an odd choice for a font and if you are going for something like that add in alternatives.

3. The dotted style for border isn't implemented in IE5.5 and below (is it in 6? I'm looking at it in IE5).

4. I can't see why you really need z-indices or absolute positioning.

5. You will get those columns working in all recent browsers if you use float.

I think the others have covered the remainder of my points. Let me know if you want me to expand on any/all points there.

Overall it is a good attempt at a CSS layout but it fails the cross-browser tests (thanks DS) and that isn't a good thing - this can be fixed by using float and simplifying our CSS I would think (have another look at mobrul's which even works in NS4.75!!). Anyway its a promising start and it is often getting started in CSS which seems the most daunting part getting the design right will involve some tweaking and lots of testing - good luck!!

[Emp edit: And I'm not sure why you are using @import - if I was going to use it I'd put things in there which NS4.x couldn't cope with]

Emps


You're my wife now Dave

[This message has been edited by Emperor (edited 12-19-2001).]

Thanks for the look-see guys

This is my first real attempt at a fully CSS site and it has some problems for some of you.
VP, I'll try to get it working in NN4. Not usre it's possible but I'll try. Glad it was a "good read" for you The plan is to expand on the reading parts...sort of collect the ramblings I think about. And you notice I included ya'll in there?

Skate, yes I'm going to link the images, at least to those I have URIs for. Thanks for your comments.

DS, I'll consider another shade of blue for the center. Maybe it's a little too cyan.

Emps,
1. I turned off the scroller because the pages don't have enough vertical content to make them useful at this point. there is more page below your browser window but nothing on it. I also didn't like the looks of two scrollbars that close to one another.

2. Right I'll add another choice. I forgot I downloaded that font and maybe others don't have it.

3. The dotted box border is commented out right now. I should have removed the code. It seemed prudent to leave it until sure it wasn't needed.

4&5. I'm still having problems with float. when I tried that, the elements wound up in wierd places. I'm working on it. As for the indices, I resorted to that when I had trouble getting the five boxes where I wanted them. you've mentioned float before and I wonder if you have some suggestions on how to use it?

#rightcontent {
float:right;
} Didn't seem to work as the right box wound up under neath and below the left box. After some time, I dumped it and went on, planning to come back and look at it again.

If ya'll can think of anything else, please let me know!

I was just looking for tutorials, links, references to CSS layout, stopped in here just for fun and
found the links you posted for CSS.. Everything I wanted to know! Thank you very very much.. the site is great btw..

Allewyn: Start with something simple like the examples Glish provides. If you can't get them to work post them here or email the URL and I'll have a look. The trick is to start simple and once you've got a grasp of things build slowly towards what you want (I'm always having to take apart ideas I've had where I've tried to knock up a CSS-only design too quickly!!).

Ems


You're my wife now Dave

The thing about float is...

<disclaimer: I am not trying to presume your knowledge or ignorance of anything...I had similar kinda trouble with float as you are describing...thought I'd share. If you already know this, please disregard. No disrespect intended.>

...the 'box' floats to the right/left side of everything else around it, IF THERE IS ROOM. If there is NOT room, the 'box' resorts to it's 'regular' (that means 'underneath') position.

A good way to understand this is to take my page...here...and slowly narrow your window. At about 600 px wide things start to 'fall apart'. You will notice that the 'stories' (middle) column ends up below the rest of the stuff. That is because there is not room for it, so it doesn't 'float' anymore, but reverts to it's 'regular' position...scroll down the window to see what I mean.
If you continue to make the window narrower, you will see eventually the 'rant of the day' column ends up at the very bottom. See?
If you continue to make the window VERY narrow, you will see that everything lines up in a single, very skinny column, with the boxes lining up in the order that they are written in the code, from top to bottom.

Your problem may simply be that there is not enough horizontal room for all of your pieces.

I also found that making MORE boxes...that is, MORE <div>s (within logical reason)...helped to keep everything in a nice, smooth, logical order. It seems like a pain in the ass at first, but it really will help everything line up correctly.

<without trying to sound cocky>
Study my code...there are months of stupidity and laziness and ignorance worked out (for the most part) on that page.

Really try to imagine where each box would be...what am i saying? Just go into the code and put a 2px border around everything. Then play a lot with resizing your window to see how float really works!

Any questions, just post 'em here or e-mail me...be happy to help.

good luck
mobrul

mobrul: Good advice there from someone who has been through the process!!

There are little tricks that can be used with floating/liquid pages to stop it falling apart. Open the page with as big a screen resolution as you can and then drag the browser window around resizing it horizontally and note down the approximate widths where the floats start to float under each other and where the content starts to be spread too thin (now might even be the time to have a desktop background with gridlines on it). Now set a few maximum and minimum widths, usually on the main box, and see how that helps. For more info see:
www.w3.org/TR/CSS2/visudet.html#min-max-widths

Its an approach I'm still toying with but it may be the answer to that specific problem.

Emps


You're my wife now Dave

ok, guys, I've put up a new set here and i think things are working out. now, instead of boxes falling off the planet when i resize horizontally, the horiz scrolly comes up and things stay in place...and the only box absolutely positioned is the top one. Could you look and see if i missed something? i'm still using <br> in places for some of the vertical positioning but i'll work that out as i understand more.

mobrul, studying your code was extremely helpful in making me understand that a multi-color page was going to be a different beastie and should be approached differently. not that i know what i'm doing yet but i'm getting there!

emps, once again you've been stellar. please let me know if i need to do anything else before i move on to a more nested version of this site? i'm gonna go look at the last link you put up and i'll get back here after i have some lunch.