Undermeny
Flytande spalter syns inte
2008-08-09
Tänk dig följande exempel: Du vill dela innehållet på en webbsida i två spalter. Du gör detta genom att använda float-egenskaper i din CSS-kod, i enighet med W3Cs specifikationer. Men du får problem i Internet Explorer, som inte visar innehållet korrekt.
Din kod ser ut enligt följande:
Till denna kod har du följande CSS-kod:
Med denna kod har du ett moderelement som sträcker sig runt två spalter. Ett traditionellt sätt att programmera enligt W3Cs standard. Ett problem kan dock finnas i webbläsare som ej har stöd för W3Cs standardiseringar och det kan därför vara bra att kringgå detta, genom att addera en liten detalj.
Genom att addera ovanstående HTML-kod, kombinerat med följande CSS-kod, försäkrar du dig om att dina spalter syns, även i webbläsare med begränsat stöd för CSS 2.1.
Den div som tillkommit gör att moderelementet tvingas visa de föregående två, eftersom det sista div-elementet kräver full bredd i gränssnittet och hävdar att rad ska brytas både före och efter. En enkel lösning på ett vanligt förekommande bekymmer, främst i Internet Explorer 6 och 7.
Tänk dig följande exempel: Du vill dela innehållet på en webbsida i två spalter. Du gör detta genom att använda float-egenskaper i din CSS-kod, i enighet med W3Cs specifikationer. Men du får problem i Internet Explorer, som inte visar innehållet korrekt.
Din kod ser ut enligt följande:
<div class="allcontent">
<div class="leftconttent">
<div class="rightcontent">
</div>Innehållet i vänster spalt i det grafiska gränssnittet
</div><div class="rightcontent">
Innehållet i höger spalt i det grafiska gränssnittet
</div>Till denna kod har du följande CSS-kod:
.allcontent
{
height: auto;
min-height: 100%;
margin-left: auto;
margin-right: auto;
width: 75%;
}
.leftcontent
{
width: 48%;
padding-left: 1%;
padding-right: 1%;
float: left;
}
.rightcontent
{
width: 47%;
padding-left: 1%;
padding-right: 1%;
float: left;
}
{
height: auto;
min-height: 100%;
margin-left: auto;
margin-right: auto;
width: 75%;
}
.leftcontent
{
width: 48%;
padding-left: 1%;
padding-right: 1%;
float: left;
}
.rightcontent
{
width: 47%;
padding-left: 1%;
padding-right: 1%;
float: left;
}
Med denna kod har du ett moderelement som sträcker sig runt två spalter. Ett traditionellt sätt att programmera enligt W3Cs standard. Ett problem kan dock finnas i webbläsare som ej har stöd för W3Cs standardiseringar och det kan därför vara bra att kringgå detta, genom att addera en liten detalj.
<div class="allcontent">
<div class="clear"> </div></div>
<div class="leftconttent">
<div class="rightcontent">
Innehållet i vänster spalt i det grafiska gränssnittet
</div><div class="rightcontent">
Innehållet i höger spalt i det grafiska gränssnittet
</div><div class="clear"> </div></div>
Genom att addera ovanstående HTML-kod, kombinerat med följande CSS-kod, försäkrar du dig om att dina spalter syns, även i webbläsare med begränsat stöd för CSS 2.1.
.allcontent
{
height: auto;
min-height: 100%;
margin-left: auto;
margin-right: auto;
width: 75%;
}
.leftcontent
{
width: 48%;
padding-left: 1%;
padding-right: 1%;
float: left;
}
.rightcontent
{
width: 47%;
padding-left: 1%;
padding-right: 1%;
float: left;
}
.clear
{
clear: both;
}
{
height: auto;
min-height: 100%;
margin-left: auto;
margin-right: auto;
width: 75%;
}
.leftcontent
{
width: 48%;
padding-left: 1%;
padding-right: 1%;
float: left;
}
.rightcontent
{
width: 47%;
padding-left: 1%;
padding-right: 1%;
float: left;
}
.clear
{
clear: both;
}
Den div som tillkommit gör att moderelementet tvingas visa de föregående två, eftersom det sista div-elementet kräver full bredd i gränssnittet och hävdar att rad ska brytas både före och efter. En enkel lösning på ett vanligt förekommande bekymmer, främst i Internet Explorer 6 och 7.
© ETU AB 2010 - Alla rättigheter förbehållna