Topic: no more positioning...but more questions...

Ok, here ya go, no positioning except for the initial "main" id that contains the entire page and creates the white background color:
http://www.notdecaf.com/css/test06.html

I have to say i've come a long way in two days, and it does validate other than alt tags i do still have a few questions...

1. is there another way to create the "main" id so that it both stretches to 100% of the page vertically and isn't absolutely positioned? that's the one piece i couldn't get to work without positioning.

2. is there a way to decrease/remove the hard return that occurs after H tags (i.e. the space created after "June 2005" in the News section at lower right)?

3. how can i get my custom bullets to line up wih my list items? (under solutions at bottom)?

other than that i think it's actually in pretty good shape...


KAIROSinteractive | tangent oriented

ok, scratch #2...margins can be negative, doesn't give me the same amount of space in IE and FF but it works well enough, linked file has been updated.


KAIROSinteractive | tangent oriented

For the bullets, use this method: http://css.maxdesign.com.au/listamatic/vertical05.htm

For the 100% height: You will need to specify a height of 100% for the HTML and BODY elements. If you don't, specifying 100% height for child elements will only make them fill 100% of the body and html areas, which will not be 100% of the window if the content does not fill the window.

{{edit - remember this thread? http://www.gurusnetwork.com/discussion/thread/2907/
Good info in there on the height and related issues as well. }}



(Edited by DL-44 on 06-08-2006 19:26)

As for the margin on the #news h3 - don't forget about the margin on the #news p, and the padding on both!
Margins can be negative, but negative margins are unpredictable in my experience.

Set the padding and margins for both elements to acheive the spacing you want for best results.

Don't forget that you can specify all 4 sides for padding/margins.

#news p {
margin:0 .25em 1em .25 em;
padding:0 .5em;
}

The order goes: top > right > bottom > left when you specify 4 values, or top/bottom > left/right when specify only 2.



(Edited by DL-44 on 06-08-2006 19:34)

I would also use a list for your main navigation, that is more semantically correct.

See the ALA Taming Lists article.

Dan @ Code Town

I would also remove the top image based display of the location and turn it into a text based display. Not being able to copy and paste contact information has to be one of my biggest peeves.

Dan @ Code Town

thanks guys. and DL, that last attempt frustrated me so much this is my first attempt with CSS since then

working on getting the list at the bottom working, it seems really glitchy though. and Dan, we're actually still developing the nav but i'll keep both the list and copyable contact info in mind


KAIROSinteractive | tangent oriented

I've posted that thread in answer to many a CSS question here. Great stuff in there =)

I'm glad my pain could be useful seriously though, i greatly appreciate all your help on this.

but now i've finally broken something, yesss!!

http://www.notdecaf.com/css/test07.html

I've embedded the flash in the center section which worked extremely well, the tags may need a bit of tweaking but it did work. we've also decided to go with a flash menu up at the top of the page, and if you're looking at this in firefox you can tell that had some minor issues in FF the flash is aligned far off to the right and extending off the page, whereas it actually renders correctly (or at least where i wanted it to be) in IE. haven't found a good reason for this yet, but i'm sure there is one...thoughts?


KAIROSinteractive | tangent oriented

Hey Fig. Looks pretty sharp. Watch out for the double
<div id="solutions">

An element with an id should only be used once on a page. Might want to change that to a class.

Thanks Steve, and good point, i'll change that to a class. are there any solid rules for id's vs classes?

and bumping this to see if there's any ideas on the navigation position issues


KAIROSinteractive | tangent oriented

and i fixed the nav problem...but i don't know how

http://www.notdecaf.com/css/test08.html


KAIROSinteractive | tangent oriented

quote:

---

Fig said:

are there any solid rules for id's vs classes?

---

Only what was already stated - an ID can only appear once on a page. A class can be used as many times as you wish.
An ID....identifies an element. It must be unique. If it weren't, there would be no point.

Generally speaking, I use an ID on each element that will be a defining structural element (#head, #nav, #sub-nav, #content, #sub-content, #foot, etc). I use them *almost* exclusively on <div> elements, as they are generally the elements that block out the structure of the page.

Classes are for anything that is 'general use' or that will clearly be repetitive, and are generally 'in the content' as opposed to elements that hold the content (so to speak).

Again - these are my personal rules of thumb, not established rules.

Of course, bear in mind that you want to make use of the Cascading setup as much as possible, and eliminate as many unneeded uses of 'class' attributes as possbile.

that maxdesign website is great... even though I didnt need them right now its superb info thanks dl

ok, i'm getting better at this:
http://www.notdecaf.com/css/portfolio_test.html
style sheet is here: http://www.notdecaf.com/css/infostyles.css

it almost works like i want it to, other than the client list being lower right instead of aligned at the top of the page like i'd prefer. it works on some of the other pages but not on this one...thoughts?

NOTE: I built out the original template and then some of the other designers here coded some of the other pages so i accept no responsiblity for random span tags that may be there


KAIROSinteractive | tangent oriented

ok, better, i realize one error i was making was that i was using an ID tag multiple times:
http://www.notdecaf.com/css/portfolio_test02.html

the different sections weren't quite lining up with the images in IE, have it looking decent with an extra hard return in there so i guess that works for now. wheeeeeee...


KAIROSinteractive | tangent oriented

(Edited by Fig on 06-26-2006 17:40)