|
| |
|
|
Starhugger
Posts: 489
Joined: 4/12/2005
Status: offline
 |
DIVs are NOT DIVine!! (grrr) - 1/21/2008 16:38:49
Can someone please help me get this freaking things to line up properly? I keep running into this problem and I just can't seem to get the hang of these things. I typically finally give up and put in tables instead. (I know, bite my tongue...) Tables may be un-PC, but at least they're predictable! But I would really like to learn to do this in CSS once and for all, so if someone could help me, I would greatly appreciate it.
I want to have 4 boxes -- 2 rows of 2 boxes each, side by side, grouped into one encompassing box area. For my current purposes, they will feature selected books (hence the CSS names below). I can't seem to get them to line up side-by-side, no matter what combination of "position: relative" or "vertical-align: top" or whatever that I put with them. My current attempt puts a "float: right" on the right-hand box that's placed inside a larger GroupBox, hoping that will help matters. But nooooooo.
Here's the CSS code:
div.bigbookbox {
width: 450px;
padding: 15px;
border: solid firebrick 2px;
vertical-align: top;
}
div.bookgroup {
background-color: pink;
text-align: left;
vertical-align: top;
}
div.bookright {
position: relative;
float: right;
margin-left: 5px;
width: 155px;
}
div.bookspacer {
height: 15px;
}
div.bookbox {
width: 150px;
border: solid indigo 1px;
padding: 5px;
margin: 0;
background-color: linen;
text-align: center;
vertical-align: top;
}
div.bookbox p {
font-size: .85em;
font-family: tahoma,arial,sans-serif;
font-weight: normal;
font-style: normal;
}
Above, I've added a pink background to BookGroup only for testing purposes, so I can see where it is and how it's lining up with the right-hand BookBox.
Here's the HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Book Ads</title>
<link rel="stylesheet" type="text/css" href="../bookads.css">
</head>
<body>
<div class="bigbookbox">
<div class="bookgroup">
<div class="bookbox">
<p>BOX 1 (TOP LEFT)</p>
</div> <!-- END BookBox -->
<div class="bookright">
<div class="bookbox">
<p>BOX 2 (TOP RIGHT)</p>
</div> <!-- END BookBox -->
</div> <!-- END BookRight -->
</div> <!-- END BookGroup -->
<div class="bookspacer"></div>
<div class="bookgroup">
<div class="bookbox">
<p>BOX 3 (BOTTOM LEFT)</p>
</div> <!-- END BookBox -->
<div class="bookright">
<div class="bookbox">
<p>BOX 4 (BOTTOM RIGHT)</p>
</div> <!-- END BookBox -->
</div> <!-- END BookRight -->
</div> <!-- END BookGroup -->
</div> <!-- END BigBookBox -->
</body></html>
What I get is this: (uploaded JPG should appear somewhere here)
Thanks in advance for the help.
Starhugger
Thumbnail Image
 Attachment (1)
