mr.mainlineMedlem sedan feb. 2003813 inlägg
Ska försöka förklara mitt problem på ett enkelt sätt.
Det är så att jag håller på med en css design som har 3 kolumner som det ser ut nu, men jag vill ha ytterliggare en kolumn på vänster om desigen där jag.
css koden för den nya kolumnen ser ut så här
#sponsor {
float : left;
width : 140px;
padding : 0;
margin-bottom : 15px;
background : fff;
}
men nu lägger sig #sponsor uppe i vänstra hörnet och jag vill ha den intill desigen, sidan ligger i en container div som ser ut så här
#container {
width : 750px;
border : 5px solid #fff;
margin-left : auto;
margin-right : auto;
padding : 10px;
color : #666;
background : #f2f2f5;
}
bifogar en dump på hur det ser ut nu, hoppas ni förstår vad jag menar.
jarvkloMedlem sedan juli 20013 295 inlägg
Hmm...
Gissar av din beskrivning att #sponsor ligger ovanför #container i HTML-koden ?
Det här är *ett* sätt som inte kräver omarrangering av HTML-koden i så fall...
<!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" lang="sv" xml:lang="sv">
<head>
<title>Ett av jarvklos exempel</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body {
min-width: 1100px; /* lite mer än summan av 2*sponsorbredd + containerbredd */
position:relative; /* se till att absolutpositioneringen görs "rätt" */
}
#container {
width : 750px;
border : 5px solid #fff;
margin-left : auto;
margin-right : auto;
padding : 10px;
color : #666;
background : #f2f2f5;
}
#sponsor {
/* positionera denna centrerat, men med en negativ marginal */
/* som motsvarar halva containerbredden + sponsorbredden + "luft" */
position: absolute;
top: 0; left: 50%;
margin-left: -540px;
margin-top: 10px;
width : 140px;
padding : 0;
margin-bottom : 15px;
background : #abcdef;
}
/* fingerad trespaltslösning */
#ett, #tva, #tre { float: left; width: 240px; margin: 0 5px 0 5px; background-color: #fedcba;}
</style>
</head>
<body>
<div id="sponsor">Lorem Ipsum et cetera Lorem Ipsum et cetera</div>
<div id="container">
<div id="ett">Lorem Ipsum etc. </div>
<div id="tva">Lorem Ipsum och så vidare in absurdum egentligen</div>
<div id="tre">Lorem Ipsum in absurdum, evinnerligen och i tid och otid - amen</div>
<br style="clear: both" />
</div>
</body>
</html>
Men lösningen är antagligen inte optimal för dig eftersom sponsordelen hamnar utanför vänsterkanten i MSIE6 när man krymper fönsterbredden.
Testa
Står du ut med att #sponsor försvinner i MSIE6 (om du inte separathackar en alternativ lösning för MSIE6 förstås), kan du flytta in #sponsor inuti #container också med samma kod om du lägger till position:relative på #sponsor om du vill ;)
Ett annat sätt är att lägga till en ny container utanför alltihop och hantera #sponsor och #container som en separat tvåspaltslösning inuti den istället ;)
Lycka till! :bire
