Alternative li ul
- Ersteller _iChris_
- Erstellt am
Ich habs mal mit dl und dt probiert ... geht schon einigermaßen ... aber irgendwas stimmt noch nicht ganz ...
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>TSV Hartberg
</title>
<link rel="stylesheet" href="standard.css" type="text/css" media="screen">
<link rel="stylesheet" href="standard_mobile.css" media="handheld">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<meta name="author" content="Christian">
</head>
<body link="blue" vlink="blue" alink="blue">
<div id="main" >
<div class="box1">
</div>
<div class="menu_container">
<ul class="menu">
<li>
<a href="index.php">Home</a>
<ul>
<li>
<a href="vorwort.php">Vorwort</a>
</li>
<li>
<a href="aktuelles.php">Aktuelles</a>
</li>
</ul>
</li>
<li>
<a href="mannschaften.php">Mannschaften</a>
<ul>
<li>
<a href="herren.php">Herren</a>
</li>
<li>
<a href="jugend.php">Jugend</a>
</li>
<li>
<a href="senioren.php">Senioren</a>
</li>
</ul>
</li>
<li>
<a href="events.php">Events</a>
<ul>
<li>
<a href="turniere.php">Turniere</a>
</li>
<li>
<a href="meisterschaft.php">Meisterschaft</a>
</li>
<li>
<a href="sonstiges.php">Sonstiges</a>
</li>
</ul>
</li>
<li>
<a href="trainer.php">Trainer</a>
<ul>
</ul>
</li>
<li>
<a href="verein.php">Verein</a>
<ul>
<li>
<a href="vorstand.php">Vorstand</a>
</li>
<li>
<a href="tennishalle.php">Tennishalle</a>
</li>
<li>
<a href="tennisplaetze.php">Tennisplätze</a>
</li>
<li>
<a href="buffet.php">Buffet</a>
</li>
<li>
<a href="chronik.php">Chronik</a>
</li>
</ul>
</li>
<li>
<a href="galerie.php">Galerie</a>
<ul>
</ul>
</li>
<li>
<a href="presse.php">Presse</a>
<ul>
</ul>
</li>
<li>
<a href="beitritt.php">Beitritt</a>
<ul>
<li>
<a href="preise.php">Preise</a>
</li>
<li>
<a href="kontakt.php">Kontakt</a>
</li>
</ul>
</li>
<li>
<a href="impressum.php">Impressum</a>
<ul>
</ul>
</li>
</ul>
</div>
<div class="box3">
<div class="Abstand"></div>
<a href="http://www.so-stmk.volksbank.at/"><img src="img/VogelVolksbank.jpg"border=0></a>
<script language='JavaScript' src='JavaScript/small_slide1'></script>
<script language='JavaScript' src='JavaScript/slide_small_2'></script>
<div class="ipzaehler">
<?php
include "php/Besucherzaehler/ipcounter.php";
?>
</div>
</div>
<div class="strich">
<img src="img/Arschloch copy.jpg">
</div>
<div class="box4">
<script language='JavaScript' src='JavaScript/slideshow/script.js'></script>
<div id="show">
<div id="gallery">
<div id="slides">
<div class="slide"><a href="http://www.google.com/" target="_blank"><img src="JavaScript/slideshow/img/sample_slides/pic01.jpg" width="700" height="465"/><a/></div>
<div class="slide"><a href="http://www.youtube.com/" target= "_blank"><img src="JavaScript/slideshow/img/sample_slides/pic02.jpg" width="700" height="465"/><a/></div>
<div class="slide"><a href="http://www.tsv-hartberg-tennis.at/" target="_blank"><img src="JavaScript/slideshow/img/sample_slides/pic03.jpg" width="700" height="465"/><a/></div>
<div class="slide"><a href="http://www.ebay.com/" target="_blank">
<img src="JavaScript/slideshow/img/sample_slides/pic04.jpg" width="700" height="465"/></a></div>
</div>
<div id="thumbs">
<dl>
<dt class="fbar"> </li><li class="thumbItem"><a href=""><img src="JavaScript/slideshow/img/sample_slides/1.jpg" /></a></dt>
<dt class="thumbItem"><a href=""><img src="JavaScript/slideshow/img/sample_slides/2.jpg"/></a></dt>
<dt class="thumbItem"><a href=""><img src="JavaScript/slideshow/img/sample_slides/3.jpg"/></a></dt>
<dt class="thumbItem"><a href=""><img src="JavaScript/slideshow/img/sample_slides/4.jpg"/></a></dt>
</dl>
</div>
</div>
</div>
</div>
<div class="fuell">
</div>
<div class="verbaende">
<div class="verbaende1">
<a href="http://www.asvoe.at/de"><img src="img/ASVoe.jpg"border=0></a>
</div>
<div class="verbaende2">
<a href="http://www.oetv.at/"><img src="img/oetv.jpg"border=0></a>
</div>
<div class="verbaende3">
<a href="http://www.tennissteiermark.at/"><img src="img/STTV.jpg"border=0></a>
</div>
</div>
</div>
<div class="box5">
</div>
<div class="box6">
<a href="login.php">Login</a>
</div>
</body>
</html>Hier noch das CSS - File ...
Code:
body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
/* Page reset */
margin:0px;
padding:0px;
}
body{
/* Setting default text color, background and a font stack */
color:#444444;
font-size:13px;
background: #f2f2f2;
font-family:Arial, Helvetica, sans-serif;
}
/* Gallery styles */
#gallery{
/* CSS3 Box Shadow */
-moz-box-shadow:0 0 3px #AAAAAA;
-webkit-box-shadow:0 0 3px #AAAAAA;
box-shadow:0 0 3px #AAAAAA;
/* CSS3 Rounded Corners */
-moz-border-radius-bottomleft:4px;
-webkit-border-bottom-left-radius:4px;
border-bottom-left-radius:4px;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
border:1px solid white;
background:url(img/panel.jpg) repeat-x bottom center #ffffff;
/* The width of the gallery */
width:700px;
overflow:hidden;
}
#slides{
/* This is the slide area */
height:465px;
/* jQuery changes the width later on to the sum of the widths of all the slides. */
width:700px;
overflow:hidden;
}
.slide{
float:left;
}
#menu{
/* This is the container for the thumbnails */
height:45px;
}
ul{
margin:0px;
padding:0px;
}
li{
/* Every thumbnail is a li element */
width:60px;
display:inline-block;
list-style:none;
height:45px;
overflow:hidden;
}
li.inact:hover{
/* The inactive state, highlighted on mouse over */
background:url(img/pic_bg.png) repeat;
}
li.act,li.act:hover{
/* The active state of the thumb */
background:url(img/active_bg.png) no-repeat;
}
li.act a{
cursor:default;
}
.fbar{
/* The left-most vertical bar, next to the first thumbnail */
width:2px;
background:url(img/divider.png) no-repeat right;
}
li a{
display:block;
background:url(img/divider.png) no-repeat right;
height:35px;
padding-top:10px;
}
a img{
border:none;
}
/* The styles below are only necessary for the demo page */
h1{
font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
font-size:36px;
font-weight:normal;
margin-bottom:15px;
}
h2{
font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:normal;
position:absolute;
right:0;
text-transform:uppercase;
top:15px;
}
#main{
/* The main container */
margin:15px auto;
text-align:center;
width:920px;
position:relative;
}
a, a:visited {
color:#0196e3;
text-decoration:none;
outline:none;
}
a:hover{
text-decoration:underline;
}
p{
padding:10px;
text-align:center;
}