• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Abgerundete ränder

Status
Für weitere Antworten geschlossen.
F

Flitztuete95

Neues Mitglied
Hallo,
ich habe folgendes Problem:

Ich erstelle im Moment eine Website, welche ein Box-Design hat.
Mit tabellen: No Problem!
Aber: Ich mag keine Tabellen!

Ich will solche boxen machen:
Code: 
      /----------------\
      I                I
      I                I
      I                I
      \________________/

Der linke, un der Rechte rand soll von der größe her Variabel sein.

ich mache das Normalerweise so:
HTML: 
  <div>
<img src="--" style="position: absolute;left: 0px;top: 0px; width: 20px;" alt="">

  </div>


So, jetzt will ich einen Rand, der die Anderen Images nicht überdakt, also die Größe:

100%-40px;

wie setzte ich sowas in HTML/CSS um?
 
Werbung:
Im Prinzip brauchst du eine obere und untere Grafik wie hier beschrieben:
Abgerundete Ecken

Für den Mittelteil fetige dir eine weitere Grafik an, die rechts und links den Rand hat, in der Mitte transparent. einige px Höhe reichen. Diese Grafik lässt du dann im Mittelteil mit
Code: 
background-repeat: repeat-y;
vertikal kacheln.
 
Werbung:
Die von prm vorgeschlagene Methode halte ich für fragwürdig.
  • Es wird eine feste Breite der Box in px vorausgesetzt.
  • Es sind zwei leere Container erforderlich.
Mir fällt im Moment auch keine Lösung ein, die perfekt ist. Es ist jedoch möglich, Boxen zu erstellen, die nur mit einem der beiden Nachteile leben müssen. Voraussetzung dafür ist, dass die body-Hintergrundfarbe (also die Farbe hinter den Boxen) einheitlich ist.

Nehmen wir mal ein zusätzliches div-Tag in Kauf. Dann würde das Ganze etwa so aussehen:

PHP: 
<h1>Runde Boxen</h1>
<div class="mitteilung"><div><h2>Ganz einfach zu erstellen</h2>
    <p>Seht genau her, es ist nicht schwer und doch so einfach. Seht genau her, es ist nicht schwer und doch so einfach. Seht genau her, es ist nicht schwer und doch so einfach. Seht genau her, es ist nicht schwer und doch so einfach.</p>
    <p>Seht genau her, es ist nicht schwer und doch so einfach. Seht genau her, es ist nicht schwer und doch so einfach. Seht genau her, es ist nicht schwer und doch so einfach. Seht genau her, es ist nicht schwer und doch so einfach.</p></div></div>
Jetzt weisen wir wie folgt Hintergrundbilder zu:

Dem äußeren div:
Code: 
/------------------------------------------------------------
I
I
I
I
I
I
I
I
I
I
I
Dem inneren div:

Code: 
                                                              I
                                                              I
                                                              I
                                                              I
                                                              I
                                                              I
                                                              I
                                                              I                                                                                 
  -----------------------------------------------------------/
Dem ersten Kind des inneren div:

Code: 
                                                                          \
Dem letzten Kind des inneren div:

Code: 
\
In CSS sieht das ungefähr so aus:

Code: 
/* ungetestet! */div.mitteilung {
  background: #FFFFFF url(oben_links.gif) top left no-repeat;
}
div.mitteilung div {
  background: #FFFFFF url(unten_rechts.gif) bottom right no-repeat;
}
div.mitteilung div *:first-child {
  display: block;
  padding-top: 20px;
  background: url(oben_rechts.gif) top right no-repeat;
}
div.mitteilung div *:last-child {
  display: block;
  padding-bottom: 20px;
  background: url(unten_links.gif) bottom left no-repeat;
}
Gruß
Junny
 
Werbung:
Danke für den Hinweis. Ist eine schöne Idee. Dort werden zwar zwei zusätzliche Container verwendet, aber einen davon kann man noch einsparen. Ansonsten schöne Lösung mit viermal dem gleichen Hintergrundbild.
 
Werbung:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben