Schrift
[thread]10872[/thread]

Design-Frage



<< |< 1 2 >| >> 15 Einträge, 2 Seiten
pktm
 2007-11-22 23:11
#102850 #102850
User since
2003-08-07
2921 Artikel
BenutzerIn
[Homepage]
user image
Hallo!

Wie macht man eigentlich so runde Boxen?
Ein Beispiel ist hier zu sehen: http://www.csszengarden.com/tr/deutsch/?cssfile=/2...

Ja, ich köntne mir den Quellcode ansehen, aber ich würde gerne mehr so das Prinzip erklärt bekommen.
Legt man eine Grafik in den Hintergrund? Benutzt man Tabellen?
`
Grüße, pktm
http://www.intergastro-service.de (mein erstes CMS :) )
Froschpopo
 2007-11-22 23:27
#102852 #102852
User since
2003-08-15
2653 Artikel
BenutzerIn
[default_avatar]
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:
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.
ptk
 2007-11-23 00:49
#102853 #102853
User since
2003-11-28
3645 Artikel
ModeratorIn
[default_avatar]
Geschachtelte DIV-Boxen sind bäh. Das ist nicht besser als Layouts mit TABLEs zu realisieren.
Froschpopo
 2007-11-23 01:07
#102855 #102855
User since
2003-08-15
2653 Artikel
BenutzerIn
[default_avatar]
Warum willst du Tabellen zweckentfremden? Das ist eine Vergewaltigung Tabellen zur Gestaltung zu missbrauchen.
ptk
 2007-11-23 09:41
#102867 #102867
User since
2003-11-28
3645 Artikel
ModeratorIn
[default_avatar]
Warum ist es besser, ein DIV zur Gestaltung zu missbrauchen?
Siechfred
 2007-11-23 10:56
#102880 #102880
User since
2007-11-12
30 Artikel
BenutzerIn
[default_avatar]
Wozu braucht man überhaupt runde Ecken (sic!)? Ansonsten geht's halt browserübergreifend nur mit verschachtelten Elementen. Und da ein DIV von Haus aus der Gruppierung dient und damit faktisch bedeutungslos ist, ist das IMO für Rundungen der beste Weg.

Siechfred
Froschpopo
 2007-11-23 14:39
#102908 #102908
User since
2003-08-15
2653 Artikel
BenutzerIn
[default_avatar]
Das ist doch der Sinn von DIV's: Elemente zu gruppieren.
Das mit den Tabellen hast du nur auf ein paar Seiten mal gesehen und dann nachgemacht. Aber eigentlich ist das eine sehr schlechte Angewohnheit.
ptk
 2007-11-23 21:47
#102943 #102943
User since
2003-11-28
3645 Artikel
ModeratorIn
[default_avatar]
Froschpopo+2007-11-23 13:39:57--
Das ist doch der Sinn von DIV's: Elemente zu gruppieren.
Aber nur logisch, nicht zu Layoutzwecken.
Froschpopo
 2007-11-23 21:55
#102944 #102944
User since
2003-08-15
2653 Artikel
BenutzerIn
[default_avatar]
auf welcher Seite hast du das mit den tabellen denn gesehen außer hier in diesem Forum?
ptk
 2007-11-23 22:36
#102948 #102948
User since
2003-11-28
3645 Artikel
ModeratorIn
[default_avatar]
Warum fragst du? Ich vermeide es, HTML anzuschauen, weil es meist so unleserlich ist :-)
<< |< 1 2 >| >> 15 Einträge, 2 Seiten



View all threads created 2007-11-22 23:11.