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

Div expandieren

Status
Für weitere Antworten geschlossen.
K

klausweidinger

Neues Mitglied
Hi!

Ich bin mal wieder bei meiner Internetseite am Basteln und habe gerade ein kleines Problem.
Ich möchte ein Layout erstellen, in dem links und rechts ein schmaler Streifen frei bleibt, in dem dann ein kleines sich wiederholendes Mini-Hintergrundbild angezeigt wird. Grundgerüst ist ungeähr so:

<body>
<div style="float:left; width:42px; background-image:url(____);">
<br><br><br><br><br></div>
<div style="float:right; width:42px; background-image:url(____);">
<br><br><br><br><br></div>

<div style="margin: 0 42px 0 42px; padding:0px; border:2px; border-style:solid">
Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext
</div>
</body>

Klappt alles soweit, nur wird mir immer nur eine Zeile des Bildes angezeigt (Höhe 8px). Ich möchte aber, dass es sich über die komplette Seitenhöhe erstreckt. Wenn ich in zwischen die div-Tags ca. 30 mal <br> reinschreibe funktioniert es zwar, aber es erscheint immer ein Scrollbalken, auch wenn auf der eigentlichen Seite (dem Mittelteil) fast gar nichts steht. Die Höhe der äußeren divs soll sich also an die (variable) Höhe des inneren anpassen.

Ich habe schon bei selfhtml geschaut, allerdings nichts entsprechendes gefunden. Hoffe, ihr könnt mir weiterhelfen.
 
Werbung:
Das, was du beschreibst, ist ein sehr ärgerliches Problem bei div-Layouts: Es geht eigentlich gar nicht. Um den entsprechenden Effekt dennoch zu erreichen, muss man tricksen.
Wenn der Inhalt eine feste Breite in px hat, ist die Lösung recht einfach:
Verzichte auf die beiden gefloateten divs und verbreitere stattdessen die Text-Box um 84px, wobei du links und rechts ein padding von je 42px zuweist.
Dann erstellst du ein Bild, das genauso breit ist wie die Text-Box und an beiden "Enden" links und rechts das Mini-Bild enthält. Dieses breite Bild kannst du dann als Hintergrund für die Text-Box nehmen - und schon sieht es so aus, als hättest du links und rechts einen Hintergrundstreifen.
Problematisch ist natürlich, dass dies nur funktioniert, wenn du mit festen Breiten arbeitest. Wenn die Seitenbreite variabel sein soll, ist das Ganze viel schwieriger. Mir fällt im Moment nicht ein, wie das browserübergreifend problemfrei gehen sollte.
 
Danke für die schnelle Antwort, allerdings möchte ich die Seite gern auch für variable Fensterbreiten haben, denn sonst sieht man ja entweder auf einem kleinen Bildschirm den Randbereich nicht, oder auf einem großen Monitor wird nur der halbe Platz genutzt.
Ich werde es dann wohl provisorisch über die <br> lösen, allerdings hat das ja nicht nur den Nachteil, dass immer eine Scrollleiste erscheint, sondern wenn der Inhalt mal mehr Zeilen hat, als ich <br> benutze, dann hört der Rand einfach auf. Also wohl noch nicht die endgültige Lösung.
Mein einziger Lösungsansatz bis jetzt war, dass ich margin-top und -bottom auf 0px gesetzt habe, allerdings hat das nicht geklappt. Jetzt werde ich es dann noch mit top und bottom allein probieren und ein bisschen mit "position" rumspielen. Wenn ich eine gute lösung finde, dann poste ich sie, ich kann mich aber frühestens heute Abend wieder melden. Falls euch noch was einfällt, dann postet es bitte.
 
Werbung:
Es gibt bestimmt eine Lösung.
Auch für variable Seitenbreiten. Das Problem ist das Kacheln in x und y Richtung. Meißt reicht es aber, das Hintergrundbild nur in der vertikalen zu wiederholen.
Wie soll den das Gerüst insgesamt aussehen?
 
Ich habe doch oben gepostet, wie das Grundgerüst aussieht. Es soll insgesamt eine ganz normale Seite sein, nur dass rechts und links ein schmaler Streifen einer Grafik angezeigt werden soll. Meine bisherigen Lösungsansätze sind folgende:
1. Einfach in die divs-Tags ca. 50 Mal <br> rein:
Nachteile:
--Es wird immer ein Scrollbalken angezeigt
--Wenn der Inhalt doch mal länger wird (also mehr Zeilen hat, als ich <br> geschrieben habe) hört das Hintergrundbild auf
--Um den 2. Punkt zu vermeiden könnte man einfach 1000 Mal <br> schreiben, allerdings kann man dann nicht mehr vernünftig normal scrollen (ohne Scrollrad an der Maus)

