Smoerf
Legacy Member
Ik ben momenteel bezig aan een soort gastenboeksysteem.
Omdat ik de berichten laat weergeven door middel van een definition list gebruik ik de definition tag als "hoofd" en de definition description als "body".
dit is de html code om m'n berichten weer te geven:
En dit is de css om m'n dl, dt en dd op te maken
Link naar de online versie: http://portfolio.joggink.be/messagepad
EDIT:
nevermind, als ik de messages div een float left meegeeft lukt het wel
(ksnap het niet volledig, maar het werkt wel)
Omdat ik de berichten laat weergeven door middel van een definition list gebruik ik de definition tag als "hoofd" en de definition description als "body".
dit is de html code om m'n berichten weer te geven:
HTML:
<div id="messages">
<dl>
<dt><span class="msgdate">2006-08-25 06:47</span>Dit is een testbericht</dt>
<dd>
En dit is dan het berichtje! Woej<br /><br />en nog wat tekst <br /><br />
<div class="msgauthor">Jochen Vandendriessche ([email protected])</div>
</dd>
<dt><span class="msgdate">2006-08-25 06:13</span>Dit is een testbericht</dt>
<dd>
En dit is dan het berichtje! Woej<br />meer tekst, mss nog meer tekst?<br /><br />en zouden we durven?<br />Jup, nog wat tekst <br /><br />
<div class="msgauthor">Jochen Vandendriessche ([email protected])</div>
</dd>
<dt><span class="msgdate">2006-08-25 05:53</span>Eerste bericht?</dt>
<dd>
test<br /><br />bla bla <br /><br />
<div class="msgauthor">Jochen Vandendriessche ([email protected])</div>
</dd>
</dl>
</div>En dit is de css om m'n dl, dt en dd op te maken
Code:
#messagepad #messages dl{
display:inline;
}
#messagepad #messages dl dt{
background-image:url('i/comments-small.gif');
background-repeat:no-repeat;
background-position:8px;
padding:3px 8px 3px 25px;
background-color:#d8d8d8;
margin-top:1px;
font-weight:bold;
}
#messagepad #messages dl dt .msgdate{
float:right;
}
#messagepad #messages dl dd{
padding:3px 8px 3px 25px;
border-bottom:1px solid #d8d8d8;
}Link naar de online versie: http://portfolio.joggink.be/messagepad
EDIT:
nevermind, als ik de messages div een float left meegeeft lukt het wel
(ksnap het niet volledig, maar het werkt wel)