Opened by pktm at 2007-11-22 23:11
User since
2003-08-15
2653 Artikel
BenutzerIn
![[default_avatar]](/battie/theme/default/default_avatar.gif)
2003-08-15
2653 Artikel
BenutzerIn
Gibt verschiedene Möglichkeiten:
1. Nifty Corners: http://www.html.it/articoli/niftycube/index.html
Sind im Grunde nichts weiter als 1px große Boxen die versetzt voneinander horizontal sowie vertikal gestapelt werden.
teilweise kommen dann noch JavaScript -Effekte hinzu.
2. -moz-border (funktioniert aber nur in Mozzilla Browsern)
3. Stapeln von DIV-Boxen:
das sähe dann im Stylesheet so aus:
Das Geheimnis ist recht einfach:
oben_link_hintergrundbild.png:
Dort hinein werden nun rechts oben als Hintergrundbild von h2 die eine Ecke plaziert.
Und so weiter.
1. Nifty Corners: http://www.html.it/articoli/niftycube/index.html
Sind im Grunde nichts weiter als 1px große Boxen die versetzt voneinander horizontal sowie vertikal gestapelt werden.
teilweise kommen dann noch JavaScript -Effekte hinzu.
2. -moz-border (funktioniert aber nur in Mozzilla Browsern)
3. Stapeln von DIV-Boxen:
Code: (dl
)
1
2
3
4
5
6
7
8
9
<div id="runde_ecken">
<h2>Überschrift</h2>
<div id="body">
Inhalt
</div>
<div id="bottom">
<b></b>
</div>
</div>
das sähe dann im Stylesheet so aus:
Code: (dl
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#runde_ecken {
background:url(oben_links_hintergrundbild.png) top left no-repeat;
margin-bottom:0.7em;
}
#runde_ecken h2 {
background:url(rechts_oben.png) top right no-repeat;
padding:0.5em; padding-bottom:0; margin:0;
}
#body {
background:url(rechts.png) right repeat-y;
padding:1em; padding-bottom:0; margin:0;
}
#bottom {
background:url(/images/unten_links_balken.png) bottom left no-repeat;
}
#runde_ecken b {
display:block;
height:17px;
background:url(/images/unten_rechts.png) bottom right no-repeat;
}Das Geheimnis ist recht einfach:
oben_link_hintergrundbild.png:
Code: (dl
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
________________________________
/ |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
|________________________________|
Dort hinein werden nun rechts oben als Hintergrundbild von h2 die eine Ecke plaziert.
Und so weiter.