|
|||
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; } 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> Danke Leute lg Tartaruga |
Sponsored Links |
|
|||
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 |
Sponsored Links |
|
|||
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%.
|
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |