Runde Ecken???
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anhieb
anwendung
benutzen
besten http
bild
code
grafik
http
inhalt
oberer teil
passende tabelle
pixel
prinzip
radius
runde ecken
stimme
trickkiste
unterer teil
url
verwenden
-
Hi !
Ich will auf meine Homepage um meine Seite oder um ein Formular runde Ecken einfügen.
Wie mache ich das am besten? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
zwiebeldoener schrieb:
http://www.css4you.de/trickkiste/tr00012.html
Oder einfach Grafiken benutzen ^^
Das Ganze funktioniert nicht mit dem Internet Explorer. Prinzipiell wäre das ja nich schlimm, aber wenn mans für alle Webbrowser machen möchte sollte man Bilder verwenden!
Bei dieser Frage würde ich erst mal überlegen, ob das ganze eine feste Breite haben soll oder doch variabel sein soll. Das erste ist relativ einfach. Man benötigt drei Grafiken: oberer Teil, unterer Teil und ein Stück von der Mitte und dann verschachtelt man drei divs und legt dort die Grafiken mit "background: url(bild) top no-repeat | bottom no-repeat | repeat-y" fest. Das zweite ist etwas schwieriger, darum kann ichs nicht so auf Anhieb erklären.
LG -
Dem stimme ich zu.
Border Radius würde ich schon aus Prinzip nicht verwenden, weil es ja auch anders geht.
Im prinzip bietet sich für so eine Anwendung eine Tabelle gerade zu an.
Ich zeige, weil diese Lösung die einfachste ist (auch, wenn Stilistisch nicht die schönste).
Du brauchst insgesamt 8 Grafiken. von jeder Ecke jeweils eine. die nenne ich:
ecke_ol.jpg
ecke_or.jpg
ecke_ul.jpg
ecke_ur.jpg
Sagen wir mal, diese Bilder sind quadratisch und haben jeweils die Seitenlänge 10px.
Dann brauchst du von jedem Mittelstück (also von jedem Rand) eine ein Pixel breite Grafik. Die nenne ich:
rand_o.jpg
rand_r.jpg
rand_u.jpg
rand_l.jpg
und so würde die passende Tabelle dazu aussehen:
<table> <tr> <td style="width: 10px; height: 10px;"><img src="ecke_ol.jpg"></td> <td style="background-image: url(rand_o.jpg); height: 10px; background-repeat: repeat_x;"></td> <td style="width: 10px; height: 10px;"><img src="ecke_or.jpg"></td> </tr> <tr> <td style="background-image: url(rand_l.jpg); width: 10px; background-repeat: repeat_y;"></td> <td>Inhalt</td> <td style="background-image: url(rand_r.jpg); width: 10px; background-repeat: repeat_y;"></td> </tr> <tr> <td style="width: 10px; height: 10px;"><img src="ecke_ul.jpg"></td> <td style="background-image: url(rand_u.jpg); height: 10px; background-repeat: repeat_x;"></td> <td style="width: 10px; height: 10px;"><img src="ecke_ur.jpg"></td> </tr> </table>
Wie schon gesagt, ist das zwar die einfachste, aber nicht die eleganteste Lösung.
Unter anderem aus Gründen der Suchmaschinenoptimierung ist es ratsamer, DIV Kontainer zu verwenden.
Allerdings kann ich jetzt grad nicht 100% dafür garantieren, dass es so funktioniert. man müsste da vlt. ein bisschen mit rumspielen^^
Außerdem ist das doch recht viel. ich bin mir sicher, da gibts bestimmt noch einen besseren Weg. Der fällt mir jedeoch im Moment nicht ein^^
<div style="position: relative"> <div style="position: absolute; top: 0; left: 0"> <div style="position: absolute; top: 0; left: 0;"><img src="ecke_ol.jpg"></div> <div style="margin: 0 10px; background-image: url(rand_o.jpg); height: 10px; background-repeat: repeat_x;"></div> <div style="position: absolute; top: 0; right: 0;"><img src="ecke_or.jpg"></div> </div> <div style="margin: 10px 0;"> <div style="position: absolute; left: 0; top: 0; background-image: url(rand_l.jpg); width: 10px; background-repeat: repeat_y;"></div> <div style="margin: 0 10px;">Inhalt</div> <div style="position: absolute; right: 0; top: 0; background-image: url(rand_r.jpg); width: 10px; background-repeat: repeat_y;"></div> </div> <div style="position: absolute; bottom: 0; left: 0"> <div style="position: absolute; top: 0; left: 0;"><img src="ecke_ul.jpg"></div> <div style="margin: 0 10px; background-image: url(rand_u.jpg); height: 10px; background-repeat: repeat_x;"></div> <div style="position: absolute; top: 0; right: 0;"><img src="ecke_ur.jpg"></div> </div> </div>
Grüße
xelax90
Beitrag geändert: 7.10.2008 13:04:14 von xelax90 -
Hier ist das Tutorial, nach dem ich vorgegangen bin. Das setzt zwar auch auf Grafiken, funktioniert aber sehr sauber mit allen Browsern und ist sehr gut erklärt:
http://www.andreas-kalt.de/webdesign/tutorials/runde-ecken -
Wenns ohne Grafiken und nur mit CSS sein soll:
http://www.webbe.de/index.shtml?CONTENT=script_css_corner;LANG=de
Beitrag zuletzt geändert: 13.2.2010 0:26:51 von rmc -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
