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

Box aus drei Bildern erstellen

G

Gh0st90

Neues Mitglied
Hallo liebe html.de Community,

ich bin im Moment dabei ein eigendes Wordpress Theme zu erstellen. Das Design ist fertig und ich bin gerade dabei alles zu coden. Nun habe ich eine Frage für meine Textboxen.

Die Textbox soll aus drei Bildern bestehen. Einmal oben der Kopf (1), die Textfläche aus einem 1 Pixel breiten Streifen, der sich unendlich Strecken lässt (2) und das Ende der Box (3)

brvi73lricu7n7bqx.jpg


Wie kann ich das nun mit Hilfe von HTML/CSS realisieren?

Liebe Grüße,
Gh0st90
 
Willkommen im Forum.

Schachtele zum Beispiel drei Div-Elemente ineinander. Das äußerste bekommt als gekacheltes Hintergrundbild (background-Eigenschaft in CSS) die Grafik #2, die beiden anderen dann #1 und #3 jeweils oben beziehungsweise unten ausgerichtet.

Das Prinzip habe ich beispielsweise hier so ähnlich umgesetzt (etwa Posts #7 und #9):

- http://www.html.de/css/31686-runde-ecken-bei-variabler-groesse.html

Grob vergleichbar:

- A List Apart: Articles: Sliding Doors of CSS

Edit:

Oder einfach so:

HTML: 
<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>New</title>
        <style type="text/css">

.box {
    width: 200px;
}

.box .header {
    background: #0f0;
    height: 20px;
}

.box .content {
    background: #00f;
    padding: 5px;
}

.box .footer {
    background: #f00;
    height: 20px;
}

        </style>
    </head>

    <body>

        <div class="box">
            <div class="header">
            </div>

            <div class="content">
                <p>Hallo Welt!</p>
                <p>Hallo Welt!</p>
                <p>Hallo Welt!</p>
                <p>Hallo Welt!</p>
                <p>Hallo Welt!</p>
            </div>

            <div class="footer">
            </div>
        </div>

    </body>

</html>
 
Zuletzt bearbeitet:
Vielen vielen Dank, hat super funktioniert :-)

Jetzt muss ich nur noch zwei solcher Boxen nebeneinander bekommen.
Hast du oder jemand anders da ne Idee?

Liebe Grüße,
Gh0st90
 
Für allgemeine Informationen zum Thema siehe SELFHTML oder ein CSS-Tutorial.

Sehr umfangreich:

- Float

HTML: 
<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>New</title>
        <style type="text/css">

.box {
    width: 200px;
    float: left;
    margin: 20px;
    border: 5px solid #ff0;
}

.box .header {
    background: #0f0;
    height: 20px;
}

.box .content {
    background: #00f;
    padding: 5px;
}

.box .footer {
    background: #f00;
    height: 20px;
}

        </style>
    </head>

    <body>

        <div class="box">
            <div class="header">
            </div>

            <div class="content">
                <p>Hallo Welt!</p>
                <p>Hallo Welt!</p>
                <p>Hallo Welt!</p>
                <p>Hallo Welt!</p>
                <p>Hallo Welt!</p>
            </div>

            <div class="footer">
            </div>
        </div>



        <div class="box">
            <div class="header">
            </div>

            <div class="content">
                <p>Hallo Welt!</p>
                <p>Hallo Welt!</p>
                <p>Hallo Welt!</p>
                <p>Hallo Welt!</p>
                <p>Hallo Welt!</p>
            </div>

            <div class="footer">
            </div>
        </div>

    </body>

</html>
 
Danke :-) das funktioniert ja auch schonmal gut.
Die rechte Box soll aber am rand bleiben und nur die linke soll einen Abstand von der rechten haben.
Wie kann man so etwas denn realisieren?
 
Habe das mit den Boxen nun fast soweit. Nur eine Sache verstehe ich nicht.

Wenn in der Sidebar der Text weiter nach unten geht, wandert der Header ausm Content Bereich nach unten. (siehe Bild)

brvtq87b7o0dddsub.jpg


Woran kann das liegen?

Gruss,
Gh0st90
 
Habe es nun mit clear:left; weg bekommen, aber nun sieht das ganze so aus.

brvv5299ttlgpt7ib.jpg



Wie bekomme ich es nun so hin, dass der Content Bereich nicht mit nach unten geht, sondern direkt unter den kleinen Boxen und neben der Sidebar ist?
 
Setze linke Box, rechte Box und Content in einen Container-Div (auf der Hierarchieebene von Sidebar) und floate diesen insgesamt noch mal „gegen“ Sidebar.

Es mag irgendwelche Tricks geben mit clear, die das in diesem Fall unnötig machen, aber eine weitere Unterteilung mit Divs ist sicherlich die robusteste Lösung.
 
Hi,
danke für den Tipp, ich weis nicht wie du das meinst mit der Hierachieebene von Sidebar und dann das nochmal gegen Sidebar floaten.

Und den Containerdiv stelle ich mir so vor:

Code: 
<div id="dreiboxen">
<div class="linkebox"></div>
<div class="rechtebox"></div>
<div class="sidebar"></div>
</div>

Ich bitte nochmal um ein bisschen Hilfe.

Gruss,
Gh0st90
 
Hallo,

er meint, dass du die beiden Textboxen + Content in einem Div-Container gruppieren sollst, sowie die Sidebar auch nochmal... also in etwa so:

HTML: 
<div>
<div float:left;>
 ..
  ..
  textbox1
  textbox2
  content
 ..
 ..
</div>
<div>
 sidebar
</div>
</div>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben