Hej!
Jag jobbar med ett kundprojekt som är baserat på ett CMS, så det enda jag kan påverka är stilmallen på webbsidan. Eftersom jag bara har ett begränsat antal HTML-element så blir CSS-kodandet lite av en utmaning ibland. Nu till exempel =)
Problemet:
Jag vill ha tre DIV-ar i linje, där den första och den sista ska ha fast bredd, och den i mitten ska ha varierande bredd, beroende på storleken av föräldraelement.
|--10px--|-----100% minus 20px-----|--10px--|
Hade det gällt ett table hade det inte varit några problem, men nu har jag bara fyra div-element att spela med (behöver egentligen bara tre så det sista är display: none; ).
<div class="portlet-top">
<div class="portlet-top1"></div> <!-- 10px bred -->
<div class="portlet-top2"></div> <!-- lika bred som .portlet-top minus 20px -->
<div class="portlet-top3"></div> <!-- 10px bred -->
<div class="portlet-top4"></div> <!-- osynlig -->
</div>
Det är alltså det här beteendet jag vill ha, att mittenelement "flyter ut" och fyller avståndet mellan de två ytterelementen:
<table width="100%">
<tr>
<td width="10px">1</td>
<td> 2</td>
<td width="10px">3</td>
</tr>
</table>
Det fungerar hyfsat i FF & Chrome, förutom att få bredden på mitten div-en till 100%-20px, om jag sätter
.portlet-topX { display: table-cell; }
men IE gillar inte det.
Finns det något annat sätt att få div-arna att fungera som ett table, eller finns det någon workaround för IE?
Fråga
Är du säker på att det är olämpligt att använda en table för det du vill åstakomma? Man ska inte försöka skapa tabeller av divar det finns tabeller just för att presentera tabelldata.
Danne VMedlem sedan aug. 20068 090 inlägg
99nvbjed skrev:
Hej!
Jag jobbar med ett kundprojekt som är baserat på ett CMS, så det enda jag kan påverka är stilmallen på webbsidan. Eftersom jag bara har ett begränsat antal HTML-element så blir CSS-kodandet lite av en utmaning ibland. Nu till exempel =)
Problemet:
Jag vill ha tre DIV-ar i linje, där den första och den sista ska ha fast bredd, och den i mitten ska ha varierande bredd, beroende på storleken av föräldraelement.
|--10px--|-----100% minus 20px-----|--10px--|
Hade det gällt ett table hade det inte varit några problem, men nu har jag bara fyra div-element att spela med (behöver egentligen bara tre så det sista är display: none; ).
<div class="portlet-top">
<div class="portlet-top1"></div> <!-- 10px bred -->
<div class="portlet-top2"></div> <!-- lika bred som .portlet-top minus 20px -->
<div class="portlet-top3"></div> <!-- 10px bred -->
<div class="portlet-top4"></div> <!-- osynlig -->
</div>
Det är alltså det här beteendet jag vill ha, att mittenelement "flyter ut" och fyller avståndet mellan de två ytterelementen:
<table width="100%">
<tr>
<td width="10px">1</td>
<td> 2</td>
<td width="10px">3</td>
</tr>
</table>
Det fungerar hyfsat i FF & Chrome, förutom att få bredden på mitten div-en till 100%-20px, om jag sätter
.portlet-topX { display: table-cell; }
men IE gillar inte det.
Finns det något annat sätt att få div-arna att fungera som ett table, eller finns det någon workaround för IE?
Såvitt jag vet är det kört. Du kan inte få till det du eftersöker genom css. Du måste kunna gå in i källkoden och ändra. Sorry.
Är det detta du efterfrågar?
<html>
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="portlet-top">
<div class="portlet-top2">
<div class="portlet-top1"></div>
<div class="portlet-top3"></div>
</div>
<div class="portlet-top4"></div> <!-- osynlig -->
</div>
</body>
</html>
.portlet-top{width: 80%; background: green; height: 100px;}
.portlet-top1{width: 10px; float: left; background: orange; height: 100px;}
.portlet-top2{ float: left; width: 100%; background: yellow; height: 100px;}
.portlet-top3{width: 10px; float: right; background: lightblue; height: 100px;}
Är det detta du efterfrågar?
Danne V skrev:
Såvitt jag vet är det kört. Du kan inte få till det du eftersöker genom css. Du måste kunna gå in i källkoden och ändra. Sorry.
Det var ju synd... Man kan ju tycka att det skulle gå att efterlikna det beteendet med CSS, men men...
olarsson skrev:
<html>
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="portlet-top">
<div class="portlet-top2">
<div class="portlet-top1"></div>
<div class="portlet-top3"></div>
</div>
<div class="portlet-top4"></div> <!-- osynlig -->
</div>
</body>
</html>
.portlet-top{width: 80%; background: green; height: 100px;}
.portlet-top1{width: 10px; float: left; background: orange; height: 100px;}
.portlet-top2{ float: left; width: 100%; background: yellow; height: 100px;}
.portlet-top3{width: 10px; float: right; background: lightblue; height: 100px;}
Är det detta du efterfrågar?
Funktionaliteten stämmer ju, men tyvärr inte HTML-koden. Eftersom jag inte har möjlighet att ändra i HTML-koden så kan jag inte innesluta .portlet-top1 och .portlet-top3 i elementet .portlet-top2.
Men jag ska kolla om det inte går att utnyttja något annat element i koden på ett liknande sätt. Problemet är att de två 10px breda div-arna ska innehålla genomskinliga bilder för rundning av hörnen, och då vill man ju inte att bakgrunden ska synas igenom, däremot vill jag att bakgrunden i mitten div-en ska ha rätt färg, OCH vara expanderbar för att anpassas efter alla möjliga fönsterbredder.
Men tack för förslaget!
doridoriMedlem sedan juni 2006244 inlägg Använd javascript?
Edit:
Dumt förslag med tanke på att du ju bara kan ändra i CSSen.
Har experimenterat lite och kommit fram till detta som fungerar i FF och webkit:
http://erikedhagen.com/sandbox/csstest/
En halsnygg lösning kanske, men beroende på hur innehållet ska se kan det kanske vara något att experimentera med.
Verkar dock inte se bra ut i IE för tillfället, men det lär ju gå att anpassa.
doridori skrev:
Använd javascript?
Mm det lutar åt det just nu. Typ
.portlet-top2.width = .portlet-top.currentStyle.width - 20
Och se till att det triggar vid storleksförändringar. Inte den smidigaste lösningen kanske men men...
doridoriMedlem sedan juni 2006244 inlägg Om du har möjlighet att använda javascript så kan du också kolla på Javascript-bibliotek som gått in för att försöka lösa IE's CSS-kompatibilitet automatiskt.
Vet att det finns flera, men t.ex http://code.google.com/p/ie7-js/
w333!Medlem sedan jan. 200826 inlägg
Danne V skrev:
Såvitt jag vet är det kört. Du kan inte få till det du eftersöker genom css. Du måste kunna gå in i källkoden och ändra. Sorry.
Njae, såvitt det här exemplet visar behöver det inte vara kört alls (beroende på vad du förutsätter utöver vad du berättat för oss hittills om t.ex. hur du förväntar dig att höjderna skall bete sig ;) )
... men du behöver hursomhelst fulkoda för MSIE < 8 ...
Tricket är att du ger .portlet-top2 bredden auto. Det gör att du kan "dra in" innehållet i det elementet med padding-left och padding-right.
Efter det är det "bara" att absolutpositionera ut top1 och top3 "ovanpå"...
<!doctype html>
<title>W333!</title>
<style>
* {margin:0; padding: 0;}
body { width: 200px; } /* breddbegränsande container för exemplets skull */
.portlet-top {display: table; table-layout: fixed; width: 100%} /* dvs bredd samma som containern */
.portlet-top1 {display: table-cell; width: 10px; background-color: #ccc}
.portlet-top2 {display: table-cell; background-color: #abcdef;}
.portlet-top3 {display: table-cell; width: 10px; background-color: #ccc}
.portlet-top4 { display: none}
</style>
<!--[if LT IE 8 ]>
<style type="text/css">
/*
här måste du ställa in height till ett absolut värde, eller använda Javascript
för att göra 1 och 3 lika höga som 2 - resten gör du t.ex. såhär:
*/
.portlet-top {display: block; position: relative}
.portlet-top2 {display: block; width: auto; padding-left: 10px; padding-right: 10px;}
.portlet-top1 {display: block; width: 10px; position: absolute; top: 0; left: 0; }
.portlet-top3 {display: block; width: 10px; position: absolute; top:0; right: 0;}
</style>
<![endif]-->
<div class="portlet-top">
<div class="portlet-top1">1</div> <!-- 10px bred -->
<div class="portlet-top2">a b c d e f g h i j k l m n o p q r s t u v w x y z å ä ö</div> <!-- lika bred som .portlet-top minus 20px -->
<div class="portlet-top3">3</div> <!-- 10px bred -->
<div class="portlet-top4">4</div> <!-- osynlig -->
</div>
... sedan beror det på hur du tänker dig att höjden skall bete sig, och hur mycket trix du är beredd att ta till för MSIE < 8...
w333!Medlem sedan jan. 200826 inlägg ... och det går lika bra med margin :)
99nvbjed skrev:
Problemet är att de två 10px breda div-arna ska innehålla genomskinliga bilder för rundning av hörnen, och då vill man ju inte att bakgrunden ska synas igenom, däremot vill jag att bakgrunden i mitten div-en ska ha rätt färg, OCH vara expanderbar för att anpassas efter alla möjliga fönsterbredder.
OK - missade detta i förra inlägget, men om du byter padding-left och padding-right i exemplet jag gav mot margin-left och margin-right så funkar det lika bra (tack vare width: auto) i de gamla dinosaurie-versionerna av IE (den civilicerade världen - inklusive IE8 och framåt - klarar ju den här effekten med CSS-tabeller) :bire
DannyMedlem sedan juli 200412 913 inlägg jag gjorde om min sida för ett tag sedan och använde bara css-tabell, fick det att funka hyffsat i de flesta webläsare, tror den funkar i de flesta IE förutom just 7a'. Nu var det ett tag sedan jag höll på med det där så ta inte dessa ord för allvarligt :) gjorde några enkla fultrick bara. Kolla:
http://dannesholk.se/welcome.shtml
w333! skrev:
OK - missade detta i förra inlägget, men om du byter padding-left och padding-right i exemplet jag gav mot margin-left och margin-right så funkar det lika bra (tack vare width: auto) i de gamla dinosaurie-versionerna av IE (den civilicerade världen - inklusive IE8 och framåt - klarar ju den här effekten med CSS-tabeller) :bire
Tack för tipset! Det funkade utmärkt. Jag tänkte dock strunta i "display: table-cell", och köra samma "position: absolute"-kod för alla browsers, verkar funka i de test jag har gjort hittills. Inte optimalt men så länge man måste stödja äldre browsers duger det alldeles utmärkt!
Tack igen! :birp
