Ergebnis 1 bis 5 von 5

Thema: Box mit runden Ecken

  1. #1
    Meister(in)
    Registriert seit
    27.06.2008
    Ort
    Frankfurt am Main
    Alter
    27
    Beiträge
    485
    Danke
    3
    Bekam 0 mal "Danke" in 0 Postings

    Standard Box mit runden Ecken

    Hallo,

    ich habe echt schon fast überall geschaut, wo man nur schauen kann, ich verstehe es trotzdem nicht ganz!
    Ich möchte eine Runde Box mit CSS erstellen.
    Mit Photoshop habe ich vier Viertelkreise erstellt jedes dieser Viertelkreise ist 40px * 40px. Hintergrundfarbe #0d2b40.
    Ich habe meinen Versuch hochgelden.

    www.billbos.eu

    Hier der das CSS und INDEX

    Ich würde gerne eine 600px breite und 500px hohe Box mit runden Ecken erstellen was muss ich verändern oder ergänzen?

    Liebe Grüße

    Billbos

    Code:
    @charset "utf-8";
    /* CSS djw_LAYOUT */
    
    #box {
    margin: 0;
    }
    
    .lt {
    background: url(../bilder_rohdatein/box-kanten/left-top.png) top left no-repeat;
    }
    
    .rt {
    background: url(../bilder_rohdatein/box-kanten/right-top.png) top right no-repeat;
    }
    
    .bl {
    background: url(../bilder_rohdatein/box-kanten/left-bottom.png) bottom left no-repeat;
    }
    
    .br {
    background: url(../bilder_rohdatein/box-kanten/right-bottom.png) bottom right no-repeat;
    }
    
    .inhalt {
    width: 250px;
    border: 1px solid;
    }

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http&#58;//www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Daniel Jannes Weiner</title>
    
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    
    <link rel="stylesheet" type="text/css" href="css/LAYOUT.css" />
    <link rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" />
    
    </head>
    
    <body>
    
    <div id="main">
    
    
    
    <div id="header">
    </div>
    
    
    
    <div id="navigation">
    </div>
    
    
    
    <div id="container">
    <div id="box">
     <div class="lt">
      <div class="lt">
       <div class="bl">
        <div class="br">
         <div class="inhalt">
          
    
     Hallo das ist eine Box</p>
         </div>
        </div>
       </div>
      </div>
     </div>
    </div>
    </div>
    
    
    
    <div id="footer">
    </div>
    
    </div>
    
    </body>
    </html>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Forum Guru Avatar von driver
    Registriert seit
    10.04.2006
    Alter
    34
    Beiträge
    20.729
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    ähm, also im ff schauts richtig aus...

    was isn deine frage genau ?
    >> die icq-schreiberlinge bitte dies hier beachten



    1679 entdeckte Gottfried Wilhelm Leibniz das Binärsystem, bei einem Gespräch mit seiner Mutter: "Ja..., Nein..., Nein..., Nein..., Ja..., Ja..., Nein..."

  3. #3
    Kaiserliche Hoheit
    Registriert seit
    01.03.2007
    Beiträge
    1.957
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Er hat grad was geändert!

    Vorhin sah es scheußlich aus in FF3


    Teil uns doch bitte mit, wie dus gemacht hast!

  4. #4
    Meister(in)
    Themenstarter

    Registriert seit
    27.06.2008
    Ort
    Frankfurt am Main
    Alter
    27
    Beiträge
    485
    Danke
    3
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Okay ich habe das Problem jetzt so gelöst, indem ich einfach zwei .gif´s TOP und BOTTOM genommen habe und dann oben und unten angeordnet habe!
    Wie bekomme ich aber eine runde Box hin mit 4 Viertelkreisen? Die Box sollte auch skalierbar sein!

  5. #5
    Forum Guru Avatar von driver
    Registriert seit
    10.04.2006
    Alter
    34
    Beiträge
    20.729
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    da gabs mal was dazu, musst mal hier in der forensuche suchen.

    da nimmst 4 divs, und legst se übereinander.
    div 1 -> oben links + oben linie, linke linie
    div 2 -> oben rechts + rechte linie
    div 3 -> unten links + unten linie
    div 4 -> unten rechts

    die linien in div1 -div3 müssen ziemlich lang sein.
    beim skalieren schiebt sich praktisch div2 über die
    rechte seite und div3 über die untere und verdeckt
    somit den rest von div1. div 4 macht das gleiche
    mit div2 und div3.
    >> die icq-schreiberlinge bitte dies hier beachten



    1679 entdeckte Gottfried Wilhelm Leibniz das Binärsystem, bei einem Gespräch mit seiner Mutter: "Ja..., Nein..., Nein..., Nein..., Ja..., Ja..., Nein..."

Ähnliche Themen

  1. Runden in PHP
    Von Gast im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 7
    Letzter Beitrag: 20.02.2008, 20:02
  2. Variable auf 2 Nachkommastellen runden
    Von chris90night im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 4
    Letzter Beitrag: 19.08.2007, 21:34
  3. Textblöckke mit runden ecken
    Von htmli im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 25.03.2006, 23:31
  4. auf 2 Kommastellen runden?
    Von im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 20
    Letzter Beitrag: 23.11.2005, 16:18
  5. Java Popup-Menü mit runden Ecken...
    Von kielersprotte78 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 21.10.2004, 22:04

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •