• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Automatische Höhe bei dvi! Schon alles probiert :(

Bene_Be

Neues Mitglied
Moin,
hab schon alles Probier aber schaff das nicht. Also ich bin gerade dabei eine Seite zu Programmieren bei der man auch Kommentare schreiben kann. Das Problem ist das ich es nicht hinkriege deine automatische Höhe zu vergeben. Also das die Höhe des Div's nach dem Inhalt vergeben wird.

Ich hab bisher folgendes Script (die SQL abfrage und alles habe ich mal rausgenommen damit man sich aufs wesentliche konzentrieren kann):

HTML:
<div id="kom">
    <div id="name">.....</div>
    <div class="schrift" id="kommentartext">....</div>
    <div class="schrift" id="datum">...</div>
</div>


Code:
#kom{
    position:relative;
    width:670px;
    background-color:#ede9e2;
    overflow:hidden;
    min-height:130px;
}

#name{
    position:absolute;
    width:50px;
    top:5px;
    left:115px;
    font-size:40px;
    font-family: 'Raleway', sans-serif;
}

#kommentartext{
    position:relative;
    width:550px;
    left:120px;
    top:55px;
    font-size:20px;
    font-family: 'Raleway', sans-serif;
    color:#313131;
    display:block;
}

#datum{
    position:absolute;
    width:300px;
    left:400px;
    top:5px;
    font-size:30px;
    color:#A1A1A1;
    font-family: 'Raleway', sans-serif;
}

Würde mich über genauere und gut erklärte Antworten freuen :))

Danke schonmal!
 
Werbung:
Verwende Klassen statt den ID's, sonst darfst du nur einen Kommentar pro Seite anzeigen.

Schmeiß überall position raus und ersetze top und left durch margin.

Es reicht wenn du .kom (nicht #kom!) eine Schriftart zuweist.

Und zum eigentlichen Problem: Entferne overflow:hidden von .kom
 
Zuletzt bearbeitet:
Werbung:
Hier mal eine vereinfachte Variante. Sollte aber reichen.
Code:
<!doctype html>
<html>
<head>
<title>Titel</title>
<style>
.kom  { margin:10px; padding:0; background:#eee; min-height:200px}
.kom h3 {  margin:0;  padding:5px 15px;background:#ed9; overflow:hidden;}
.kom span {display:inline-block;float:right;}
.kom p  { margin:0;  padding:15px; }
</style>
</head>
<body>

<div class="kom">
  <h3>Max Mustermann<span>Freitag der 13.12.2013</span></h3>
  <p>
  Mein Kommentar zum Thema Mein Kommentar zum Thema Mein Kommentar zum Thema
  Mein Kommentar zum Thema Mein Kommentar zum Thema Mein Kommentar zum Thema
  Mein Kommentar zum Thema Mein Kommentar zum Thema Mein Kommentar zum Thema
  </p>
</div>

</body>
</html>
 
Zuletzt bearbeitet:
Zurück
Oben