nicht angemeldet
Guten Morgen!
Es heisst ja immer man solle Tabellen nicht für das Design verwenden, sondern viel eher DIVs.
Aber wie wandle ich eine so einfache Struktur effektiv in genau das selbe nur mit DIVs um?
<?xml version="1.0" encoding="iso-8859-15" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SC Howodo</title>
</head>
<style type="text/css">
[code lang=css]
table, td { border: 1px solid #000; }
#main { width: 100%; }
#left, #right { width: 15%; }
#center { width: 70%; }
#main2 { width: 100%; }
#navi { width: 25%; }
#content { width: 75%; }
</style>
<body>
<table id="main">
<tr>
<td id="left">left</td>
<td id="center">
<table id="main2">
<tr>
<td id="navi">navi</td>
<td id="content">content</td>
</tr>
</table>
</td>
<td id="right">right</td>
</tr>
</table>
</body>
</html>
[/code]
Die einfachste Umwandlung wäre theoretisch:
<?xml version="1.0" encoding="iso-8859-15" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SC Howodo</title>
</head>
<style type="text/css">
[code lang=css]
div { border: 1px solid #000; }
#main { width: 70%; margin: auto; }
#navi { width: 25%; float: left; }
#content { width: 75%; float: right; }
#footer { clear: both; }
</style>
<body>
<div id="main">
<div id="navi">navi</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
</body>
</html>
[/code]
Allerdings verschiebt sich durch den Rahmen das content-div unter das navi-div, aufgrund von float.
Wie kann man dieses Problem am elegantesten umgehen?
Kein Border: Das ist keine Lösung
(Hintergrund-)Bild statt Border: Das ist auch keine Lösung
Fixe Grössen: Das ist auch keine Lösung
Mfg kawinga
ie:% fl:| br:^ va:} ls:& fo:| rl:( n4:( ss:| de:] js:| ch:? sh:( mo:| zu:)