2. Die beiden Seitenstreifen mit position:fixed; festmachen:
Nachteile:
--Ich habe es bis jetzt noch nicht zufriedenstellend hinbekommen
--Es kam bei mir (bis jetzt) trotzdem ein Scrollbalken
--Von älteren Browsern nicht korrekt dargestellt.

Also, noch habe ich keine optimale Lösung und bin immer für Vorschläge offen.
 
OK mit fixed hat es bei mir dann doch geklappt. Ich hatte nur den DOCTYPE vergessen. Was diese eine Zeile alles ausmacht.

Außerdem kann man auch mit der Angabe height:100; festlegen, dass ein Element sich über die gesamte Höhe erstreckt. Allerdings glaube ich, dass das dann am Bildschirm und nicht an der Höhe des restlichen Inhalts gemessen wird. Ich werd's ausprobieren und dann hier reineditieren.
 
Werbung:
klausweidinger schrieb:
Ich habe doch oben gepostet, wie das Grundgerüst aussieht. Es soll insgesamt eine ganz normale Seite sein, nur dass rechts und links ein schmaler Streifen einer Grafik angezeigt werden soll.
Zum Vergrößern anklicken....
Ok, ich hab's irgendwie nicht geschnallt.

-Dem body die Hintergrundgrafik geben.
-Einen Inhaltsbereich einfärben, mit margin rechts und links auf Abstand halten und 100% Höhe geben.

html:
Code: 
<body>
<div id="alles">
<h1>Inhalt</h1>
</div>
css
Code: 
* {
    margin: 0px;
    padding: 0px;
  }

body, html {
    background-image : url(hintergrundbild.jpg);
    height: 100%;
  }

#alles {
    margin-left: 42px;
    height: 100%;
    background-color: #ffffff;
    margin-right: 42px;
  }
 
Zuletzt bearbeitet:
OK, des ist natürlich auch eine Lösung :D. Die werde ich wohl auch benutzen, da fixed ja nur auf neueren Browsern funktioniert, wenn man keine spezielle Browserweiche reinbaut. Danke!

edit: Komischerweise hat mein div id="alles" aber dann keinen Außenabstand. Weiß nicht, woran das liegt. Eig. müsste es funktionieren.

edit2: Wenn ich es über "class" mache funktionierts, aber ich sehe den Hintergrund nicht. Es sind zwar weiße Streifen da, aber kein Bild.
 
Zuletzt bearbeitet:
klausweidinger schrieb:
edit: Komischerweise hat mein div id="alles" aber dann keinen Außenabstand. Weiß nicht, woran das liegt. Eig. müsste es funktionieren.
Zum Vergrößern anklicken....
Du meinst kein Innenabstand?
Den bekommst durch padding zurück:
Code: 
#alles {
padding : 10px;
}
Ich habe noch etwas vergessen es muß für #alle nicht height sondern min-height heißen:
Code: 
#alles {
    margin-left: 42px;
    min-height: 100%;
    background-color: #ffffff;
    margin-right: 42px;
    padding: 10px;
  }
Internetexplorer bis vers.6 kennen min-height nicht.
Dafür behandeln sie height wie min-height.
Sternchenhack:
Code: 
* html #alles {
  height: 100%;
}
 
Werbung:
Nein ich meinte nicht den Innenabstand, aber wie ich in edit2 geschrieben habe, habe ich das Problem bereits gelöst. Was mich eher stört ist, dass ich dass Hintergrundbild nicht sehe.
 
Mit dem IE 7.Da ich jetzt aber seit 2 Tagen auch Linux laufen habe, werde ich wohl ab jetzt auch mit Firefox testen. Danke für den Link.
 
Werbung:
Moin,

klausweidinger schrieb:
Mit dem IE 7.Da ich jetzt aber seit 2 Tagen auch Linux laufen habe, werde ich wohl ab jetzt auch mit Firefox testen. Danke für den Link.
Zum Vergrößern anklicken....

üblicherweise wird erst immer mit dem Firefox getestet, weil der im Gegensatz zum IE sich nach den Webstandards richtet.

Der IE ist deshalb zum Testen vollkommen ungeeignet.

koslowski
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben