BigDaveMedlem sedan jan. 200731 inlägg Hej!
Har byggt en tvåkolumnig lösning på en sida.
Sidan består av 1 kontainer div och i den en vänster och en höger div.
vänster div har en bredd på 12% och höger har en bredd på 88%.
Detta fungerar kanon och gör att sidan gör att expandera och minimera.
Mitt problem är att jag kommer att bygga om vänster kolumn till en kontroll. Det vill säga ibland kommer den att finnas ibland och ibland inte. Jag vill att höger kolumn de gånger då vänster inte ska finnas ska ta upp hela sidan.
Går detta att lösa med CSS eller kommer jag att måsta använda js?
Har klurat och klurat men kommer inte på nått. Nån som har nån idè?
AndeersMedlem sedan okt. 200610 inlägg Sätt ingen width på den högra och 12% width på den vänstra. Finns inte den vänstra så fyller andra diven upp hela sidan. Man kanske ska använda auto, jag är inte så bra på teknikaliteterna men jag kan komma med idéer ;P
BigDaveMedlem sedan jan. 200731 inlägg Tack för tipset! har testat det. Men då hamnar höger kolumn under vänster
AndeersMedlem sedan okt. 200610 inlägg Använd float:left på bägge divar! :bire
BigDaveMedlem sedan jan. 200731 inlägg Tack igen! men har även testat det
jarvkloMedlem sedan juli 20013 378 inlägg Hmm...
Oavsett *hur* du bygger din tvåkolumnslösning så finns det en möjlighet om du kan påverka koden så att du kan lägga ett id på body eller en div runt bägge kolumnerna...
Metoden bygger på att ändra "default" genom att lägga på ett id på ett omgivande element - på så sätt kan du skapa CSS-regler med högre "specificitet" än (dvs regler som "trumfar över") grundinställningarna
Här är ett exempel på hur du kan göra när det bara är breddmåtten som skall skilja sig (plus att jag lade till att ev. innehåll i vänsterspalten döljs i enspaltslösningen om man t.ex. skulle råka missa att ta bort det när man handknackar ;) )
CSS:
#container {
width: 80%;
margin: 0 auto;
padding:0;
background-color: #eee;
}
/* tvåspalt som default */
#sidebar {
width: 12%;
float:left;
background-color: #abcdef;
}
#main {
width: 88%;
float:right;
background-color:#fedcba
}
/*enspalt för sidor där body (eller en container) har id="#onlymain" */
#onlymain #sidebar {
display: none; /* overkill kanske, men bra om du inte *kan* få bort sidebar-divven ur koden */
}
#onlymain #main {
width: 100%
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
<title>Ett av Jarvklos exempel</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="olikamatt.css" />
</head>
<body>
<div id="container">
<div id="sidebar">
sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar
sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar
</div>
<div id="main">
main main main main main main main main main main main main main
main main main main main main main main main main main main main
</div>
</div>
</body>
</html>
samt (för enspaltaren) samma kod med ett id som talar om att layouten skiljer sig från default tillagt på ett "väsentligt ställe":
<body id="onlymain">
Testa: tvåspaltaren enspaltaren - och lycka till :bire
BigDaveMedlem sedan jan. 200731 inlägg Bra exempel! Det var något i denna stil som jag funderat på. Men det kommer inte att fungera att ta bort sidebar och få main att täcka hela container utan att ändra i css filen el?
PhorpherMedlem sedan feb. 20002 300 inlägg
BigDave skrev:
Bra exempel! Det var något i denna stil som jag funderat på. Men det kommer inte att fungera att ta bort sidebar och få main att täcka hela container utan att ändra i css filen el?
Du behöver inte ändra något i css-filen. Du lägger bara till IDt "onlymain" i body-taggen för att ändra mellan kolumn eller icke kolumn.
jarvkloMedlem sedan juli 20013 378 inlägg
BigDave skrev:
Bra exempel! Det var något i denna stil som jag funderat på. Men det kommer inte att fungera att ta bort sidebar och få main att täcka hela container utan att ändra i css filen el?
Hmm...
Kolla källkoden i exemplen - de använder samma externa CSS-fil ;)
Det räcker, som sagt, med att ändra <body> till <body id="onlymain"> på de sidor där du inte vill ha med vänsterspalten.
Lycka till :bire
BigDaveMedlem sedan jan. 200731 inlägg Jo det fungerar!
Men eftersom jag kommer att använda kontroller så fungerar inte det.
Jag skulle vilja att man skulle kunna ta bort vänster kolumn och att då automatisk utan några förändringar så skulle högerkolumn ta upp hela området.
Går inte detta? Har sökt som en idiot men inte hittat nått...
jarvkloMedlem sedan juli 20013 378 inlägg OK.
Så om jag förstår dig rätt är det enda som kommer att skilja sidorna åt att divven "sidebar" inte kommer att genereras för "enspaltaren" och att du vill att det skall fungera med samma (X)HTML i övrigt och exakt samma CSS ? (är det så *kan* det finnas en lösning, men jag får återkomma i kväll i så fall när jag har haft möjlighet att testa min teori)
Plus: Vad har du för krav på webbläsarstöd?
BigDaveMedlem sedan jan. 200731 inlägg Borde funka i IE o Mozilla men kommer du på nått som funkar i nån av dem vore det grymt
jarvkloMedlem sedan juli 20013 378 inlägg Hehe... :r
Jodå...
Lösningsidén höll, men du får offra dina eventuella perfektionist-tendenser för besökare med IE6 om du tar den här lösningen (funkar i IE7 och andra "moderna" webbläsare dock - men i MSIE6 blir "den ensamma huvudspalten" fortfarande 88% eftersom just IE6 inte hanterar den för lösningen så kritiska "+"-selektorn ;) )
Bakgrund:
I "modern CSS" har du selektorn "+"...
Exempel:
p+p {color:blue}
Den innebär i det här fallet att alla <p> som ligger direkt efter ett annat <p> på samma "nivå" i koden ges blå textfärg...
Detta kan du utnyttja genom att sätta olika bredder på #main" beroende på om den ligger direkt efter "sidebar" eller ej :)
Lösning:
#container {
width: 80%;
margin: 0 auto;
padding:0;
background-color: #eee;
}
#sidebar {
width: 12%;
float:left;
background-color: #abcdef;
}
#main {
width: 100%; /* ensam skall den vara 100% bred */
float:right;
background-color:#fedcba
}
#sidebar + #main { /* men står den direkt efter sidebar bara 88% */
width: 88%
}
/* IE6 fallback - Där blir "main" alltid 88% - även när den "står ensam" */
* html #main { width:88%}
(X)HTML-koden är samma som förut (dvs med och utan "sidebar") och bägge exempelfilerna använder samma CSS
Testa: Med sidebar Utan sidebar (jämför källkoden för de bägge så ser du)
Nu blir ju den stora frågan för dig om du kan "ta bort" din motsvarighet till #sidebar" i din kod eller ej förståss - för det funkar naturligtvis inte om #sidebar" står med i koden och är tom (eller om kolumnerna ligger åtskilda i koden) - men det kanske inte är något problem ? :birp
BigDaveMedlem sedan jan. 200731 inlägg Det fungerar!!
Bara att böja sig ner o buga för övermakten...
Ska fira med att kläcka upp en pilsner :birp
