zentrieren von div/overflow

Unregistriert

ich hab mir schon soo waas gedacht..

ich glaube, wir haben da zwei verschieden ziele im kopf, bzw. ich habe mich da anfänglich wohl falsch ausgedrückt. das tut mir leid.
aber vielleicht können wir es ja nocheinmal versuchen:

ich möchte KEINE fixe höhe und breite der seite, die soll sich immer der auflösung anpassen, deshalb auch mein wolkenhintergrund mit jquery
ich möchte zwei divs mit inhalt und fixer größe
ich möchte das menu div horizontal links zentriert und in vertikal in der mitte zentriert
ich möchte das rechte inhlatsDIV mittig zwischen linkem div und rechtem (flexibelen) rand und horizontal in der mitte zentriert, also immer auf gleicher höhe mit dem linken div
dann möchte ich, bei kleinerer auflösung, bzw. wenn man den browser verkleinert, dass beim linken div vertikale scrollbalken auftauchen

soweit haben wir es ja auch schon geschafft, siehe hier:

http://test.thepetsitters.net/03referenzenNEU.html

das ist genauso wie es mir vorstelle,

bis auf den rechten div:

hier sind ja eh schon scrollbalken zu sehen. diese sollen auch bleiben, das div soll sich nur verkleinern lassen und der scrollbereich sich damit vergrößern, damit ich auch noch nach ganz unten scrollen kann.
bei meinen bisherigen versuchen, tauchte da immer wieder ein zweiter scrollbalken auf. den möchte ich aber nicht. hier bräuchte ich eine 100%ige höhe, damit er sich der trotz und mit seines eigenen scrollverhaltens der browsergröße anpasst.

in der obigen version ist der rechte div nicht horizontal zentriert, dh. er "hängt unter der decke"
und von unten verschwindet er beim zusammenschieben unten unterm browser.
die vertikale zentrierung ist auch nicht optimal.

deshalb geht es letztendlich nur noch um den rechten div, den ich ja dann in einen wrapper(box) gepackt habe, damit er nicht nach oben abdriftet, diese lösung sieht mir allerdings weder elegant noch effektiv aus, da ich das gleiche problem nun unten bekommen habe.

so, ich hoffe wir sind damit wieder oder endlich auf einem level. ich dachte immer, du wolltest mich ein wenig zappeln lassen oder testen, entschuldige mir bitte die unterstellung.

nette wochenendgrüße,
stephan

sejuma

Du willst einerseits ein flexibles Layout, andererseits hat die Navi eine fixe Breite. Damit kommt es bei bestimmten Konstellationen zu Überlappungen.

Deshalb letzter Versuch, aber mit diesen Nachteilen behaftet:

Navi vertikal zentrieren:

Code

#container {
	position: relative;
height: 600px;
	width: 320px;
min-width: 30%;
	clear: left;
	background-color: #ADFF2F;
	overflow:auto;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: 0px;
	float: left;
}

Alles anzeigen

#box und #distance2 löschen.

Code

#container2 {
position: absolute;
 left: 30%;
overflow: auto;
 height: 100%;
max-width: 68%;
	margin-top: auto;	padding: 25px;
	text-shadow:0px -1px 3px black;
	 /* Versatz links - Versatz oben - UnschÃ¤rfe (Blur) - Farbe */
}

Eine vetikale Znetrierung ist nur im Zusammenhang mit einer bestimmten Höhe möglich.

Es wäre vieles leichter, wenn du auf die vertikale Zentrierung der Navi verzichtest.
Dann könntest du ein zweispaltiges Layout nehmen.

Das Überlappungsproblem ergibt sich immer dann, wenn 320px Navibreite größer als 30% Bildschirmbreite sind.
Aus diesen Gründen halte ich fixe Layouts für besser, da stets kalkulierbar.

Unregistriert

das ist mir schon bewußt.

nur bin ich ja gerade daran, das layout zu ändern weil es mir nicht gefällt,
das bei großen bildschirmen bisher die navi oben am bildschirmrand klebte.

und das fixe layout ist auf jeden fall praktischer und leichter zu realisieren, nur finde ich
(persönlich - und das ist meine subjektive, ästhetische empfindung) dass es auf
einem großen monitor nicht schön aussieht, wenn da in der mitte eine kleine homepage zu sehen ist.
außerdem habe ich mir meinen großen monitor ja gekauft, um alles größer erleben zu können
und da habe ich (als designer) auch den anspruch, dem betrachter etwas bieten zu wollen,
was stimmig ist und nicht nur einfach herzustellen.

auf jeden fall danke ich dir echt sehr für deinen netten einsatz,
stephan

djheke

Nur für den Fall, dass du es dir wiedereinmal anders überlegst.

HTML

<!DOCTYPE HTML>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">

  <title>mnmnm</title>
  </head>
  <style type="text/css">


* {
 margin:0;
 padding:0;
 list-style:none;
}


html , body {
 overflow:hidden;
}




#wrapper {
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 width:80%;
 height:80%;
 margin:auto;
 background:#ddd;
}


#links {


 width:30%;
 height:100%;
 float:left;
 background:#dad;
}


#links:before {
 content:"";
 display:inline-block;
 vertical-align:middle;
 height:100%;
}


#links ul {
 display:inline-block;
 vertical-align:middle;
}
 
#rechts {
 margin-left:30%;
 background:#dda;
 overflow:auto;
 height:100%;
}










  </style>
  <body>


<div id="wrapper">
<div id="links">
 <ul>
 <li>Links</li><li>Links</li><li>Links</li><li>Links</li>
</ul>
</div> 
<div id="rechts">
  <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p> <p>Rechts</p>
</div>


  </div>


  </body>
</html>

Alles anzeigen

Unregistriert

danke.

wie ich das jetzt so sehe, ist das ergebnis dieses threads,
dass es keine lösung in css für mein problem gibt.

das heißt, dass ich mein design an die technischen möglichkeiten
eines beschränkten codes anzupassen habe? sorry, aber das kann ich
nicht akzeptieren..

trotzdem nochmals vielen dank für eure mühe und noch viel erfolg
beim weiteren coden.
meinetwegen kann dieser thread geschlossen werden.
stephan

Tags