14 svar · 404 visningar · startad av Alpha II
Börjar misstänka att jag hat glömt HTML, första gången jag göra en sida på 1 år!
Har tyvärr inte installerat Dreamweaver, misstänker att jag inte har tillräckligt med plats på datorn... :l
Så här vill jag att den ska se ut:
____________________________________
| | |
| |______|
|____________________________|______|
| |
| |
| |
| |
|___________________________________|
Här är ett sätt, andra vill nog att du skall göra det med DIVar.
<table cellpadding="0" cellspacing="0" style="height: 100%; width: 100%;">
<tr>
<td>1</td>
<td style="height: 150px; width: 25%;">
<table cellpadding="0" cellspacing="0" style="height: 100%; width: 100%;">
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">4</td>
</tr>
</table>
Så jag måste göra en tabell innuti? Kan jag inte göra en enda tabell för det? Spelar det roll hur många tabeller man har på sidan? Jag har en hel del tabeller inuti andra nu......
Här har du det i tabell form med en tabell
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="70%" rowspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>
...och CSS:
<head>
<style type="text/css">
<!--
html, body {
margin : 0;
padding : 0;
}
#top {
position : absolute;
width : 100%;
height : 120px;
background : #eee;
border-bottom : 1px solid #666;
z-index : 2;
}
#right {
position : relative;
width : 20%;
height : 100%;
float : right;
border-left : 1px solid #666;
}
#rightTop {
height : 70px;
border-bottom : 1px solid #666;
padding : 2px;
}
#rightBottom {
height : 50px;
padding : 2px;
}
#main {
position : absolute;
top : 120px;
margin-top : 5px;
padding-left : 5px;
z-index : 1;
}
h1 {
font : bold 20px tahoma, arial, sans-serif;
}
-->
</style>
</head>
<body>
<div id="top">
<div id="right">
<div id="rightTop"></div>
<div id="rightBottom"></div>
</div>
</div>
<div id="main"><h1>Lite text kanske...</h1></div>
</body>
:)
Varför skulle man villa göra det med div taggar/css? Vad är det för bättre med det? Krånglar det inte bara till det?
Enligt standarden så skall bara tabeller användas för att visa data, är det layout så skall CSS användas.
För att följa standard alltså.
Mvh
Jan-Olov
Enligt HTML-standarden får du använda tabeller till vad du vill.
Om du däremot vill följa WAI-riktlinjerna så ska du bara använda tabeller för "tabbulär data". ;)
Den dagen då DIV-ar visas likadant i alla läsare (så som tabellerna gör idag) kan man säga att de är fullt användbara för layout jobbet.
Tyvärr är det så att även om man följer W3C standard i sin kodning så blir inte resultatet likadant i alla läsare.
Du kan aldrig få din sida att se likadan ut i alla webbläsare.
Därför är det bättre att följa standarden så att man har nåt att gå efter.
Åja... Det kan jag visst om jag använder tabeller med bra skrivet css-specifikation. Det kan jag inte med DIV-ar. Största boven här är inte standarden utan webbläsarna. Internet Explorer mer än andra.
Kolla denna layouten t ex: http://www.webforum.nu/attachment.php?s=&postid=551797
Den fungerar likadant i alla webbläsare om jag använder tabeller. Om jag går över till DIV-ar så är det IE och Opera 7 som spökar. Och ja, jag följde standarden i exemplet ovan.
Med andra ord, du har ingen nytta utav en standard om inte webbläsarna följer den.
Jag tvivlar start på att du har någonsin har testat någon sida i alla webbläsare.
Det skulle vara spännande att se hur du har fått tabellerna att bli snygga i Lynx.
Ja, ja... :) Nu tänkte jag mer på NS, IE, Mozilla och Opera... De mest använda webbläsarna. Det är de som jag vill skall följa standarden, det är i de jag vill kunna använda DIV-ar och få samma resultat osv.
Även om du följer standarden till 100% kan du inte få bilderna att visas i Lynx... Eller har jag fel?
Även om du följer standarden till 100% kan du inte få bilderna att visas i Lynx... Eller har jag fel?
Nä, då visas alt-text så klart. Det är det som är poängen.
Utan att veta exakt hur sidan du länkade skulle se ut... funkar inte detta:
<head>
<style type="text/css">
<!--
html, body {
margin : 0;
padding : 0;
}
#top {
width : 100%;
height : 50px;
background : #eee;
border-bottom : 1px solid #999;
}
#main {
width : 100%;
}
#bot {
width : 100%;
height : 50px;
background : #eee;
border-top : 1px solid #999;
}
#mainLeft {
width : 70%;
float: left;
}
#mainRight {
width : 100%;
height : 100%;
background : #eee;
margin: 3px,0,3px,0;
border-top: 1px solid #999;
border-left: 1px solid #999;
border-bottom: 1px solid #999;
}
-->
</style>
</head>
<body>
<div id="top"></div>
<div id="main">
<div id="mainLeft">mainLeft<br/><br/><br/><br/>mainLeft<br/><br/><br/><br/>mainLeft</div>
<div id="mainRight">mainRight</div>
</div>
<div id="bot"></div>
</body>
Din tankegång är rätt. Men tyvärr så fungerar det inte.
Main DIV-en innehåller två stycken 'child' DIV-ar. mainLeft skall få sin höjd av innehållet som finns i den. mainRight skall alltid vara 100% av main höjden och det är det som är kruxet här.
NS och Mozilla tyder standarden rätt och visar sidan rätt. IE däremot tar inte 100% av main DIV-en utan av hela sidan. Opera 7 bryr sig inte alls om höjden du anger utan anpassar höjden efter innehållet.
Klurigt ser du...