nicht angemeldet
3 Spalten Design mit Spalten "echter" gleicher Länge.
Der MartinHallo,
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!
-
Hi,
ich bin seit gestern daran ein ganz simpel gehaltenes "Forendesign" zu schreiben.
zu Lernzwecken bzw. einfach aus persönlichem Ehrgeiz? Denn andernfalls müsste man doch eigentlich fertige Templates finden, die zu den Anforderungen passen. Na gut.
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.
Hab ich das jetzt verstanden? Nö, hab ich leider nicht. Was ist die Reihenzahl? Meinst du die Anzahl der Zeilen, also letztendlich die Höhe des Blocks?
Ohne es umschweifend beschreiben zu wollen, kopiere ich hier mal den Quellcode von mir rein.
Ein Link zu einem Online-Beispiel wäre nützlicher, weil man es da gleich "live" anschauen kann.
<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>Das geht nicht, das ist ungültiges HTML (sogar in HTML 5), denn span ist ein Inline-Element, das seinerseits nur Inline-Inhalt haben darf, aber keine Blockelemente wie beispielsweise ein p. Vielleicht liegt hier chon dein Problem begründet, denn browserintern wird damit das span-Element unmittelbar vor dem öffnenden <p> wieder geschlossen.
So long,
Martin--
Wenn du beim Kochen etwas heißes Wasser übrig hast, friere es ein.
Heißes Wasser kann man immer gebrauchen.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
zu Lernzwecken bzw. einfach aus persönlichem Ehrgeiz?
Ja. Ich mag gerne etwas lernen statt Copy und Paste bzw. nur für etwas spezifisches zu lernen.
Hab ich das jetzt verstanden? Nö, hab ich leider nicht. Was ist die Reihenzahl? Meinst du die Anzahl der Zeilen, also letztendlich die Höhe des Blocks?
Ich habe ausversehen das falsche Wort verwendet, Entschuldigung. Aber gut erkannt. Es geht um die Höhe der Blocks die gleich sein sollen. Indirekt sind sie es ja, aber nicht wenn ich diesen einen Border zweise. Ich kann zwar dem umschließenden div einen border zuweisen, möchte aber dass die drei blocks an sich mit dem Rahmen getrennt sind. Das geht aber bei mir nicht (dafür mit der Maus über die "Tabelle" fahren, dann sieht man es besser da der border weiß ist). Ein Beispiel wie ich es haben wollte ist auf woltlab zu sehen: http://www.woltlab.com/forum/ unter Neuigkeiten. Ich fand das sehr interessant gestaltet und hab sofort mein SAMP Colorpicker hervorgeholt um das wie ich es sehe, nachzubilden nur eben mit einfacherem Quelltext der nicht so überladen ist.
Ein Link zu einem Online-Beispiel wäre nützlicher, weil man es da gleich "live" anschauen kann.
Habs hochgeladen. http://gigatraffic.de/test.html
Das geht nicht, das ist ungültiges HTML (sogar in HTML 5), denn span ist ein Inline-Element, das seinerseits nur Inline-Inhalt haben darf, aber keine Blockelemente wie beispielsweise ein p. Vielleicht liegt hier chon dein Problem begründet, denn browserintern wird damit das span-Element unmittelbar vor dem öffnenden <p> wieder geschlossen.
Oh, danke für den Hinweis. Ist aber leider nicht das Problem, da ich es vorher schon ohne p hatte. Habe es auf der Seite auch wieder rausgenommen und passiert nie wieder. Versprochen :)
So long,
MartinMfg,
Jan :)
-