|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
#1
December 20th, 2003, 01:13 PM
|
|||
|
|||
|
CSS: total control over positioning of boxes
hello all,
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. http://members.rogers.com/mkurowski/mathtest.html 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? Thanks, Matt
|
|
#5
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.
|
|
#6
December 20th, 2003, 01:52 PM
|
|||
|
|||
|
Well,
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 Code:
<br style="clear: both;" /> 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.
|
|
#7
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. Matt
|
|
#8
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. CSS positioning can be further enhanced with Javascript. For example: Using javascript to work out the available space that the page has to work with on users browsers and then positioning accordingly.
|
|
#9
December 20th, 2003, 02:10 PM
|
|||
|
|||
|
PHP: ya, i havnt quite got around to javascript just yet, but its on the to do list:P do you know a good page that discribes all the different sorts of postioning type deals with all that absolute and relative etc. jiznat?
thanks, matt
|
|
#12
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
|
|
#13
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 Code:
css:
h1 {
color: #990000;
font-size:1em;
letter-spacing:0.5em;
}
html
<h1>MATHSEED EXPEDITIONS TUTORING</h1>
for some reason you have put ! infront of many ot the float, 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. Code:
css:
.mainbox {
padding: 4px;
margin: 1px 1px 1px 200px;
background: #666;
border: 1px solid #ccc;
margin-bottom: 0mm;
width: 300px;
}
.titlebox {
float:left;
padding: 2px;
margin: 0px;
width: 190px;
background: black !#666;
border: 0px solid #ccc;
}
html:
<div class="mainbox">
<h2>Welcome to Mathseed Tutoring Expeditions</h2>
<h3>All in one:</h3>
<ul>
<li> math tutor</li>
<li> kayak guide</li>
<li> ski instructor</li>
<li> camp counselor </li>
<li> environmental engineer</li>
</ul>
</div>
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. Last edited by Akh : December 20th, 2003 at 04:25 PM.
|
|
#14
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@
|
|
#15
December 20th, 2003, 06:37 PM
|
||||
|
||||
|
the id is unique
http://www.w3.org/TR/1998/REC-html4...al.html#h-7.5.2 h1 tags can be used more than once, but should be avoided, but if you skip directly to a h3 tag you are breaking the structur of the document. read more of it here: http://www.w3.org/TR/1998/REC-html4...al.html#edef-H1 http://www.camaban.co.uk/semanticwhat.php http://www.webaim.org/techniques/structure/
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
