zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden layout verschiebt sich bei Skalierung

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.05.2017, 00:13
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.05.2017
Beiträge: 1
Tartaruga befindet sich auf einem aufstrebenden Ast
Standard layout verschiebt sich bei Skalierung

Hallo Leute

Ich habe zu diesem Thema schon viele Beiträge im Web gefunden aber leider noch keine geeignete Lösung für mein Problem.

Ich habe verschiedene divs die sich in einem Wrapper befinden. Alle Größen sind i.n.R. in relativen Größen angegeben. Der Inhalt der divs wird von Joomla befüllt

Jetzt habe ich das Problem, dass sich der rechte div für das Login bei einer gewissen Seitengröße nach unten verschiebt. Das sollte aber nicht so sein. Mir wäre es lieber, es würde eine Scrollbar entstehen.
Ich habe auf der Site die wrapper in Pink eingefärbt damit man leichter sieht was passiert. Aber ich habe leider keine Lösung gefunden.
Code:
div#wrapper{
		/*width:1350px auto;*/
		width: 100%;
		background-color: #ff1493;/*#146ECC;*/ 
		}
/*Kopfbereich*/
div#head{
		width:auto; 
		height:90px;
		background-color: #A4D5FF;
		}
div#menu{
		width:10%; 
		min-width: 8em;
		float: left;
		background-color: #146ECC;
		}
div#login{
		width:20%; 
		float: right; 
		margin-left: -10px;
		padding-left: 1em;
		background-color: #146ECC;
		}
div#testLogin{
		width:20%; 
		float: left; 
		padding-left: 1em;
		background-color: #146ECC;
}
/*Content*/
div#content{
		width:65%; 
		float: left;
		min-height: 400px;
		padding-left: 1em;
		padding-right: 1em;
		padding-bottom: 2em;
		background-color: #7AE34E;/*#FFFF00;*/
		}
/*Fußbereich*/
div#footer{
		width:auto; 
		height: 40px; 
		background-color: #A4D5FF;
		clear: both;
		}
Seite:
Suche

HTML-Code:
<body>
	<div id ="wrapper">
		<div id="head"><h1 class="h1Txtaus"><a class="h1TxtausRef" href="/" title="zur Startseite">TherapieMe</a></h1></div> <!--end head-->
		<div id="menu">	
			<!--<div id="search">
				<jdoc:include type="modules" name="leftUp" style="xhtml"/>
			</div>-->
			<jdoc:include type="modules" name="left" style="xhtml"/>
			<!--<div class="nav_title">
				<jdoc:include type="modules" name="navi" style="xhtml" />
			</div>-->
		</div><!--end menu-->
		<div id="content">		
			<jdoc:include type="component" class="rechts"/>
			<jdoc:include type="message"/>
			<jdoc:include type="modules" name="debug"/>
			<br class="rechts"/>
		</div> <!--end content-->	
		<div id="login">
			<div id="testLogin">
				<jdoc:include type="modules" name="rightUp" style="xhtml"/>
			</div>
			<jdoc:include type="modules" name="rightdown" style="xhtml"/>		
		</div><!--end login-->	
		<div id="footer">
			<jdoc:include type="modules" name="footer" style="xhtml"/>
		</div><!--end footer-->
		
	</div> <!-- end wrapper-->
</body>
Wie kann ich in CSS einstellen, das entweder ab einer bestimmten Browser Größe eine Scrollbar eingefügt wird, oder aber auch zB der Content verkleinert wird.

Danke Leute

lg
Tartaruga
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.05.2017, 03:31
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Aus deinen beiden Quellcodeschnipseln ist das Problem leider nicht ersichtlich.

Die verlinkte Seite enthält sachliche Fehler, die zunächst beseitigt werden sollten:

https://validator.w3.org/

Speziell Elemente an unzulässigen Stellen im Quellcode und falsch geöffnete / geschlossene Elemente führen immer wieder zu Problemen.

Damit wird den Problem zwar nicht behoben sein aber für die Problembeseitigung sollte eine stabile, korrekte Grundlage gegeben sein.

Weiterhin verwendest du XHTML. Das ist bereits vor über acht Jahren offiziell begraben worden und sollte deshalb nicht mehr verwendet werden, grade für neu erstellte Websites.

Korrekt erstellte XHTML-Seiten funktionieren zwar meist mit aktuellem CSS, einzelne Browser haben trotzdem immer wieder Probleme damit.

Für Webseiten mit aktuellem CSS und dessen Möglichkeiten sollte deshalb auch das aktuelle HTML verwendet werden.

Die Frage ist deshalb ob du bereit bist auf aktuelles HTML umzusteigen. Das ist etwas aufwändiger als nur den Doctype zu ändern. Deine Vorgehensweise mit einer mobilen css-Datei deutet jedenfalls darauf hin dass du ein responsives Layout erstellen willst.

Gruss

MrMurphy
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.05.2017, 12:38
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

Elemente rutschen dann untereinander, wenn sie mehr Platz einnehmen als zur Verfügung steht. Wenn sie also quasi breiter als 100% sind. In deinem Fall verwendest du für Breitenangaben und paddings/margins nicht nur Prozente, sondern auch "feste" Werte wie em und px. Dadurch werden die floatenden divs zusammen irgendwann breiter als die zur Verfügung stehenden 100%.
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
Gesamtes Layout verschiebt sich bei Navigation -rep- CSS 8 27.06.2012 11:44
Layout verschiebt sich denniz CSS 1 01.06.2009 15:39
Ein P ist hidden und das layout verschiebt sich kampfgnom CSS 4 27.02.2009 18:57
Layout verschiebt sich, wenn die Scrollleiste fehlt Steakfred CSS 12 21.12.2007 15:03
senkrechter scrollbalken verschiebt layout? celine@23 CSS 3 16.01.2007 17:44


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