nicht angemeldet
Div-Elemente richtig positionieren, schützen
0 
Gernot Back
0
Div-Elemente richtig positionieren, schützen
Hallo,
ich habe das Problem, dass ich auf meiner Web-Seite zwei Grafiken (ein waagerechter und ein senkrechter Balken) nur unter der Verwendung von DIVs darstellen möchte.
Das Layout sollte dann so aussehen:
..................
Grafik .
--------------- .
| .
| .
Inhalt |Grafik
| .
| .
| .
..................
Leider habe ich das Problem, dass ich zwar den waagerechten Balken und auch den senkrechten Balken richtig positionieren kann, jedoch beim Scrollen des Inhaltes der senkrechte Balken nicht bis nach unten resized wird.
Also ungefähr so..
.................
| .
| .
| .
Inhalt |Grafik
.
.
.
.................
Hat vielleicht jemand eine Idee, wie ich das Div-Element, welches den senkrechten Balken enhält, automatisch beim Scrollen resize'n kann?
Ein weiteres Problem ist, dass beim Resize des Fensters der senkrechte Balken über den Inhalt des Fenster drüberrutscht und ihn überdeckt.
.........
| .
| .
| .
Inha|Grafik
.
.
.
.........
Kann man hier den Inhalt-Div nicht irgendwie davor schützen überdeckt zu werden. Also so wie man das bei Tabellen kennt.
Ich hoffe, ich habe hier deutlich dargestellt, worum es mir geht und würde mich freuen, wenn mir jemand einen kleinen Tipp geben könnte.
Gruß
Bianca
-
Hallo bianca,
Leider habe ich das Problem, dass ich zwar den waagerechten Balken und auch den senkrechten Balken richtig positionieren kann, jedoch beim Scrollen des Inhaltes der senkrechte Balken nicht bis nach unten resized wird.
.................
| .
| .
| .
Inhalt |Grafik
.
.
.
.................Ich vermute, das liegt daran, dass du die Grafik als Hintergrundgrafik zugewiesen hast und zwar einem anderem als dem BODY-Element.
Ein weiteres Problem ist, dass beim Resize des Fensters der senkrechte Balken über den Inhalt des Fenster drüberrutscht und ihn überdeckt.
.........
| .
| .
| .
Inha|Grafik
.
.
.
.........Da vermute ich, dass du die Position des Elements absolut am rechten Rand des Fensters positioniert hast, anstatt das betreffende Element, das die Hintergrundgrafik enthält, floaten zu lassen.
Mit background-position und padding für das BODY-Element solltest du die zwei Fliegen mit einer Klappe schlagen können.
Aber das sind wie gesagt alles nur Vermutungen, solange du uns nicht den Quellcode, beschränkt auf die relevanten Teile zeigst.
Gruß Gernot
-
Hallo Gernot,
danke für Deinen Hinweis. Ich werde versuchen die von Dir genannten CSS-Eigenschaften in der Online-Hilfe zu verstehen und umzusetzen.
Anbei, falls Du noch etwas Geduld und Lust haben solltest, der Quellcode (auszugsweise).
{die HTML-Seite}
<body>
<div id="logo_vertical"></div>
<div id="logo_right"><img src="images/curve1.gif" /></div><div style="position: relative; padding-top: 50px; padding-left: 100px; left: 0px; top: 100px; margin- right: 300px; background-color: white;">
<table border="1">
<tr>
<td style="width: 100px">
Inhalt
</td>
<td style="width: 100px">
inhalt
</td>
<td style="width: 100px">
inhalt
</td>
</tr>
</table>
</div></body>
{das CSS-Dokument}
body
{
padding: 0px; margin: 0px;
border: 0px dashed black;
background: white url(../images/stripe2.jpg) repeat-x;
font-family: Verdana, Arial, sans-serif;
width: 100%;
height: 100%;
}#logo_right
{
position: absolute;
top: 0px;
right: -1px;
border: 0px solid green;
z-index: 2;}
#logo_vertical
{
border: 0px solid black;
position: absolute;
/*top: 0px;*/
bottom: 0px;
height: 150%;
right: -1px;
width: 60px;
background: white url(../images/stripe_horiz.jpg) repeat-y;
z-index: 1;
}Danke Bianca
-
Hallo Bianca,
na, da lag ich ja ganz richtig mit meinen Vermutungen. Noch ein Tipp: Wenn du die vertikal wiederholte Hintergrundgrafik dem BODY-Element zuweist, was ich dir empfehle, dann lass auch die height:100% dort weg, denn sonst hört die Grafik auf, sobald du weiter nach unten scrollst.
Versuche mal, bei den anderen Elementen , ausschließlich mit float zu arbeiten und auch nicht mit position, weder relative noch absolute. Und stelle sicher, dass auch das HTML-Element weder (Default-)Margin noch ~Padding und width:100% hat.
Gruß Gernot
-
Hallo Gernot,
vielen, vielen Dank für Dein Hilfe. Ich werde versuchen Deine Tipps umzusetzen. :-)
Gruß
Bianca
-
-
-