echoSweMedlem sedan nov. 20041 189 inlägg Kolla posten längst ner!
Om man har ett block, vi kallar detta block parent. I detta blocket vill man ha två vertikala kolumner. Man har två stycken block i blocket, två children alltså. Man float-ar child 1 left och child 2 blocket.
Då kommer parent-blocket att minska sin höjd till 1 px eller liknande, då det inte innehåller något som inte är floatat.
I detta block har du lagt en background-image repeat-y som då funkar som faux columns... Att parent-blocket då minskar höjden gör ju att det inte funkar så bra med faux columns.
Hur ska man göra? Ska man sätta en statisk höjd på parent? Då blir det ju problem när man ska öka innehållet i child 2 blocket (mitt stora textblock här). En min-height kommer inte funka, då parent inte anpassar sig efter höjden.
Hjälp.
echoSweMedlem sedan nov. 20041 189 inlägg #parent
{
position: relative;
}
span.child1
{
width: 51px;
position: absolute;
top: 0; left: 0;
}
#child2
{
margin-left: 66px; /* 51 px is the yellow "border" */
}
echoSweMedlem sedan nov. 20041 189 inlägg Men om man har två floats utan absolut positionering då?
För min lösning visar ju där child 2 är position:static och child 1 är position: absolute.
Hur gör man då?
echoSweMedlem sedan nov. 20041 189 inlägg Okej.
Här är kondensatet av vad jag vill ha svar på:
<!doctype html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html {
background:black top left url(images/layout/bg1.jpg) fixed repeat-x;
}
html, body {
margin: 0; padding: 0;
height: 100%;
}
body {
background-repeat:repeat-y;
background-position: 50%;
background-image:url(images/layout/bgBody.gif);
}
#temp
{
height:1500px;
width: 800px;
margin: 0 auto;
background-color:transparent;
}
.grey {color:#444; margin: 0;}
</style>
</head>
<body>
<div id="temp"><p class="grey">Hello</p></div>
</body>
</html>
Body taggen blir inte 100% som html taggen blir, utan den blir bara så hög som viewporten är. Hur löser man det?
Andra frågan är hur man löser problemet med att man vill ha en wrapper som går ner hela vägen till slutet av innehållet utan faux columns och utan javascript. Varför? Jo för att man vill att boxar som kommer under wrappern ska flyta rätt (dvs. flyta under!).
Här är länken!
https://www.haf.se/temp.htm
InsiderMedlem sedan jan. 2000978 inlägg 100% i höjd, betyder ju i praktiken 100% av viewporten. Inget konstigt med det.
Du behöver ju lägga in ett element sist i wrappern som du sätter clear på.
Vill du inte göra så kan du köra med en specialare:
http://www.positioniseverything.net/easyclearing.html
echoSweMedlem sedan nov. 20041 189 inlägg Tack för det, lustigt hur man bara glömmer tekniker ibland...
Det blev specialaren! Tack för hjälpen.
