Erst mal hallo leute, ich bin neu hier ;).
Heute gehts um Runde ecken welche z.B. im FireFox angezeigt werden doch wohl nicht im Internet Explorer. Das ganze ist eigentlich recht easy, wir erstellen erst mal ne simple HTML File (wenn nicht schon getan).
<html>
<head>
</head>
<body>
</body>
<html>
So das wäre nun schon mal getan, nun müssen wirn Style deklarieren und nen paar DIV boxen anlegen.
Also schreiben wir nun in den Head teil folgendens:
<style type="text/css">
#divbox {
/* Color Stuff */
background-color: #111; /* Hintergrund Farbe */
color: #fff; /* Text Farbe */
/* Positions Stuff */
position: absolute; /* Wir wollen das Element versetzen koennen */
min-height: 190px; /* Minimale Hoehe 190px */
width: 190px; /* Breite 190px */
top: 200px; /* Von oben her verschoben um 200px nach unten */
left: 200px; /* Von links her verschoben um 200px nach rechts */
/* innen positionirungs stuff */
padding: 10px; /* Innen abstand 10px (Links, Rechts, Oben und Unten) */
/* Runde Ecken */
-moz-border-radius: 30px; /* Mozila Border Radius (Runde ecken fuern mozilla) */
-webkit-border-radius: 30px; /* Warscheinlich fuer den safari */
border-radius: 30px; /* Keine ahnung :( */
}
</style>
Und in den body teil:
<div id="divbox">HelloWorld</div>
Und dann haben wir nen kleines Div welches runde ecken hat.
Doch das wichtigeste fuer die Runden ecken beim CSS sind eigentlich:
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
Welche derweil leider noch nicht standart sind und somit wohl nicht bei jedem Browser funktioniert.
Es gibt allerdings noch eine andere Art um an runde ecken zu kommen beispielsweise über die benutzung eines background bildes, aber mehr dazu vieleicht in einem Anderem Post.
Hier noch mal der ganze Quelltext:
<html>
<head>
<!--
Code by moeverich
http://moeverich.de
-->
<style type="text/css">
#divbox {
/* Color Stuff */
background-color: #111; /* Hintergrund Farbe */
color: #fff; /* Text Farbe */
/* Positions Stuff */
position: absolute; /* Wir wollen das Element versetzen koennen */
min-height: 190px; /* Minimale Hoehe 190px */
width: 190px; /* Breite 190px */
top: 200px; /* Von oben her verschoben um 200px nach unten */
left: 200px; /* Von links her verschoben um 200px nach rechts */
/* innen positionirungs stuff */
padding: 10px; /* Innen abstand 10px (Links, Rechts, Oben und Unten) */
/* Runde Ecken */
-moz-border-radius: 30px; /* Mozila Border Radius (Runde ecken fuern mozilla) */
-webkit-border-radius: 30px; /* Warscheinlich fuer den safari */
border-radius: 30px; /* Keine ahnung :( */
}
</style>
</head>
<body>
<div id="divbox">HelloWorld</div>
</body>
</html>
Viel spass damit
moeverich.
Samstag, 29. November 2008
Abonnieren
Kommentare zum Post (Atom)
1 Kommentar:
Vielen Dank für den guten text !
Funktioniert Prima
Kommentar veröffentlichen