Hallo allerseits,
wie in Bild 1 im Anhang erkennbar gestalte ich gerade ein Forum. Die Anzeige der Beiträge der Benutzer macht mir jedoch mit meinen stümperhaften CSS-Kentnissen so einige Probleme. Aktuell beschäftigt mich die Frage, wie ich bei folgender Struktur erreichen kann, dass die Haarlinie zwischen den Informationen zum Autor und seinem Beitrag durchgehend angezeigt wird. Dafür müsste die Höhe beider DIVs gleich sein, also quasi height: 100%; - das funktioniert nur bei mir nicht. Vielleicht kann mir jemand einige best-practices dazu empfehlen? Die üblichen Quellen haben bei mir nichts ergeben, was hier anzuwenden wäre. Danke!
Alles anzeigen
Alles anzeigen
wie in Bild 1 im Anhang erkennbar gestalte ich gerade ein Forum. Die Anzeige der Beiträge der Benutzer macht mir jedoch mit meinen stümperhaften CSS-Kentnissen so einige Probleme. Aktuell beschäftigt mich die Frage, wie ich bei folgender Struktur erreichen kann, dass die Haarlinie zwischen den Informationen zum Autor und seinem Beitrag durchgehend angezeigt wird. Dafür müsste die Höhe beider DIVs gleich sein, also quasi height: 100%; - das funktioniert nur bei mir nicht. Vielleicht kann mir jemand einige best-practices dazu empfehlen? Die üblichen Quellen haben bei mir nichts ergeben, was hier anzuwenden wäre. Danke!
Quellcode
- <div class="posting">
- <div class="user">
- <div class="avatar">
- <img src="http://blutorden-konsortium.de/files/keinavatar.png" alt="Avatar von Dimebag" />
- </div>
- <div class="nickname"><a href="http://blutorden/index.php?module=users&action=viewuser&id=127"><span>Dimebag</span></a></div>
- <div class="guild">Blutorden</div>
- <div class="rank"></div>
- </div>
- <div class="text"><p>Ich werde von Sonntag, dem 6.7. bis Dienstag den 8.7 nicht da sein, da ich dort auf meinem Abschlusszelten bin.</p></div>
- <br clear="both" />
- </div>
- <div class="posting alternate">
- <div class="user">
- <div class="avatar">
- <img src="http://blutorden-konsortium.de/files/88a690c93dcd00ee59bda2692b4c1ecd.png" alt="Avatar von Effendi" />
- </div>
- <div class="nickname"><a href="http://blutorden/index.php?module=users&action=viewuser&id=1"><span>Effendi</span></a></div>
- <div class="guild">Blutorden</div>
- <div class="rank"></div>
- </div>
- <div class="text"><p> Viel Spaß :)</p></div>
- <br clear="both" />
- </div>
Quellcode
- /* Posting layout */
- .posting {
- width: 99%;
- overflow: hidden;
- position: relative;
- border: 1px solid #ccc;
- margin: 10px 0 0 0;
- padding: 0;
- }
- .posting .user {
- height: 100%;
- float: left;
- width: 18%;
- text-align: center;
- padding: 10px 0 10px 0;
- }
- .posting .user .avatar img {
- margin: 0 0 10px 0;
- padding: 0;
- width: 45px;
- height: 45px;
- }
- .posting .user .nickname {
- font-weight: bold;
- }
- .posting .user .nickname a {
- text-decoration: none;
- }
- .posting .user .guild {
- display: none;
- font-size: 90%;
- color: #666;
- }
- .posting .user .rank {
- }
- .posting .text {
- height: 100%;
- border-left: 1px solid #ccc;
- width: 78%;
- float: right;
- padding: 10px;
- text-align: justify;
- }
- .alternate {
- background-color: #f1f1f1;
- }