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.

scorpken

Legacy Member
Code:
#navigation {        								/* het navigatie menu (linker menu) */
	 position: absolute;
	 top: 0;left: 0;
	 font-size: 14px;							/* tekst grootte */
	 font-weight: bold;							/* tekst word vet gezet */
	 width: 175px;
	 padding: 115px 0 0 5px;
	 z-index: 10;
}
#navigation ul {
	list-style: none;
	margin: 0px; padding: 0px;
}
#navigation li {
	border: 0;
	height: 32px;
	padding: 0px;
	margin: 5px 0 5px 0;
}
#navigation li.active a { background: url(../img/button_on.jpg); cursor: default; }
#navigation li.active a em { position: relative; top: 5px; left: 20px; }
#navigation li.active em:after { content: "\00A0\00BB" attr(cite); }
#navigation li a {
	border: 0;
	display: block;
	background: url(../img/button_off.jpg) no-repeat;
	margin: 0px;
	height: 32px;
	width: 175px;
	text-decoration: none;
	color: white;
}
#navigation li.active a:hover { color: white; }
#navigation li a em { position: relative; top: 0px; left: 20px; }
#navigation li a:hover em { position: relative; top: 5px; left: 20px; }
#navigation li a:visited { color: white; font-style: normal; }
#navigation li a:hover {
	background: url(../img/button_on.jpg);
	color: #996600;
}

Hoe maak ik hiervan een horizontaal menu?
Heb nog nooit css gedaan dus zouet echt ni wete

GregoryCo

Legacy Member
Staat nu toch verticaal? Om ze horizontaal te maken moet je normaal gezien float:left (of right) gebruiken

scorpken

Legacy Member
Ja, toen ik mijn stageverslag aan het schrijven was viel dit me ook meteen op.
:-D.

bedankt!

GregoryCo

Legacy Member
In een van de eerste drie denk ik, je moet maar overal eens proberen.

Maar staat het menu nu verticaal?

scorpken

Legacy Member
[B!'X!R']['@(V);11196114 zei:
mag ik eens uw html code?

PHP:
<?php

require_once "HTML/Template/IT.php";
require "inc/cms.inc";

define( "menuLine", "        <li CLASS><a href=\"sam.php?page=PAGE\"><em>DISPLAY_NAME</em></a></li>\n");
define( "menuNotLoggedIn", "<fieldset>\n    <legend>Login hier !</legend>\n    <form method=\"post\" action=\"login.php\">\n    <fieldset>\n      <p><label for=\"username\">Naam :</label><br /><input name=\"fname\" id=\"username\" value=\"voornaam\" type=\"text\" onfocus=\"value=''\" /><br /><input name=\"lname\" value=\"familienaam\" type=\"text\" onfocus=\"value=''\" /></p>\n      <p><label for=\"paswoord\">Paswoord :</label><br /><input name=\"pass\" id=\"paswoord\" type=\"password\" /></p>\n      <input value=\"Aanmelden\" name=\"submit\" type=\"submit\" />\n    </fieldset>\n    </form>\n    </fieldset>\n");
define( "menuLoggedIn", "<fieldset>\n    <legend>Welkom !</legend>\n    <form method=\"post\" action=\"logout.php\"><fieldset>\n  <p>U bent ingelogd als<br />FNAME LNAME</p>\n      <input value=\"Uitloggen\" name=\"submit\" type=\"submit\" /></fieldset></form> <a href=\"sam.php?page=personal\"> Mijn pagina </a> </fieldset>\n");
define( "contextMenu", "<fieldset>\n      <div id=\"contextmenu\">\n      <h1>PAGE</h1><br/>\nCONTEXT_LINE      </div>\n    </fieldset>\n");
 



header("Vary: Accept");
if (stristr($_SERVER["HTTP_ACCEPT"], "application/xhtml+xml")):
    header("Content-Type: application/xhtml+xml; charset=utf-8");
else:
    header("Content-Type: text/html; charset=utf-8");
endif;

function setVars ($scope, $ITtemplate)
{
  while ($row = mysql_fetch_array($scope))
  { $ITtemplate->setVariable(strtoupper($row["name"]), $row["code"]); }
  return $ITtemplate;
}

/* initialisations */
if (!$page = $_GET['page']): $page = "news"; endif;
$connection = connectCMS();

$template = new HTML_Template_IT("./templates");
$template->loadTemplatefile("default.tpl", true, true);
$template->setCurrentBlock("GENERAL");
session_start();
$loggedIn = FALSE;

/* logged in ? */
if ($sessionID = session_id()) {			// Assign the current session's ID to $sessionID
//if ($sessionID = $_COOKIE["samConn"])
//{
//  $content = mysql_query ("SELECT u.lname,u.fname,u.classID,u.usertype from connections c,users u WHERE c.ID=$sessionID AND c.userID=u.autoID AND c.lname=u.lname", $connection) or die(mysql_error());
  $content = mysql_query ("SELECT u.lname,u.fname,u.classID,u.usertype from loggedInUsers l,users u WHERE l.sessionID=\"$sessionID\" AND l.userID=u.autoID AND l.lname=u.lname", $connection) or die(mysql_error());
  if ($row = mysql_fetch_array($content)): $loggedIn = TRUE; endif;
  $lname = $row["lname"]; $fname = $row["fname"]; $loggedInUsertype = $row["usertype"];
};
/* fill in the location 
   This happens first, I am retrieving data for further in the page too*/
$tmpPage = $page;
$EOList = FALSE;
while (!$EOList) {
$content = mysql_query ('SELECT name,display_name,parentID,orderID FROM pages WHERE name="'. $tmpPage .'"', $connection) or die(mysql_error());
$row = mysql_fetch_array($content);
if ($row["name"] == $page): $pageDisplayName = $row["display_name"]; endif;		/* this will be needed further on */
$tmpLocation = '<a href="sam.php?page='. $row["name"] .'">'. $row["display_name"] .'</a>' .$tmpLocation;
if (!$tmpPage = $row["parentID"]): 
  $EOList = TRUE; 
else:
  $tmpLocation = '&nbsp;/&nbsp;' .$tmpLocation;
  if ($tmpPage != "/"): $parentPage = $tmpPage; endif;
endif;
}
$template->setVariable("LOCATION", $tmpLocation);

/* fill in the info all pages have in common */
$content = mysql_query ('SELECT name,code FROM content WHERE page="all"', $connection) or die(mysql_error());
$template = setVars ($content, $template);

/* fill in the page specific info */
$content = mysql_query ('SELECT name,code FROM content WHERE page="'. $parentPage .'" AND NOT (name="'. $page .'") UNION ALL SELECT name,code FROM content WHERE page="'. $page .'"', $connection) or die(mysql_error());
$template = setVars ($content, $template);

/* create the menu */
$contentMenu = mysql_query ('SELECT name,display_name,orderID FROM pages WHERE parentID="/" ORDER BY orderID', $connection) or die(mysql_error());
while ($row = mysql_fetch_array($contentMenu)) {
  $tmpMenuLine = menuLine;
  $tmpMenuLine = str_replace("PAGE", $row["name"], $tmpMenuLine);
  $tmpMenuLine = str_replace("DISPLAY_NAME", $row["display_name"], $tmpMenuLine);
  if ($row["name"] == $page): $tmpMenuLine = str_replace("CLASS",'class="active"',$tmpMenuLine); else: $tmpMenuLine = str_replace("CLASS","",$tmpMenuLine); endif;
  $menu .= $tmpMenuLine;
}
$template->setVariable("MENU", $menu);

/* show the correct LOGIN or LOGOUT window */
if ($loggedIn)
{
  $tmpMenuLoggedIn = str_replace("FNAME",$fname,menuLoggedIn);
  $tmpMenuLoggedIn = str_replace("LNAME",$lname,$tmpMenuLoggedIn);
  $template->setVariable("RIGHT_LOGIN", $tmpMenuLoggedIn); 
}
else { $template->setVariable("RIGHT_LOGIN", menuNotLoggedIn); }

/* assemble the context menu if needed */
#$context = mysql_query ("SELECT name,display_name FROM pages WHERE parentID=\"$page\" OR parentID=\"admin\" ORDER BY parentID,orderID", $connection) or die(mysql_error());
$context = mysql_query ("SELECT name,display_name FROM pages WHERE parentID=\"$page\" ORDER BY orderID", $connection) or die(mysql_error());
while ($row = mysql_fetch_array($context)) {
  $contextLine .= "        <a href=\"sam.php?page=". $row["name"] ."\">". $row["display_name"] ."</a><br />\n";
}
if ($contextLine)
{
  $tmpContextMenu = contextMenu;
  $tmpContextMenu = str_replace( "PAGE", $pageDisplayName, $tmpContextMenu );
  $tmpContextMenu = str_replace( "CONTEXT_LINE", $contextLine, $tmpContextMenu);
}
/* assemble the ADMIN contextmenu */
if (($loggedIn) && ($loggedInUsertype <= 1))
{
  $contextLine = "";
  $context = mysql_query ("SELECT name,display_name FROM pages WHERE parentID=\"admin\" ORDER BY orderID", $connection) or die(mysql_error());
  while ($row = mysql_fetch_array($context)) {
    if ($row["name"] == "cms")
    {
      $contextLine .= "        <a href=\"admin/cmsadmin.php\">". $row["display_name"] ."</a><br />\n";
    } else
    {
      $contextLine .= "        <a href=\"sam.php?page=". $row["name"] ."\">". $row["display_name"] ."</a><br />\n";
    };
  }
  $tmpContextMenu .= contextMenu;
  $tmpContextMenu = str_replace( "PAGE", "Admin", $tmpContextMenu );
  $tmpContextMenu = str_replace( "CONTEXT_LINE", $contextLine, $tmpContextMenu);
}
		$tmpLeftContext .= "      <div class=\"shadow\"><img src=\"gallery/$album/thumbs/small/".$row["image"]."\" /></div>\n";
		$tmpLeftContext .= "      <ul><li class=\"gallery_title\">".$row["name"]."</li><li class=\"gallery_desc\">".$albumDesc."</li></ul>\n";

if ($contextLine): $template->setVariable("RIGHT_CONTEXT", $tmpContextMenu); endif;
/* assemble the LEFT context menu if needed */
if (substr($page,0,7)=="gallery") {
	$tmpLeftContext = "";
	$contentLeftContext = mysql_query ('SELECT * FROM galleries ORDER BY uploaded_on', $connection) or die(mysql_error());
	$tmpLeftContext .= "Kies je album hier: \n";
	$tmpLeftContext .= "<div class=\"galleries\">\n";
	while ($row = mysql_fetch_array($contentLeftContext)) {
#		if ($i==1): $tmpLeftContext .= "<ul>\n<li><a href=\"#nogo\">$i\n<!--[if IE 7]><!-->\n</a>\n<!--<![endif]-->"; endif;
		$album = str_replace (" ", "", $row["name"]);
		$albumDesc = $row["description"];
		if (strlen($albumDesc)>15): $albumDesc = substr($albumDesc,0,11)." ..."; endif;
		$tmpLeftContext .= "    <div class=\"galleryElem\">\n      <a href=\"sam.php?page=gallery_$album\">\n";
		$tmpLeftContext .= "      </a>\n    </div>\n";
#		if ($i==1): $tmpLeftContext .= "<!--[if lte IE 6]>\n</a>\n<![endif]-->\n</li>"; endif;
#		if ($i==1): $tmpLeftContext .= "  </a>\n</li>\n"; endif;
	};
	$tmpLeftContext .= "</div>\n";
	$template->setVariable("LEFT_CONTEXT", $tmpLeftContext);
};
//
//


//
//
/* finish up */
$template->parseCurrentBlock();
$template->show();
?>

GregoryCo

Legacy Member
hmm sorry ik ken niets van php :p
maar als ik goed kijk zie ik niet veel divs staan in uw code?

scorpken

Legacy Member
Dees is de template pagina:

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript">
	var t;
	window.onload=resetTimer;
	document.onkeypress=resetTimer;
	document.onmousedown=resetTimer;
	document.onmousemove=resetTimer;

	function logout()
	{
	        location.href='logout.php'
	}
	function resetTimer()
	{
	        clearTimeout(t);
	        t=setTimeout(logout,900000) //logs out in 30 minutes
	}
</script>
<head>
  <link rel="stylesheet" type="text/css" media="screen" href="css/general.css" />
  <link rel="stylesheet" type="text/css" media="print" href="css/print.css" />
<link rel="stylesheet" media="all" type="text/css" href="css/gallery.css" />
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="css/gallery_ie.css" />
<![endif]-->
  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  <meta name="Author" content="" />
  <!-- BEGIN GENERAL -->
  <meta name="Keywords" content="school" />
  <meta name="Description" content="" />
  <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
  <link rel="icon" href="img/favicon.ico" type="image/ico" />
  <title>{TITLE}</title>
</head>
<body>
<div>
  <img id="background" src="{BACKGROUND}" alt="" title="" /> 
</div>
<div id="page_header">
  <img alt="" src="img/olve.jpg" />
  <div id="title">
      <h1>{SCHOOLNAME}</h1>
      <h2>{SCHOOLCOMMENT}</h2>
  </div>
</div>
<div id="location">
	&nbsp;&nbsp;&nbsp;&nbsp;U bevindt zich hier &nbsp;&nbsp;&gt;&gt; {LOCATION} 
</div>
<div id="container">
  <div id="navigation">
    <ul>
{MENU}    </ul>
  </div>
  <div id="left">
    {LEFT_CONTEXT}
  </div>
  <div id="content">
{PAGE_CONTENT}
  </div>
  <div id="right">
    {RIGHT_LOGIN}
    {RIGHT_CONTEXT}
  </div>
</div>
<div id="page_footer">
  <a href="http://www.rekencentra.com">&copy;&nbsp;2007 B. Rekencentra NV</a>
</div>
<!-- END GENERAL -->
</body>
</html>

GregoryCo

Legacy Member
Ok dit is het wat ik nodig heb, ik zal vanamiddag ofzo eens kijken, kheb nu les :p

UnD3RD0G

Legacy Member
de float left moet op de LI item komen gezien dat de elementen zijn die breaken, als je deze float left, breaken ze niet, en komen ze dus naast elkaar te staan

Xavez

Legacy Member
Voer de php-code uit, doe view source in je browser en copy-paste het resultaat hier :).

scorpken

Legacy Member
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript">
	var t;
	window.onload=resetTimer;
	document.onkeypress=resetTimer;
	document.onmousedown=resetTimer;
	document.onmousemove=resetTimer;

	function logout()
	{
	        location.href='logout.php'
	}
	function resetTimer()
	{
	        clearTimeout(t);
	        t=setTimeout(logout,900000) //logs out in 30 minutes
	}
</script>
<head>
  <link rel="stylesheet" type="text/css" media="screen" href="css/general.css" />
  <link rel="stylesheet" type="text/css" media="print" href="css/print.css" />
<link rel="stylesheet" media="all" type="text/css" href="css/gallery.css" />
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="css/gallery_ie.css" />
<![endif]-->
  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  <meta name="Author" content="" />

  
  <meta name="Keywords" content="school" />
  <meta name="Description" content="" />
  <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
  <link rel="icon" href="img/favicon.ico" type="image/ico" />
  <title>Nieuws</title>
</head>
<body>
<div>
  <img id="background" src="" alt="" title="" /> 
</div>

<div id="page_header">
  <img alt="" src="img/olve.jpg" />
  <div id="title">
      <h1>Olve-college Edegem en Mortsel</h1>
      <h2>Het Onze-Lieve-Vrouw-van-Lourdescollege</h2>
  </div>
</div>
<div id="location">
	&nbsp;&nbsp;&nbsp;&nbsp;U bevindt zich hier &nbsp;&nbsp;&gt;&gt; <a href="sam.php?page="></a>&nbsp;/&nbsp;<a href="sam.php?page=news">Nieuws</a> 

</div>
<div id="container">
  <div id="navigation">
    <ul>
        <li class="active"><a href="sam.php?page=news"><em>Nieuws</em></a></li>
        <li ><a href="sam.php?page=Info"><em>Info</em></a></li>
        <li ><a href="sam.php?page=links"><em>Links</em></a></li>
        <li ><a href="sam.php?page=downloads"><em>Downloads</em></a></li>

        <li ><a href="sam.php?page=gallery"><em>Fotoalbums</em></a></li>
        <li ><a href="sam.php?page=kalender"><em>Kalender</em></a></li>
    </ul>
  </div>
  <div id="left">
    
  </div>
  <div id="content">
<iframe src="nieuws.php"></iframe>

  </div>
  <div id="right">
    <fieldset>
    <legend>Login hier !</legend>
    <form method="post" action="login.php">
    <fieldset>
      <p><label for="username">Naam :</label><br /><input name="fname" id="username" value="voornaam" type="text" onfocus="value=''" /><br /><input name="lname" value="familienaam" type="text" onfocus="value=''" /></p>
      <p><label for="paswoord">Paswoord :</label><br /><input name="pass" id="paswoord" type="password" /></p>

      <input value="Aanmelden" name="submit" type="submit" />
    </fieldset>
    </form>
    </fieldset>

    <fieldset>
      <div id="contextmenu">
      <h1>Nieuws</h1><br/>
        <a href="sam.php?page=nieuwsarchief">Alle nieuwsberichten</a><br />

        <a href="sam.php?page=laatstemaand">Laatste maand</a><br />
        <a href="sam.php?page=laatstejaar">Laatste jaar</a><br />
        <a href="sam.php?page=laatstedriejaar">Laatste 3 jaar</a><br />
        <a href="sam.php?page=laatstevijfjaar">Laatste 5 jaar</a><br />
      </div>
    </fieldset>

  </div>
</div>
<div id="page_footer">
  <a href="http://www.rekencentra.com">&copy;&nbsp;2007 B. Rekencentra NV</a>
</div>

</body>
</html>

Xavez

Legacy Member
#navigation ul li {display: inline;}

(tenzij je sliding doors wil gebruiken om afbeeldingen op de BG van de anchors te zetten, dan moet je float: left; gebruiken)
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