Doctor_Varney
11-13-2008, 12:43 AM
Here is my latest set of experiments, which takes a DW/tabular layout and turns it into HTML/CSS. To save space, only the salient code has been posted and the relevant page areas, in question, have been screenshot. Lately, I have read this (http://www.webdesignfromscratch.com/css-block-and-inline.cfm).
I have placed a question-summary at the bottom, in bold for anyone who wants to get straight to it.
All results shown for FF3.03
Results are exactly the same, for IE7 (latest ver.)
So...
This code...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<div id="ctrWrap" class="wrap512">
<div id="gallery">
<img
class="path-7 fl"
src="../assets/events/evp007.jpg"
alt="EVP7"
/>
<img
class="path-8 fl"
src="../assets/events/evp008.jpg"
alt="EVP8"
/>
<img
class="path-9 fr"
src="../assets/events/evp009.jpg"
alt="EVP9" />
<p class="caption-7 cx2 fl l">
Ade Varney is pictured with one
of his lifelike corpses.
</p>
<p class="caption-8 fl l">
Joolz, with some of the ‘Thriller’
undead, she re-created for The 2006
World Music Awards.
</p>
<p class="caption-9 fr l">
Behind the scenes of ‘Thriller’,
WMA 2006.
</p>
<h1>
Coming up...
</h1>
</div>
</div>
Begets this result:
I've called it "overkill.html" for reasons you'll see... It's full of floats, sizes and very definite rules for positioning, leaving nothing to chance. It was much more 'overkill' than it is now, yesterday, before I combed out even more innessential rules and classes.
http://i183.photobucket.com/albums/x103/Doctor_Varney/offset-issue_overkill-0.jpg
The alignment discrepancy between images and text are is accounted for, by removal of the green border, in the live situation. But why is it so far over?
And here is the CSS
/**********************************
Structure Sizes & Positioning
***********************************/
#ctrwrap{position:absolute;left:50%;z-index:10}
.wrap512{width:512px;margin:2% 0 0 -256px}
/************************************
Commonly-Used % Width Instructions
************************************/
.w100{width:100%}
.w50{width:50%}
/*************************
Alignments & Floats
*************************/
.fl{float:left}
.fr{float:right}
.cl{clear:left}
.cr{clear:right}
.cx2{clear:both}
.ctr{text-align:center}
.j{text-align:justify}
.r{text-align:right}
.l{text-align:left}
/*******************
Images & Captions
********************/
.path-7{margin:40px 0 0 0}
.path-8{margin:0 0 0 30px}
.path-9{margin:24px 0 0 0}
.caption-7{width:141px;margin:1em 0 1em 0}
.caption-8{width:174px;margin:1em 0 1em 30px}
.caption-9{width:133px;margin:1em 0 1em 0}
The result (without borders) is as intended. Great! "So what's the problem?" I hear you ask...
Well, the point is, that if images are inline elements and paragraphs are block level, then surely - the floats you see here, working so beatifully, must be superflous??? Since such elements default, each to their block/inline state when not altered, the code of my next example, should work... Right? Okay. Let's take a look...
And so...
This code...
<div id="ctrWrap" class="wrap512">
<div id="gallery">
<img
class="path-7"
src="../assets/events/evp007.jpg"
alt="EVP7"
/>
<img
class="path-8"
src="../assets/events/evp008.jpg"
alt="EVP8"
/>
<img
class="path-9"
src="../assets/events/evp009.jpg"
alt="EVP9"
/>
<p class="caption-7 l fl">
Ade Varney is pictured with one
of his lifelike corpses.
</p>
<p class="caption-8 l fl">
Joolz, with some of the ‘Thriller’
undead, she re-created for The 2006
World Music Awards.
</p>
<p class="caption-9 l fl">
Behind the scenes of ‘Thriller’,
WMA 2006.
</p>
<h1>
Coming up...
</h1>
</div>
</div>
Begets this result:
I've called this "min-code.html" because it uses the very minimum amount of rules, to achieve the desired layout. In other words, as well as other things: images not floated / paragraphs floated. But does it achieve what I'm after? Almost... But not quite.
http://i183.photobucket.com/albums/x103/Doctor_Varney/offset-issue_min-code-0.jpg
Here, in "min-code" you can see clearly that there is some kind of positioning discrepancy occuring (illustrated by the P.S. guides and blue text-borders).
When the blue 1px border is expunged, the alignment discrepancy persists.
So, I hoped I could actually rely on the default display-level modes (inline & block) to do the positioning work for me and, as you'll see from the code, I've inserted margins to do the tweaking and set the <p> widths to exactly those of the images above, to contain the text. Though what's actually happened is not desirable.
The Main Questions
You can see the rough layout I want to achieve, so...
1) Where we have two elements, it is easy to say we'll float one left, the other right. Simple. But when we have three (or more); what should we do with them?
a)Float images and text, one left; two right / or float two left and one right. Tweak with margins? (Someone said: "Beware of using too many floats" (sic.))
b) Change the display mode for paragraphs (inline to block) and thus allow the element to take up the natural position, implied by the display-change; then tweak with a margin?
c) Use padding instead of margins?
d) Combine both padding and margins?
f) Forget this entire layout and build columns instead? (The reason I didn't was because I thought it inelegant to use so many #DIVS in my layout, when I could just as easily take advantage of the natural properties of the block/inline display modes.
The point being, that if an inline's natural behaviour is to cuddle up close to another inline element, then isn't it true that I should omit the float property altogether, BUT apply it to the <p>'s which are block level? When, out of curiosity, I have omitted all margins, these unfloated images appeared to have a couple of pixels distance, from each other. To me, that's big and it's therefore a problem.
In summary: What is the proper, approved and reliable, CSS method for positioning three images next to each other, with paragraphs under each?
Many thanks,
http://i183.photobucket.com/albums/x103/Doctor_Varney/signature.gif
I have placed a question-summary at the bottom, in bold for anyone who wants to get straight to it.
All results shown for FF3.03
Results are exactly the same, for IE7 (latest ver.)
So...
This code...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<div id="ctrWrap" class="wrap512">
<div id="gallery">
<img
class="path-7 fl"
src="../assets/events/evp007.jpg"
alt="EVP7"
/>
<img
class="path-8 fl"
src="../assets/events/evp008.jpg"
alt="EVP8"
/>
<img
class="path-9 fr"
src="../assets/events/evp009.jpg"
alt="EVP9" />
<p class="caption-7 cx2 fl l">
Ade Varney is pictured with one
of his lifelike corpses.
</p>
<p class="caption-8 fl l">
Joolz, with some of the ‘Thriller’
undead, she re-created for The 2006
World Music Awards.
</p>
<p class="caption-9 fr l">
Behind the scenes of ‘Thriller’,
WMA 2006.
</p>
<h1>
Coming up...
</h1>
</div>
</div>
Begets this result:
I've called it "overkill.html" for reasons you'll see... It's full of floats, sizes and very definite rules for positioning, leaving nothing to chance. It was much more 'overkill' than it is now, yesterday, before I combed out even more innessential rules and classes.
http://i183.photobucket.com/albums/x103/Doctor_Varney/offset-issue_overkill-0.jpg
The alignment discrepancy between images and text are is accounted for, by removal of the green border, in the live situation. But why is it so far over?
And here is the CSS
/**********************************
Structure Sizes & Positioning
***********************************/
#ctrwrap{position:absolute;left:50%;z-index:10}
.wrap512{width:512px;margin:2% 0 0 -256px}
/************************************
Commonly-Used % Width Instructions
************************************/
.w100{width:100%}
.w50{width:50%}
/*************************
Alignments & Floats
*************************/
.fl{float:left}
.fr{float:right}
.cl{clear:left}
.cr{clear:right}
.cx2{clear:both}
.ctr{text-align:center}
.j{text-align:justify}
.r{text-align:right}
.l{text-align:left}
/*******************
Images & Captions
********************/
.path-7{margin:40px 0 0 0}
.path-8{margin:0 0 0 30px}
.path-9{margin:24px 0 0 0}
.caption-7{width:141px;margin:1em 0 1em 0}
.caption-8{width:174px;margin:1em 0 1em 30px}
.caption-9{width:133px;margin:1em 0 1em 0}
The result (without borders) is as intended. Great! "So what's the problem?" I hear you ask...
Well, the point is, that if images are inline elements and paragraphs are block level, then surely - the floats you see here, working so beatifully, must be superflous??? Since such elements default, each to their block/inline state when not altered, the code of my next example, should work... Right? Okay. Let's take a look...
And so...
This code...
<div id="ctrWrap" class="wrap512">
<div id="gallery">
<img
class="path-7"
src="../assets/events/evp007.jpg"
alt="EVP7"
/>
<img
class="path-8"
src="../assets/events/evp008.jpg"
alt="EVP8"
/>
<img
class="path-9"
src="../assets/events/evp009.jpg"
alt="EVP9"
/>
<p class="caption-7 l fl">
Ade Varney is pictured with one
of his lifelike corpses.
</p>
<p class="caption-8 l fl">
Joolz, with some of the ‘Thriller’
undead, she re-created for The 2006
World Music Awards.
</p>
<p class="caption-9 l fl">
Behind the scenes of ‘Thriller’,
WMA 2006.
</p>
<h1>
Coming up...
</h1>
</div>
</div>
Begets this result:
I've called this "min-code.html" because it uses the very minimum amount of rules, to achieve the desired layout. In other words, as well as other things: images not floated / paragraphs floated. But does it achieve what I'm after? Almost... But not quite.
http://i183.photobucket.com/albums/x103/Doctor_Varney/offset-issue_min-code-0.jpg
Here, in "min-code" you can see clearly that there is some kind of positioning discrepancy occuring (illustrated by the P.S. guides and blue text-borders).
When the blue 1px border is expunged, the alignment discrepancy persists.
So, I hoped I could actually rely on the default display-level modes (inline & block) to do the positioning work for me and, as you'll see from the code, I've inserted margins to do the tweaking and set the <p> widths to exactly those of the images above, to contain the text. Though what's actually happened is not desirable.
The Main Questions
You can see the rough layout I want to achieve, so...
1) Where we have two elements, it is easy to say we'll float one left, the other right. Simple. But when we have three (or more); what should we do with them?
a)Float images and text, one left; two right / or float two left and one right. Tweak with margins? (Someone said: "Beware of using too many floats" (sic.))
b) Change the display mode for paragraphs (inline to block) and thus allow the element to take up the natural position, implied by the display-change; then tweak with a margin?
c) Use padding instead of margins?
d) Combine both padding and margins?
f) Forget this entire layout and build columns instead? (The reason I didn't was because I thought it inelegant to use so many #DIVS in my layout, when I could just as easily take advantage of the natural properties of the block/inline display modes.
The point being, that if an inline's natural behaviour is to cuddle up close to another inline element, then isn't it true that I should omit the float property altogether, BUT apply it to the <p>'s which are block level? When, out of curiosity, I have omitted all margins, these unfloated images appeared to have a couple of pixels distance, from each other. To me, that's big and it's therefore a problem.
In summary: What is the proper, approved and reliable, CSS method for positioning three images next to each other, with paragraphs under each?
Many thanks,
http://i183.photobucket.com/albums/x103/Doctor_Varney/signature.gif