✔ Menü mit absolute oder fixed / Elternelement

Status
Nicht offen für weitere Antworten.
Jan-Frederik Stieler

Jan-Frederik Stieler

Monsterator
Moderator
Hallo,
also ich möchte das das Menü (id="right") beim scrollen immer mitgeführt wird.
Das funktzioniert ja mit
PHP: 
position:fixed

mein Problem ist das als Elternelement das Browserfenster verwendet wird aber es soll das Div mit der Id="all" verwendet werden, da dieses eine max-width zugewiesen bekommen hat.
Wie erreiche ich den das?

Code:
PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>herzlich Willkommen bei büro:exit</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="bueroexit">
	<link rel="stylesheet" type="text/css" href="css/position.css">
	<link rel="stylesheet" type="text/css" href="css/layout.css">
</head>

<body>
<!-- umschließendes Div -->
<div id="all">
<!-- Content Bereich -->
	<div id="filling">

	</div>
<!-- Content Bereich Ende -->
<!-- rechtes hauptmenue -->
	<div id="right">
		<ul id="menue">
         		<li id="firmenlogo">Firmenlogo</li>
         		<li>test</li>
         		<li>test</li>
         		<li>test</li>
		</ul>
	</div>
<!-- rechtes Hauptmenue ende -->
</div>
<!-- umschließendes Div ende -->
</body>
</html>

PHP: 
body
{
	background: #F2E3ED;
	color: #000000;
	font-family: arial, helvetica, sans-serif;
	font-size: 100.1%;
}

#all
{
         font-size: 0.8em;
         border: solid 1px #FF0000
}

#menu {

	top:10px;
	left:170px;
	width:130px;
	border:1px solid #888;
	padding:10px;
	text-align:center;
	font-weight:bold;
         color: #000;

}

#content
{
	position:relative;
	background:#eeefff;
         border: solid 1px #000000;

}

#filling
 {
	border:1px solid #888;
	padding:10px;
	text-align:left;

}

#firmenlogo
{
         background: url(../images/firmenlogo.png);
         color:#eee;
	width:150px;height:91px;
	border:1px solid red;
	background-repeat:no-repeat;
}

PHP: 
body
{
         padding: 0px;
	text-align: center;
}

/* ################   Position ################  */

#all
{
         margin: 0 auto;
	max-width: 1024px;
	padding: 0px;
	text-align: left;
}

#content
{
	margin: 20px 0 0 0;
	padding: 0px 0px 0px 0px;
	position: relative;
	overflow: hidden;

}

#right
{
	position: fixed;
	right: 0;
	top: 10px;
	width: 240px;
}
 
Zuletzt bearbeitet:
Hi,

wo ist denn da der Unterschied, ob nun der Dokumentkörper oder das DIV #all als Elternelement fungiert, denn mit position:fixed wird das Element eh aus dem normalen Textfluss genommen und bleibt so oder so beim Scrollen der Seite an der definierten Stelle fixiert.
 
Sorry, ich kann dein Problem nicht nachvollziehen, denn das DIV #all ist doch das Elternelement.
 
Ja, genau. Aber bei mir wird anstatt des Divs das Browserfenster als Elternelement genommen. Sonst würde doch das Menü innerhalb des roten rahmens angezeigt werden, oder?

Gruß
 

Anhänge

  • sshot-1.jpg
    sshot-1.jpg
    21,8 KB · Aufrufe: 22
Okay, jetzt hab ich es verstanden ;)

Der Wert fixed bezieht sich aber immer auf das Browserfenster, unabhängig davon, ob neben dem Dokumentkörper ein weiteres Elternelement existiert, oder nicht.
 
Probier's mal hiermit ;-)

Code: 
#right {
    position:fixed;
    right:50%;
    margin-right:-502px;
    top: 10px;
    width: 240px;
}
 
Mit right:50% sitzt der rechte Elementrand zunächst in der Fenstermitte und wird mit dem negativen margin-right-Wert an die gewünschte Postion "geschoben". ;)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück