kostenloser Webspace werbefrei: lima-city


Runde Ecken???

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    davy

    Kostenloser Webspace von davy

    davy hat kostenlosen Webspace.

    Hi !

    Ich will auf meine Homepage um meine Seite oder um ein Formular runde Ecken einfügen.

    Wie mache ich das am besten?
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

  3. zwiebeldoener

    Moderator Kostenloser Webspace von zwiebeldoener

    zwiebeldoener hat kostenlosen Webspace.

    http://www.css4you.de/trickkiste/tr00012.html

    Oder einfach Grafiken benutzen ^^
  4. 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
  5. 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
  6. 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
  7. 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
  8. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!