css divs umplatzieren
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
absolute mache
angabe
anpassen
auto
bereich
code
dank
element
entwicklungszeit
frage
idee
individuell zusammenstellen
krieg
layout
markt
mitte
position
problem
sparen
url
-
Hallo zusammen
ich bin im CSS auf ein Problem gestossen...
Folgendes Szenario:
Ich habe ein Menü auf der linken Seite, den Content in der Mitte, eine Übersicht auf der rechten Seite und dann noch eine Fusszeile. Das ganze soll responsive sein. Im HTML sieht das dann so aus und kann auch nicht geändert werden:
<body> <div id="wrapper"> <div id="mitte"> <div id="content"> </div> </div> <div id="rechts"> <div id="uebersicht"> </div> </div> <div id="links"> <div id="menue"> </div> </div> <div id="unten"> <div id="fusszeile"> </div> </div> </div> </body>
Nun muss ich es im CSS so anpassen, dass es die richtige Reienfolge hat, also das links auch links ist und so. Hab da mal ein bisschen gepröbelt.
body { margin: 0; background-color: blue; } #wrapper { min-width: 1224px; width: 100%; min-height: 500px; height: auto; margin-top: 5%; } #mitte { width: 50%; height: auto; background-color: white; margin-left: 25%; position: absolute; } #content { width: 100%; height: 1000px; } #rechts { width: 20%; height: auto; background-color: green; margin-left: 77.5%; position: absolute; } #uebersicht { width: 100%; height: 500px; } #links { width: 20%; height: auto; background-color: green; margin-left: 2.5%; position: absolute; } #menue { width: 100%; height: 500px; } #untent { width: 100%; height: auto; background-color: gray; bottom: 0px; position: absolute; } #fusszeile { width: 100%; height: 200px; }
Funktioniert leider nicht... Jemand ne idee warum?
(die pixel angaben widersprechen dem resposiv ich weiss aber testeshalber sind sie drin)
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
sjay96 schrieb:
Sollte #untent nicht
#untent { width: 100%; height: auto; background-color: gray; bottom: 0px; position: absolute; }
heißen?#unten
Dein Script bei jsfiddle.net -
Hi,
ich wollte nur noch schnell anmerken das du mit @media querrys nur mit css z.B. dein Menü wenn der Bildschirm groß genug ist ausklappen und bei kleineren einklappen oder völlig verschiedene Styles laden kannst.
w3j -
Hallo allerseits
Danke schonmal für die schnellen antworten.
dingens schrieb:
sjay96 schrieb:
Sollte #untent nicht
#untent { width: 100%; height: auto; background-color: gray; bottom: 0px; position: absolute; }
heißen?#unten
Ja es sollte unten heissen, jedoch scheint ein anderer fehler vorzuliegen...
htaccess schrieb:
Wenn du es Responsive haben möchtest, dann frage ich mich warum du etwas selbst machst... Benutze doch das Twitter Bootstrap Framework oder das ZURB Foundation Framework, das sind nämlich die gängigsten und beliebtesten auf dem Open Source Markt...
Nun ja ich schreib manche Dinge zur Zeit lieber noch selbst(auch zu lernzwecken) aber danke für die Idee ;)
w3j schrieb:
Hi,
ich wollte nur noch schnell anmerken das du mit @media querrys nur mit css z.B. dein Menü wenn der Bildschirm groß genug ist ausklappen und bei kleineren einklappen oder völlig verschiedene Styles laden kannst.
w3j
Jap die media querys verwende ich bereits. Es geht mir aber mehr darum, wie ich im css die 'reihenfolge' der html tags 'ändere'. Wenn ich die html tags von links nach rechts eins nach dem anderen schreiben würde, könnte ich das ganze floaten aber diese möglichkeit habe ich leider nicht. Deswegen versuchte ich es mit positioning aber krieg auch das nicht hin... Ideen?
Beitrag zuletzt geändert: 11.9.2014 14:25:03 von sjay96 -
htaccess schrieb:
Wenn du es Responsive haben möchtest, dann frage ich mich warum du etwas selbst machst... Benutze doch das Twitter Bootstrap Framework oder das ZURB Foundation Framework, das sind nämlich die gängigsten und beliebtesten auf dem Open Source Markt...
Nur weil etwas gängig und beliebt ist, ist es nicht zwangsläufig die beste Lösung. ;)
Warum ein Framework, das groß und aufgeblasen ist, weil es alle Eventualitäten berücksichtigen muß, benutzen, wenn für die eigenen Anforderungen eine schlanke, individuelle Lösung den gleichen Zweck eventuell sogar noch besser erfüllt.
Frameworks haben nur einen einzigen wirklichen Vorteil. Sie sparen Entwicklungszeit. Die optimale Lösung können und sollen sie nicht sein.
Vorstellbarer Grund Nr. 2: Der Fragesteller möchte einfach wissen, wie es geht.
-
sjay96 schrieb:
Nun ja ich schreib manche Dinge zur Zeit lieber noch selbst(auch zu lernzwecken) aber danke für die Idee ;)
Zu Lernzwecken ist es alles gar kein Problem :) Das kannst du natürlich machen und bitte sehr für die Idee. :)
Wer was lernen möchte, den halte ich nicht unbedingt auf. Doch ich empfehle dir dringend, das nicht im Produktiv Einsatz zu verwenden.
fatfreddy schrieb:
Nur weil etwas gängig und beliebt ist, ist es nicht zwangsläufig die beste Lösung. ;)
Warum ein Framework, das groß und aufgeblasen ist, weil es alle Eventualitäten berücksichtigen muß, benutzen, wenn für die eigenen Anforderungen eine schlanke, individuelle Lösung den gleichen Zweck eventuell sogar noch besser erfüllt.
Frameworks haben nur einen einzigen wirklichen Vorteil. Sie sparen Entwicklungszeit. Die optimale Lösung können und sollen sie nicht sein.
Die Frameworks kannst du dir auch individuell zusammenstellen mit den Sachen die du benötigst. Somit wird das ganze wieder abgespeckter und es ist nicht so Ressourcen fressend :)
-
htaccess schrieb:
Die Frameworks kannst du dir auch individuell zusammenstellen mit den Sachen die du benötigst. Somit wird das ganze wieder abgespeckter und es ist nicht so Ressourcen fressend :)
Mach das mal und Du wirst feststellen, daß das Packerl immer noch um ein Vielfaches voluminöser ist, als eine individuelle, auf das Projekt zugeschnittene Lösung.
Diese Frameworks haben nur einen einzigen Vorteil: Sie sparen für Standardaufgaben, sofern man sich einmal eingearbeitet hat. Zeit. -
hallo sjay96,
wenn du den html-quelltext nicht verändern möchtest kannst du die gewünschte positionierung meiner meinung nach tatsächlich nur mit position:absolute hinbekommen (vor allem weil die mitte als erstes geschrieben ist). in deinem beispiel hast du das ja auch schon gemacht, allerdings fehlen die angaben zu top bzw bottom und left bzw right. wenn du position absolute nimmst kannst du auf margin verzichten weil die elemente ja gerade nicht mehr im static-layout sind.
wenn deine 4 bereiche feste höhen/breiten haben sollte das also mit position absolute und werten zu top/bottom und left/right kein problem sein.
lg hechma -
htaccess schrieb:
Wenn du es Responsive haben möchtest, dann frage ich mich warum du etwas selbst machst... Benutze doch das Twitter Bootstrap Framework oder das ZURB Foundation Framework, das sind nämlich die gängigsten und beliebtesten auf dem Open Source Markt...
Aber wahrscheinlich will er es selber lernen ? Wenn man Frameworks benutzt, weiss man trotzdem nicht genau welche ""Befehle" man verwendet um alles responsive zu gestalten - so ging es mir zumindest immer.
Threadersteller: Ich verstehe anscheinend nicht genau den Problem. Warum benutzt du nicht den CSS Befehl Float?
Edit:// Vergesst es, ich kann wieder einmal nicht lesen.
Beitrag zuletzt geändert: 12.9.2014 13:07:37 von cannadesign -
hechma schrieb:
hallo sjay96,
wenn du den html-quelltext nicht verändern möchtest kannst du die gewünschte positionierung meiner meinung nach tatsächlich nur mit position:absolute hinbekommen (vor allem weil die mitte als erstes geschrieben ist). in deinem beispiel hast du das ja auch schon gemacht, allerdings fehlen die angaben zu top bzw bottom und left bzw right. wenn du position absolute nimmst kannst du auf margin verzichten weil die elemente ja gerade nicht mehr im static-layout sind.
wenn deine 4 bereiche feste höhen/breiten haben sollte das also mit position absolute und werten zu top/bottom und left/right kein problem sein.
lg hechma
Wenn ich das alles mit position absolute mache, krieg ich das Problem, dass die Fusszeile, wenn der Content bereich grösser wird, nicht automatisch weiter nach unten schiebt, sondern andauernd an der angegebenen Position stehen bleibt...
Eine Idee wie ich das lösen kann oder muss ich definitv den html umschreiben?
Grüsse -
Ich glaube das einfachste hier ist es wirklich den HTML Code so umtusvhreiben das du float verwenden kannst.
-
Ich habe eben mal irgendwo gelesen, dass google das html in klassen unterteilt von oben nach unten und deshalb oben das wichtigste stehen sollte... Deswegen wollte ich den content nach oben nehmen...
-
hallo sjay96,
sjay96 schrieb:
Wenn ich das alles mit position absolute mache, krieg ich das Problem, dass die Fusszeile, wenn der Content bereich grösser wird, nicht automatisch weiter nach unten schiebt, sondern andauernd an der angegebenen Position stehen bleibt...
Eine Idee wie ich das lösen kann oder muss ich definitv den html umschreiben?
das liegt dann wohl daran das sich die position:absolute immer auf das nächst-höhere eltern-element bezieht welches nicht position:static ("normales"-static-layout) hat, also auch position:absolute oder position:relative oder position:fixed hat
das ist bei dir wohl der body (wie immer wenns kein anderes gibt), also ein kasten-bereich der wegen des scrollings nicht höher als 100% wird wodurch die fussleiste dann unten klebt
da in deinem quelltext ja schon ein wrapper (elternelement der absolut positionierten div) existiert solltest du diesem die eigenschaft position:relative zuweisen damit sich die position:absolut angaben der divs auf die dimension dieses wrappers beziehen (welcher innerhalb des scrollenden bodys die ganze benötigte höhe annimmt)
-----------------------------------------------------------------------------------------------------------------
trotzdem wird es eher schwierig werden alles so (ohne überlappungen) hinzubekommen wenn deine divs keine festen abmessungen haben sondern ihre größe an den inhalt anpassen sollen. wenn nicht zumindest das "unten"-div eine feste höhe hat wirds nicht gehen...
dazu wären wir wieder bei einem static-floating-layout. mit dem problem das ein floating nicht passt wenn du das "mitte"-div zuerst schreibst. dieses problem kannst du wenn du die html-tags nicht direkt im quelltext umplatzieren willst auch via javascript lösen (natürlich auch mit extern-referenziertem script)
dazu mal ein kleines beispiel:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Positionierung</title> <style type="text/css"> body { width:100%; height:100%; margin:0px; padding:0px; overflow:auto; } #mitte { width:60%; margin:0px auto; background-color:#FFFF99; } #content { height:1200px; } #rechts { width:20%; float:right; background-color:#FF99FF; } #uebersicht { height:400px; } #links { width:20%; float:left; background-color:#99FFFF; } #menue { height:500px; } #unten { clear:both; background-color:#9999FF; } #fusszeile { height:200px; } </style> <script type="text/javascript"> <!-- function verschiebeMitte(e) { var mitte = document.getElementById("mitte"); document.getElementById("wrapper").insertBefore(mitte, document.getElementById("unten")); } document.addEventListener("DOMContentLoaded", verschiebeMitte, false); --> </script> </head> <body> <div id="wrapper"> <div id="mitte"> <div id="content"> </div> </div> <div id="rechts"> <div id="uebersicht"> </div> </div> <div id="links"> <div id="menue"> </div> </div> <div id="unten"> <div id="fusszeile"> </div> </div> </div> </body> </html>
-----------------------------------------------------------------------------------------------------------------
wenn du keinen zugriff auf den html-quelltext hast und also nichteinmal das javascript implementiern könntest, gäbe es noch die möglichkeit das ganze mit php umzusetzen wenn du zb an die htaccess rankommst.
so könntest du die anfragen die an die seite gehen mittels modrewrite auf eine php-datei umleiten und dort den quelltext der seite als string einlesen, bezüglich der reihenfole der divs manipulieren und das ergebnis ausgeben (zb: file_get_contents, str_replace, echo)
aber das wäre wohl "von hinten durch die brust ins auge"
-----------------------------------------------------------------------------------------------------------------
darum kommt jetzt der hammer: "flexbox"
wird mittlerweile von guten browsern unterstützt, ist reines css und kann genau das was du willst !
auch hierzu ein kleines beispiel das dir ein lächeln ins gesicht zaubern wird:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Positionierung</title> <style type="text/css"> #wrapper { display:flex; align-items:flex-start; flex-wrap:wrap; } #mitte { width:60%; order:2; background-color:#66CCFF; } #content { height:800px; } #rechts { width:20%; order:3; background-color:#CC66FF; } #uebersicht { height:400px; } #links { width:20%; order:1; background-color:#FFCC66; } #menue { height:500px; } #unten { order:4; flex-wrap:wrap; width:100%; background-color:#FF9966; } #fusszeile { height:100px; } </style> </head> <body> <div id="wrapper"> <div id="mitte"> <div id="content"> </div> </div> <div id="rechts"> <div id="uebersicht"> </div> </div> <div id="links"> <div id="menue"> </div> </div> <div id="unten"> <div id="fusszeile"> </div> </div> </div> </body> </html>die höhenangaben dienen natürlich nur zur veranschaulichung und können durch aufspannenden inhalt ersetzt werden
lg hechma
ps: freue mich über bewertungen
Beitrag zuletzt geändert: 9.10.2014 0:57:26 von hechma -
Vielen Dank für die Aufklärung hechma...
Hätte nicht gedacht, dass es dazu wirklich eine Lösung gibt :)
Thread kann geschlossen werden. Problem gelöst. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
