[CSS] Container mit bg und vier eckbildern?

.x-tra · 3. März 2011

Container mit bg und vier eckbildern?

Also ums kurz zu machen möchte ich einen div container mit einem hintergrund belegen.
dazu würde schon eine farbe reichen.
nun möchte ich an jeder der vier ecken ein bild setzen, mit abgerundeten kanten.
als png versteht sich.
wie müsste ich das umsetzen, daß die vier bilder jeweils an den ecken stehen?

weiß dazu jemand ein beispiel, oder kanns kurz erläutern?

Anzeige

Murdoc · 3. März 2011

AW: Container mit bg und vier eckbildern?

4 divs verschachteln.

background-position dann jeweils: top left, top right, bottom left, bottom right.

.x-tra · 4. März 2011

AW: Container mit bg und vier eckbildern?

okay funktioniert....
problem hab ich dennoch.
und zwar gehts um einen forumstyle, und ich möchte in einen der container mit zwei eckbildern die suchfunktion einbauen und später noch andere menüs.
bei der linken ecke geht es aber duch das einfügen der suchfunktion rutsch dann eben die rechte ecke ein stück runter um die höhe des suchfunktionslinks.

so schauts aus

Code:

<div class="nheadertop">
 
 <div class="nheadertopleft">
 <a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
 <div class="nheadertopright">
 </div>
 </div>
 </div>

und hier die css

Code:

.nheadertop {
 
 background-image: url("{T_THEME_PATH}/images/top-middle.png");
 background-repeat:repeat-x;
 height:51px; 
}

.nheadertopleft{
 background: url("{T_THEME_PATH}/images/top-left.png") top left no-repeat;
 height:51px;
}

.nheadertopright{
 background: url("{T_THEME_PATH}/images/top-right.png") top right no-repeat;
 height:51px;
}

elf4 · 5. März 2011

AW: Container mit bg und vier eckbildern?

Mit Verschachteln meinte er es so wie im folgenden Beispiel:

http://www.redmelon.net/tstme/4corners/

Es gibt viele Möglichkeiten wie man abgerundete Ecken umsetzen kann diese finde ich persönlich die beste. Da sie im Gegensatz zu der reinen CSS 4 Corners einfacher und schneller zu verstehen ist.

Murdoc · 5. März 2011

AW: Container mit bg und vier eckbildern?

in deinem bild oben seh ich keinen grund alle 4 ecken als gafik einzubinden.
schwarzer rahmen und ein hintergrundbild...

aber mach wie du meinst.

HTML:

<div class="oben_rechts">
 <div class="oben_links">
 <div class="unten_rechts">
 <div class="unten_links">
 <p>inhalt</p>
 </div>
 </div>
 </div>
</div>

Code:

.oben_rechts {
 background-position: top left;
}

.oben_links {
 background-position: top right;
}

.unten_links {
 background-position: bottom left;
}

.unten_rechts {
 background-position: bottom right;
}

so schwer zu verstehen?

Nützliche Suchen

[CSS] Container mit bg und vier eckbildern?

Videos zum Themenbereich