Subcultural engagement for the 21st Century...
Barbelith is a new kind of community (find out more)...
You can login or register.

Underground > Conversation >

CSS

08:28 / 01.06.05

Ok, getting into css lately, and its really fun. BUT, I could really need some decent tutorials. You know, the ones that takes you through the development of a nice-looking css site. Step by step. Have any good links people? My biggest problem is positioning btw..

09:24 / 01.06.05

I don't know of any that do that.

Try the w3schools tutorial, they're usually pretty good. I can answer questions myself if you like.

09:30 / 01.06.05

Ok.. take a look at randomdelight. See the box that is way off down to the right? Well, how do I position that in the upper right corner of the contentbox? I cant seem to get positioning right, all this "relative", "absolute" stuff.. Thanks for the help fridge..

09:37 / 01.06.05

Here's something which is useful if you're having trouble with positioning - Floatutorial. I thought it was good when I was using css, at least -it's from this site which has some other tutorials you might want to look at.

10:03 / 01.06.05

If you're using position: absolute you control the positioning using the "top", "left", "right" and "bottom" attributes. Don't know what you're trying to do with those margins - get rid of 'em. To put it at the top right of the enclosing DIV use something like

top: 20px;
right: 20px;

which puts the top right corner of the sidebar at 20 pixels from the top right corner of the container.

Why have you got a 0px border?

12:54 / 01.06.05

I found the tutorials at http://www.htmldog.com/ to be quite useful for getting started.

14:36 / 01.06.05

Ok fridge.. I understand it better now.. But when I use that method, it doesnt turn up the same in explorer and firefox, how do I fix that?

14:55 / 01.06.05

Aha, you need to google for "internet explorer box model problem". You're going to find lots of things won't display the same in both, and that's the real joy of CSS. There are several good guides as to how to fix things in IE.

http://www.positioniseverything.net

has lots on these IE problems, amongst other stuff.

15:00 / 01.06.05

Probably because you've set the width of the sidebar to be too small to cope with the width of the text. The two browsers deal with that situation in different ways. IE expands the sidebar's width to fit the content before positioning, Firefox doesn't expand it but lets the text go over the boundaries. (The latter seems more logical to me but hey.)

You can (a) fix your sidebar's width (b) fix your sidebar's content, change the text size or the link or something or (c) do something with the CSS overflow property.

16:13 / 01.06.05

Know Im asking much fridge.. but would you care to fix the problem (if its not too much work ofcourse) so I can see how its done?

16:25 / 01.06.05

it depends how you want to do it

you could add overflow: hidden; to the sidebar definition, which would clip the text, which is not a good solution unless you might have things there accidentally (I ended up having to do this for my sidebar to stop long referrers fucking my page)

you could add overflow: auto;, which would put scrollbars in, though that's better if you've actually got content there rather than links, bit pointless in this case

you could change the width of the sidebar, but it's fairly wide as it is

The best thing to do would be to set the font size so all the text fits in, say add font-size: 10px; which should be plenty small enough. In fact I'd say that your font is generally pretty big. But if you try all the other things as well at least you'll know what they do.

16:35 / 01.06.05

Yeah.. tried changing the width, worked just fine.. though I think changing the font size is a better solution. Atleast I know how to position now, probably changing the whole layout anyway, its buttugly.. thanks for the help fridge..

17:52 / 01.06.05

Ok.. another problem. Ive set all links on the page to have a background color.. but what if I want no background color on the links in the sidebar? How do I do this?

18:06 / 01.06.05

then you want to use the "cascading" part of cascading stylesheets

.sidebar a { *whatever* } takes preference over a { whatever }

19:37 / 01.06.05

Ok.. I dont understand.. tried something but it didnt exactly work..

20:26 / 01.06.05

Quick summary... if you have multiple elements inside the style declaration, that means nested elements.

So for instance

.sidebar a { whatever }

means "apply whatever style only to a tags that are inside things with class sidebar". Just

a { whatever }

