Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts

    More Queries about Floats (Experiment Results)

    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.

    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...
    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.

    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
    Code:
    /**********************************
    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...
    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.



    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,

    Last edited by Doctor_Varney; 11-13-2008 at 02:06 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #2
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    I'm not sure I'm following all this but what I would do is this:
    Code:
    <!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>

  • The Following 2 Users Say Thank You to drhowarddrfine For This Useful Post:

    Doctor_Varney (11-13-2008), effpeetee (11-13-2008)

  • #3
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Oh!

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

    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.

    Many thanks,

    Last edited by Doctor_Varney; 11-13-2008 at 02:18 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    It looks quite good. So does the result.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Quote Originally Posted by drhowarddrfine View Post
    I'm not sure I'm following all this but what I would do is this:
    Code:
    <!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!

    Regards,
    Last edited by Doctor_Varney; 11-13-2008 at 04:47 PM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    I would like to make it clear that the site I gave two posts above is using the code posted by:

    drhowarddrfine

    I just altered the jpgs and text.

    Frank
    Last edited by effpeetee; 11-13-2008 at 05:14 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #7
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    You're welcome.

  • #8
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Quote Originally Posted by effpeetee View Post
    I would like to make it clear that the site I gave 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,
    Last edited by Doctor_Varney; 11-13-2008 at 07:12 PM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #9
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    In what way do you mean the different widths are affecting you?

  • #10
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Quote Originally Posted by drhowarddrfine View Post
    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?

    Last edited by Doctor_Varney; 11-14-2008 at 02:05 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #11
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Then percentages should play a role here but I'm past that time of the day when I can think.

  • #12
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    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?

    Last edited by Doctor_Varney; 11-14-2008 at 02:43 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #13
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Quote Originally Posted by drhowarddrfine View Post
    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,

    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #14
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Is this any use Doctor.

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

    It validates.

    Frank
    Last edited by effpeetee; 11-14-2008 at 10:26 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #15
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Quote Originally Posted by effpeetee View Post
    Is this any use 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...

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

    Cheers!
    Last edited by Doctor_Varney; 11-14-2008 at 12:14 PM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •