{HTML » CSS} scaliertes Bild passt sich nicht meinem Seitenlayout an @CODEKICKER

scaliertes Bild passt sich nicht meinem Seitenlayout an

Hallo ich brauche dringend mal eure Hilfe,

Habe folgende Seitenstruktur
eine Kopfzeile als div
2 Spalten (zweite Spalte unterteilt)unterhalb der Kopfzeile
Das Layout soll sich dynamisch der Fenstergröße anpassen.
Mein Gedanke war am besten wäre alles in ein umschließendes div. Das Problem ist ein Bild, welches in der rechten Spalte sich eben dynamisch der Bildschirmgröße anpassen soll.
In der Breite tut es das auch, aber durch die Scalierung des Bildes fehlt dann beim scrollen der Seite unten das Bild. (die Spalte ist dann einfach keine 100%, sondern nur solang wie das scalierte Bild)

Nun habe ich das unelegant gelöst, indem ich die rechte Spalte "fixed" gesetzt habe (100% height). Das Bild füllt jetzt immer die Spalte aus, aber die rechten beiden Spalten werden bei kleiner Fenstergröße über die linke Spalte geschoben, so das deren Text nicht mehr erkennbar ist. Css

html {
 height:100%;

}

body {

     font-family: Verdana,Arial,Helvetica;
     background: rgb(161,13,89);
     font-size: 0.76em;
     color:rgb(248,243,233);
     margin: 0 0 0 0;
     padding:0;

     height:100%;

      }

#head{
     position: fixed;
     width:100%;
     height:170px;
     background-color:rgb(216,228,255);
     left: 0px;
     top: 0px;
     margin:0px;
     text-align: left;
     white-space: nowrap;
     padding-left:6em;
     overflow:visible;
     z-index: 14;
}
#boxleft {
  position: fixed;
  left: 0px;
  width: 18%;
  min-width:180px;
  height: 100%;
  margin: 0 0 0 0;
  top: 0px;
  bottom:0;
  background-color:rgb(216,228,255);
  z-index:2;
   }

   .bg_img {
  background:rgb(216,228,255);
  margin:0 0 0 0;
  padding:0;
  height:100%;
  display:block;
  overflow:auto;
  z-index:2;
}
.bg_img p {
  margin:0;
  padding:2%;

}

.bg_img img {
  float:left;
  height:100%;
  width:100%;
  border:0px solid;
  margin:0 0 0 0;

}

#boxright{
     position: absolute;
     right: 0px;
     top: 170px;
     width:82%;
     z-index: 2;


}
#content1{
     position: absolute;
     left: 0px;
     width: 200px;     
     text-align:left;
     line-height: 1.9em;
     font-weight:300;
     font-size: medium;
     white-space: nowrap;
     padding:3em;
     z-index: 3;
}

#content2{
     position: absolute;
     left:300px;
     padding-left:1em;
     line-height: 1.9em;
     font-weight:300;
     font-size: medium;
     text-align:justify;
     overflow: auto;
     height: 500px;
     padding-right: 5em;
     z-index: 3;

}

html

<div id="head"><img src="images/logo.gif" alt="" border="0"></div>
<div id="boxleft" ><div class="bg_img"><img src="images/foto.jpg" alt="Foto" border="1"></div> </div>
<div id="boxright">
<div id="content1">
    <ul>
    <li><a href="#">1</a> </li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
          </ul>
</div>
<div class="content2">Hier steht der Inhalt
</div>
</div>

Habe auch schon versucht, die 3 Spalten in einen umschliessenden div container zu packen, aber das funktionierte noch weniger (in Zusammenhang mit dem Bild).
Hoffe jemand kann meinen Ausführungen folgen und mir helfen.
Gruß fritzi

News:

16.09.2011

fritzi

1 Antwort

Hallo

Kannst du deine Angaben/Ziele noch etwas erläutern?

Ich sehe genau zwei Spalten unterhalb vom header. Da macht

aber die rechten beiden Spalten werden bei kleiner Fenstergröße über die linke Spalte geschoben

für mich keinen Sinn

Dass die Hintergrundbilder stretchen sollen leuchtet mir auch nicht ein. Sieht das nicht scheiße aus?

Vielleicht hilft dir dass aber weiter, um ein dynamisches Layout zu erhalten: statt genaue werte für die Breite eines div anzugeben kannst du bei absoluter Positionierung auch die Werte für left und right angeben, dann wird die Breite automatisch bestimmt. Ein Spaltenlayout mit header könnte dann so aussehen:

<html>
 <body>
  <div id="header"></div>
  <div id="column_left" ></div>
  <div id="column_right" ></div>
 </body>
</html>

css:

#header{
 position:absolute;
 left:0;
 right:0;
 top:0;
 height:170px;
 background:#00f;
}
#column_left{
 position:absolute;
 left:0;
 top:170px;
 bottom:0;
 width:300px;
 background:#0f0;
}
#column_right{
 position:absolute;
 right:0;
 top:170px;
 bottom:0;
 left:300px;
 background:#f00;
}

das ganze lässt sich auch wunderbar auf 3 Spalten ausdehnen, dann könnte das css für die Spalten so aussehen:

#column_left{
 position:absolute;
 left:0;
 top:170px;
 bottom:0;
 width:300px;
 background:#0f0;
}
#column_middle{
 position:absolute;
 right:300px;
 top:170px;
 bottom:0;
 left:300px;
 background:#f00;
}
#column_right{
 position:absolute;
 right:0;
 top:170px;
 bottom:0;
 width:300px;
 background:#0f0;
}

Die Bilder bekommst du dann ja mittels float schon gestrecht, wie du das haben willst.
Die Frage nachdem Warum bleibt aber.

cu
huckepick

17.09.2011

huckepick

842 ● 1 ● 8

Stelle deine Html-Frage jetzt!

Kontakt, Impressum, Lizenz, AGB