means "apply whatever style to any a tags". There's an order of preference which states that the more specific a declaration is, the more it takes precedence, so something declared for .sidebar a will take precedence over something just for a. (You can dick with this order but that's something you don't want to bother with right now.)

There needs to be a space between the element names. If you put commas, that's a multiple declaration, e.g.

.sidebar, a { font-weight: bold; }

will make everything in the sidebar as well as any link anywhere bold.

.sidebar a { font-weight: bold; }

will just make links in the sidebar bold.

You can really go a long way with this if you use a lot of nested tags - for instance

ul li ul li a { color: #f00; }

will make only links inside unnumbered list elements that are inside *other* unnumbered list elements red. Pretty specific, but if you look at the standard stylesheets for Wordpress they use that sort of thing a lot.

If you've not got it already, get the Firefox web developer toolbar. It's got a CSS editor and lots of handy functions to outline different elements and so on that make learning this stuff a lot easier.

alejandrodelloco

21:38 / 01.06.05

CSS Zen Garden is full of fanciness. I would suggest Firefox for development, but I suggest you keep a windows copy of IE near for testing sites and seeing how badly it renders them. THAT's given me some problems... Fuckin' Microsoft not following any standards.

23:57 / 01.06.05

I'd also recommend looking in the Art & Design threads here to find lots of info on how to design with standards, CSS, etc.

When I was learning how to dev sites correctly, I started looking at Zeldman and a tutorial site he's partly responsible for: A List Apart. The methods covered therein help get you head around things like the box model, positioning, footers, multi-column layouts, etc.

It takes quite a bit of practice to get things right and you'll definitely be pulling your hair out trying to get things to behave right in a mix of Mac/PC browsers. Start writing it correctly and follow with browser tweaks. When you're done, look at what you did and try to utilize it elsewhere.

16:40 / 02.06.05

Thanks for the help guys, its up and running now.. btw, fridge, those fancy syndication etc. buttons at your site, you make them yourself? Because Ive seen those buttons everywhere, and Im wondering if theres some place to get them or if its just a trend and everyone makes them that way..

18:06 / 02.06.05

I made some of them by hand but there is also the Kalsey buttonmaker that makes it even easier.

My "Steal These Buttons" page has some you can nick if you want.

18:16 / 02.06.05

Now thats handy! Another slight problem.. when I minimize my page/browser too much things overlap each other, why is this? Can it be prevented?

18:25 / 02.06.05

Only by designing for it, not using too wide a page width, using some stretchy elements without fixed widths and so on.

19:32 / 02.06.05

Ok.. with the layout Ive got now.. it works fine.. but when I try to use the whole page (like your site) it doesnt work that fine.. any tips?

19:50 / 02.06.05

This is kind of a hard thing to explain. It mostly rests on positioning and margins; you have to have elements with margins that mean they're not covered up by sidebars that are absolutely positioned. There are various ways of doing it, there are considerations to do with semantics and so on.

Take a look at my stylesheet, and google for something along the lines of "three column css layout" - you should get a number of instructive links. I can tell you how to achieve something if you're very specific about what it is... it's good to have an idea of what you want to see and how you want it to behave before implementing the layout (I know it can be very tempting to just dick with the CSS until it looks good but in practice it's hard to get any help when you're doing that).

If you want to plan something out, my advice is to get out a pen and paper and draw boxes and stuff until you've got an idea of a layout, then work from there. It's hard to develop one with just code until you can write the stuff without thinking about it.

21:31 / 02.06.05

Ok.. I see.. thanks for the tips fridge..

15:05 / 03.06.05

Ehh.. how do I design for 800x600?

21:59 / 05.06.05

Get the web developers toolbar for Firefox, it has a handy tool which can view a page at 800x600 or any other size.

Also try and not cram to much on a page, if you're using css boxes the text in them will scrunch up to a point. Dont set your page design to just 800x600 either through fixed widths, as it looks lost.

12:59 / 06.06.05

Nothing to do with CSS, but is a handy little resource for all you coders (if you don't know it already that is).

Koders