✔ Bei großem Web-Inhalt, keine Scrollbalken zu sehen!

Davicito · 27. November 2012

Ich benötige mal Eure Hilfe, in Sachen CSS.

Wenn ich ein, vom Browser überdeckenden, zu großen Web-Inhalt habe, tauchen keine Scrollbalken am Browserrand auf.
Habt Ihr eine Idee? Eigentlich sollte es doch mit der Angabe: position:relative; gehen, oder?

CSS:

@charset "utf-8";

body{
	font-family: "Courier New", Courier, monospace;
	background-color: #BDD6F0; /*Hellblau RGB*/
}
/*nachfolgende Elemente sind Position:fixed; gesetzt */
...
.MenuContent{
 /*position: absolute;*/	
	position: relative;
	z-index: 1;
	display:block;	
	margin-top:none;
	left:160px;	
	width: 900px;
	height: auto;		
}

/*alle nachfolgenden Elemente, sind Position:relative; gesetzt*/
...

Div-tack

PHP:

...
echo'<div class="MenuContent">';					
				
if(isset($_GET['page'])) 
{	
	if((searchRights($_SESSION['userRights'], 'insert') || searchRights($_SESSION['userRights'], 'all privileges'))
	   && $_GET['page'] == 'MA-Eingabe.php')	
			include('MA-Eingabe.php');
	else if((searchRights($_SESSION['userRights'], 'update') || searchRights($_SESSION['userRights'], 'all privileges'))
	   && $_GET['page'] == 'MA-Update.php')
		include('MA-Update.php');
	else if((searchRights($_SESSION['userRights'], 'select') || searchRights($_SESSION['userRights'], 'all privileges'))
	   && $_GET['page'] == 'MA-Ausgabe.php')
		include('MA-Ausgabe.php');						
	else if(searchRights($_SESSION['userRights'], 'all privileges') && $_GET['page'] == 'disponentregistry.php')
		include('disponentregistry.php');							
	else echo'<span style="position:fixed; left:450px; top:400px;">Sie haben nicht die benötigten Rechte! </span>';						
}
echo'</div>';
...

LG

holzmensch · 27. November 2012

Code:

overflow:auto;

Davicito · 28. November 2012

Overflow:auto kenne ich nur, das mann das in Zusammenhang mit Elementen/CSS-Klassen verwendet. aber ich möchte ja, das mein Browser, Scrollbalken hat, wenn der gesamte Seiteninhalt größer ist, als mein Browser-Fenster.

Hat jemand noch eine Idee?

Gruß.

holzmensch · 28. November 2012

Code:

overflow:auto;

Ist die Lösung, ob das nur auf ein Element oder auf die ganze Seite anwenden willst bleibt dir überlassen.

Davicito · 28. November 2012

ok verstehe... aber wo muss ich es denn hinschreiben? Ich kann das doch nicht in irgend eine Klasse in der Syle-css-Datei schreiben

Hatte, so ziemlich am Anfang mit position:absolute oder position:relative auch Scrollbaren hin bekommen, wenn der Web-Inhalt zu groß war. Ohne das ich overflow:auto; benutzen musste. Nur jetzt, wenn ich position:relative; schreibe, bekomme ich keine Srcollbaren mehr, was sehr merkwürdig ist! Und jetzt zusätzlich overflow schreiben um sie wieder zu bekommen, ist schon komisch.

holzmensch · 28. November 2012

Daran ist nichts komisch, nur logisch. Die Behandlung des Überhangs hat nichts mit der Art der Positionierung zutun. "So ziemlich am Anfang" hat dein Browser automatisch den overflow-Wert verändert. Du kannst auch Klassen mit dem overflow-Attribute deklarieren, solange der body-Tag auch den Klassennamen bekommt.

timestamp · 28. November 2012

Du kannst nicht nur Klassen oder IDs Styleeigenschaften zuweisen, sondern auch Objekten:

CSS:

body{
  overflow: auto;
}
div{
  border: 1px solid #000;
}

Oder Verschachtelungen:

CSS:

div p{ /* p Tags die innerhalb eines divs stehen */
  font-family: helvetica;
}
div.meineKlasse{ /* Divs mit der Klasse meineKlasse
  color: #f00;
}
p.meineKlasse{
  color: #0f0;
}

Davicito · 29. November 2012

OK im body habe ich das overflow gesetzt. Aber auch das führt zu keinem Ergebnis.

CSS:

@charset "utf-8";

body{
	overflow:auto;
	font-family: "Courier New", Courier, monospace;
	background-color: #BDD6F0;
}

.LogoHeader{
	position: fixed;
	z-index: 2;
	top:1px;
	margin-top: none;
	margin-left: none;
	width: 180px;
	border: 150px;
	height: 162px;				
}
.LayoutHeader{
	position: fixed;
	z-index: 2;
	top:3px;
	margin-left:195px;
	width: 1000px;
	height: 135px;
	border-bottom-right-radius: 10px;
	border-top-right-radius: 80px;
	background: #040B66;
	font: bold 27px "Lucida Grande", "Trebuchet MS", Verdana;
	color:#BDD6F0;
	text-align:center;
	
	text-decoration:none;
}
.InfoBalken{
	position:fixed;
	z-index:3;
	display:block;	
	
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	
	height:30px;
	width:150px;
	background: red;
	margin-left: 900px;
	font: bold 15px "Lucida Grande", "Trebuchet MS", Verdana;
	color: black;
	top: 100px;
	text-align: center;
	text-decoration:none;
	text-shadow: 0px 2px 3px #666;
}
.Logout li{
	position:fixed;
	z-index: 3;
	display:block;	
	top: 100px;
	margin-left: 1100px;
	width: 800px;
	list-style-type: none;
	padding:0;
}
.Logout li a{	
	display:block;
	background: green;
	border-top-right-radius: 8px;
	border-top-left-radius: 8px;
	border-bottom-right-radius: 8px;
	border-bottom-left-radius: 8px;
	
	font: bold 15px "Lucida Grande", "Trebuchet MS", Verdana;
	color: black;
	height:30px;
	width:50px;
	text-align: center;	
}
.LeftStack{
	position: fixed;
	z-index: 2;
	top: 175px;
	width: 152px;
	height: 800px;	
	margin-left: none;	
	background: #8AB0D9;	
}
.HorizontalLine{
	position: fixed;
	z-index: 2;
	top:165px;
	margin-left:0;	
	width: 152px;
	height: 6px;
	background: yellow;
}
.VerticalLine{
	position: fixed;
	z-index: 2;
	top:3px;
	margin-left:185px;
	margin-top:0px;	
	width: 6px;
	height: 135px;
	background: yellow;
}
.MenuContent{	
	position: relative;
	z-index: 1;	
	width: 900px;
	height: 25px;
	border: none;	
	margin-left:180px;	
}
.MenuFormularContent{
	position: relative;	
	z-index: 1;
	top:200px;
	left: 400px;
	display: block;
	width: 21%;
	height: auto;		
	border: 2px solid black ;	
}
.LogContent{
	position: relative;	
	z-index: 1;
	top:400px;	
	display: block;
	width: 182px;
	height: auto;		
	left: 600px;
	border: 2px solid black ;
	
}
/*-------------------------------- Features of Main-Menu --------------------------------*/

.menu {
	position:fixed;
	z-index: 3;	
	clear: both;
	width: auto;
}
.menu ul{	
	margin:0;
	padding: 0;		
	list-style-type: none;	
}
.menu ul li a{	
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	
	margin:none;	
	display: block;
	margin-top: 7px;
	background: #040B66 no-repeat right top;
	font: bold 17px "Lucida Grande", "Trebuchet MS", Verdana;
	text-align:center;
	width: 132px;	
	padding: 10px;	
	box-shadow: 8px 8px 8px #666;
}

.menu ul li a:visited, .menu ul li a:active{
	color: #BDD6F0;  
}

.menu ul li a:hover{
	background-color:#999; 
}

/*-------------------------------- Features of Sub-Menu --------------------------------*/
.menu ul ul li a{	
	margin:none;
	display: block;
	background: #8AB0D9 no-repeat right top;
	font: bold 17px "Lucida Grande", "Trebuchet MS", Verdana;
	width: 130px;
	padding: 5px; 
	text-indent: 20px;
	text-align:left;
	text-decoration:none;	
}

.menu ul ul li a:visited, .menu ul ul li a:active{
	color:#040B66;  
}

.menu ul ul li a:hover{	
	background-color:#999;	
}

.menu ul li > ul{
	display:none;
}
.menu ul li:hover > ul{
	display:block;	
}
/*-------------------------------- Features of Sub-Menu --------------------------------*/
</style>

Immer wenn der geladene Menü-Content zu groß wird, sollen Scrollbaren am Browserrand auftauchen, um den Inhalt zu scrollen. Alle anderen Elemente sollen an Ort und Stelle bleiben(fixed).

nochmal der PHP-Codeschnipsel

PHP:

...
echo'<div class="menu">'; 
     ....
echo'</div>';	

echo'<div class="InfoBalken">';
	....													
echo'</div>';	

echo'<div class="Logout">';			
	echo'<li><a href="logout.php">Logout</a></li>';
echo'</div>';

echo'<div class="MenuContent">';					
if(isset($_GET['page'])) 
{	
	if((searchRights($_SESSION['userRights'], 'insert') || searchRights($_SESSION['userRights'], 'all privileges'))
	   && $_GET['page'] == 'MA-Eingabe.php')	
		include('MA-Eingabe.php');
	else if((searchRights($_SESSION['userRights'], 'update') || searchRights($_SESSION['userRights'], 'all privileges'))
	   && $_GET['page'] == 'MA-Update.html')
		include('MA-Update.html');
	else if((searchRights($_SESSION['userRights'], 'select') || searchRights($_SESSION['userRights'], 'all privileges'))
	   && $_GET['page'] == 'MA-Ausgabe.php')
		include('MA-Ausgabe.php');						
	else if(searchRights($_SESSION['userRights'], 'all privileges') && $_GET['page'] == 'disponentregistry.php')
		include('disponentregistry.php');							
	else echo'<span style="position:fixed; left:450px; top:400px;">Sie haben nicht die benötigten Rechte! </span>';
}
echo'</div>';
...

holzmensch · 29. November 2012

Dann mach eben overflow:scroll

Davicito · 29. November 2012

Ok... habe ich auch gemacht... dann zeigt er mir die Scrollleisten am Fensterrand des Browsers an.. allerdings ohne Scrollbaren!!

Ich weiß auch langsam nicht mehr weiter, wie das so funktionieren soll.. so als wären die völlig deaktiviert. Hab nun schon Google Chrome, Firefox und IE ausprobiert und immer das selbe.

Habt ihr noch ne andere Idee?

Gruß.

✔ Bei großem Web-Inhalt, keine Scrollbalken zu sehen!

Davicito

Erfahrenes Mitglied

holzmensch

Erfahrenes Mitglied

Davicito

Erfahrenes Mitglied

holzmensch

Erfahrenes Mitglied

Davicito

Erfahrenes Mitglied

holzmensch

Erfahrenes Mitglied

timestamp

Mitglied Käsekuchen

Davicito

Erfahrenes Mitglied

holzmensch

Erfahrenes Mitglied

Davicito

Erfahrenes Mitglied

Neue Beiträge