Page 1 of 2 12 Last
  • Jump to page:
    #1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Posts
    17
    Rep Power
    0

    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
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Posts
    266
    Rep Power
    13
    You're retarded not to use tables....
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Posts
    17
    Rep Power
    0
    i just want to learn this CSS properly. i know its doable cause ive seen pages doing it.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Posts
    266
    Rep Power
    13
    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.
  8. #5
  9. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Posts
    17
    Rep Power
    0
    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.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    152
    Rep Power
    11
    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.
  12. #7
  13. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Posts
    17
    Rep Power
    0
    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
  14. #8
  15. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,007
    Rep Power
    2791
    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.
  16. #9
  17. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Posts
    17
    Rep Power
    0
    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
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    152
    Rep Power
    11
    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=)
    Attached Images
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    152
    Rep Power
    11
    IE screenshot

    the mozilla versions are mozilla 1.5 and mozilla firebird .7... if you're interest, opera renders it the same as the mozilla's =)
    Attached Images
  22. #12
  23. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Posts
    17
    Rep Power
    0
    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
  24. #13
  25. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    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.
  26. #14
  27. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Posts
    17
    Rep Power
    0

    Talking


    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@
  28. #15
  29. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    the id is unique
    http://www.w3.org/TR/1998/REC-html40...l.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-html40...l.html#edef-H1
    http://www.camaban.co.uk/semanticwhat.php
    http://www.webaim.org/techniques/structure/
Page 1 of 2 12 Last
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo