[CSS] 2 div'jes naast plaatsen: 2e divje rechts uitlijnen

[Reveller]

Ik heb de volgende div's om een weblog comment te stylen:

HTML:

<div class="comment">
  <div class="commenthead">Reveller @ 13-12-2005</div>
  <div class="commentbody">Dit vind ik ervan!</div>
</div>

Als ik inlog, plaats ik een edit en delete link naast de commenthead. Deze plaats ik in een aparte div:

HTML:

<div class="comment">
  <div class="commenthead">
    Reveller @ 13-12-2005
    <div class="commentadmin">edit delete</div>
  </div>
  <div class="commentbody">Dit vind ik ervan!</div>
</div>

Ik wil dit als volgt weergeven:

code:

Reveller @ 13-12-2005                edit delete
Dit vind ik ervan!

Nogiemanddiereageerde @ 12-12-2005   edit delete
Je haalt me de woorden uit de mond! Ik vind
precies hetzelfde...

Met andere woorden: de edit en delete link moeten rechts uitgelijnd worden op dezelfde regel als de naam van de commenter en de tijd. Ik gebruik de volgende css:

Cascading Stylesheet:

.comment {
  display          : block;
  border-top       : 1px dotted #D3EAC0;
  padding          : 5px 0px 5px 0px;
  word-wrap        : break-word;
  margin-bottom    : 10px;
}
.commenthead {
  font-weight      : bold;
}
.commentadmin {
  float            : right;
}

De commentadmin div komt nu wel rechts te staan, maar niet op dezelfde regel:

code:

Reveller @ 13-12-2005
Dit vind ik ervan!                   edit delete

Wie kan mij vertellen hoe dit wel moet? Ik heb al geprobeerd om .commenthead float:left mee te geven, maar dat werkt ook niet

[jeroen-v]

volgens mij moet je in zowel commenthead en commentadmin dit toevoegen:
display: inline;

Daardoor word er geen nieuwe regel voor geopend.

[ Voor 4% gewijzigd door jeroen-v op 13-12-2005 18:05 ]

[Reveller]

@jeroen-v: dat klopt - dan staat het op 1 regel. Maar dan krijg ik nog steeds de commentadmin links niet rechts uitgelijnd. Al half onderweg!

[jeroen-v]

text-align: right;

?

[steffex]

Probeer dit eens:

Cascading Stylesheet:

.comment {
  display          : block;
  border-top       : 1px dotted #D3EAC0;
  padding          : 5px 0px 5px 0px;
  word-wrap        : break-word;
  margin-bottom    : 10px;
}
.commenthead {
  font-weight      : bold;
  float            : left;
}
.commentadmin {
  float            : right;
}

[Reveller]

jeroen-v schreef op dinsdag 13 december 2005 @ 18:17:
text-align: right;

?

Probeerde ik ook al, maar dat werkt dus niet...?

[ Voor 60% gewijzigd door Reveller op 13-12-2005 18:22 ]

[Reveller]

stef-o.nl schreef op dinsdag 13 december 2005 @ 18:21:
Probeer dit eens:

Cascading Stylesheet:

.commenthead {
  font-weight      : bold;
  float            : left;
}
.commentadmin {
  float            : right;
}

Dan zit er dus weer een regel tussen, en dit in combinatie met jeroen-v's display:inline werk dan ook niet meer:

Cascading Stylesheet:

.commenthead {
  display: inline;
  float: left;
}

.commentadmin {
  display: inline;
  float: right;
}

Dit geeft:

code:

Reveller @ 13-12-2005                
                                                   edit delete
Dit vind ik ervan!

[BtM909]

Misschien handig om dit eens te lezen: Verwijderd in "Balk naast het menu"

[steffex]

BtM909 schreef op dinsdag 13 december 2005 @ 18:29:
Misschien handig om dit eens te lezen: Verwijderd in "Balk naast het menu"

denk niet dat hij daar verder mee komt...!

ik ben voor je aan het testen

[ZeilDude]

Het is wel een beetje basic, maar ok:

Cascading Stylesheet:

div.comment {
    background-color: Blue;
}

div.commenthead {
    display: block;
    clear: both;
    background-color: Gray;
}

div.commentheadPoster {
    display: block;
    float: left;
    clear: left;
    background-color: Red;
}

div.commentheadAdmin {
    display: block;
    float: right;
    clear: right;
    background-color: Green;
}
        
div.commentbody {
    display: block;
    clear: both;
    background-color: Yellow;
}

HTML:

<div class="comment">
    <div class="commenthead">
        <div class="commentheadPoster">
            Reveller @ 13-12-2005
        </div>
        <div class="commentheadAdmin">
            edit delete
        </div>
    </div>
    <div class="commentbody">
        Dit vind ik ervan!
    </div>
</div>

De kleurtjes in de div's geven mooi aan waar je div's zijn, na het testen vervang je die dus of haal je ze weg.
Display: block; zijn overigens standaardwaarden voor div's en mag je dus weglaten.

[Reveller]

Zeildude, bedankt voor je reakie. Je hebt een extra div "commentheadPoster" aangemaakt. Ik wilde eigenlijk juist zien of je hetzelfde resultaat zonder die extra div zou kunnen bereiken. Toch bedankt, maar als iemand het originele vraagstuk op kan lossen, hoor ik dat nog graag! Ik pruts zelf ook nog even door

[ZeilDude]

Reveller schreef op dinsdag 13 december 2005 @ 18:47:
Zeildude, bedankt voor je reakie. Je hebt een extra div "commentheadPoster" aangemaakt. Ik wilde eigenlijk juist zien of je hetzelfde resultaat zonder die extra div zou kunnen bereiken. Toch bedankt, maar als iemand het originele vraagstuk op kan lossen, hoor ik dat nog graag! Ik pruts zelf ook nog even door

Dan klopt je topictitel niet. Immers:

code:

<div class="commenthead">
    Reveller @ 13-12-2005
    <div class="commentadmin">edit delete</div>
</div>

zijn niet 2 divjes naast elkaar, maar een divje in een div.

[Michali]

Mischien door van de HTML dit te maken:

HTML:

<div class="comment">
  <div class="commenthead">
    <div class="commentadmin">edit delete</div>
    Reveller @ 13-12-2005
  </div>
  <div class="commentbody">Dit vind ik ervan!</div>
</div>

[ZeilDude]

Michali schreef op dinsdag 13 december 2005 @ 18:55:
Mischien door van de HTML dit te maken:

HTML:

<div class="comment">
  <div class="commenthead">
    <div class="commentadmin">edit delete</div>
    Reveller @ 13-12-2005
  </div>
  <div class="commentbody">Dit vind ik ervan!</div>
</div>

Tuurlijk, dat werkt prima, behalve als je de site zonder stijl bekijkt, dan staat 'edit delete' dus boven 'Reveller @ 13-12-2005'. Erg lastig voor bezoekers die browsen met een browser die geen stijl aan kan.

[Michali]

Dit werkt wel:

HTML:

<div class="comment">
  <div class="commenthead">Reveller @ 13-12-2005</div>
  <div class="commentadmin">edit delete</div>
  <div class="commentbody">Dit vind ik ervan!</div>
</div>
<style>
.comment {
  display          : block;
  border-top       : 1px dotted #D3EAC0;
  padding          : 5px 0px 5px 0px;
  word-wrap        : break-word;
  margin-bottom    : 10px;

}
.commenthead {
  font-weight      : bold;
  float: left;
}
.commentadmin {
  float            : right;
}
.commentbody {
  float: left;
  clear: both;
}
</style>

Alleen zit je dan wel met al die floats. Maar als je het graag zo wilt hebben, dat kan.

Tja, en als we het toch gaan hebben over bezoekers zonder stijl, dan is het beter om van de HTML dit te maken:

HTML:

<div class="comment">
  <h3>Reveller @ 13-12-2005</h3>
  <ul>
     <li>edit</li>
     <li>delete</li>
  </ul>
  <p>Dit vind ik ervan!</p>
</div>

[ Voor 26% gewijzigd door Michali op 13-12-2005 19:13 ]

[ZeilDude]

Michali schreef op dinsdag 13 december 2005 @ 19:06:
Dit werkt wel:

HTML:

<div class="comment">
  <div class="commenthead">Reveller @ 13-12-2005</div>
  <div class="commentadmin">edit delete</div>
  <div class="commentbody">Dit vind ik ervan!</div>
</div>
<style>
.comment {
  display          : block;
  border-top       : 1px dotted #D3EAC0;
  padding          : 5px 0px 5px 0px;
  word-wrap        : break-word;
  margin-bottom    : 10px;

}
.commenthead {
  font-weight      : bold;
  float: left;
}
.commentadmin {
  float            : right;
}
.commentbody {
  float: left;
  clear: both;
}
</style>

Alleen zit je dan wel met al die floats. Maar als je het graag zo wilt hebben, dat kan.

Ja, die eerste heeft een div minder en is ook logischer. Semantisch is ie zo erg XML-conform.

Tja, en als we het toch gaan hebben over bezoekers zonder stijl, dan is het beter om van de HTML dit te maken:

HTML:

<div class="comment">
  <h3>Reveller @ 13-12-2005</h3>
  <ul>
     <li>edit</li>
     <li>delete</li>
  </ul>
  <p>Dit vind ik ervan!</p>
</div>

Deze methode heeft ook mijn voorkeur en zo maak ik tegenwoordig vaak HTML-pagina's waarin menuutjes in voorkomen. Ik vind deze opbouw overigens logischer naarmate de lijst (<ul>...</ul>) langer is, 2 items is ietwat weinig.

[ Voor 25% gewijzigd door ZeilDude op 13-12-2005 19:20 ]