floatendes, flexibles div zentriert neben feststehendem menü positionieren

dane7 · 28.07.2013

Ist es möglich, neben einem div (menü), welches immer links stehen soll, rechts ein Haupt-div mit flexibler Breite zu positionieren, welches den verbleibenden Raum zentriert einnehmen soll? Gleichzeitig soll dieses Haupt-div unter das Menü rutschen (+ sich verschmälern, min- + max-width), wenn man das Browserfenster ganz schmal zieht …
Wenn ja, wie geht das? So funktioniert es jedenfalls nicht:

HTML:

<body id="body">
  <div id="logo">
    <div id="logo-div"><a></a>
    </div>
    </div>
<div id="blume">
    <div id="menulinks"></div>
    <div id="menumitte"></div>
    <div id="menurechts"></div>
</div>
<div id="wrapper">
  <div id="stein">
  </div>
  <div id="eigenschaften"><p></p>
  </div>
  <div id="headline"><h1>Wir</h1>
  </div>
  <div id="txt">
    <h3 class="h3farbig"></h3>
    <p></p>
    </div>
</div>
<br class="clearfloat" />
</div>
</div>

Code:

#body {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	font-style: normal;
	line-height: 19px;
	color: #000;
	background-attachment: scroll;
	background-color: #FFF;
	background-image: url(Bilder/header-turmalin.png);
	background-repeat: repeat-x;
	background-position: left top;
}
#logo {
	height: 70px;
	text-align: right;
	margin-top: 15px;
	padding-bottom: 73px;
	padding-left: 430px;
}
#logo-div {
	min-width: 570px;
	max-width: 60%;
	margin-right: auto;
	margin-left: auto;
	position: relative;
}
#blume {
	background-image: url(Bilder/Blume390.png);
	background-repeat: no-repeat;
	background-position: 62px 0px;
	height: 400px;
	width: 460px;
	position: relative;
	float: left;
	clear: right;
}
#menulinks {
	width: 50px;
	left: 186px;
	top: 85px;
	position: absolute;
}
#menumitte {
	width: 50px;
	left: 237px;
	top: 55px;
	position: absolute;
}
#menurechts {
	width: 50px;
	position: absolute;
	top: 85px;
	left: 288px;
}
#wrapper {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	line-height: 19px;
	margin-bottom: 0px;
	min-width: 500px;
	max-width: 60%;
	float: left;
	margin-top: 0px;
	position: relative;
	left: 40px;
	margin-left: auto;
}
#stein {
	background-image: url(Bilder/fin.png);
	background-repeat: no-repeat;
	height: 94px;
	width: 100px;
	background-color: #FFF;
	float: left;
	margin-top: 55px;
	position: relative;
}
#eigenschaften {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	color: #000;
	height: 94px;
	text-align: left;
	vertical-align: top;
	line-height: 16px;
	letter-spacing: 1pt;
	padding-left: 0px;
	margin-top: 55px;
	position: relative;
	margin-left: 5px;
	width: 400px;
}
#headline {
	margin-top: 40px;
	padding-left: 5px;
	margin-bottom: 5px;
	float: left;
	min-width: 495px;
	max-width: 60%;
	text-align: left;
}
#txt {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	line-height: 25px;
	color: #000;
	text-align: justify;
	font-style: normal;
	font-weight: normal;
	margin: 0px;
	max-width: 60%;
	min-width: 495px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 5px;
	float: left;
}
.bildlinks {
	float: left;
	margin-right: 10px;
	margin-top: 3px;
}
.clearfloat {
	font-size: 1px;
	clear: both;
	height: 0px;
	line-height: 0px;
}

cythux · 28.07.2013

AW: floatendes, flexibles div zentriert neben feststehendem menü positionieren

RWD -> Mediaqueries
Theoretisch machbar, jedoch habe ich heute keine Zeit es mir genau anzusehen

dane7 · 31.07.2013

AW: floatendes, flexibles div zentriert neben feststehendem menü positionieren

Hat keiner eine Idee??

Isometric · 01.08.2013

AW: floatendes, flexibles div zentriert neben feststehendem menü positionieren

Hier kannst du dir ein Beispiel ansehen und auch herunterladen, wie man die sich verschiebenden Containern bei unterschiedlichen Auflösungen umsetzt.

http://www.initializr.com/try

Das passt zwar nicht genau auf deine Anforderung, aber wenn du das Prinzip verstanden hast, kannst du es bestimmt auf deine Anwendung umsetzten.

Kayko · 01.08.2013

AW: floatendes, flexibles div zentriert neben feststehendem menü positionieren

Hallo,
Ich vermute, du willst deine Website auch für Smartphones praktikabel machen.
Mir haben mal folgende Seiten weiter geholfen:
http://webdesignerwall.com/tutorials/css3-media-queries und
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/.

Ich habe damals in die HTML-Datei eine Basis-CSS eingebunden:

HTML:

<link href="css/base.css" rel="stylesheet" type="text/css"/>

In der Basis-CSS waren dann die CSS-Dateien, die für die verschiedenen Formate geschrieben wurden:

Code:

/* Basis-Stylesheets einbinden */
@import url(layout.css);

/* Handy- und Tablet-Layout einbinden */
@import url(small.css);
@import url(tablet.css);

/* Druck-Layout einbinden */
@import url(print.css);

In die größenbezogenen Stylesheets schreibst du als erstes für welche Bildschirmgröße du es haben willst:

zum Beispiel für ein Smartphone

Code:

@media screen and (max-width: 210px) { alle Angaben }

oder wenn du Bereiche festlegen willst:

Code:

@media screen and (min-width: 350px) and (max-width: 800px) { alle Angaben }

Denk an die letzte schließende Klammer dabei!

Ich hoffe, ich habe es verständlich erklärt.

LG
Kayko

cythux · 01.08.2013

AW: floatendes, flexibles div zentriert neben feststehendem menü positionieren

http://css-tricks.com/css-media-queries/

Code:

@import nicht verwenden

->je import ein http request

dane7 · 02.08.2013

AW: floatendes, flexibles div zentriert neben feststehendem menü positionieren

Ja, für Smartphones + Tablets praktikabel war der Gedanke dahinter – vielen Dank für eure Tipps + die tollen Links, werd´s gleich mal ausprobieren.