[HTML] CSS - border-image

Dieses Thema im Forum "Webentwicklung" wurde erstellt von schiene, 19. Januar 2007 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 19. Januar 2007
    CSS - border-image

    moin!

    so ich hab mal n bisschen mit css rumprobiert und ich möchte ein "Fenster" erstellen mit einem Rahmen drum herum. Dann bin ich bei Google fundig geworden, das genau das macht, nur ich bekomme es nicht hin.

    hier der Link: http://www.w3.org/TR/css3-background/#border-image (Inhalt 18 )

    wenn ich das mache dann bekomme ich einfach eine "box" mit 2 orangenen Umrandungen und nicht mit den Vierecken.

    diesen Satz verstehe ich in der Anleitung auch nicht und vllt ist das ja auch der Grund warum es bei mir nichts klappt.
    oder geht das noch gar nicht, weil es zu CSS 3 gehört?

    danke schonmal!!

    greetz schiene
     
  2. 19. Januar 2007
    AW: CSS - border-image

    Mh, wenn du bloß ein Fenster mit einem Rahmen machen willst dann brauchst du doch nur folgendes in deinem stylesheet für das entsprechende Fenster eintragen:

    Code:
    border: 2px solid black;
    
    ...dieser Rahmen wäre dann eben 2px breit, durchgezogen und schwarz. In einem DIV lässt sich das wie folgt implementieren:

    Code:
    <div style='border:2px solid black; width:600px; height:800px;'>
    CONTENT
    </div>
    
    Dieses DIV wäre dann von der größe 800x600 mit einem schwarzen Rahmen rundherum. Man könnte aber auch den CSS Style als externes *.css-File auslagern, was ich persönlich etwas übersichtlicher finde.

    Mehr Infos findest du auch auf www.css4you.de ...ich finde die Seite ist für Anfänger recht gut.
     
  3. 19. Januar 2007
    AW: CSS - border-image

    eehm.. also so in der art, nur nicht so .. ich sag mal simpel.. schau einfach mal bei de link und dann beim 18., so mein ich das. also quasi sonn image als border und nicht so ein einfachen border
     
  4. 19. Januar 2007
    AW: CSS - border-image

    Das ist anscheinend ein neues Feature von CSS3 und wird auch nur mit CSS3 kompatiblen Browsern funktionieren. (habe bis jetzt noch nichts mit CSS3 gemacht...) jedoch lässt sich dieser "Rahmen" auch anders lösen. Du "umzingelst" dein entsprechendes Fenster einfach mit 4 Weitern DIVS, für jede Seite ein eigenes DIV und in diese DIVS kannst du dann unterschiedliche Bilder einsetzen als Background.

    Oder du definierst ein etwas größeres DIV und in dieses DIV kommt dann ein kleineres hinein, wobei im größeren auf den 4 Seiten jeweils die entsprechenden Bilder sind.
     
  5. 19. Januar 2007
    AW: CSS - border-image

    oder mach es so, is einfacher als mit div alles zu verschachteln!

    Code:
    .border_image {
    width: deine breite;
    }
    
    .border_image th {
    background-image: url();
    background-repeat: repeat-x;
    background-position: top;
    }
    
    #links {
    background-image: url();
    background-repeat: repeat-y;
    }
    
    #rechts {
    background-image: url();
    background-repeat: repeat-y;
    }
    Code:
    <table class="border_image">
    <tr>
     <td><img src="obenlinks.gif"></td>
     <th></th>
     <td><img src="obenrechts.gif"></td>
    </tr>
    <tr>
     <td id="links"></td>
     <td>TEXT</td>
     <td id="rechts></td>
    </tr>
    <tr>
     <td><img src="untenlinks.gif"></td>
     <th></th>
     <td><img src="untenrechts.gif"></td>
    </tr>
    </table>
     
  6. 19. Januar 2007
    AW: CSS - border-image

    ja das hab ich mir iwie schon gedacht, das mit CSS3. Ja mit divs verschachteln hatte ich auch schon, aber macht mich iwie nich so glücklich :tongue:

    #murdoc-4d
    mit tables hab ich vorher auch immer gemacht sowas, aber dacht halt versuchste es mal anders vllt sieht es ja schöner aus vom code her. Aber wo wie das aussieht muss man wohl warten bis CSS3 Standard ist, aber danke für eure Vorschläge
     
  7. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.