Hallo,
habe ein nettes vertikales Css Menü.
Allerdings passt es bei mir in Opera nicht ganz auf die Seite weil ich z.B. 3 Zeilen Links hab etc. und mein Viewport daher relativ klein (bei 800x600)
Zum einen hätte ich gern dass es direkt unter dem Logo beginnt und zum anderen dass wenn nötig ein scrollbalken eingeblendet wird oder das menü geschrumpft wird (falls man es dann noch lesen kann).
(Das ganze ist in php um htmls einzubinden)
menu.css:
Zitat:
#logo{
min-widht:150px;
margin-top:-20px;
float:left;
clear:left;
position:fixed;
}
#menu{
color:black;
position:fixed;
top:165px;
width:150px;
background:transparent;
float: left;
clear:left;
overflow:auto;
padding:10px;
}
#menu a{
color:maronn;
font:bold 13px arial, arial;
margin:5px 0 5px 0;
padding:1px 3px 1px 4px;
text-decoration:none;
background:transparent;
display:block;
border-top:1px solid #99917d;
border-right:1px solid #e3d9c0;
border-bottom:1px solid #e4d9c0;
border-left:1px solid #99917d;
widht:155px;}
#menu a:hover{
color:#f6e4c1;
background:transparent;
border-top:1px solid #e4d9c0;
border-right:1px solid #837c6b;
border-bottom:1px solid #837c6b;
border-left:1px solid #e4d9c0;}
#menu a .dot{
color:#a59a81;
backround:transparent;
font-weight:bold;
font-size:14px;}
#menu a:hover .dot{
color:#c8ba9b;
background:transparent;
font-weight:bold;
font-size:14px;}
#menu li{
float:left;
}
.liste{
list-style-type: none;
margin:0px;
padding:0px;}
#Inhalt {
margin-left: 250px;
margin-top: 0px;
padding 0 1em;
min-width: 16em;
}
#Inhalt h1 {
font-size: 2.3em;
margin: 0 0 1em;
color:red;
}
#Inhalt p {
font-size:1em;
margin: 1em 0;
}
|
index.php:
Zitat:
<?php
if ((isset($_GET) == true) && (is_array($_GET) == true)) extract($_GET, EXTR_OVERWRITE);
echo '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<link rel="stylesheet" Media="screen,projection" title="menu" href="css/menu.css" type="text/css" />
<script type="text/javascript">
<!--
if(navigator.appName.indexOf("Netscape") > -1 &&
navigator.appVersion.substr(0,1) <= "4")
parent.location.href="netscape4.htm";
//-->
</script>
</head>
<body lang=de bgcolor="#ffffff" text="#000000" link="#0000ff" alink="#ff0000" vlink="#800080">';
echo '
<div id="logo">
<P><a href="?url=start.htm"><IMG style="WIDTH: 165px; HEIGHT: 165px" alt="" hspace=0 src="logoclean.jpg" align=baseline border=0 ></P></a>
</div>
<div id="menu">
<ul class="liste">
<li><A href="?url=portrait.htm"><span class="dot"> </span>Persönliches</A>
<li><A href="?url=kontakt.htm"><span class="dot"> </span>Kontakt / Anmeldung</A>
<li><A href="?url=haus.htm"><span class="dot"> </span>Das Haus / Lageplan</A>
<br>
<li><A href="?url=reisen.htm"><span="DOT"> </span>Kraftortreisen</a>
<br>
<li><A href="?url=termine.htm"><span="DOT"> </span>Termine</A>
<li><A href="?url=links.htm"><span="DOT"> </span>Links</A></li>
</ul>
</div>
<div id="Inhalt">';
include ($url != "" ? $url : "start.htm");
echo '</div>
</body>
</html>';
?>
|
Dann hab ich gleich noch ne extra Frage:
Wie bekomme ich die Scrollbalken im Inhaltsfenster weg wenn der Text weniger als den Viewport einnimmt?