ppmk22
Goto Top

Hintergrund aus mehreren gif zusammenstellen

Hallo Leute nun habe ich mal eine css Frage.
Ich habe da eine Blockelement und möchte Hintergrund aus mehreren kleinen gif's zusammen stellen.

Ungefähr so: (jede Zahl steht für ein gif)

122223
455556
788889

Das war mein Lösungsansatz.

#block{
    width: 500px;
    height: 200px;
}
#obenLinks{

    width: 10px;
    height: 10px;
    background-image: url(1.gif);
    background-repeat: repeat;
}
#oben{

    width: 480px;
    height: 10px;
    background-image: url(2.gif);
    background-repeat:repeat;
}
#obenRechts{
    width: 10px;
    height: 10px;
    background-image: url(3.gif);
    background-repeat:no-repeat;
}
#links{
    width: 10px;
    height: 180px;
    background-image: url(4.gif);
    background-repeat:repeat;
}
#voll{
    width: 480px;
    height: 180px;
    background-image: url(5.gif);
    background-repeat:repeat;
}
#rechts{
    width: 10px;
    height: 180px;
    background-image: url(6.gif);
    background-repeat:repeat;
}
#untenRechts{
    width: 10px;
    height: 10px;
    background-image: url(7.gif);
    background-repeat:repeat;
}
#unten{
    width: 480px;
    height: 10px;
    background-image: url(8.gif);
    background-repeat:repeat;
}
#untenLinks{
    width: 10px;
    height: 10px;
    background-image: url(9.gif);
    background-repeat:repeat;
}

Aber wie geht es richtig?

Liebe Grüße
Petra

Content-ID: 160404

Url: https://administrator.de/contentid/160404

Ausgedruckt am: 22.11.2024 um 14:11 Uhr

Florian.Sauber
Florian.Sauber 08.02.2011 um 21:15:09 Uhr
Goto Top
Hallo Petra,

mir erschliesst sich der Sinn nicht ganz. Soll dies nur eine Fingerübung sein, denn die CSS-Elemente beziehen sich ja immer auf Strukturelemente in (X)HTML..
Eine Möglichkeit wäre eine 3-geteilte Struktur aus DIV-Elementen, von denen Du je Ebene, die äusseren links und rechts floaten lässt.

Aber um dazu etwas mit Hand und Fuss zu sagen bräuchte es schon etwas mehr an Information, wenigstens bezgl. des Verwendungszwecks.

LG Florian
ppmk22
ppmk22 08.02.2011 um 21:28:58 Uhr
Goto Top
Um das
http://checkmal.bplaced.net/muster.png
nach zu bauen.
Es kann ja mal sein das die Größe des Inhalts sich ändert und dann soll der Hintergrund mit wachsen.
Florian.Sauber
Florian.Sauber 08.02.2011 um 21:34:33 Uhr
Goto Top
Ah, ok!

Das "runde Ecken"-Problem face-wink

Moderne Browser, können das anhand der moz- bzw khtml-Border-Eigenschaft. Mehr dazu hier:
http://www.css4you.de/trickkiste/tr00012.html

Ansonsten wenn es SO aussehen soll, findest Du mehr unter
http://aktuell.de.selfhtml.org/artikel/css/runde_ecken/
Oder etwas ausführlicher unter
http://www.andreas-kalt.de/webdesign/tutorials/runde-ecken

Hilft das weiter?

LG Florian
ppmk22
ppmk22 08.02.2011 um 21:50:03 Uhr
Goto Top
Ah face-smile, vielen Dank. Ich hab mir echt einen Wolf gesucht, aber nach "runde ecke" natürlich nicht gesucht.
Danke noch mal.

Lg
Petra