CSS - DIV container automatisch an Seitengröße anpassen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
absolute setzen
auto
browser
code
container
fenster
header
http
inhalt
internet
krieg
oberen bildschirmrand
position
problem
rutschen
schein
schieben
tag
url
weben
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Ich verstehe das Problem nicht richtig... deine Seite schein zu funktionieren... da rutscht ja gar nichts ineinander.
Meist du den Effekt, der durch das responsive-Design erzielt wird?
Ich nehme an, es handelt sich um eine andere Seite:
Wie positionierst du deine div's? Relativ oder absolut?
Bei einer relativen Positionierung sollten die eigentlich nicht untereinander rutschen können... also nehme ich einmal an du positionierst die absolut.
Absolute Positionierung solltest du eigentlich nicht unbedingt benutzen zum Aufbau einer Seite, bzw. nur gezielt für einzelne Elemente, die immer gleich positioniert werden sollen. Beispielsweise macht es Sinn, ein Menü immer am oberen Bildschirmrand anzuzeigen, auch wenn ein User auf der Seite nach unten scrollt.
Relative Positionierung mit CSS:
http://www.mediaevent.de/tutorial/css-position-absolute-relative.html
Unter diesem Link findest du eine Erklärung, wie das mit der CSS-Positionierung genau funktioniert. -
Den meisten Elementen die ich habe ist keine position direkt zugewiesen. Ich habe die meisten divs mit margin von den Seiten bewegt und habe wenn es sein musste relativ benutzt außer für das Menü wie du schon sagtest. Mir ist durchaus bewusst das ich manche sachen absolute setzen slollte und manche eben relativ. Ich habe halt echt nur das Problem wenn ich das Browser Fenster schmäler rutscht die linke in dir rechte navi und wenn ich im Browser zoome zerstückelt es die Seite von der größe.
Ich werde mir deinen Link mal anschauen und morgen nochmal gucken ob ich es umgesetzt kriege. Ich versuche halt eine Lösung zu finden das die divs sich an sich net verändern aber kleiner und größer werden . Der Inhalt soll natürlich das gleiche machen und ja ansonsten gehe ich davon aus das wenn ich diese relative Positionierung mache sich alles divs sauber untereinander schieben und ich eine Seite habe die dann halt etwas gequetscht aussieht.
Ich würde gerne Bilder und quelltext zeigen aber kann ich nicht da es Firmenintern ist und copxrights mit sich bringt . -
Ich wurde mal gerne ein Beispiel deines Codes sehen
Das was du beschreibst ist wohl darauf zurückzuführen, dass du kein äusseres div hast mit einer festen Breite (width)
<div style="width: 1004px; box-sizing: border-box;"> <div style="width: 100%">Titel</div> <div>Inhalt</div> </div>
Ich würde dies einmal probieren mit dem äusseren div-container -
Guten Morgen,
Du hast recht das ich keinen äußeren div container habe meine primären divs die alles beinhalten sind die Navi, der Header und der content, das würde also heißen wenn ich alles in einen container rein schmeiße das sich mein Inhalt anpasst wenn ich mit relative und min height usw arbeite?
/*innerer-Seitenkontent*/
#middle
{
background-color : #******;
margin : 5%;
width : 90%;
position : relative;
height : 1600px;
border : 3px solid #abcdef;
box-shadow : 5px 5px rgba(0,0,0,0.5);
}
so sieht mein middle aus im content hier ist dann sozusagen der Inhalt der Seite sichtbar weil ich die Navi auf jeder Seite haben möchte und sich nur die Mitte verändern soll aber das ist ja nicht mein Problem Ich habe halt nur die schwierigkeit das die navi in meinen Content also auch in den middle rutscht.
/*äußerster-Rand*/
#naviBorderL
{
width : 17.5%;
position : absolute;
margin-top : 1%;
margin-left : 1%;
}
/*Navigationsbild*/
#brand
{
hier ist noch die URL etc.
width : 300px;
height : 230px;
}
/*innerer-Navigationsrand*/
#navLeft
{
width : 17.5%;
margin-left : 1.5%;
}
/*Navigationsmenue*/
#menue
{
margin-bottom : 0.5%;
width : 323px;
}
Ich hoffe das hilft ein wenig -
hm... also ich würde das folgendermassen angehen:
Ich habe den Code nicht getestet. Es kann sein, dass etwas nicht funktioniert...
Style:
nav, main, footer { width: 1004px; margin: 10px auto; }
Html
<nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a> </nav> <main> <h1>Web Browsers</h1> <p>Google Chrome, Firefox, and Internet Explorer are the most used browsers today.</p> <article> <h1>Google Chrome</h1> <p>Google Chrome is a free, open-source web browser developed by Google, released in 2008.</p> </article> <article> <h1>Internet Explorer</h1> <p>Internet Explorer is a free web browser from Microsoft, released in 1995.</p> </article> <article> <h1>Mozilla Firefox</h1> <p>Firefox is a free, open-source web browser from Mozilla, released in 2004.</p> </article> </main> <footer> <p>Posted by: Hege Refsnes</p> <p>Contact information: <a href="mailto:someone@example.com"> someone@example.com</a>.</p> </footer>
Erklärung
setzt eine feste Breite der Containerwidth: 1004px;
setzt den margin oben und unten auf 10px und rechts & links auf auto, was eine horizontale Zentrierung zur Folge hat.margin: 10px auto;
mit html5 sind einige interessante neue Tags dazugekommen. informier dich doch etwas genauer unter folgenden Links.
nav tag html5: http://www.w3schools.com/tags/tag_nav.asp
main Tag html5: http://www.w3schools.com/tags/tag_main.asp
article Tag html5: http://www.w3schools.com/tags/tag_article.asp
footer Tag html5: http://www.w3schools.com/tags/tag_footer.asp -
Hey Dankeschön,
das hat gut geklappt und die Links helfen auch sehr. Ich bin ein Praktikant und muss ne Webseite designen ich bin froh das ihr mir so helft :)
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
