zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Div-Versprung bei Seitenzoom

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.09.2006, 20:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.09.2006
Beiträge: 15
Lufine befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.09.2006, 02:09
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.09.2006, 10:08
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.09.2006
Beiträge: 15
Lufine befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 07.09.2006, 10:20
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.925
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 07.09.2006, 10:54
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von Lufine
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?
Es geht dann, wenn du den Bereich #content *nicht* floatest und ihm *keine* Breite gibst, sondern nur einen margin-left in der em-Breite des Menüs. Dann brauchst du eine andere Möglichkeit, um dein float/clear im rechten Bereich enzuschließen.
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.
Mit Zitat antworten
  #6 (permalink)  
Alt 07.09.2006, 11:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.09.2006
Beiträge: 15
Lufine befindet sich auf einem aufstrebenden Ast
Standard

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;
}
Irgendwie scheint das padding-top doppelt angewendet zu werden...
Mit Zitat antworten
  #7 (permalink)  
Alt 07.09.2006, 11:19
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von Lufine
So schlecht finde ich die Idee, den Content-Bereich gleich breit zu lassen eigentlich nicht.
Der Bereich bliebe ja eben nicht gleich breit sondern würde bei größerer Schrift auch noch immer schmaler!
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:
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
Gib dem Bereich #fusszeile Layout.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:25 Uhr.