Image Box länger machen wenn mehr Inhalt enthalten ist.

[pxLooh]

Guten Abend liebe Community,

ich bin Heute auf dieses Wunderschöne Forum gestoßen und musste mich direkt Registrieren.
Dabei habe ich auch meine erste Frage die ich mit euch teilen möchte und erhoffe mir hilfreiche Antworten.

Vorab sei gesagt ich habe mich mit der Materie HTML/CSS schon eingearbeitet, jedoch würde ich mich noch als Neuling bezeichnen.

So, derzeit bin ich dran eine Homepage zu entwickeln. Die Navigation sowie das Logo stehen so wie ich es mir vorgestellt und in Photoshop konstruiert habe.
Ich möchte nun einen Contentbereich einfügen als Image Datei zwischen bsp:

<div id="content">Hier soll der Inhalt rein, etc.</div>

.
Nun ist es aber öfters so das man ja mehr Inhalt hat, ich möchte deshalb eine "interaktive" Contentbox erstellen als Image die dann von HTML/CSS eingeteilt wird.
So das ich eine Image Datei habe die eine begrenzte Höhe hat beispiel 300 Pixel und wenn es mehr Inhalt werden soll sich der Bereich unten erweitern das er sich ein Stück von der Mitte dazu holt.
Dabei sollte er aber den Oberen und unteren Teil so lassen wie er ist.

Hat jemand eine Ahnung oder sogar einen fertigen Code wo ich nur eintragen muss?

Danke sehr und schöne Nacht euch.

 

[Space Vampire]

Ich verstehe gerade das Problem nicht.
Sofern <div> keine fixe Höhe zugewiesen bekommt, wird es immer genau so hoch wie sein Inhalt.

 

[Tronjer]

Ich verstehe die Frage schon, und eventuell wäre hier Ansatz à la border-radius mit CSS2 möglich. Aber da der TE keine Eigeninitiative zeigt und nach "fertigem Code" sucht, habe ich wenig Lust, das zu erläutern.

 

[pxLooh]

Es muss kein fertiger Code sein.
Ich erkläre das hier nochmal genau, ich habe eine PNG Datei und in dieser befindet sich mein Content.
Nun möchte ich das der Content sich automatisch verlängert indem er sich ein stück von der Mitte des Bildes nimmt und ranhängt,
falls zuviel Inhalt drinstehen sollte.

 

[Tronjer]

Zerschneide die Grafik im PS in drei Teile. Lege die Teile in HTML-Container, die so übereinanderstehen, dass die Teilung nicht sichtbar ist. Für den mittleren Bereich muss die Grafik als background-image definiert und mit repeat-y nach unten verlängert werden.

 

[pxLooh]

In Ordnung, ich werde es jetzt sofort ausprobieren. Danke dir.

 

[Space Vampire]

Es muss kein fertiger Code sein.
Ich erkläre das hier nochmal genau, ich habe eine PNG Datei und in dieser befindet sich mein Content.
Nun möchte ich das der Content sich automatisch verlängert indem er sich ein stück von der Mitte des Bildes nimmt und ranhängt,
falls zuviel Inhalt drinstehen sollte.

Na jetzt hab auch ich die Frage verstanden.
Egal. Erschöpfend von Tronjer beantwortet...

 

[pxLooh]

So ich habe die PNG Datei mit dem Content in 3 stücke zerteilt. Top, Content und Bottom.
Nun habe ich das Problem das er mir nur den obersten Teil, also den Top anzeigt und Content/Bottom sind verschwunden.

HTML:

<div id="con-top"></div>
<div id="content"></div>
<div id="con-bot"></div>

CSS:

#con-top {
background:url(images/con-top.png) no-repeat;
width:667px;
height:64px;
}

#content {
background:url{images/content.png);
width:667px;
height:222px;
}

#con-bot {
background:url(images/con-bottom.png) no-repeat;
width:667px;
height:17px;
}

 

[djheke]

Vielleicht hilft dir das hier.
Skalierbare Info-Boxen mit abgerundeten Ecken
Wobei CSS3 die bessere Wahl wäre.

 

[pxLooh]

@djheke, schon ein guter Ansatz jedoch hilft mir das nicht sehr viel weiter. :s

 

[djheke]

@djheke, schon ein guter Ansatz jedoch hilft mir das nicht sehr viel weiter. :s

Warum? Egal, du hast lediglich einen Syntaxfehler in deinem CSS-Anweisungen

 

[pxLooh]

Könntest du mir diesen eventuell erläutern? :S

€: Okay, ich habe ihn gefunden. In meiner eigenen Dummheit habe ich nicht bemerkt das der Pfad zum content.png mit { angeführt wurde anstatt mit (.
Danke jedoch für eure Tipps.