Bob Ross: Runde Ecken

SELF-Forum

Runde Ecken

Bob Ross
– Informationen zu den Bewertungsregeln

Hallo

Bei CSS habe ich seither immer das Problem nicht zu wissen wie man abgerundete Felder darstellen könnte mit möglich wenig aufwand.

Bisher ging ich immer dazu über eine Tabelle mit 3x3 Feldenr auzuziehen und den jeweiligen ecken kleine 5x5px grossen Bildern von Rundungen zu geben und den Seiten und oberteilen eine Linie als hintergrundbild.

Dies ist aber sehr Codelastig, daher meine Frage: Kann man diesen Effekt auch irgendwie kleiner in einer CSS-Umsetzung darstellen?

ciao

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Runde Ecken

    Cheatah
    – Informationen zu den Bewertungsregeln

    Hi,

    Bei CSS habe ich seither immer das Problem nicht zu wissen wie man abgerundete Felder darstellen könnte mit möglich wenig aufwand.

    CSS/3.0 bietet die border-radius-Eigenschaft, die in modernen Browsern bereits häufig umgesetzt ist.

    Dies ist aber sehr Codelastig,

    Es ist vor allem völlig widersinnig.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Runde Ecken

      MudGuard Homepage des Autors
      +1 Informationen zu den Bewertungsregeln

      Hi,

      CSS/3.0 bietet die border-radius-Eigenschaft, die in modernen Browsern bereits häufig umgesetzt ist.

      CSS 2 und ein paar Bildchen reichen auch aus (moderner Browser vorausgesetzt ...).

      Siehe http://www.w3.org/Style/Examples/007/roundshadow.html

      cu,
      Andreas

      --
      Warum nennt sich Andreas hier MudGuard?
      Schreinerei Waechter
      O o ostern ...
      Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
      Beitrag melden
      +1
      Informationen zu den Bewertungsregeln

  2. Runde Ecken

    Maxx Homepage des Autors
    −1 Informationen zu den Bewertungsregeln

    Hallo Bob,

    Bei CSS habe ich seither immer das Problem nicht zu wissen wie man abgerundete Felder darstellen könnte mit möglich wenig aufwand.

    Vielleicht ist http://pro.html.it/esempio/nifty/nifty1.html etwas für dich.

    Grüße,

    Jochen

    --
    Heute schon gescribbelt?
    Scribbleboard
    Beitrag melden
    −1
    Informationen zu den Bewertungsregeln

    1. Runde Ecken

      Bob Ross
      – Informationen zu den Bewertungsregeln

      Hi

      Das sieht gut aus. Leider stellt es aber eben nur einfarbige flächen dar. Ich würde schon gerne Rahmen dabei haben.
      Aber danke, ich kann es sicherlich ein andern mal gut gebrauchen. =)

      ciao

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  3. Runde Ecken

    Orlando Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo Bob,

    Bei CSS habe ich seither immer das Problem nicht zu wissen wie man abgerundete Felder darstellen könnte mit möglich wenig aufwand.

    Das ist nicht möglich und wird es auch auf Jahre hinaus nicht sein. Eine browserübergreifende Umsetzung runder Ecken mit CSS erfordert viele zusätzliche Elemente.

    Grüße
     Roland

    --
    SELFHTML-Community > Visitenkarten > Orlando
    Nachwuchsförderung 2.0: »Mami, sieh mal! Ich habe mit CSS eine Tabelle nachgebaut.«
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  4. Runde Ecken

    Længlich Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hello!

    Alternativ zu den beiden Vorschlägen von Cheatah und Maxx geht's auch mit verschachtelten <div>-Elementen, wie hier bei SELFHTML nachzulesen ist.

    Viele Grüße vom Længlich

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Runde Ecken

      Bob Ross
      – Informationen zu den Bewertungsregeln

      Hi

      Komischerweise stellt mein FF 1.6 die Boxes nicht richtig dar. Zumindest haben alle Boxes (auch die anderen von diesem Author, Link am unteren Rand) immer eine Spalte links ohne Hintergrund.

      ciao

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Oh, mein Fehler

        Bob Ross
        – Informationen zu den Bewertungsregeln

        Ich habe ein 20" Widescreener... es lag am Browserfenster =)

        Danke, ich probier es mal damit!

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      2. Runde Ecken

        Zeromancer
        – Informationen zu den Bewertungsregeln

        Hallo Bob,

        Komischerweise stellt mein FF 1.6

        wo hast du den denn her?

        Mit freundlichen Grüßen,
        André

        --
        Ein Geleitzug aus tausend Explosionen
        irgendwo in den Sternen verborgen
        relatives Sein zerbricht die Stille
        eine Träne flüstert Gottes Wille
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Runde Ecken

          Jonathan
          – Informationen zu den Bewertungsregeln

          Komischerweise stellt mein FF 1.6

          wo hast du den denn her?

          Ich weiß nicht, ob er den schon verwendet, aber Fx1.6 ist die aktuellen Versionsnummer von den Entwicklerversionen, die zu Firefox 3(!) werden. Die lassen sich hier runterladen: http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/

          Generell sei davon abzuraten, den zu benutzen, da man damit leicht vorhandene Firefox-Installationen schrottet und diese Entwicklerversionen massig Fehler enthalten, sowohl was die Webseitendarstellung als auch die Benutzeroberfläche angeht.

          Jonathan

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Runde Ecken

            Zeromancer
            – Informationen zu den Bewertungsregeln

            Hallo Jonathan,

            Ich weiß nicht, ob er den schon verwendet, aber Fx1.6 ist die aktuellen Versionsnummer von den Entwicklerversionen, die zu Firefox 3(!) werden.

            ach so. Danke für den Hinweis.

            Mit freundlichen Grüßen,
            André

            --
            Ein Geleitzug aus tausend Explosionen
            irgendwo in den Sternen verborgen
            relatives Sein zerbricht die Stille
            eine Träne flüstert Gottes Wille
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

  5. Runde Ecken

    Der fette Mo
    – Informationen zu den Bewertungsregeln

    Guten Tag allerseits,

    Bei der Lösung in dem SelfHTML-Artikel sind die Bilddateien doch recht groß...
    Außerdem muss die Grafikdatei immer größer werden, je länger der Text in der Box wird (sonst ist irgendwann ein weißer Streifen zu sehen).

    Habe deswegen eine eigene Lösung entworfen:

      
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
<link rel="stylesheet" href="home.css" media="screen" />  
<title>Runde Ecken Demo</title>  
</head>  
<body>  
<div class="container">  
  
<div class="o"><div class="lo">&nbsp;</div><div class="mo">&nbsp;</div><div class="ro">&nbsp;</div></div>  
  
<div class="content">  
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>  
<p>&nbsp;</p>  
<p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li  
sam vocabularium. Li lingues differe solmen in li grammatica, li  
pronunciation e li plu commun vocabules. Omnicos directe al desirabilit&Dagger; de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.</p>  
</div>  
  
<div class="u"><div class="lu">&nbsp;</div><div class="mu">&nbsp;</div><div class="ru">&nbsp;</div></div>  
  
</div>  
</body>  
</html>

    Stylesheet dazu:

      
body{font-family:Arial, Helvetica, sans-serif;background-color:#900;}  
.container{position:relative;width:800px;margin:40px auto auto;}  
.content{background-color:#FF9;border-left:1px solid;border-right:1px solid;margin:0;padding:2em 2em 3em;}  
.content p{margin:0;padding:0;}  
.mo,.mu{position:absolute;left:10px;height:10px;width:780px;background-color:#FF9;}  
.mu{border-bottom:1px solid;}  
.mo{border-top:1px solid;}  
.ro{position:absolute;top:0;right:0;width:10px;background:url(images/corners/ro.gif) top right no-repeat;}  
.lo{position:absolute;top:0;left:0;width:10px;background:url(images/corners/lo.gif) top left no-repeat;}  
.ru{position:absolute;bottom:0;right:0;width:10px;background:url(images/corners/ru.gif) bottom right no-repeat;}  
.lu{position:absolute;bottom:0;left:0;width:10px;background:url(images/corners/lu.gif) bottom left no-repeat;}  
.o,.u{height:10px;width:800px;}

    Hier müssen die Bilder nur 10x10px groß sein!

    Online unter http://www.diplomtrottel.de/home.html.

    Gruß,
    Der fette Mo

    --
    Menschen haben keine Probleme, sie schaffen sie sich selbst.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln