Archief - Horizontaal --- vertikaal menu

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
s

scorpken

Legacy Member
Ik kanner ni aan doen, maar ik slaag er maar ni in van da te laten werken
Z

Zero Grav

Legacy Member
'k Denk toch dat ge iets meer tijd nodig hebt dan een 12tal minuten om die tutorial te overlopen.
Als ge em overloopt hebt ge ten eerste al een groter begrip van wat alle functies ervan doen, ten tweede kunt ge uw menu dat ge nu hebt er gewoon inzetten. Zo hoeft ge niet verder te bouwen op uw huidig menu, dat ondertussen wellicht een pak overbodige code zal bevatten.
s

scorpken

Legacy Member
Code: 
* html { overflow: hidden; }							/* enkel IE kent een object boven <html>, dit wordt dus enkel door IE gezien */
body {										/* toegepast op de body van alle paginas */
	 color: black;								/* tekst kleur van de pagina is zwart*/
	 margin: 0;
	 padding: 0;
	 border: 0;
	 width: 100%;
 	 height: 100%;
	 background-color: white;						/* achtergrondkleur van de pagina is wit*/
	 font-family:verdana, arial, sans-serif; font-size:76%;
	 overflow: hidden;
}
#randen {
border-left: 2px solid #996600;
border-right: 2px solid #996600;
}
#background {
	 position:absolute; z-index:100; 
	 top: 140px; left: 240px;
}
#page_header {									/* bevat het logo en de titel */
	 position: absolute;
	 top: 0; left: 0;
	 width: 60%;								/* de breedte van de pagina blijft 1020px */
	 height: 90px;								/* hoogte van de kop is 90px */
	 background-color : #996600;						/* achtergrondkleur van de kop is grijs */
	 z-index: 10;
	 border: 0;
	 padding: 0;
	 margin: 0;
}
#page_header img {
	 float: left;								/* logo staat links */
	 text-align: center;							/* tekst wordt gecentreerd */
	 margin: 5px 20px 0 20px;
	 width: 120px;
	 height: 60px;
}
#title {									/* titelblok */
	 width: 60%;								/* titel breedte is 60% van 1020px */
	 text-align: center;							/* tekst wordt gecentreerd */
	 float: left;								/* titel komt links te staan naast het logo */
	 color : rgb(237, 227, 213);								/* tekstkleur is wit */
	 font-style: italic;							/* cursief */
}
#title h1 {									/* titel van de pagina */ 
	 font-size: x-large;							/* 3 keer groter dan normaal */
	 margin-bottom: 0px; margin-top: 10px;
}
#title h2 {									/* subtitel van de pagina */
	 font-size: small;							/* groter dan normaal */
	 margin: 0; padding: 0;
}

#location {									/* locatie gedeelte (de waar-ben-ik-nu links)*/
	 position: absolute;
	 top: 85px; left: 0;
	 width: 60%;								/* de breedte van de pagina blijft 1020px */
	 height: 30px;
	 margin: 5px 0 0 0;
	 z-index: 10;
	 background: white;
	 line-height: 25px;
         color : #006600;
	 background-color : Silver;
	 padding : 0px 0px 0px 0px;
}

#container {									/* alles tussen header en footer van de pagina */
}

#navigation {        								/* het navigatie menu (linker menu) */
	 position: absolute;
	 top: 0;left: 0;
	 font-size: 14px;							/* tekst grootte */
	 font-weight: bold;							/* tekst word vet gezet */
	 padding: 120px 0 0 0px;
	 z-index: 10;
}
#navigation ul {
	list-style: none;
	margin: 0px; padding: 0px;
}
#navigation li {
	border: 0;
	height: 32px;
	padding: 0px;
        display: inline; 
}
#navigation li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px; /*padding inside each tab*/
border-right: 2px solid rgb(237, 227, 213); /*right divider between tabs*/
border-bottom: 2px solid rgb(237, 227, 213);
color : rgb(237, 227, 213);
background: #996600; /*background of tabs (default state)*/
}
#navigation li a:hover
{
background-color: rgb(237, 227, 213);
color: #996600;
}

#left {
	 position: absolute;
	 top: 400px; left: 0;
	 padding-left: 15px;
	 font-size: 14px;							/* tekst grootte */
	 font-weight: bold;							/* tekst word vet gezet */
	 width: 200px;
	 height: 300px;
	 z-index: 10;
}
#left div.galleries {
	height: 270px;
	width: 180px;
	overflow: auto;
	z-index: 10;
}
#left div.galleries div.galleryElem a div.shadow img { border: 0; padding: 0; margin: 0;}
* html #left div.galleries div.galleryElem a div.shadow img { cursor: default;}
#left div.galleries div.galleryElem { clear: both; padding: 3px 0 3px 0;}
#left div.galleries div.galleryElem a ul li.gallery_title  { padding: 0; margin: 0; font: bold small Arial; float: left;}
#left div.galleries div.galleryElem a ul li.gallery_desc  { clear: both; padding: 0; margin: 0; font-size: smaller; color: #776;}
#left div.galleries div.galleryElem a ul { float: left; list-style: none; padding: 0; margin: 0 0 0 10px;}
#left div.galleries div.galleryElem a div.shadow { float: left; width: 50px; height: 50px; overflow: hidden;}
#left div.galleries div.galleryElem a{
	cursor: pointer;
	width: 175px;
	height: 50px;
	border: 0;
	padding: 0;
	margin: 0;
	background-color: white;
	color: black;
	text-decoration: none;
}
/*
#content {
	position: absolute;
	top: 0; left: 0;
	height: 100%;
	width: 100%;								/* inhoud is 550px breed */
/*	overflow: auto;
	z-index: 5;
	text-align: center;
}

*/
#content table {
	text-align: center;
	border: 1px solid #C0C0C0;
	background-color: #FFFFCC;
	border-collapse: separate;
	border-spacing: 10px;
	table-layout: fixed;
}

div#content { margin: 120px 210px 0 200px; height: 100%;}			/* this line is for all browsers */
* html div#content { margin: 0; }						/* this line overwrites previous settings for IE only */
#content iframe {								/* obsolete - obsolete - obsolete */
	width: 50%;
	height: 80%;
	border: 0;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 135px;
	left: -20px;
}
#content object {								/* gebruik van iframes wordt afgeraden, */
	width: 100%;								/* daarom dus een object voor bepaalde pagina's */
	height: 540px;								/* zo blijft het template steeds de layout bepalen */
	border: 0;
}
#content img#rendered {
	width: 95%;
	height: 420px;
	border: 0;
	margin: 0;
	padding: 0;
}
#right {									/* rechterdeel van de paginas */
	position: absolute;
	top: 170px; right: 530px;
	margin: 0px;
	width: 179px;
	z-index: 10;
	background-color: white ;
}
#right fieldset {								/* alle fieldsets aan de rechterkant vd pagina */
	padding: 5px; 								/* behalve fieldsets in forms !! */
	margin: 0 0 10px 0;
       border-color:#006600;
color:#006600;
}
#contextmenu {									/* nieuwsmenu op de pagina nieuws */
	text-align: left;							/* tekst word links uitgelijnd */
}
#contextmenu h1 {								/* deel van het nieuwsmenu */
	font-size: 15pt;							/* font groote van 15pt */
	background-color: #006600;							/* achtergrondkleur van de kop is grijs */
	margin: 0;
	padding: 0 0 0 2px;
	color: white;
}
#page_footer {
	text-align: center;							/* tekst wordt gecentreerd */
	font-size: 10pt;							/* tekst grootte is 10pt */
	position: absolute;							/* de positie staat onderaan scherm */
	left: 0;
	bottom: 0;								/* soms kan het zijn dat ie een pixel laat wegvallen */
	width: 60%;
	background-color: #996600;
	z-index: 10;
	line-height: 35px;
	border: 0 solid white;
	margin: 0;
}
#page_footer a { color: white }
.clearboth { clear: both; }

p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;}
em { font-style:normal;}
input {
	padding: 0;
	margin: 0;
}
form fieldset { border: 0; }							/* fieldset tussen de form-tags voor xhtml-compatibiteit */
#ingelogd {
	border: 1px dashed #ccc;						/* grijze onderbroken lijn als kader */
	float: left;
}

/*label {
  float: left;
  text-align: left;
  margin-right: 0.5em;
  display: block;
}*/

Hoe kan ik deze hele pagina centreren?
G

GregoryCo

Legacy Member
waarom heb je de body een hoogte en breedte enz gegeven?
centreren doe je zo: margin:auto;
dan staat hij in het midden, maar wel niet tegen de bovenrand van uw browser
Je maakt best een aparte div aan waarin je al uw divs stopt (en centreerd die met margin:auto;)
s

scorpken

Legacy Member
dat gaat niet, ookal geprobeerd.
der is echt iets mis met die CSS
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan