December 20th, 2003, 01:13 PM
CSS: total control over positioning of boxes
I've been teaching myself webpage design and ive decided to not use tables. my problem that i have encountered is that when i introduce a new box, it automatically gets put just to the right of the last one i introduced.
ive changed the background to white so it's clear where all the boxes are.
say i wanted to have that big box "Welcom to..." directly beneth the funky doddle that is to the left of it right now. How would I do this without using a whole bunch of <br>'s?
December 20th, 2003, 01:23 PM
You're retarded not to use tables....
December 20th, 2003, 01:26 PM
i just want to learn this CSS properly. i know its doable cause ive seen pages doing it.
December 20th, 2003, 01:34 PM
yeah... it's also stupid. There's no logical reason for using divs over tables, except that it's harder, and you can't do as with it.
December 20th, 2003, 01:37 PM
dude, im not posting a question about if its better to use tables. I simply want to know how to do this in CSS, i know its harder. I can do tables, I'm learning new things. If you dont know, then dont reply.
December 20th, 2003, 01:52 PM
I'll start by saying your page looks completely different in Mozilla than in IE. I'm betting Mozilla is more "right" - that is, closer to standards.
I'm not that great with CSS, most of what I've done is by finding what I want then adapting it.. to that end, while it's not particularly useful to you probably, why not go to a page that has a display of what you want and look a their style sheet? Use that as a basis to learn. Obviously don't steal their stuff, but theres nothing wrong with learning by example.
That said: there are many logical reasons for using css over tables; I won't get into that argument here, because that guy is simply trolling; but I think that it is a huge advantage for you to stick to it and learn (as you seem to be) and you'll find that it's worth it =)
Just remember, tables aren't all evil and they do have a proper place.
I had an idea, I'm not that great with CSS but when I had an alignment issue that wasn't clearing properly, I found that inserting this code
helped to clear the alignment and let me move 'downwards' rather than 'sideways'. but, then again, in Mozilla it does move downwards, already. I can attach a screenshot if you'd like, let me know.
<br style="clear: both;" />
December 20th, 2003, 02:04 PM
Thank you lisajill, that one line does work. do you know what "both" refers to by chance?
And as for the modzilla deal, I guess youre saying that I need to make some additional code so that the boxes do display side by side? kind of like an <br style="clear: both;" /> evquivalent to keeping in on the side? a screen shot would be greatly appreciated.
December 20th, 2003, 02:04 PM
Webnet, if you aren't going to add anything useful to the thread, don't add anything at all.
orbitup, welcome to CSS and positioning. There are many, many ways to deal with positioning elements on your page. Not all are good.
Sometimes you will find that it is useful to mix tables with positioned boxes.
December 20th, 2003, 02:10 PM
December 20th, 2003, 02:16 PM
Here is the Mozilla Screenshot.. my next reply will be the IE screenshot... as it shows on my pc's, just so you know for sure=)
December 20th, 2003, 02:18 PM
the mozilla versions are mozilla 1.5 and mozilla firebird .7... if you're interest, opera renders it the same as the mozilla's =)
December 20th, 2003, 02:22 PM
oh boy, ya thats a little bit of a disturbed modzilla pg...
seems like it should have a simple solution...any ideas?:S time to go interent huntin ... thanks a lot for the help
December 20th, 2003, 04:23 PM
css files can not have html tags in them so remove them
don't skip directly to a h3 tag,
use h1 as highest level title and skip the pre-tags arround the title use css to do the spacing between the letters
for some reason you have put ! infront of many ot the float,
<h1>MATHSEED EXPEDITIONS TUTORING</h1>
remove the !. and it will begin to look a bit more normal in mozilla.
you can remove float form the mainbox.
and set a margin to the left, have also increased the width of the titlebox.
you have used the id font2 and bodyText more than once, id are unique for a documents and can only be used once, change it to class.
margin: 1px 1px 1px 200px;
border: 1px solid #ccc;
background: black !#666;
border: 0px solid #ccc;
<h2>Welcome to Mathseed Tutoring Expeditions</h2>
<h3>All in one:</h3>
<li> math tutor</li>
<li> kayak guide</li>
<li> ski instructor</li>
<li> camp counselor </li>
<li> environmental engineer</li>
Last edited by Akh; December 20th, 2003 at 04:25 PM.
December 20th, 2003, 05:52 PM
Akh: thank you. the 2 things you said about start with h1 and and id can only be once... are those actual rules or just a good standard to follow? i mean i have noticed that wheather i call something a class or an id, it works the same...is is just that i havnt tried something where that actually matters or is it simply just "good programming standard"? m@
December 20th, 2003, 06:37 PM