Sitze schon fast den ganzen Tag an diesem Problem, habe aber noch keine Lösung gefunden...
Meine Webseite soll barrierefrei werden, muss also einem Seitenzoom Stand halten können - das funktioniert aber nur bedingt. Der Text rutscht nämlich beim Zoom unter die Navigation
Am besten Ihr werft vorab mal einen
Blick auf die Seite, damit ich nicht so viel schwafeln muss.
Es sollte eigentlich so sein, dass nur die "Unternavi"-Box Ihre Breite beim Zoom verändert, die "Content"-Box sich dementsprechend verkleinert. Ich dachte, es würde ausreichen, nur die Breite des umschließendens Containers "Box" und die der "Unternavi" anzugeben, damit sich der Content auf dem verbleibenden Rest verteilt, das funktioniert aber überhaupt nicht - der Text rutscht dann schon bei 100% Seitenansicht unter die Unternavi! Offensichtlich muss eine feste Breite für alle Boxen angegeben werden, damit "Pfad" und "Content" nicht nach unten verrutschen, oder?
Der HTML Code sieht (verkürzt) so aus:
Code:
<div id="box">
<div id="unternavi">Unternavigation</div>
<div id="pfad">Pfad</div>
<div id="content">Inhalt</div>
<div id="fusszeile">Link Seitenanfang</div>
</div>
Und hier die relevanten Styles:
Code:
#box {
position: absolute;
top: 240px;
left: 150px;
z-index: 4;
background-color: #efefef;
width: 711px;
\width: 731px;
w\idth: 711px;
}
#unternavi {
font-size: 0.8em;
padding: 25px 5px 30px 16px;
width: 12.4em;
float: left;
}
#pfad {
font-size: 0.7em;
border-bottom: 1px solid #ffffff;
padding: 9px 0 9px 20px;
float: left;
width: 508px;
border-left: 1px solid #ffffff;
}
#content {
font-size: 0.8em;
line-height: 1.8em;
padding: 0 20px 30px 20px;
float: left;
width: 475px;
border-left: 1px solid #ffffff;
}
div#content {
min-height:300px;
height:expression(this.scrollHeight > 300 ? "auto":"300px"); };
}
Hat jemand eine Idee???
Lufine