Probleme mit DIV Container
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anzeige
auto
bereich
breite container
code
container
erstellen
frage
gemacht container
header
http
klein mache
kleines problem
position
problem
raster
ratio
stellen
tag
url
-
Hallo ich hab da ein tag/kleines problem">kleines Problem mit meiner Website die ich erstellen möchte auf http://and1iii.lima-city.de und zwar möchte ich eine Webseite erstellen mit einen Flüssigen Raster Layout jedoch hab ich das Problem das wenn ich den Artikel ( oder Content-Bereich ) zu klein mache die Sidebar unter dem article-tag rutscht.
Ich weiß aber jetzt nicht genau wie ich es anstelle die width-Größe des article-tags auf 100%-310px stellen kann. Ich habe einfachmal so in die CSS geschrieben glaub aber nicht das das stimmt.
Ich hoffe ihr könnt mir helfen.
MfG and1iii
P.S.: Hier noch mein etwas umständlicher CSS CODE:
@charset "UTF-8"; /* CSS Document */ #container { background:#FF0; width:70%; position:relative; margin:0 auto; } header{ width:100%; float:left; background:#00F; } article { clear:both; width:66.66%; background:#0F6; float:left } aside { width:33.33%; float:right; background:#FF6; } footer { clear:both; width:100%; background:#0FF; } @media screen and (max-width: 1050px){ /*Banner 300px*250px*/ body{background:#0F0;} container{ width:80%;} article { width:100%-420px;} aside{width:310px;} } @media screen and (max-width: 700px){/*Anzeige für Geräte unter 700px breite*/ container{width:100%;} article{width:100%;} aside{width:100%;} } @media screen and (device-aspect-ratio: 40/71) {/*Anzeige iPhone 5 (noch nicht wirklich was dran gemacht */ #container { width:100%; } article, aside { width:100%; } } -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
and1iii schrieb:
Hallo ich hab da ein kleines Problem mit meiner Website die ich erstellen möchte auf http://and1iii.lima-city.de und zwar möchte ich eine Webseite erstellen mit einen Flüssigen Raster Layout jedoch hab ich das Problem das wenn ich den Artikel ( oder Content-Bereich ) zu klein mache die Sidebar unter dem article-tag rutscht.
Ich weiß aber jetzt nicht genau wie ich es anstelle die width-Größe des article-tags auf 100%-310px stellen kann. Ich habe einfachmal so in die CSS geschrieben glaub aber nicht das das stimmt.
Ich hoffe ihr könnt mir helfen.
MfG and1iii
P.S.: Hier noch mein etwas umständlicher CSS CODE:
@charset "UTF-8"; /* CSS Document */ #container { background:#FF0; width:70%; position:relative; margin:0 auto; } header{ width:100%; float:left; background:#00F; } article { clear:both; width:66.66%; background:#0F6; float:left } aside { width:33.33%; float:right; background:#FF6; } footer { clear:both; width:100%; background:#0FF; } @media screen and (max-width: 1050px){ /*Banner 300px*250px*/ body{background:#0F0;} container{ width:80%;} article { width:100%-420px;} aside{width:310px;} } @media screen and (max-width: 700px){/*Anzeige für Geräte unter 700px breite*/ container{width:100%;} article{width:100%;} aside{width:100%;} } @media screen and (device-aspect-ratio: 40/71) {/*Anzeige iPhone 5 (noch nicht wirklich was dran gemacht */ #container { width:100%; } article, aside { width:100%; } }
Du benutzt noch einige Sachen, die heute nicht mehr gebraucht werden sollten und ansonsten ist dein Code auch total verwirrend. Ich hab das mal nachgebaut und deine Probleme entstehen bei mir auch nicht. Schaus einfach mal durch und vergleichs mit deiner Lösung. Bei Fragen steh ich auch zur Verfügung.
<html> <head> <style> body{ margin: 0; padding: 0px; } div#container{ position: relative; width: 884px; margin-left: -442px; left: 50%; top: 30px; text-align: center; } div#header{ position: relative; height: 16px; background: blue; } div#article{ position: relative; width: 589px; height: 424px; background: green; float: left; } div#aside{ position: relative; background: yellow; width: 295px; height: 424px; float: right; } div#footer{ position: relative; height: 40px; width: 100%; background: #00fff7; float: left; } </style> </head> <body> <div id="container"> <div id="header">header</div> <div id="article">Text</div> <div id="aside">Side</div> <div id="footer">Footer</div> </div> </body> </html> -
kann sein das ich die Frage falsch gestellt hab. Ich möchte halt eine Website erstellen die für alle Endgeräte optimiert ist und nicht nur für den Desktop deshalb hat dich das vl auch ein bisschen verwirrt.
@media screen and (max-width: 1050px){ … }
der code überschreibt halt den derzeitigen CSS code wenn die Breite des Browsers kleiner als 1050px ist. und ich möchte halt das die Sidebar immer ca 300px breit ist und der Content-Bereich immer 100% - den ca 300px groß also z.B. wenn der Browser 900px breit ist soll der Content-Bereich 600 px breit sein und die Sidebar immer noch die ca 300 px breit sein.
sobald dich aber die breite des Browsers auf 700 oder 600 px ändert soll die Sidebar unter den Content-Bereich sich einordnen ( das klappt ohne Probleme :) )
Ich hoffe du weißt was ich mein. -
and1iii schrieb:
kann sein das ich die Frage falsch gestellt hab. Ich möchte halt eine Website erstellen die für alle Endgeräte optimiert ist und nicht nur für den Desktop deshalb hat dich das vl auch ein bisschen verwirrt.
@media screen and (max-width: 1050px){ … }
der code überschreibt halt den derzeitigen CSS code wenn die Breite des Browsers kleiner als 1050px ist. und ich möchte halt das die Sidebar immer ca 300px breit ist und der Content-Bereich immer 100% - den ca 300px groß also z.B. wenn der Browser 900px breit ist soll der Content-Bereich 600 px breit sein und die Sidebar immer noch die ca 300 px breit sein.
sobald dich aber die breite des Browsers auf 700 oder 600 px ändert soll die Sidebar unter den Content-Bereich sich einordnen ( das klappt ohne Probleme :) )
Ich hoffe du weißt was ich mein.
Ach so. Ja, die Frage hab ich etwas anders interpretiert als du gemeint hast. Ich hab das immer mit Javascript gelöst. Es gibt auch in CSS3 die calc() Funktion, kannst du ja mal ausprobieren. Ansonsten überprüfst du mit Javascript die Bildschirmgrösse und veränderst dann auch das css.
Beitrag zuletzt geändert: 7.2.2014 21:39:26 von c143 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage