Community rund um Cascading Style Sheets, Tutorials & KnowHow für Webmaster

Bild mit Verlaufsrahmen

Antwort erstellen

Bild mit Verlaufsrahmen

Beitragvon Nicole87 » 23.02.2010, 11:57

Hallo zusammen!

Die Verzweifelung treibt mich nun in das Forum, denn ich weiß wirklich nicht mehr weiter:

Es geht darum, dass ich einem Bild, mit variabler Größe einen Rahmen geben möchte. Der Rahmen ist eine Verlaufsgrafik die sich links, rechts, oben und unten unterscheidet. Weiter gibt es noch Eck-Grafiken, die ebenfalls eingefügt sein sollen...

Ein weiteres Problem ist die Browserkompatibilität, da zumindest der IE7 mir immer ein Schnippchen schlägt, da ich die rechten und linken Ebenenteile floaten lasse und nicht sagen kann "Gesamter Container, sei so breit wie das Bild in dir"...

Als Aufbau ist glaube ich folgendes am praktikabelsten:
Code: Alles auswählen
<div class="imageborder">
  <div class="top">
    <div class="topleft"></div>
    <div class="topright"></div>
    <div class="topmiddle"></div>
  </div>
  <div class="middle">
    <div class="image"><img src="dummybild.gif"></div>
  </div>
  <div class="bottom">
    <div class="bottomleft"></div>
    <div class="bottomright"></div>
    <div class="bottommiddle"></div>
  </div>
</div>


Vorallem die Eckgrafiken stellen ein Problem dar... ich bin für jeden Hinweis und Gedanken sehr sehr dankbar!!

Grüße
Nicole
Nicole87
neu hier
 
Beiträge: 2
Registriert: 23.02.2010, 11:47
Nach oben

Re: Bild mit Verlaufsrahmen

Beitragvon ThomaZ » 25.02.2010, 21:28

Hallo Nicole

Ich habe dir mal schnell was zusammengesetzt.

CSS-Datei:
Code: Alles auswählen
@charset "utf-8";
/** CSS Document
*   Dies ist ein Schnellentwurf von ThomaZ für CSS-Info.de
*   Benutzung dieses Codes ausdrücklich erlaubt!
*/

html,
body   {
   font-size:      8pt;   
}
@media screen {

   /*---------RAHMEN AUßEN---------*/
   
   div[class="imageborder"]   {
      position:      relative;
      top:         5em;
      margin:         auto;
      min-height:     20em;
      border:       1px solid red;
      width:         40em;
   }
   
   /*---------OBERER BEREICH---------*/
   
   div[class="topleft"]   {
      position:        absolute;
      top:         0;
      left:         0;
      height:         2em;
      width:         2em;
      border:       1px solid black;
   }
   div[class="topright"]   {
      position:        absolute;
      top:         0;
      right:         0;
      height:         2em;
      width:         2em;
      border:       1px solid blue;
   }
   div[class="topcenter"]   {
      position:        relative;
      top:         0;
      left:         0;
      right:         0;
      height:         2em;
      border:       1px solid #0C0;
      margin:         0 2em 2em 2em;
   }
   
   /*---------MITTLERER BEREICH---------*/
   
   div[class="centerleft"]   {
      position:      absolute;
      left:         0;
      top:         2em;
      bottom:         2em;
      width:         2em;
      border:       1px solid #900;
   }
   div[class="centerright"]   {
      position:      absolute;
      right:         0;
      top:         2em;
      bottom:         2em;
      width:         2em;   
      border:       1px solid #F0F;   
   }
   div[class="centercenter"]   {
      position:      absolute;
      top:         2em;
      bottom:         2em;
      left:         2em;
      right:         2em;   
      border:       1px solid #000;   
   }
   
   /*---------UNTERER BEREICH---------*/
   
   div[class="bottomleft"]   {
      position:        absolute;
      bottom:         0;
      left:         0;
      height:         2em;
      width:         2em;
      border:       1px solid black;
   }
   div[class="bottomright"]   {
      position:        absolute;
      bottom:         0;
      right:         0;
      height:         2em;
      width:         2em;
      border:       1px solid blue;
   }
   div[class="bottomcenter"]   {
      position:        absolute;
      bottom:         0;
      left:         2em;
      right:         2em;
      height:         2em;
      border:       1px solid #00F;
   }
   
   /*-------------ZUSÄTZLICHE ANGEBEN ZUR FORMATIERUNG-------------------*/
   
   div[class="centercenter"] > img   {
      width:         100%;
      height:         100%;
   }

}


HTML-Datei:
Code: Alles auswählen
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="imageborder">
        <div class="top">
                <div class="topleft">TL</div>
                <div class="topcenter">TC</div>
                <div class="topright">TR</div>
        </div>
        <div class="middle">
                <div class="centerleft">CL</div>
                    <div class="centercenter">
                            <img src="http://www.css-info.de/forum/styles/prosilver/imageset/site_logo-trans.png" />
                    </div>
                <div class="centerright">CR</div>
        </div>
        <div class="bottom">
                <div class="bottomleft">BL</div>
                <div class="bottomcenter">BC</div>
                <div class="bottomright">BR</div>
               
        </div>
</div>
</body>
</html>


Das ganze ist hoch-dynamisch. In diesem Fall ist es egal wie groß der außenliegende Container
gestreckt wird (imageborder), die Rahmenelemente sind immer außen, immer 2em dick und das
Bild füllt immer 100% des Gerüstes aus.

Ich hoffe das hilft dir ein wenig weiter.


MfG

ThomaZ
Freier Typo3 Entwickler;
Designumsetzer in HTML & CSS;
ThomaZ
Gelegenheitsleser
 
Beiträge: 23
Registriert: 25.02.2010, 20:10
Nach oben
Antwort erstellen

Moderatoren: Laus, Moderatoren

Ähnliche Beiträge zu "Bild mit Verlaufsrahmen"

Zurück zu: CSS für Fortgeschrittene

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Optimized by SEO phpBB, Deutsche Übersetzung durch phpBB.de
cron