Jump to content

floatutorial

Abby

By Abby
in CSS

Recommended Posts

Abby Newbie

Abby

Posted
Posted

In your opinion, what would be the best way to lay out this page?It's working the way I want, except for the space between each image. All the margins and padding are set to 0, so I don't understand why that gap exists. I think it has something to do with my use of floats, though.The way I have it:

  • The left menu (#lmenu) is fixed, not floated.
  • The captions (.caption) are floated left, and also positioned relative, pushed up from the bottom by 240px. Their width is 180px. I don't know why they're not overlapping the #lmenu, or wrapping around it, but at least it seems to work.
  • The images (.center) are floated right, clear:right, overflow:hidden, text-align:center, and width:100%. If I do anything else to the width, the bottom caption next to the narrowest image wraps off-screen.

This solution doesn't feel perfect to me. How would a more experienced web designer approach it?Oh yeah, I should add that I want a liquid layout.

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

the space between images is to do with the height of the description in the ul, and the use of position:relative;try keeping elements, that are relevant to each other in the same container, i.e image (img), with description (ul, li) in container div .centergive the center class, width:80%; because the description has width of 180px, it will throw the centring of image of by this width, to fix..center img {margin-left: -180px;}<div class="center"><ul class="caption"><li><a title="Shrek: Ogres and Dronkeys" href="http://ds.ign.com/objects/959/959144.html">Shrek: Ogres and Dronkeys</a> - Nintendo DS, 2007</li><li>Made at WayForward Technologies</li><li>3DSMax</li></ul><img width="460" height="328" alt="low poly pig character" src="images/Pig_Shrek.jpg"/></div>.caption, .captiongreen {float:left;font-size:0.5em;margin:0;padding:0;text-align:left;width:180px;z-index:3;}.center {margin:0;overflow:hidden;padding:0;text-align:center;width:80%;}you need to set a outer container <div class="colmask fullpage">??, width 100 %, to insert the inner containers 80% and center this this, within the whole page, this should work for <div class="pagehead">and the <div class="center">at the moment <div class="pagehead"> is causing a scroll bar to appear, because of the left properties, extending beyond the set width of the screen width.

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

you can get the same result, with no positioning, but float, margins instead

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css">ul,div, a, p{padding:0; margin:0;}p{margin-bottom:1em;}body {background-color:#FFFFFF;color:#000000;font-family:Verdana,Geneva,sans-serif;font-size:100%;text-align:left;}#inner_wrapper {width:80%; background-color:#ffffff;margin:0 auto; min-width:820px;}.pagehead {margin-bottom: 6px;overflow:hidden;min-width:900px;}.pagehead img{float:left;}#artmenu {background:none;list-style-image:none;list-style-position:outside;list-style-type:none;overflow:hidden;width:220px;float:right;margin-right:230px;}#artmenu li {float:left;}#artmenu li.and {float:right;width:67px;}#artmenu li a {outline-color:invert;outline-style:none;outline-width:medium;text-indent:-9999em;height:24px;}#artmenu li.animation a {background:url(http://art.abbygoldsmith.com/images/menu/arttoanimation.png) no-repeat 0 0;width:119px;float:left;}#artmenu li.and a {background:url(http://art.abbygoldsmith.com/images/menu/arttoand.png) no-repeat 0 0;width:67px;float:right;}#artmenu li.animation a:hover {background:url(http://art.abbygoldsmith.com/images/menu/arttoanimation.png) no-repeat 0 -24px;}#artmenu li.and a:hover {background:url(http://art.abbygoldsmith.com/images/menu/arttoand.png) no-repeat 0 -24px;}.center {margin:0 0 10px;overflow:hidden;padding:0;text-align:center;}.center img {margin-left: -180px;}.caption, .captiongreen {float:left;font-size:0.7em;text-align:left;width:180px;}.caption a{display:block;}h3.center_align {text-align:center;}</style></head><body><div id="outer_wrapper"><div id="inner_wrapper"><div class="pagehead"><img width="446" height="59" alt="Low Poly Models" src="http://art.abbygoldsmith.com/images/menu/h_lowpolymodels.png" /><ul id="artmenu"><li class="animation"><a href="testsprites.html">Animation</a></li><li class="and"><a href="testgamed.html">And...</a></li></ul></div><h3 class="center_align">~ PAGE UNDER CONSTRUCTION ~</h3><div class="center"><ul class="caption"><li><a title="Shrek: Ogres and Dronkeys" href="http://ds.ign.com/objects/959/959144.html">Shrek: Ogres and Dronkeys</a> - Nintendo DS, 2007</li><li>Made at WayForward Technologies</li><li>3DSMax</li></ul><img width="460" height="328" alt="low poly pig character" src="http://art.abbygoldsmith.com/images/Pig_Shrek.jpg"/></div><div class="center"><ul class="captiongreen"><li>Personal project</li><li>3D Studio Max</li></ul><img width="560" height="331" alt="low poly shuttle" src="http://art.abbygoldsmith.com/images/Shuttle.jpg"/></div></div></div></body></html>

Link to comment
Share on other sites
Abby Newbie

Abby

Posted
  • Author
Posted

I'm working on this page (covering the first solution first), but I have more questions:1) So if I understand correctly, when you use position: relative and move the item out of its normal position on the page, it leaves a gap where the item should actually be. Is there any way to get rid of this gap? This rule seems strange ... like it would render position:relative useless, in most cases.2) The z-index property doesn't seem to work with float, only with position:relative. Am I doing something wrong, or is this just how it works?3) The bottom scrollbar is still appearing. I'm encasing the main page content in just one div, now. It's set to:

.colmask { /* container */ clear:both;float:left;margin:0 0 0 140px;width:100%;overflow:hidden; }

Here's the page in progress.

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

1) position relative, unlike position absolute, still leaves a space where it once original occupied, absolute is totally taken out of the work flow, and other elements will fill its vacated space. Position relative should not be used for moving, small element containers, but only the larger outer containers only, or used set the area for a position absolute element to work from. This is why i suggested using positioning sparingly, and use float, margins, padding instead. 2) z-index only works if position is used, such as fixed, relative, or absolute.3) .colmask with width:100%; and margin left of 140px, adds the total width of screen width plus 140px, as does .pagehead still in the flow relative position with left 144px; it moves the total width of screen, right, beyond the screen right edge.Fix:

.pagehead {/*position:relative;left:144px;top:4px;margin:0 0 6px;*/padding:0;/*added & amended by dsonesuk*/margin:0 auto 6px; width:80%; }.colmask {/*clear:both;float:left;margin:0 0 0 140px;overflow:hidden;*/width:100%;}.center {/*margin:0;*/overflow:hidden;padding:0;text-align:center;width:80%;/*amended by dsonesuk*/margin:0 auto;}

Link to comment
Share on other sites
Abby Newbie

Abby

Posted
  • Author
Posted
1) position relative, unlike position absolute, still leaves a space where it once original occupied, absolute is totally taken out of the work flow, and other elements will fill its vacated space. Position relative should not be used for moving, small element containers, but only the larger outer containers only, or used set the area for a position absolute element to work from. This is why i suggested using positioning sparingly, and use float, margins, padding instead. 2) z-index only works if position is used, such as fixed, relative, or absolute.3) .colmask with width:100%; and margin left of 140px, adds the total width of screen width plus 140px, as does .pagehead still in the flow relative position with left 144px; it moves the total width of screen, right, beyond the screen right edge.
Thanks. This is really helpful, and my page looks a lot better.
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...