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 8 of 8
  1. #1
    Regular Coder
    Join Date
    Apr 2006
    Location
    Northbrook, IL
    Posts
    394
    Thanks
    8
    Thanked 6 Times in 6 Posts

    Question question on float positioning and element order

    I am trying to simulate a window. like in Windows (with "close" and "collapse" buttons stuck to the upper right corner and an icon w/title stuck to the left corner of the titlebar.)

    my buttons are in a <ul> list styled with display:inline and list-style:none (maybe not the best choice?)

    i want to float this list to the right, and leave the <h4> and <img> to the left so that if the font size is enlarged by the user, everything expands gracefully. i'm also using "em" as much as possible for this reason.

    the problem i run into is that if the <img><h4> appear before the <ul>, the list gets dropped down. to the next line. the only workarounds i have found is float:right and margin-top: -1em to move it back into place, or placing the <ul> before the img and h4 elements, just float:right, but that makes the html readability kind of weird since it is ordered backwards.

    any way to get this to work? or do right floats need to always come first to appear inline with followed elements?

    thanks,
    Leon
    Last edited by Leeoniya; 12-30-2007 at 07:32 PM.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,624
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Quote Originally Posted by Leeoniya View Post
    i want to float this list to the right, and leave the <h4> and <img> to the left so that if the font size is enlarged by the user, everything expands gracefully.
    What <h4> and what <img>? You’re assuming that we can read your minds. Please show us what you’ve got and/or give us as much info about the situation as possible that we can imagine what you’re talking about.

    For a start: Any float only has an influence on elements coming after the floated one in the source code. It makes no sense to have something like this:
    Code:
    <h4>text</h4>
    <img … />
    <ul style="float: right;">
    …
    because clearly, the only effect would be that the list is situated at the right below the other elements. You’d need to float the elements before that list to make the list go up. However, before you start playing around with it let me tell you one thing: position: absolute;. It is to be used with caution but in this case it’s the only logical solution.

    Be aware that the absolute position is relative to the next relatively or absolutely positioned parent element. So, if you want a window kind of thing, position the parent of the list (i.e. the element that makes up the window) relative and then position the list absolutely at the top right.

  • #3
    Regular Coder
    Join Date
    Apr 2006
    Location
    Northbrook, IL
    Posts
    394
    Thanks
    8
    Thanked 6 Times in 6 Posts
    good stuff VIP. thx. i ended up floating both the img and h4 left, floating the ul right and just giving the dlg_title div an explicit height of 1.5em. works well.

    here is the code i'm using:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    	<title>Untitled 2</title>
    	<link rel="stylesheet" type="text/css" href="generic.css" />
    	<link rel="stylesheet" type="text/css" href="dialogA.css" />
    </head>
    
    <body>
    
    <div id="dlg_userInfo" class="dlgA">
    	<div class="dlg_title">
    		<img src="user.png" alt="User information" />
    		<h4>User Information</h4>
    		<ul class="actions">
    			<li class="dlg_ctrl" title="Fold up">^</li>
    			<li class="dlg_ctrl" title="Close">X</li>
    		</ul>
    	</div>
    	<div class="dlg_contents">
    		<p>Lorem ipsum dolor sit amet, justo et, dis ut amet, dictumst nisl dolor. Fermentum vitae ultricies, ut amet elit, elit lorem. Dictumst vestibulum. Nulla ad, suspendisse nam lobortis. Ligula sollicitudin. Tempor nascetur aenean.</p>
    		<p>Vulputate amet, lorem non duis. Scelerisque euismod, nibh ultricies ultricies, pretium morbi massa. Etiam egestas enim. Vestibulum urna, quis wisi. Odio id cras, odio nullam pharetra. Aliquam velit, integer sociosqu, diam commodo.</p>
    	</div>
    	<div class="dlg_status">*status bar text here</div>
    </div>
    
    </body>
    </html>
    Last edited by Leeoniya; 12-30-2007 at 09:55 PM.

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by Leeoniya View Post
    the problem i run into is that if the <img><h4> appear before the <ul>, the list gets dropped down. to the next line. the only workarounds i have found is float:right and margin-top: -1em to move it back into place, or placing the <ul> before the img and h4 elements, just float:right, but that makes the html readability kind of weird since it is ordered backwards.

    any way to get this to work? or do right floats need to always come first to appear inline with followed elements?
    This sounds like the issue described in Mozilla bug 50630 [1]. I would try displaying your document in Opera or Safari to see if the (correct) rendering matches that of whichever browser you’re using. Safari 3.0.5 (Windows beta) renders the four test documents in that bug report correctly. Opera 9.25 renders the first three test documents correctly.

    Essentially, the floated element should appear at the top and adjacent to the header (and, probably, image) elements, provided sufficient room, regardless of where you put the float.

    Accordingly (assuming that I’ve pinpointed the issue correctly), VIPStephan’s statement “because clearly, the only effect would be that the list is situated at the right below the other elements. You’d need to float the elements before that list to make the list go up” would be incorrect. His following statement, which suggests changing the source order of the elements such that the float appears first, would be the workaround used in a browser such as Mozilla Firefox. Unfortunately, this workaround changes the meaning of the document if you have to move an element with content to before a header element from after said header element (i.e., the header no longer applies to the relocated content).

    Tangential Information
    Looking at your code, I see some obvious issues.

    For example, you have an img element with alt text “User information” immediately followed by another element with the exact same text. Assuming that the image fails to display, you have the same text twice. From this, it would seem that user.png is presentational and should either be displayed via CSS, the alt attribute should be updated to provide non‐redundant (or no) information, or the header element should be updated to provide non‐redundant information (or removed).

    Second Example: You have a header element that doesn’t apply to anything except two “actions”. I realize that the content may not be present yet, however.

    Third Example: Assuming that the “actions” are to be triggered via scripting, it makes sense to add these elements via scripting since they are otherwise useless.

    Fourth Example: <p> could be <p lang="la-Latn" xml:lang="la-Latn">… Okay, it’s just filler text. The point was that you might consider marking up language and script information in your documents (such as for the document as a whole).

    1. https://bugzilla.mozilla.org/show_bug.cgi?id=50630
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,624
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Quote Originally Posted by Arbitrator View Post
    Accordingly (assuming that I’ve pinpointed the issue correctly), VIPStephan’s statement “because clearly, the only effect would be that the list is situated at the right below the other elements. You’d need to float the elements before that list to make the list go up” would be incorrect. His following statement, which suggests changing the source order of the elements such that the float appears first, would be the workaround used in a browser such as Mozilla Firefox. Unfortunately, this workaround changes the meaning of the document if you have to move an element with content to before a header element from after said header element (i.e., the header no longer applies to the relocated content).
    Uhm, maybe you got me wrong but actually I didn’t say that te OP should change the order of the elements in the source code. my statement was that if you have three elements and you are floating the last one it will not go up anywhere because the first ones are not floated. Instead, the floated element goes in the float direction but stays at the vertical position it used to be because, as stated before, the elements before that one are not floated. And you can’t tell me that this is a bug…

    Additionally, my second suggestion was not to change the source order but to change the float to the elements before the last one of that last one is supposed to go up next to the former one(s).
    Last edited by VIPStephan; 12-31-2007 at 02:16 PM.

  • #6
    Regular Coder
    Join Date
    Apr 2006
    Location
    Northbrook, IL
    Posts
    394
    Thanks
    8
    Thanked 6 Times in 6 Posts
    a picture tells 1000 words.

    as you can see, the h4 is clearly needed. since the titlebar has its own background already (actually a semitransparent png...not a solid color.), the only place left to add the image with CSS, is inside the h4 as a background positioned left, which would then mean i have to change the left padding in the h4 so that the text doesnt overlap. otherwise i need to add another element just to add the image with CSS?...seems redundant.

    i agree with removing the alt attribute.

    the header doesnt "apply to actions". the header applies to the whole dialog, which may have 0 actions.

    adding the action buttons with a script....possibly, but the actions are dialog specific, each dialog will have its own actions linked to its own script functions...there will be just as much script to generate them as there is html now...unless i'm missing something.

    Leon
    Attached Thumbnails Attached Thumbnails question on float positioning and element order-screenie.png  
    Last edited by Leeoniya; 12-31-2007 at 02:22 PM.

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,624
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    From a semantical point of view adding that user image is not quite correct as it is purely presentational. So, you should add it as background to the headline. Why use a semi-transparent png anyway if it’s actually just a solid color background, nothing with patterns where such a png would make sense? Or at least you can put the image into the headline as it’s directly related to it.

    Secondly: Don’t remove the alt attribute, only remove the value so that it’s empty.

  • #8
    Regular Coder
    Join Date
    Apr 2006
    Location
    Northbrook, IL
    Posts
    394
    Thanks
    8
    Thanked 6 Times in 6 Posts
    right, i was just gonna kill the value.

    thats not the full background, there's a webapp logo i designed, but in that corner, yes it's solid

    would i add the image the way i outlined with the h4 padding modification?


  •  

    Posting Permissions

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