zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Box variabel in Breite und Höhe

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.04.2008, 14:33
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.08.2004
Beiträge: 65
Black Fladder befindet sich auf einem aufstrebenden Ast
Standard Box variabel in Breite und Höhe

Hey ihr,

ich habe eine bestehende Box, die sich je nach Breite des Browserfensters variabel anpasst.
Allerdings möchte ich, dass sich auch die Höhe der Box entsprechend dem jeweiligen Inhalt anpasst.

Die Box sieht wie folgt aus:



Den bestehenden Code inklusive Css-Dateien und Grafiken habe ich als zip-Archiv angehängt (Box.zip)

Die Version, die momentan beigefügt ist, müsste unter IE, Opera und FireFox identisch aussehen bzw. funktionstüchtig sein.

Mein Problem ist jetzt diesen Container in der Höhe "mitwachsen" zu lassen.

Mein Lösungsvorschlag:

Grundvoraussetzung für das Wachsen ist ja ein repeat-y - einmal auf der linken Seite und einmal auf der rechten Seite der Box.


Die bestehende Struktur sieht ja für eine Box wie folgt aus:

Code:
    <div class="box1">
      <div class="box2">
        <div class="box3">
          <div class="IE_6_Box_Bild">
            <p>Inhalt</p>            
            </div>
          </div>
        </div>
      </div>
Man könnte doch einen Div-Container übergeordnet platzieren, der also alle anderen bisherigen Container enthält und ihm die hellblaue Hintergrundfarbe verpassen.

Entlang dieses Containers (links und rechts) muss dann mit zwei weiteren Containern der Rand der Box mit repeat-y wiederholt werden (siehe Beispielgrafik Bilder/li_down.gif im Anhang).

Dann muss die bisherige Gesamtgrafik, die ja aus 3 Grafiken besteht, noch in mehr Teile zerlegt werden:

1. Grafik oben links
2. Grafik oben rechts
3. Grafik unten links
4. Grafik unten rechts
5. Grafik oben, die mit repeat-x wiederholt wird
6. Grafik unten, die mit repeat-x wiederholt wird

Für jede dieser Grafiken benötige ich einen weiteren Div-Container, um ihm die jeweilige Grafik als Hintergrundbild zuweisen zu können.



Ich bin mir mit der Umsetzung dieser neuen Container-Struktur unsicher und wollte deshalb fragen:

Wie macht eine Ergänzung der bisherigen Container-Anordnung eine variable Höhe möglich?


Hinweis: Innerhalb des Ordners Bilder befindet sich eine kleine Grafik (li_down.gif) - sie kann am linken Rand der Box dupliziert werden.


Vielen Dank für eure Unterstützung,

Blacky
Angehängte Dateien
Dateityp: zip Box.zip (17,0 KB, 3x aufgerufen)

Geändert von Black Fladder (12.04.2008 um 14:54 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 12.04.2008, 15:45
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 15.01.2008
Ort: Berlin Mitte
Beiträge: 217
netbenni befindet sich auf einem aufstrebenden Ast
Standard

Ich glaube, das könnte den Code noch etwas vereinfachen.

css "sliding doors"
__________________
„Tu soviel Gutes, wie Du kannst, und mache so wenig Gerede wie nur möglich darüber.“
C.D.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 12.04.2008, 16:31
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.08.2004
Beiträge: 65
Black Fladder befindet sich auf einem aufstrebenden Ast
Standard

Danke schön für deine schnelle Antwort,

ich werde mir diese Thematik mal anschauen.

In der Zwischenzeit bin ich auch so etwas weitergekommen:

Die Ränder links und rechts verändern sich nun variabel mit.

Dies funktioniert unter Opera und FireFox einwandfrei.

Nur IE 7 + 6 sind nicht damit einverstanden.

Ich habe einfach zwei Div-Bereiche eine Ebene über der "direkten-Inhaltsebene" eingefügt - einem habe ich durch die Klasse box_re die rechte Grafik zugewiesen. Analog dazu stellt box_li die Lösung für die linke Seite dar.

Die IEs ignorieren den Container mit box_re bzw. kommen in Konflikt, weil mit das Bild in box_2 damit kollidiert, so meine Vermutung.

Denn kommentiert man die Hintergrundgrafik rechts aus, so wird rechts die Sache richtig dargestellt - leider dann aber links ignoriert.

Ich bin etwas ratlos - die beiden box_re bzw. box_li Container sind ineinander verschachtelt. Darin scheinen die IEs ein Problem zu sehen.


Als Anhang habe ich die neue Version beigefügt.

Vielen Dank für die weitere Hilfe,
Blacky
Angehängte Dateien
Dateityp: zip Box2.zip (35,5 KB, 0x aufgerufen)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Höhe der Box soll sich an die Höhe der Box nebenan anpassen mxpx CSS 3 02.10.2009 16:37
Probleme mit der Breite und Höhe nach Padding BoFiaZ CSS 1 12.03.2009 10:21
Kniffliges Layout mit float Roadrunnerle CSS 6 14.03.2006 11:26
#boxes a:hover.info: 2.posting mit css !!! marioN CSS 5 25.01.2004 17:04
#box a:hover .info: css-layout: ie6.0/win, moz.1ie5.0/mac, marioN CSS 2 19.01.2004 17:17


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:42 Uhr.