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

html.de-Forum HTML, XHTML & CSS
1

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]


…

…

…

[/HTML]

[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;
}[/CODE]

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

Danke schonmal!

2

Hi,

wenn sich die Höhe eines DIVs nach dem Inhalt richten soll, solltest du es mal mit padding versuchen, z. B.:

#kom { padding: 10px; }

Damit werden die Elemente in #kom mit einem eigenen Abstand von 10 Pixeln versehen.

Ansonsten einfach mal das Box-Modell anschauen :wink:
http://de.html.net/tutorials/css/lesson9.php

3

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

4

Hier mal eine vereinfachte Variante. Sollte aber reichen.

<!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>