Hallo Leute
Ich bin wiedermal am basteln und finde und finde den Fehler einfach nicht.
Ich möchte für eine Webseite ein Menü mit 4 Punkten als Vierecke quasi in einem Block anrichten, d.h. 2 oben, 2 unten.
Leider kriege ich das Menü nicht einmal in die Horizontale.
Sie Menüpunkte werden nur untereinander dargestellt, trotz float etc.
und das ganze ist auch völlig verschoben und nicht im daher vorgesehenen Container, wo der Marker drin ist.
Was ist falsch an meinem Code, kann mir jemand helfen?
Und ist es überhaupt möglich, 2 nebeneinander, dann einen Umbruch und nochmals 2 nebeneinander zu setzen? Ein Beispiel wie ich mir das Layout vorstelle im Anhang.
Danke für eure Hilfe.
Liebe Grüsse
angsch-li
Hier der Link zur Seite und meine Codes:
http://www.individualdesign.ch/3trip/
# Das Menu erstellen
MENU = HMENU
MENU {
special = directory
special.value = 3
#wrap = <div id="menu">|</div>
where = colPos = 0
1 = TMENU
1 {
noBlur = 1
wrap = <ul class="menu">|</ul>
expAll = 1
#NO.wrapItemAndSub = <li onmouseover="show(this)" onmouseout="hide(this)">|</li>
NO = 1
NO.linkWrap = | | |*| | | |*|
ACT < .NO
ACT = 1
ACT.ATagParams = class="active"
}
}
########### Das MENU2 erstellen ###########
MENU2 = HMENU
MENU2 {
special = directory
special.value = 16
#entrylevel = 1
wrap = <div id="menu2">|</div>
1 = TMENU
1 {
noBlur = 1
wrap = <ul class="menu2">|</ul>
expAll = 1
NO.wrapItemAndSub = <li class="menu2">|</li>
NO = 1
#NO.allWrap = <li>|</li>
NO.linkWrap = |
ACT < .NO
ACT = 1
ACT.ATagParams = class="active"
}
a:link { font-size: 12px; color: #FFAB4D; font-family: Arial, Helvetica, sans-serif; font-weight: bold; text-decoration: none; }
a:visited { font-size: 12px; color: #3AD42D; font-family: Arial, Helvetica, sans-serif;font-weight: bold; text-decoration: none}
a:hover { font-size: 12px; color: #FF3EB0; font-family: Arial, Helvetica, sans-serif;font-weight: bold; text-decoration: none}
a:active { font-size: 12px; color: #FF3EB0; font-family: Arial, Helvetica, sans-serif; font-weight: bold; text-decoration: none}
body { behavior:url("fileadmin/template/csshover.htc");color: #555555; font-family: Arial, Helvetica, sans-serif; text-decoration: none }
input{ font-size: 12px; font-family: Arial, Helvetica, sans-serif; vertical-align:top; }
p, td {color: #555555;font-size: 12px; font-family:Arial, Helvetica, sans-serif; }
p {color: #555555; font-size: 12px; font-family:Arial, Helvetica, sans-serif; }
h1 {color: #FF3EB0; font-size: 17px; font-family: Arial, Helvetica, sans-serif; font-weight: bold;}
h2 {color: #3AD42D; font-size: 12px; font-family: Arial, Helvetica, sans-serif;font-weight: bold;}
h3 { color: #FFAB4D; font-size: 13px; font-family: Arial, Helvetica, sans-serif; font-weight:bold; }
h5 { color: #5C3516; font-size: 13px; font-family: Arial, Helvetica, sans-serif; font-weight:bold;background-color:#0C2C80; }
h6 {color: #ffffff; font-size: 13px; font-family: Arial, Helvetica, sans-serif; }
li { display: inline;list-style-type: none; }
/* CSS-MENU */
ul.menu2 li a:link {text-align: center; background-image: url(http://www.individualdesign.ch/3trip/fileadmin/templates/pix/button-no.png);font-size: 17px; color: #FF3EB0; font-family: Arial, Helvetica, sans-serif; text-decoration: none;}
ul.menu2 li a:visited {text-align: center; background-image: url(http://www.individualdesign.ch/3trip/fileadmin/templates/pix/button-no.png);font-size: 17px; color: #FF3EB0; font-family: Arial, Helvetica, sans-serif; text-decoration: none;}
ul.menu2 li a:hover {text-align: center; background-image: url(http://www.individualdesign.ch/3trip/fileadmin/templates/pix/button-a-green.png);font-size: 17px; color: #ffffff; font-family: Arial, Helvetica, sans-serif; text-decoration: none;}
ul.menu2 li a:active {text-align: center; background-image: url(http://www.individualdesign.ch/3trip/fileadmin/templates/pix/button-a-orange.png);font-size: 17px; color: #ffffff; font-family: Arial, Helvetica, sans-serif; text-decoration: none;}
ul.menu2, ul.menu2 ul {display: inline;list-style-type: none;}
/* 1. Stufe Textplatzierung */
ul.menu2 a {
display: block;
margin: 0px 0px 0px 0px;
padding: 80px 0px 40px 0px;
font-weight:normal;
}
/* 1. Stufe */
ul.menu2 li {
margin:0px;
padding: 0px;
background-color: none;
float:left;
border:0 px solid #fff;
width: 225px;
height: 143px;
display: inline;
list-style-type: none;
}
/* IE-Hack für die Breite */
*html ul.menu2 li {
width:225px;
height:143px;
}
/* IE-Hack für die Breite */
*html ul.menu2 ul {
width:225px;
height:143px;
}
/* Dies sind die Klassenstile für das Untermenü wenn sich die Maus */
/* über der Liste befindet (.hover siehe JavaScript oben) */
ul.menu2 ul.hover, ul.menu2 li.hover ul, ul.menu2 li:hover ul {
display:block;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
#back {
position:absolute;
width:100%;
height:100%;
z-index:1;
left: 0px;
top: -1px;
}
#titel {
position:absolute;
width:100%;
height:100%;
z-index:2;
background-image: url(fileadmin/templates/pix/Titel.png);
background-repeat: no-repeat;
background-position:center top;
top: 0px;
left: 0;
}
#Balken {
position:absolute;
width:100%;
height:100%;
z-index:3;
left: 0;
top: 374px;
background-image: url(fileadmin/templates/pix/balken.png);
background-repeat:repeat-y;
background-position:center;
}
#menu {
position:absolute;
width:436px;
height:269px;
z-index:4;
left: 609px;
top: 8px;
}
#text {
position:absolute;
width:100%;
height:100%;
z-index:8;
left: 0;
top: 293px;
text-align: right;
}
-->
</style>
</head>
<body>
<div id="root">
<div id="back">
<div id="titel">
<div id="Balken"></div>
<div id="menu">###MENU2###</div>
<div id="text">
<table width="675" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="25" height="30" align="right" valign="top"> </td>
<td width="650" align="right" valign="top">###MENU###</td>
</tr>
<tr>
<td width="25" height="40"> </td>
<td width="650"> </td>
</tr>
<tr>
<td width="25" valign="top"> </td>
<td width="650" valign="top">###INHALT### </td>
</tr>
<tr>
<td width="25" height="50"> </td>
<td width="650"> </td>
</tr>
<tr>
<td width="25" height="40" align="center" valign="top"> </td>
<td width="650" align="center" valign="top">###UMENU###</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>