nicht angemeldet
hi
ich habe nach euerem vorschlag mit den css-layout gespielt und die tabellen soweit möglich ersetzt. funktioniert soweit gut. in einem punkt bin ich jedoch festgefahren. die erste zeile "h1" im "div#Content" sollte nach meinem Verständnis bis zum "div#Info" gehen. das anschliessende element <p> wird so korrekt umgebrochen. ich habe das problem rot markiert.
FF wie IE7 agieren unterschiedlich:
FF schiebt das "div#Info" über den übergeordneten "div#Content" hinaus
oder verteilt das Info auf die ganze breite und schreibt h1 darunter.
(2 ff auf unterschiedlichen masch. (xp/vista) v2.0.0.11 und v2.0.0.11)
IE7 legt die 2 elemente übereinander
FF zeigt keine fehler in der konsole.
das bild von IE7 kommt meiner sollvorstellung nahe.
ist im css-layout eine verschachtelung von #div zugelassen?
div#Content (float left)
div#Info width=25%, (float right)
text auffüllung im rest ~75%
div
gibt es ein problem in meinem css abschnitt?
braucht es einen hack?
have fun und danke
jürg
beispiel>>>
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
body,h1,h2,h3,h4,p,ul,ol,li,div,td,th,address,blockquote,nobr,b,i {
font-family: "Trebuchet MS", Tahoma, Verdana, "Century Gotic", Arial, Helvetica, sans-serif;
font-size:100.01%;
}
h1 { margin:15px; padding:0.3em; font-size:150%; font-weight:bold; background-color:red; }
p { margin:15px; }
p img {
margin:10px; background-color:#f0f0f0;
border-width:2px; border-style:solid; border-color:silver white white silver;
}
caption {font-size:x-small; font-size:small; font-style:italic;}
table {
table-layout:auto; padding:1px; empty-cells:hide;
margin:15px; border-collapse:separate; background-color:#f0f0f0;
border-width:1px; border-style:solid; border-color:white silver silver white;
}
thead, th {
background-color:#f0f0f0; z-index:8; padding:2px; border-spacing:1px;
border-width:1px; border-style:solid; border-color:silver white white silver;
font-size:medium; line-height:150%; font-weight:bold;
}
tbody, td {
background-color:white; z-index:5; padding:2px; border-spacing:1px;
border-width:1px; border-style:solid; border-color:silver white white silver;
font-size:medium; line-height:120%;
}
table td.ColHead {
background-color:#f0f0f0; border-width:1px 1px; font-weight:bold;
text-align:center; z-index:9;}
tfoot {
font-size:small; line-height:100%; background-color:#f0f0f0; z-index:1;
font-style:italic;
}
table img { border:2px solid red; margin:0; padding:0; }
div#Content {
float:left;
min-width:400px; background-color:#f9f9f9;
padding:1px; margin:5px 15px 5px 5px;
border-width:1px; border-style:solid; border-color:silver white white silver;
}
div#Info {
float:right; width:25%;
padding:0px; margin:0px 0px 0px 0px;
border-width:1px; border-style:none; border-color:red;
}
</style>
</head>
<body bgcolor="#D2E2EC">
<div id="Content">
<div id="Info">
<table width="100%">
<tr><th>info</th><tr>
<tr><td>ksdf df ksd lk asdfk<br/><br/>
alkdj lksdj sldkfj asdflkj kdfj lkas dflkj södlkfj öaskdf
kjasdöflk ksjf sdf ,myxnc lkyxcl lykxjc lk xclkjy xc
lkjsdf lkjsa fk lksjf klkasdj ölksajdflk lsakdjflksjdf
lasjdfölk sdlfkj öasdkfjä lksjdf ölksdf
</td></tr>
</table>
</div>
<h1>Die Geschichte</h1>
<p>gugus ksadf k asldkfj lkjsf lkjs flkj<br/>
<img src="image/home_uhrx.jpg" align="left" width="150" height="200" alt="resized picture">
lsd lkjdsf lkjsdf lkjadf k sfkj lkjsdf ölksjf lkjsdf
kjaskfjklk aksjdf asdf akjf kajs dk asdkfj ökasjdf öskdjf lkasjdf aksdjf öaskjf
<table>
<tr><th>intern</th><tr>
<tr><td>ksdf df ksd lk asdfk<br/><br/>
alkdj lksdj sldkfj asdflkj kdfj lkas dflkj södlkfj öaskdf
kjasdöflk ksjf sdf
</td></tr>
</table>
</p>
<table>
<tr>
<td>eins</td>
<td>zwei</td>
</tr>
</table><br clear="both">
<p>ksjdf lkj sdfl skjlksdf k askdjflkl jsdkfjlk sdfk lksdjflk dfkjölkasdfk<br/>
ksdkf kjs dfkj öksd fk lksjdf kksadf lkjsdflkjö sd flkjsöd flkjs dflk
lkasjfö lkasjf ksjf öasdfkj dsfkj öaskdjf
lksjdf lkjs flölöasdfkj jsdlfkjlksjfl sdfkj sadöfkj sakldjf ksjdfielja
lsjf lksjfkj ierljkj sldkfj ierlkjdf ladf lkjiernr<br/>
</p>
<table>
<tr>
<td>zwei</td>
<td>drei</td>
</tr>
</table>
</div>
</body>
</html>
<<<<ende