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.
Results 1 to 13 of 13
  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

    How can I use a positioning method to lay elements next to each other?

    Here is a screenshot of the basic layout...



    You will see the content area lain out, ready to recieve the images and paragraph text.

    Here is the intended result, illustrated with a graphical dummy layout...


    And here is the code for trying to position the pictures and paragraph. It's not working out, except through trial and error and is not making sense to me.

    The mark-up
    Code:
    <div id="content_wrap">
    					<div id="EVP">
    						<img 
    						class="EVP001"
    						src="../assets/events/evp001.jpg" 
    						alt="EVP2" />
    						<img 
    						class="EVP002" 
    						src="../assets/events/evp002.jpg" 
    						alt="EVP2" />
    						<img 
    						class="EVP003" 
    						src="../assets/events/evp003.jpg" 
    						alt="EVP3">
    					</div>
    </div>
    The CSS
    Code:
    /*******************
    IMAGE PLACEMENT
    ********************/
    #EVP img {position:absolute;}
    .EVP001{left:0%;margin:2% 0 0 0;}
    .EVP002{left:45%;margin:2% 0 0 -113px;}
    .EVP003{left:85%;margin:2% 0 0 -80px;}
    .EVP004{margin:0 0 0 0;}
    .EVP005{margin:0 0 0 0;}
    .EVP006{margin:0 0 0 0;}
    .EVP007{margin:0 0 0 0;}
    .EVP008{margin:0 0 0 0;}
    .EVP009{margin:0 0 0 0;}
    Finally - here is the exact result of the code cited above, using dummy images for now...



    It's okay, but is only the result of jiggling the numbers to make it fit. I don't know what I'm doing, or why and as a result, not learning anything from it.

    The main thing is, I do not understand why I cannot get the elements (or the DIV, #EVP) to nest inside the #content_wrap DIV, when I use position:absolute.

    When I use position:relative, instead of :absolute, the elements WILL nest, but from thereon, nothing I do makes any sense; it's just random, hit and miss changing of numbers until something fits. I'd like very much to understand what is going on and why.

    Additionally, float:left & :right don't work properly in this method, either. I thought I could float the first one left, position the middle one 50% (then pull it back with a negative margin), then float the last one right. But no, the right-most image just flies off the page. Seemed like a good idea at the time. It made sense to me, but sadly, not good enough.

    So what would be the correct (or most reliable) method of evenly spacing these images and paragraphs, within the #EVP DIV? I'm sure I could use a standard-sized margin, if all the images were one size, but their widths & heights vary and this is what's making it complicated.

    Can anyone help?

    Many thanks,

    Doctor V
    Last edited by Doctor_Varney; 11-08-2008 at 12: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.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    The main thing is, I do not understand why I cannot get the elements (or the DIV, #EVP) to nest inside the #content_wrap DIV, when I use position:absolute.
    Apply floats to the images instead, so that you may clear your floats to stretch your container.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    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 abduraooft View Post
    Apply floats to the images instead, so that you may clear your floats to stretch your container.
    Floats.... Yes... I understand. They will push two elements, right/left, respectively... but...

    Clear floats to stretch my container...??? Please could you clarify?

    The container is already 600px wide. How can I get an equal margin between the images?

    I don't fully understand the clear: command, to use it effectively.

    Is there a float:middle command I could use? I just don't know what to do with the middle image, to center it.

    Thanks,

    Doctor V
    Last edited by Doctor_Varney; 11-08-2008 at 12:32 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.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #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 http://www.positioniseverything.net/easyclearing.html
    When a float is contained within a container box that has a visible border or background, that float does not automatically force the container's bottom edge down as the float is made taller.
    This person obviously knows more than I do, but is talking about "floats" as entities, rather than as a behaviour. This confuses me, slightly. Evidently, my entire thought process needs adjustment.

    Thanks for the links, Abduraooft. I'll have to go away and study this properly, until it makes sense to me.
    Last edited by Doctor_Varney; 11-08-2008 at 01:16 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
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    They refer "floats" as simply floated elements (elements having a float:left/right applied in their style/CSS).
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Doctor_Varney (11-08-2008)

  • #7
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Ah, ok. Thank you!

    Got some studying to do... This may take me some time...
    Last edited by Doctor_Varney; 11-08-2008 at 03:13 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.

  • #8
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    AH-HA! Got it (I think). And in significantly less time than I expected. One surmises one might be cooking on gas, at this very minute... Though, watch this space for cries in the wilderness, should the wind blow out my little stove... Anything can happen now...
    Last edited by Doctor_Varney; 11-08-2008 at 03: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.

  • #9
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Is there a float:middle command I could use? I just don't know what to do with the middle image, to center it.
    Either float three of them to left (If the container has no extra space when it occupies 3 images + their margin and paddings ).

    Otherwise do it like
    Code:
    div.wrapper{
    clear:both;
    text-align:center;
    }
    img.left{
    float:left;
    }
    img.right{
    float:right;
    }
    Code:
    <div class="wrapper">
      <img src="path1" class="left" />
      <img src="path3" class="right"/>
      <img src="path2" />
    </div>
    PS: Always place the floated elements before their non-floated siblings in markup order.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #10
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Would you mind checking this out...?

    I have done this:
    Code:
    HTML
    <img class="EVP001" src="../assets/events/evp001.jpg" alt="EVP2" />
    <img class="EVP002" src="../assets/events/evp002.jpg" alt="EVP2" />
    <img class="EVP003" src="../assets/events/evp003.jpg" alt="EVP3" />
    
    <div id="caption_split">
     |    <p class="EVP001">...Text...</p>
     |    <p class="EVP002">...Text...</p>
     |    <p class="EVP003">...Text...</p>
    </div>
    _____________________________________________________________
    CSS
    /************************
    Image Class Instructions
    *************************/
    /*Row One*/
    .EVP001{width:116px;float:left;}
    .EVP002{width:227px;float:left;margin-left:45px;}
    .EVP003{width:161px;float:right;}
    
    /*Row Two*/
    .EVP004{clear:both;width:100px;float:left;}
    .EVP005{width:225px;float:left;margin-left:93px;}
    .EVP006{width:105px;float:right;}
    
    /*************************
    Paragraph Width Instructions
    **************************/
    #caption_split{clear:both;}
    #caption_split p {font-size:0.7em;text-align:left;padding-bottom:1em;}
    Which gets me this result:


    It's different to yours, Abduraooft, but it seems to work. More importantly, I understand why it works. I'm pleased with it, because the right float ensures the right-most image is exactly the furthest right it can be, inside the #container_wrap. Does it seem correct to you?
    Last edited by Doctor_Varney; 11-08-2008 at 06:16 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.

  • #11
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Does it seem correct to you?
    Sorry, I can't get the correct picture from it. In your CSS, you have 6 selectors EVP001-006, but in html, you have repeatedly assigned the same class to paragraphs.

    As I told in my above post, it's a tough task to effectively center a floated element by applying some margin. So I left the image to be aligned in the center as such, with no floats and margins and then applied the text-align property to its container(which is enough to center any inline element).

    I see 6 images in your screen shot, so it's not clear from your code. Could you post the complete code? (Or a sample link would be better)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #12
    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
    Just in case it might be useful. It puts images side by side.

    Here it is.

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

  • #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 abduraooft
    Sorry, I can't get the correct picture from it. In your CSS, you have 6 selectors EVP001-006, but in html, you have repeatedly assigned the same class to paragraphs.
    That is because I intended the paragraph width and float behaviour to exactly mirror those of the images. So the same class is used for both image and text and positions them exactly in line with each other. What you're seeing there, is a snippet of code, whereby the 4, 5, 6 is missing - but it is there in the real HTML document.

    I have made a lot of changes since posting the above, though.
    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.


  •  

    Posting Permissions

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