|
|
|
|
sticks464
Posts: 55
Joined: 10/16/2005
Status: offline
|
RE: DIVs are NOT DIVine!! (grrr) - 1/22/2008 8:59:58
This may not be the best way but it works
html
<div class="bigbookbox">
<div class="bookgroup">
<div class="bookbox1 bookbox">
<p>BOX 1 (TOP LEFT)</p>
</div> <!-- END BookBox1 -->
<div class="bookbox2 bookbox">
<p>BOX 2 (TOP RIGHT)</p>
</div> <!-- END BookBox2 -->
<div class="bookspacer"></div>
<div class="bookbox3 bookbox">
<p>BOX 3 (BOTTOM LEFT)</p>
</div> <!-- END BookBox3 -->
<div class="bookbox4 bookbox">
<p>BOX 4 (BOTTOM RIGHT)</p>
</div> <!-- END BookBox4 -->
</div> <!-- END BookGroup -->
</div> <!-- END BigBookBox -->
css
div.bigbookbox {
width: 450px;
height:auto;
padding: 15px;
border: solid firebrick 2px;
text-align:center;
float:left;
}
div.bookgroup {
float:left;
}
div.bookbox1, div.bookbox3 {
float:left;
}
div.bookbox2, div.bookbox4 {
float:right;
}
div.bookbox {
width: 150px;
border: solid indigo 1px;
padding: 5px;
margin: 0;
background-color: linen;
}
div.bookspacer {
height:15px;
clear:both;
}
div.bookbox p {
font-size: .85em;
font-family: tahoma,arial,sans-serif;
margin:0;
}
You can controll the location of bigbookbox with margins and the float style.
| |
|
|
|
Tailslide
Posts: 5771
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: DIVs are NOT DIVine!! (grrr) - 1/22/2008 9:41:54
Edit: Was THIS what you were looking for?
edited to look more like the jpg example.
< Message edited by Tailslide -- 1/22/2008 10:08:24 >
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Starhugger
Posts: 489
Joined: 4/12/2005
Status: offline
|
RE: DIVs are NOT DIVine!! (grrr) - 1/23/2008 0:02:51
quote:
ORIGINAL: sticks464
<div class="bookbox1 bookbox">
Hi Sticks,
Thanks for your reply. I'm curious about one line of code (above). I've never seen two different class styles given in the same class definition before. Is this standard? How does that work?
Thanks.
SH
< Message edited by Starhugger -- 1/23/2008 0:16:31 >
| |
|
|
|
Tailslide
Posts: 5771
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: DIVs are NOT DIVine!! (grrr) - 1/23/2008 3:02:37
Hi SH
Ok in order:
1. Floated elements don't take up any space within their parent element (well ok I think actually they take up a single line - like literally a thin line) so you know how with Firefox etc a div will only expand to surround it's contents - well when you've got a float there, the parent div can't "see" it's contents and so won't enclose it. You can "clear" a float by having something after it in the normal flow of the page (e.g. not floated or positioned) and that will force the enclosing (and thus background showing) or, if all you've got is floats or the floats aren't cleared then you can trick the parent div into doing what you want - adding overflow:hidden will do this. It's not a perfect solution and needs to be checked in browsers to ensure that nothing hinky has happened due to using it (sometimes will) but generally it works fine.
2. The 1% height thing is specifically targeted at IE6 and under (thus the * html #divname) as IE has this nasty little thing called Haslayout which I'm not going to try to explain as I don't fully understand it myself. Basically it can be the cause of many weird IE bugs. Adding a specific width will sometimes solve the problem (you could try that in this case actually) or adding position:absolute will do it too. Another way is adding height 1% although you need to be careful that other browsers can't see this - thus the star hack to target IE6. You could also add it in using conditional comments if you prefer.
3. See above regarding the * html thing.
4. I didn't notice that you used the HTML 4 strict doctype - I just used the one that is standard when I create a new document. There's absolutely nothing wrong with using HTML 4 strict so feel free to use that if preferred.
5. All of the stuff I added in is absolutely valid (apart actually from Pink being an acceptable background colour!) although generally I'd have IE bug fixes in an IE stylesheet served by a conditional comment rather than use the star hack (* html).
6. In answer to your question to Sticks - yes it's perfectly valid to have two class names in a single instance separated by a space as he's done. It used to be that IE (oh funny old thing) wouldn't pick up on both class names but to my knowledge that works fine now.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
d a v e
Posts: 3937
Joined: 7/24/2002
From: England (but live in Finland now)
Status: online
|
RE: DIVs are NOT DIVine!! (grrr) - 1/23/2008 3:23:15
6. In answer to your question to Sticks - yes it's perfectly valid to have two class names in a single instance separated by a space as he's done. It used to be that IE (oh funny old thing) wouldn't pick up on both class names but to my knowledge that works fine now.
are you sure IE6 can deal with this? or was it only pre IE6 that wouldn't?
_____________________________
David Prescott
Gekko web design
| |
|
|
|
Starhugger
Posts: 489
Joined: 4/12/2005
Status: offline
|
RE: DIVs are NOT DIVine!! (grrr) - 1/23/2008 13:57:17
quote:
ORIGINAL: Tailslide
Yes - in fact, on checking, even IE5 and 5.5 interpret multiple classes like this too with no problem.
IE6 and under won't however support multiple class selectors such as p.black.bold as modern browsers would. Here's a good explanation:
http://www.interfacethis.com/misc/css-test/multiclass.html
This is fascinating! I've never seen this before or even heard of it. How many multiple classes can you list together? Just two, or more? This opens up a lot of possibilities. I get so frustrated because I usually wind up with a pile of classes that differ from each other only by one or two styles, with permutations and combinations of various colours, font sizes, etc. Being able to use multiple classes could make style choices a lot easier.
Again, is there a site somewhere that gives detailed information about this? Thanks for the link, although that example uses the p.black.bold kind of thing, and I'd like my code to be as compatible as possible with all browsers.
Thanks!
SH
| |
|
|
|
Tailslide
Posts: 5771
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: DIVs are NOT DIVine!! (grrr) - 1/23/2008 14:05:53
The star hack targets IE6, 5.5 and 5 - all other browsers ignore it.
Personally I tend to use conditional comments to include an IE#-only stylesheet if necessary to add any extra specific IE rules to fix bugs. I'd only add it if absolutely necessary and I'd only add in the absolutely necessary rules into that stylesheet - if that makes any sense. Don't add it just for the sake of it. There are no real set chunks of anti-IE code that you can use - different occasions need different solutions.
Oh and I've just checked - in the example given above - adding width:100% to the bookrow div will sort the issue so you can remove the *html {height:1%} thing altogether!
More about Conditional Comments here: http://www.quirksmode.org/css/condcom.html
Star hack works fine for IE6 and under now.... but we can't be sure that IE13 (ha we'll be dead by then!) won't pick it up and do something stupid with it which is why I tend to do the conditional comment instead - it's more targetted. But there are arguments for and against each method - *shrug* - do whatever suits you!
For more about IE and other browser bugs: http://www.positioniseverything.net/ This is an excellent place to check out any weirdness!
Regarding DOCTYPES - well it's sort of the other way around. You decide what sort of markup you want to use and then add in the appropriate DOCTYPE.
Now something you might want to consider adding to a stylesheet every time you do one is a CSS Reset. All browsers have default settings for stuff like padding or margins on a paragraph (for example) and of course, these are all different. So to make life bearable what we do is add a CSS reset at the beginning of each stylesheet which removes all those defaults and sets everything to zero - gives us a level playing field. It used to be that we'd just add in
body, html {margin:0; padding:0;}
Which is fine BUT it's quite extreme - soooo instead I add in this little chunk:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,p,pre,blockquote,ol,dl,address {margin:1em 0;}
li, dd, blockquote {margin-left:1em;}
html, body, fieldset {font:100.1%/120% Verdana, Arial, Helvetica, sans-serif;}
input, select, textarea {font-size:100.1%;}
h1, h2, h3, h4, h5, h6 {font-size:100%;}
form label{cursor:pointer;}
fieldset, img{border:none;}
table{border-collapse:collapse; border-spacing:0;}
At the start of every stylesheet - it sets up nice neat defaults for the stylesheet - getting rid of unwanted margins on most but not all elements. Makes life a lot easier.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Starhugger
Posts: 489
Joined: 4/12/2005
Status: offline
|
RE: DIVs are NOT DIVine!! (grrr) - 1/23/2008 14:53:32
Tail, thank you so much!
quote:
Oh and I've just checked - in the example given above - adding width:100% to the bookrow div will sort the issue so you can remove the *html {height:1%} thing altogether!
Thanks for checking back about this.
quote:
More about Conditional Comments here: http://www.quirksmode.org/css/condcom.html
Thanks! That's very helpful.
quote:
Regarding DOCTYPES - well it's sort of the other way around. You decide what sort of markup you want to use and then add in the appropriate DOCTYPE.
But that's just the thing -- I've never found a completely clear explanation or formula to figure out which is the appropriate DOCTYPE. I've seen some good sites/pages about it but it always leaves me with more questions. It would be so nice if someone came up with a program that would scan your code and figure out which is the appropriate DOCTYPE. (I know: whine, whine whine...) 
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,p,pre,blockquote,ol,dl,address {margin:1em 0;}
li, dd, blockquote {margin-left:1em;}
html, body, fieldset {font:100.1%/120% Verdana, Arial, Helvetica, sans-serif;}
input, select, textarea {font-size:100.1%;}
h1, h2, h3, h4, h5, h6 {font-size:100%;}
form label{cursor:pointer;}
fieldset, img{border:none;}
table{border-collapse:collapse; border-spacing:0;}
Hmmm... That might explain why I always seem to get a space at the top of the window in IE7 (and possibly other versions). Great idea. Why do you use 100.1% for some of them though? And what is meant by html, body, fieldset being set to 100.1%/120%?
Thanks again!
SH
| |
|
|
|
Tailslide
Posts: 5771
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: DIVs are NOT DIVine!! (grrr) - 1/23/2008 15:12:35
Ok so here's the simple way to decide what doctype you should use.
There is no practical advantage in using XHTML strict over HTML stict - I use XHMTL strict because, frankly I thought I was being clever back when I started out and I stick with it out of habit even though I know there's no advantage. I quite like the syntax.
So... whichever you fancy really. I quite like the syntax of having closing tags on absolutely everything. If you've got better things to think about then don't bother with the XHTML - stick with HTML.
BUT I feel that the important thing is to use Strict rather than Transitional in whichever flavour of markup you choose. The difference is that using Transitional you can get away with using stuff like inline fonts and other old-school styling. I don't like that sort of added rubbish as I always use CSS anyway so I might as well use Strict. I feel that forward compatibility is likely to be better using Strict too (can't prove that though).
If you feel like you're starting to get to like the whole valid code, semantic markup, css thing then you might as well go for Strict generally as that'll be the type of code you'll be using anyway. If frankly you just don't care then use Trans.
The 100.1% thing was to combat an Opera bug - it's probably not necessary anymore as Opera users tend to update their browsers fairly quickly so you could replace it with 100%.
The font:100.1%/120% is just an efficient way of writing the font-size (first figure) and the required line-height (second figure).
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Starhugger
Posts: 489
Joined: 4/12/2005
Status: offline
|
RE: DIVs are NOT DIVine!! (grrr) - 1/23/2008 16:15:40
quote:
So... whichever you fancy really. I quite like the syntax of having closing tags on absolutely everything. If you've got better things to think about then don't bother with the XHTML - stick with HTML.
Thanks for the guidelines about choosing a DOCTYPE! That's helpful.
I do try to use the XHTML closed tags as much as I can. However, I started the site using Frontpage before I really knew how to do better quality coding. I have so many pages on my site now and most of them (especially the old ones) are such a dog's breakfast under the hood that I'm embarrassed for anyone to look there. Unfortunately I don't have time to go through and recode everything properly. I've been gradually working on building a CSS-driven site, but it's very slow going and I can only find time to work on it once in a blue moon, and by then I start thinking maybe I should play around with a new layout or look, and then I get sidetracked, and then I wonder why it takes me so long to recode the blasted thing... 
At any rate, because of the wildly inconsistent coding that's there now, Transitional is probably the better way for me to go (which is what I'm using now). I still use FP as an editor (just because it's familiar and I can work quickly with it), but other than the FP theme and includes, I don't really use the features anymore (hoping to minimize the dirty code). I do try to code more carefully on new pages, but FP often does weird things to it by the time it generates the actual pages. (I was never able to completely validate FP code, no matter how strict I was with the code I created.) And sometimes it's just faster and easier to let FP do dirty coding when I'm in a hurry. (baaaad webmaster)
Many thanks again for explaining all this and helping me figure this out! [:)
Starhugger
| |
|
|
|
Tailslide
Posts: 5771
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: DIVs are NOT DIVine!! (grrr) - 1/24/2008 2:36:02
No problem - and don't think that XHTML is any better than HTML - 'cos it ain't! So if by any chance FP is happier using HTML then feel free to use that! I have a feeling that FP will do it's best to mess up anything though - so all you can do is the best you can.
Validating is a useful tool (bit like spell-checking) but it's not an end in itself. It's perfectly possible to have a valid site that looks like hell in various browsers so I think that a combination of trying to use valid code (just to give a good base-line and make life easier) and checking in various browsers as you go along (at least IE7, IE6, FF and Opera) will give you the results that you want in the long-term.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
caz
Posts: 3431
Joined: 10/10/2001
From: Somewhere south of Chester, UK
Status: offline
|
RE: DIVs are NOT DIVine!! (grrr) - 1/24/2008 8:39:27
If you use FP themes then your code will be altered. FP Includes on the other hand will validate OK so long as you catch any stray <p>'s in code view. Otherwise if you just use code view to write your code then FP will not interfere.
_____________________________
Do not meddle in the affairs of cats, for they are subtle and will dance, or more on your keyboard.
Cheshire cat. www.doracat.co.uk
I remember when it took less than 4hrs to fly across the Atlantic.
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
). 
Why did you choose that particular one? Because of the * html line maybe? 
