CSS Frage

Lasagne

Ich habe eine Frage zu CSS.
Und zwar kennt ihr bestimmt diese Felder bzw Bilder, in denen
ein Kommentar steht. Diese sind immer unterschiedlich lang, da
der eine viel Text schreibt, der andere wenig.
Ich meine Hier beispielsweise die Kommentarleiste beim Habbowert.de.
Den Hintergrund zu machen weiß ich, wie macht man jedoch,
dass oben beispielsweise eine kleine Grafik ist und unten ein blauer Rand,
das bei jedem Kommentar ob lang oder kurz?
Und wie mache ich, dass sich das CSS-Element dem
Kommentar anpasst und der Kommentar nicht aus diesem rausglitcht
(Beispiel: Hintergrund beim Kommentar Orange, Text soll nur im Orangenen Feld bleiben)?

Sehr toll, wenn ihr helft

INCepted

Du definierst eine max-height und min-height anschließend die scroll Achse auf Auto...

χѕтєνєяєαℓ

Also wenn ich das jetzt richtig verstanden habe dann müsste das so gehen:

HTML CODE:

HTML

<DOCTYPE html>
<html>
     	<head>
	<title>Hallo</title>
</head>
<body>
	<div id="orangebox"><div class="text"></div></div>
</body>

CSS Code:

Code

body {
 	background-image:url(wasweißich);
}
#orangebox {
  	background-color:orange;
  	width:400px; / oderso
  	height:0 auto;
}
.text {
  	color:#FFFFFF;
  	font-size:12px;
  	font-family:wasweißich;
}

Alles anzeigen

Ich hoffe ich habe es richtig verstanden

Lasagne

Nicht ganz.
Ich zeigs mal anhand von Habbowert:

Man sieht oben einen extra Bereich, der bei jedem Kommentar vom Aufbau her gleich
ist (Datum, Name etc. ist natürlich anders). Der Kommentarbereich
hat Rechts und Links einen Rand, welcher gleich bleibt, sich jedoch je
nach Kommentarlänge verlängert (nach unten hin) oder eben so bleibt wie auf dem
Screen. Unten sieht man dann noch eine Trennlinie.

Mein Problem ist folgendes:
Bei mir bleibt der "Kommentarbereich" immer gleich groß und der Text
geht durch ihn hindurch, das heißt, dass er plötzlich in dem nächsten Kommentar drin steckt.
Ebenso schaffe ich es nicht einen oberen und den unteren Bereich zu machen, welcher
ja bei jedem Kommentar gleich bleiben soll (Ausser eben Datum etc).

Wenn mir jetzt jemand helfen kann wärs toll!

'Fearghus

@SteveReal:

Zitat

<DOCTYPE html>

<html>
<head>
<title>Hallo</title>
</head>
<body>
<div id="orangebox"><div class="text"></div></div>
</body>

Die extra Class Div ist doch unnötig?
Machst du einfach bei der ID Div noch das rein:
<div id="orangebox" class="text"></div>

Lasagne

Vielen Dank euch, das hat mir schonmal geholfen
Nun müsste ich noch wissen:
Wie mache ich, dass oben ein Bereich mit Datum oder so
und unten eine Trennlinie bei jedem Kommentar eingefügt wird?

INCepted

Zitat von Fearghus53

@SteveReal:

<html>
<head>
<title>Hallo</title>
</head>
<body>
<div id="orangebox"><div class="text"></div></div>
</body>

Die extra Class Div ist doch unnötig?
Machst du einfach bei der ID Div noch das rein:
<div id="orangebox" class="text"></div>

Alles anzeigen

Das ist aber eine sehr unordentliche Syntax..
Solltest es wirklich nur in Einzelfällen so machen

'Fearghus

INCepted:
Ich sauberer als wenn man eine extra div macht, die man doch eigentlich in die erste Einbauen kann.

Lasagne

Könntet ihr mir vielleicht noch bei meinem letzteren Problem helfen

Zitat von iBreakstone

Vielen Dank euch, das hat mir schonmal geholfen
Nun müsste ich noch wissen:
Wie mache ich, dass oben ein Bereich mit Datum oder so
und unten eine Trennlinie bei jedem Kommentar eingefügt wird?

χѕтєνєяєαℓ

'Fearghus: Erstmal danke aber ich hab mir das irgendwie so angewohnt. Früher hab ich das auch so gemacht eigentlich.

B2T:

Javascript code:

Code

<script type="text/javascript">     function getCurrentTime()    {        var now = new Date();        var mySecs = now.getSeconds();        var curHour = now.getHours();        var curMin = now.getMinutes();        var day = now.getDay();        var date = now.getDate();        var year = now.getFullYear();        var month = now.getMonth();        var days = new Array();            days[0] = "Sonntag";            days[1] = "Montag";            days[2] = "Dienstag";            days[3] = "Mittwoch";            days[4] = "Donnerstag";            days[5] = "Freitag";            days[6] = "Samstag";        var suffix = "AM";             if(mySecs < 10)            {                mySecs = "0" + mySecs;            }             if(curMin < 10)            {                curMin = "0" + curMin;            }             if(curHour == 12 && curMin >= 1)            {                suffix = "PM";            }             if(curHour == 24 && curMin >= 1)            {                curHour-= 12;                suffix = "AM";            }             if(curHour > 12)            {                curHour-= 12;                suffix = "PM";            } document.getElementById('time').innerHTML=(days[day]
 + ", der " + (month +1) + ". " + date + ". "  + year + "     und es ist
 " + curHour + "." + curMin + ":" + mySecs + " " + suffix + " Uhr"); } </script>

HTML code:

Code

<body onload="setInterval('getCurrentTime()', 1000);"><div id="time"></div>

so müsste es eigentlich gehen

Lasagne

Nene das meine ich nicht, ich meine das Design, also das der Kommentarkopf bei jedem Kommentar gleich ist

Squi

Erklär das Problem nochmal auf Deutsch bitte...

Meikel Smirnow

Was ist dein Problem, ich vermute kaum, wenn man mal in deine Signatur schaut, dass DU php und mysql kannst.
Alleine das du kein HTML und CSS kannst, ich frage mich wieso es Google und Tutorials gibst.
Es bieten Dir verschiedene Plattformen Tutorial´s an, die auch noch kostenlos sind!

Lasagne

Hier. Auf dem Bild seht ihr oben einen Bereich mit Datum und einen blauen Strich.
Der Kommentarbereich des jeweiligen Users wird mit einem Strich beendet.
Ich möchte, dass jeder meiner Kommentare oben ein Bild hat
(Wie das mit dem Datum, aber ich möchte NUR das Design, also kein Datum/Text/...)
und unten einen Trennstrich, nur weiß ich nicht, wie das funktioniert.

Squi

Die Boxen sind images und nur über das CSS verlinkt, sprich, bei diesen boxen ist kein

#box {
width: 700px;
height: auto;
border: solid 1px black;

χѕтєνєяєαℓ

Dafür musst du Bilder erstellen und diese dann in CSS & HTML einfügen.

Jetzt mitmachen!