Hallo, ich habe folgendes Problem:

meine Seite soll sich immer dynamisch an die Bildschirmgröße anpassen. Das tut sie auch bis zu einer gewissen Bildschirmgröße und dann treten Fehler auf.
Seitenaufbau:
#header (soll 100% width sein, feste Höhe)
#leftbox (flexible Breite, 100% hoch, beinhaltet ein Bild welches am unteren Rand ausgerichtet ist und sich flexibel der Box anpasst)
#boxright (2 Spalten ->content1 (menue)->content2(inhalt)auch flexible Breite)
Wie gesagt funktioniert soweit bis die Bildschirmgröße verkleinert wird und boxright gescrollt werden muß, dann passt sich die boxleft nicht mehr 100% in der Länge an (hört auf ab Scrollbereich) Das sieht natürlich blöd aus weil das bild dann nicht mehr unten ausgerichtet ist sondern mitten drin hängt. Der Kopfbereich schafft keine 100% Weite bei kleiner Bildschirmgröße. Ich hoffe ich habe das einigermaßen anschaulich beschrieben
Hier mal der Code css

HTML-Code:

html, body {
 height:100%;
 width:100%; min-width: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;
      }

#head{
     position: absolute;
     width:auto;
     min-width:100%;
     height:170px;
     background-color:rgb(216,228,255);
     left: 0px;
     top: 0px;
     margin:0px;
     text-align: left;
     white-space: nowrap;
     vertical-align: top;
     overflow:visible;
     z-index: 14;
}

#boxleft {
  position: absolute;
  left: 0px;
  width: 18%;
  min-width:180px;
  min-height:100%;
  height:100%;
  margin: 0 0 0 0;
  top: 0px;
  bottom:0;
  background-color:rgb(216,228,255);
  z-index:2;
   }

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


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

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

}

Code Html

HTML-Code:

<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">...
  
</div>
<div class="content2">... </div>
</div>

Ich hoffe jemand hier kann mir helfen
Danke im Voraus
Gruß tinchern06

Hallo,

Möchtset du soetwas hier ?

http://www.gipspferd.de/css/anleitung/a21/a21.php

Hallo,

danke für deine schnelle Antwort. Werde das mal ausprobieren. Melde mich dann ob es geklappt hat. Gruß tinchern06

Oder wolltest du es so
http://www.gipspferd.de/forumhilfe/imgbottom/

Hallo, war ein paar Tage unterwegs, aber jetzt habe ich wieder Zeit.
Danke erst mal für die Links. Habe beide ausprobiert. Leider funktionieren sie auch nicht 100%.

Das Problem:

wenn ich dem wrapper die Hintergrundfarbe des Bildes gebe, dann fuktioniert das mit dem Bild, aber Inhalt und Navi haben dann eine automatische Höhe (bei festgelegten 100% muß gescrollt werden oder kann ich von den 100% die feste haeder Höhe wieder abziehen?)
oder
wenn ich dem wrapper die Hintergrundfarbe von Navi und Inhalt gebe hat das Bild logischerweise beim verkleinern der Seite auch diese Hintergrundfarbe.

Weiterhin habe ich gelesen, dass realtive positionierung nicht umbedingt verwendet werden sollte. (position: realtiv und float:left, wie hier verwendet ist das sinnvoll?)

Wahrscheinlich lässt sich das ganze nur in Form einer Tabellenstruktur mittels divs lösen****? Oder hat jemand eine andere Idee.

also meine Idee wäre: im wrapper 2 div's in

1. div (haeder width 100%, height 20%)
2. div (conten width 100% height 80% margin-top: 20%,mit link, navi und inhalt div)
also, wie Tabelle

Aber das geht doch bestimmt irgendwie einfacher? Leider bin ich noch nicht richtig fit in css, habe grundlegende Kenntisse aber die sind alle ganz schön eingerostet nach längerer Abstinenz.

Ich probiere das jetzt mal aus, vielleicht kennt jemand ein fertiges Style in diese Richtung oder hat eine andere Idee.

Ich hoffe ihr habt auf meine Fragen ein paar Antworten. Ich würde mich darüber sehr freuen. Bis dahin
Gruß tinchern06

Also, ausgehend von deiner Eingangfrage sind doch in der 2. Demo alle bedingungen erfüllt ?
Übrigens kannst (musst) du für deine Hintergrundfarben die Faux Column Methode anwenden. Wie in der 2. Demo zu sehen ist.

Hallo,

danke für deine Antwort. Habe es gerade noch mal getestet und kapiert. Läuft mit dieser Methode ganz gut. Das Bild, welches ich unten einsetzen möchte müßte ich dann um die gleichen Prozentangaben minimieren, da es sich ja sonst nicht dynamisch angepasst. Aber das wird sich wohl realisieren lassen. Das werde ich dann jetzt mal noch testen und dann hoffentlich, dank der netten Hilfe das Thema beenden können.
Gruß tinchern

Na siehst'e. Im Style brauchst du für dein Foto nur eine Przentangabe für width. Somit passt sich das Bild immer am linken Außenabstand von #mitte an


#wrapper img {
position:absolute;
bottom:0;
width:20%;
}

#mitte {
position:relative;
margin-left:20%;
}


So klappt's bestimmt

mfg

Guten Abend,

so nun habe ich das Bild im wrapper eingebaut und deine Ratschlägen befolgt. Das klappt auch bis zu einer gewissen Bildschirmauflösung.

Solange bis die Höhe des Bildes nicht die Höhe des #div=mitte unterschreitet. Dann wird sichtbar, daß 20% des Hintergrundbildes (1400px width), nicht gleich 20% des Bildes im wrapper (250px width) entsprechen.

Eine Idee wie ich das umgehen kann?
Gruß tinchern06

Ich kann dir im Moment nicht ganz folgen.

Das Demo Foto hat eine Größe von 500 x 375 Pixel. Bei einer theoretischen maximalen Auflösung von 2000 x 1080 Pixel
wären es 20% von 2000px = 400px
Bei einer Fensterverkleinerung auf bspw. 1000px wäre das Foto dann 200px x 150px als 20% vom linken Außenabstand.
Das Demo funktioniert bei mir bei einer Auflösung von 1920 x 1080px bis zum min-width von 760px ( 152px x 106.4px) ohne Probleme
Ein Testcase wäre nicht schlecht.

Hallo,

ich lade jetzt mal eine testseite auf den Server eines Bekannten und eine Bsp-Datei
und als Bild bei der Verkleinerung, wie ich wohl schlecht beschreiben konnte Vielleicht hilft das ja die das Problem zu verstehen, bzw. was ich da so falsch tue....

Gruß und danke, wie immer für die Hilfe tinchern06

Hallo ist soweit alles richtig. Bis auf deiner wrapper.gif.

Aktuelle Grafik 1600 x 1 px 20% von 1600 sind ? keine 200 irgendetwas sondern 320px.
Also muss der blaue Teil 320px breit sein und der Rest rot. Hier kannst du dir die neue Grafik runterladen (2000px x 10px hier ist der blaue Teil natürlich 400px breit).http://www.gipspferd.de/forumhilfe/i...om/wrapper.gif


Achso, diese Änderungen kannst du noch vornehmen (erweitern).

Code css:

1 2 3 4 5 6 7 8 9 10 11 12 13

#header {    position:relative;    z-index:99;    ...    ... }   #mitte {   position:relative;   min-height:400px;  .....  .... }

Hi,
alles supi, funktioniert jetz einwandfrei. Danke für deine Hilfe, hoffe es gibt immer so nette Leute hier.
Gruß tinchern06