kostenloser Webspace werbefrei: lima-city

Abgerundete Ecken

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   mmbikestore

   mmbikestore hat kostenlosen Webspace.

   18:30, 31.3.2009

   Wie sicher jedem bekannt ist, gibt es ja im FF die Funktion -moz-border-radius
   da dies aber nur im FF funktioniert, ich aber in allen browsern den Effekt erzielen will, bleibt mir wohl nichts anderes übrig als das über (hintergrund) bilder zu machen.
   Jemand vorschläge wie ich das am besten mache?
   habe schon einige varianten ausprobiert, doch irgendwie kommen mir alle umständlich vor.
   mal ein paar tipps von den profis hier einhohlen
   wie macht ihr das am besten?

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. xingcity

   xingcity hat kostenlosen Webspace.

   19:13, 31.3.2009

   Also ich versuch es mal zu erklären:
   
   Du machst in nem Grafikprogramm (paint geht sicher auch) nen kreis, den virtelst du dann und daraus ergeben sich deine 4 ecken. (jeweils links/rechts, oben und unten)
   
   Achte halt darauf das die Viertel transparent sind ;).
   
   und dann brauchst du nur noch "gerade" teile/linien für oben/unten und an den beiden seiten.
   
   Ich hoffe das hilft dir weiter.
   
   Weniger "umständlich" gehts glaube ich nicht.

4. w******s

   19:30, 31.3.2009

   1. Wenn runde Ecken nicht unbedingt notwendig sind kann man wie du bereist erwähntest, die zugehörige Firefox Zeile benutzen. Safari 3 bietet auch diese Möglichkeit an. Das ganze sähe so aus:
   

   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;

   
   
   2. Möchte man auf Nummer sicher gehn und Bilder benutzen hat man mehrere Möglichkeiten. Dabei kommt es auch darauf an, ob das ganze dynamisch sich ausdehen soll oder sowieso nur eine fester Breite hat. Dynamisch kann man es etwa so realisieren. Man legt vier verschiedene Grafiken an, sozusagen für jedes "Eck". Diese sollen später die "Ecken" der Div Box sein. In die Div Box legt man 4 span-Tags. Die span Tags werden absolut positioniert, dagegen die div Box relativ. Mit der absoluten Positionierung kann man jetzt beispielsweise das rechte obere Eck mit den Attributen "right" und "top" - jeweils auf Null - festsetzen. Größenangabe des Bildes, das Bild als Hintergrund und aus dem Inline Element ein Block Element machen. Das sollte das gewünschte Ergebnis bringen und dynamisch bleiben.
   
   Gruß werktags

5. rock4life

   

   rock4life hat kostenlosen Webspace.

   20:23, 31.3.2009

   Hier wurde zwar schon fast alles gesagt aber ich habe noch nen guten Link-Tipp für dich.
   Schau mal Hier nach.
   Das ist ein Generator mit dem du solche abgerundeten Divs im Notfall noch klinderleicht machen könntest.
   mfG Rock4Life

6. n*************h

   19:05, 17.8.2009

   Schau dir mal das hier an:
   
   http://labuschin.com/journal/xhtml-css/runde-ecken-und-runde-raender-mit-css
   
   So soll es sogar mit einem "Hack" im Internet Explorer funktionieren.

7. t****o

   21:53, 17.8.2009

   Falls der IE nicht so wichtig ist: http://www.the-art-of-web.com/css/border-radius/
   Sonst gehts wohl nur mit Grafiken.
   
   MfG
   telelo

8. k**********k

   23:37, 17.8.2009

   Wenn du eine bilderlose Crossbrowser-Alternative haben willst, kann ich dir auch noch diese Seite hier vorschlagen. Die dort gezeigte Möglichkeit läuft in allen gängigen Browsern, auch wenn ich aus eigener Erfahrung weiß, dass die die Ecken etwas pixelig werden können wenn man zu sehr an den vorgeschlagenen Werten 'rumspielt.

9. speckuntu

   

   speckuntu hat kostenlosen Webspace.

   23:52, 17.8.2009

   Vor kurzem habe ich das auch gebraucht:
   

   <div>
   <table>
   <tr><td id="ecke_links_oben"></td><td id="mitte"></td><td id="ecke_rechts_oben></td></tr>
   </table>
   <div id="inhalt" style="border-left, border-right, border-bottom">
   </div>
   </div>

   
   wobei ich bei den Zellen die zuvor erstellen gerundeten ecken via css einbinde, nachdem ich jegliche zwischenräume in der Tabelle entfernt habe, ist diese variante auch IE 6 tauglich

10. w******s

    0:04, 18.8.2009

    speckuntu schrieb: Vor kurzem habe ich das auch gebraucht:
    

    <div>
    <table>
    <tr><td id="ecke_links_oben"></td><td id="mitte"></td><td id="ecke_rechts_oben></td></tr>
    </table>
    <div id="inhalt" style="border-left, border-right, border-bottom">
    </div>
    </div>

    
    wobei ich bei den Zellen die zuvor erstellen gerundeten ecken via css einbinde, nachdem ich jegliche zwischenräume in der Tabelle entfernt habe, ist diese variante auch IE 6 tauglich

    Davon sollte man abraten. Da es semantisch gesehen, nicht empfehlenswert ist. Zum einen wird eine Tabelle missbraucht und hat schließlich nicht mal irgendeinen Inhalt. Tabellen dienen nicht zum Anpassen des Layouts. Dazu sollte man höchstens mal ein div benutzen, aber in der Regel das auch nicht.
    
    Die beste Methode bleibt einfach die CSS3 Eigenschaften zu benutzen, auf den IE ist sowieso kein Verlass und somit können es schon Safari und Firefox; Opera zieht sicherlich nach. Dadurch bleibt aber eine semantische Sicherheit gewährt und es ist auch nicht JS-abhängig.
    
    Die Variante von nico-stuhlfauth mit Bildern ist dabei noch die beste, wenn man es in allen Browsern umsetzen möchte!

11. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?