...

View Full Version : More Queries about Floats (Experiment Results)



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

drhowarddrfine
11-13-2008, 01:17 AM
I'm not sure I'm following all this but what I would do is this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
p{float:left;margin:1em;padding:1em;border:1px solid #00a}
p img{display:block}
</style>
</head>
<body>
<p><img src="a.jpeg">Hello and some more text here</p>
<p><img src="a.jpeg">Hello and some more text here</p>
<p><img src="a.jpeg">Hello and some more text here</p>
</body>
</html>

Doctor_Varney
11-13-2008, 02:15 AM
Oh! :eek:

You've changed the display mode of the image to block and thrown it into the floated paragraph! It's simple. I like it! :thumbsup:

Thing is, I've just read through what I've written and to be honest, I think I've floated myself into a corner of obfuscation. :o

Many thanks,

http://i183.photobucket.com/albums/x103/Doctor_Varney/signature.gif

effpeetee
11-13-2008, 01:03 PM
It looks quite good. (http://exitfegs.co.uk/ahello.html)So does the result.:thumbsup:

Frank

Doctor_Varney
11-13-2008, 04:38 PM
I'm not sure I'm following all this but what I would do is this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
p{float:left;margin:1em;padding:1em;border:1px solid #00a}
p img{display:block}
</style>
</head>
<body>
<p><img src="a.jpeg">Hello and some more text here</p>
<p><img src="a.jpeg">Hello and some more text here</p>
<p><img src="a.jpeg">Hello and some more text here</p>
</body>
</html>


Sir, that is simple, elegant and refined. Perfect! My hat off to you, as it was exactly what I was looking for. Thank you very much! :thumbsup:

Regards,
http://i183.photobucket.com/albums/x103/Doctor_Varney/signature.gif

effpeetee
11-13-2008, 05:09 PM
I would like to make it clear that the site I gave (http://exitfegs.co.uk/ahello.html)two posts above is using the code posted by:

drhowarddrfine

I just altered the jpgs and text.

Frank

drhowarddrfine
11-13-2008, 05:10 PM
You're welcome.

Doctor_Varney
11-13-2008, 07:09 PM
I would like to make it clear that the site I gave (http://exitfegs.co.uk/ahello.html)two posts above is using the code posted by:

drhowarddrfine

I just altered the jpgs and text.

Frank

Yeah, I realised, when I compared the code. Though, your recreation of it, alerted me to the simple margin.

Won't work for me, though, as I have images of varying widths (hence the path1, path2 business going on in there). The principle will come in handy, for where I have same-size images to deal with.

Experience has taught me, a style sheet can get very bloated if I don't start organising and standardising some rules, very early on.

Regards,
http://i183.photobucket.com/albums/x103/Doctor_Varney/signature.gif

drhowarddrfine
11-13-2008, 08:04 PM
In what way do you mean the different widths are affecting you?

Doctor_Varney
11-14-2008, 01:52 AM
In what way do you mean the different widths are affecting you?

Because I want the leftmost and rightmost images up against the sides of the container div, with one image in the middle and an appearance of equal distance between them all.

Now, with three images of the same width, the margins (or padding) between them, can be the same for each. Hence, a global margin rule would work.

But because the images are different widths, the margins between them, must differ, in order to space them evenly (to the full width of the container div).

See what I mean?

http://i183.photobucket.com/albums/x103/Doctor_Varney/signature.gif

drhowarddrfine
11-14-2008, 02:31 AM
Then percentages should play a role here but I'm past that time of the day when I can think.

Doctor_Varney
11-14-2008, 02:40 AM
Oh dear... Now it's all going wrong and I'm confused. I still need those "path" classes in, to get the margins and I've totally lost the plot with it all now. None of this is making sense. I thought it made sense, but now it doesn't.

I really don't want to go back to giving each and every image and paragraph a class, to get the positioning or worse, absolute positioning every single element on the page. I've tried it the efficient, global way and it worked for one line of images and text. Now, when I try to start a new line, it all goes Pete Tongue and I'm completely lost again.

Could you show me how to multiply this please? I need the first line to have three images spaced evenly apart, with a paragraph of text which spans the three images.

Then I need this repeated on the next line down.

Next, I need a row of three images, evenly space apart, with a piece of text beneath each one.

How would something simple, like this, normally be done in CSS? I used to do this with tables all the time, but this is all just too weird.

Please can anyone help?

http://i183.photobucket.com/albums/x103/Doctor_Varney/signature.gif

Doctor_Varney
11-14-2008, 02:41 AM
Then percentages should play a role here but I'm past that time of the day when I can think.

Me too. I think I'll turn in to bed and think about this one tomorrow. Who knows, the answer might come to me then. My head is now just a fuzzy mess of code.

Yeah, I had a thought about percentages, as well. I think that might be the way to go. I'll sleep on it and start fresh tomorrow.

Thanks again,

http://i183.photobucket.com/albums/x103/Doctor_Varney/signature.gif

effpeetee
11-14-2008, 10:00 AM
Is this any use (http://exitfegs.co.uk/aahello.html)Doctor.

Somebody of this forum gave me the code many months ago.

It validates.

Frank

Doctor_Varney
11-14-2008, 12:11 PM
Is this any use (http://exitfegs.co.uk/aahello.html)Doctor.

Somebody of this forum gave me the code many months ago.

It validates.

Frank

Oh, hang about... This looks interesting... <span> Well, perhaps it could well be of use...

Frank, are you trying to distract me again, from my coding angst, with nice images of gardens and pretty flowers?! I know your game, you crafty devil... :D

Well, it's working... I feel better already.

Cheers!
http://i183.photobucket.com/albums/x103/Doctor_Varney/signature.gif

effpeetee
11-14-2008, 12:17 PM
Well, it's working... I feel better already.

Well! It was worth it then.:D

Frank

Things are more like they are now than they ever were before. - Dwight D. Eisenhower.

drhowarddrfine
11-14-2008, 02:41 PM
Is this any use (http://exitfegs.co.uk/aahello.html)Doctor.

Somebody of this forum gave me the code many months ago.

I don't know. There's always more than one way to do most things but those images are all the same size.

effpeetee
11-14-2008, 03:00 PM
I have altered it (http://www.exitfegs.co.uk/ahello.html)a little.

Go on,give it a whirl. Force yourself.

Frank

Doctor_Varney
11-14-2008, 03:53 PM
Hah! I'm liking it...

I'll have a play with this, later this evening.

effpeetee
11-14-2008, 04:45 PM
And (wonders never cease!) it validates.:rolleyes:

I have altered it a little - again. (http://www.exitfegs.co.uk/ahello.html)

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum