|
|||
Div-Versprung bei Seitenzoom
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 |
Sponsored Links |
|
|||
Du hast eine Box mit em-Breite neben einer Box mit Pixelbreite in einer Box mit Pixelbreite. Nur die em-Box vergrößert sich bei Schriftvergrößerung. Logisch, dass dann der Platz für die zweite Box nicht mehr reicht, oder?
Arbeite durchgehend mit em-Breiten, dann gibt's das Problem nicht mehr. |
Sponsored Links |
|
|||
Die Breite bei #pfad und #content habe ich nur übergangsweise angegeben, damit die Seite nicht völlig schräg aussieht, wenn der Inhalt schon in der Standardansicht unter die Navi rutscht.
Eigentlich sollte die Breite über den Container #box in Pixel gesteuert werden, damit die Gesamtbreite bei einem Zoom erhalten bleibt. Nur der Container #unternavi soll sich eigentlich vergrößern. Oder geht das gar nicht? Und was ich überhaupt nicht verstehe ist, warum ich für Content und Pfad überhaupt eine Breite angeben muss, obwohl sie doch eigentlich floaten sollten |
|
||||
Eine Breitenangabe ist bei float nunmal nötig und (noch) vorgeschrieben.
__________________
“My software never has bugs. It just develops random features ...” » DevShack - die Website des freien Webentwicklers Boris Bojic |
|
|||
Zitat:
Sinnvoll finde ich dein Vorhaben nicht. Ausgerechnet der Inhaltsbereich wird dann immer kleiner und die Zeilenlängen zu kurz. Dein rechtes oberes Menü läuft bei Schriftvergrößerung auch über. Texte lassen sich einfach nicht in Pixelmaße pressen. |
|
|||
Wie schade - und ich dachte schon, ich stelle mich irgendwie blöd an!
So schlecht finde ich die Idee, den Content-Bereich gleich breit zu lassen eigentlich nicht. Viel schlimmer als kurze Zeilen finde ich nämlich das Scrollen nach rechts. Aber anscheinend wird mir wohl nix anderes übrig bleiben... Und was die obere Menü anbetrifft: ist in Arbeit Ich schick´gleich noch eine Frage hinterher. Im IE ist der Abstand zwischen #content und dem Link "Seitenanfang >>" unten viel höher als eigentlich vorgesehen und im Code angegeben Code:
#box { position: absolute; top: 240px; left: 150px; width: 711px; \width: 731px; w\idth: 711px; } #fusszeile { padding: 20px 20px 20px 0; clear: both; } |
|
|||
Zitat:
Wenn du die Pixelbreite des content-Bereiches beibehalten willst, dann setz deine Inhalte in ein Element mit width: xpx und padding-left: xem und zieh deine linken Bereiche mit negativem margin in den padding-Bereich. Dann kannst du auch das float des content beibehalten (width:100%). Die absolute Positionierung ist für dein Layout unnötig und macht dich unflexibel. Lass fließen. Zitat:
|
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Fragen zu CSS und Joomla | DOKTOR | CSS | 2 | 23.05.2011 20:29 |
Brauche Hilfe: Schwarzes Nichts | Zwox | CSS | 10 | 19.11.2010 17:53 |
Header entfernen | tripple | CSS | 17 | 15.06.2010 16:41 |
Schriftfarbe in den Eintragungsfeldern von jforms | Steveislucky | CSS | 2 | 16.03.2010 11:59 |
CSS Text nebeinander? | carstiee09 | CSS | 13 | 13.11.2009 20:18 |