nicht angemeldet
Div Breite abhaenging von Browserbreite (Schwierig)
Der DickiHallo
folgender Code:
#graphicLeft {background:url('../images/flower.jpg') no-repeat;
max-width:303px;
height:747px;
float:left;
}
#container {width:810px;
}
Schnipp und HTML
<body>
<div id="graphicLeft"> </div>
<div id="container">
text
</div>
</body>
Das ist also ein div mit einem Bild, dass maximal 303 Pixel breit werden kann. Aktuell aber nur so breit ist wie ein Leerzeichen. Daneben ist ein div mit fester Breite. Dazu sind beide noch von einem all div umschlossen, dass eine feste Groesse haben muss, um das "Herunterfallen" bei zu kleinem Fenster zu verhindern.
Was ich aber moechte ist, dass graphicLeft immer so breit ist, wie es das Browserfenster zulaesst, den Maximalwert aber nicht ueberschreitet (mit Prozentangaben loesbar?). Zudem soll das Bild nach links "wachsen" und nicht nach rechts (was wahrscheinlich nicht moeglich ist ).
Eine Moeglichkeit waere das ganze nicht nach links im Browserfenster auszurichten, sondern nach rechts. Da tritt aber dann ein anderes Problem auf (siehe Punkt 3 in meinem Beispiel).
Da meine Ausfuehrung wahrscheinlich keiner versteht, gibts ein Bild dazu unter www.dev.hugo-schaschlik.de/gspb/help.jpg
Sieht jemand eine Moeglichkeit das valide umzusetzen, oder muss ich mein Design ueber den Haufen werfen? Danke.
P.S. Was waere wenn man die ganze Seite nach rechts ausrichtet, ich also das Bild nicht links vom Hauptteil, sondern rechts habe? Aendert das was?
-
Nachtrag: Wie oben in meinem PS geschrieben, wuerde das natuerlich gehen. Ein width:auto; oder 100% sollte es tun, wenn man die Reihenfolge von graphicLeft und container vertauscht. Ich haette es aber gerne andersrum, weil die Grafik dann am Rand kleben kann. Waehrend hier das Bild irgendwann rechts aufhoert. Je nach Bildschirmaufloesung.
-
Hallo Mathias
Das ist also ein div mit einem Bild, dass maximal 303 Pixel breit werden kann. Aktuell aber nur so breit ist wie ein Leerzeichen.
Wozu brauchst du dieses Div?
Das Hintergrundbild kannst du doch einfach dem Elterneelement zuweisen.Sieht jemand eine Moeglichkeit das valide umzusetzen, oder muss ich mein Design ueber den Haufen werfen? Danke.
Soweit ich es verstanden habe, dürfte es kein Problem bereiten, das
umzusetzen, nur, wie bringt man den IE dazu, es zu begreifen, min-... und
max-... kennt der nicht.#all { background:url('../images/flower.jpg') no-repeat; min-width:810px; min-height:747px; max-width:1113px; } #container {width:810px; margin-left:auto; }<body> <div id="all"> <div id="container"> text </div> </div> </body> </body>Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin! -
Hallihallo!
Ich weiß nicht, ob ich das richtig verstanden habe, aber vielleicht trifft das ja ungefähr das, was Du suchst:
Ein Container, der _nur_ den eigentlichen Inhalt enthält.
Der Container wird an den linken Seitenrand geklebt und erhält eine feste Breite und das Hintergrundbild, welches Du ja wiederum links (innerhalb des Containers) festkleben kannst.
Dazu noch einen prozentuales padding-left, damit das Bild auch sichtbar ist.In diesen Container dann den eigentlichen Inhalt (höchstwahrscheinlich wieder ein div, da kann ja Alles mögliche reingehören, also aus Validitätsgründen.) Dieses Inhaltsdiv dann entsprechend positionieren und eine feste Hintergrundfarbe geben.
Dann sollte es eigentlich so sein wie gewünscht...Jetzt, wo ich die ganze Zeit drüber nachgedacht und vor mich hingetippt habe, fällt mir grade auf, das ja eigentlich sogar der body die Rolle des Containers übernehmen könnte, oder?
Nun ja, ich hoffe, ich konnte helfen, vielleicht auch nur durch einen Denkanstoss.
Viele liebe Grüße,
Der Dicki -
Danke fuer die Antworten. Aber es will nicht so wie icht :(. Habs jetzt so aehnlich wie im zweiten Post gemacht.