Hallo,
ich bin seit gestern daran ein ganz simpel gehaltenes "Forendesign" zu schreiben. Die Einfachheit funktioniert, aber nur wenn der Text auch die gleichen Reihenzahl wie die anderen Spalten einnimmt. Sind mehr Reihen da, dann gibt es nicht mehr das gewünschte Ergebnis. Ohne es umschweifend beschreiben zu wollen, kopiere ich hier mal den Quellcode von mir rein. Die erste "Tabelle" ist das nicht gewollte Ergebnis. Angefügt habe ich dann eine "Tabelle" wo ich mal alles vom Text her so angepasst habe, dass es das Ergebnis wäre was ich haben möchte. Ich denke so wird das besser ersichtlich als es zu beschreiben.
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Testscript</title>
<style type='text/css'>
[code lang=css]* {
padding: 0px;
margin: 0px;
}
html, body {
background-color: #FFF;
color: #52522F; /* #28313F */
width: 100%;
height: 100%;
font: Normal 100%/120% 'Courier New', Verdana, Helvetica;
}
.Kategorien {
position: relative;
width: 100%;
margin-top: 20px;
background: #F8FAFB; /*F2F6FA */
}
.Kategorien div:hover {
background: #D8E7F5;
}
a {
color: #003;
}
#Forum {
width: 80%;
min-width: 800px;
margin: 0px auto;
}
p {
margin-left: 50px;
}
span {
border: 2px solid #FFF;
}
span.Topic {
float: left;
position: relative;
width: 50%;
}
span.LastAction {
margin-left: 50%;
margin-right: 18%;
position:relative;
display:block;
}
span.Search {
float:right;
position:relative;
width:18%;
}
h1 {
background-color: #ff0;
height: 40px;
}
.clear {clear:both;}
</style>
</head>
<body>
<div id='Forum'>
<div class='Kategorien'>
<h1>Kategoriename</h1>
<div>
<span class='Topic'>
<p>
<a>Das ist ein Testthema</a><br>
Hier findest du rein garnichts, weil es ja noch nicht will. Deswegen tuts mir leid
</p>
</span>
<span class='Search'>
Durchsuchend asdf asdf aslf jalsjfls
</span>
<span class='LastAction'>
sdasdasdasdasda (ds. asdasd das asdas1, asd:ds) dasdkasjk ksdjf sdfakdfjlld dfsd fsdfsjdfsf ifsdfgsudfh ass hfksh fsa fskfaugsfk sdfaks
</span>
<div class="clear"></div>
</div>
</div>
<div class='Kategorien'>
<div>
<span class='Topic'>
<p>
<a>Das wird die Überschrift</a><br>
Test
</p>
</span>
<span class='Search'>
test<br>Test
</span>
<span class='LastAction'>
Test<br>Test
</span>
<div class="clear"></div>
</div>
</div>
</div>
</body>
</html>[/code]
Ich möchte das quelltexttechnisch nicht aufblähen wie so 5-7 mal verschachtelte Designs die man sonst von Foren so kennt. Über eine schöne "Lösung" bzw. Hinweise würde ich mich daher freuen.
PS: Es hat nicht geholfen die Spalten einfach auf height: 100% zu stellen.
Danke!