Hallo Profis,
ich bin blutiger Anfänger und würde gerne mein Menü auch auf mobilen Geräten Bedienbar machen, was muss ich dazu an meinem Code ändern? Ich bin für jede Hilfe Dankbar!
Hier der Auszug aus der index.html:
Hier die CSS Datei:
ich bin blutiger Anfänger und würde gerne mein Menü auch auf mobilen Geräten Bedienbar machen, was muss ich dazu an meinem Code ändern? Ich bin für jede Hilfe Dankbar!
Hier der Auszug aus der index.html:
Code:
<ul id="aufklappen">
<ul id="navi">
<li class="active"><a href="index.html">Home</a>
<li><a href="ueberuns.html">Über uns</a>
<ul id="knoten_1">
<li><a href="links.html">Links</a></li>
<ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a class="titel" href="geschichtliches.html">Geschichtliches</a>
<ul id="knoten_2">
<li><a href="allgemeines.html">Allgemeines</a></li>
<li><a href="wk.html">1. Weltkrieg</a></li>
<li><a href="bilder.html">Bilder</a></li>
<ul>
</ul>
</li>
</ul>
</li>
<li><a href="news.html">News</a>
<ul id="knoten_3">
</ul>
</li>
<li><a href="impressum.html">Impressum</a>
<ul id="knoten_3">
</ul>
</li>
</ul>Hier die CSS Datei:
Code:
@charset "utf-8";
* {
margin: 0px; padding: 0px;
}
.clear {
clear:both;}
.clearleft {
display:block;
clear:left;}
.clearright{
display:block;
clear:right;}
.hide {
display:none;}
a {
color:#FDD017;
}
a:hover {
color:#000000;
text-decoration:none;
}
body {
background: #FFFFFF url(images/bg.jpg) repeat-x;
}
#wrap{
width:620px;
margin:0px auto 15px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#666666;
}
/*Header*/
#header{
height:220px;
width:685px;
background:url(images/header.jpg) no-repeat left top;
clear: both;
}
/*Header Menu*/
#topmenu {
display:block;
list-style:none;
padding:0 0px 0px 278px;
float: right;
width: 615px;
}
#topmenu li {
display:inline;
}
#topmenu a {
display:block;
float:left;
height:28px;
margin:0px 0px 0px0px;
text-decoration:none;
padding:9px 15px 0px 15px;
text-align:center;
}
#topmenu a, #topmenu a:visited, #topmenu a:active {
color:#FFFFFF;
}
#topmenu a:hover{
color:#ffffff;
background-color: #FDD017;
}
#topmenu .active a, #topmenu .active a:visited, #topmenu .active a:active{
color:#FFFFFF;
background-color: #FDD017;
}
/*Content*/
#content {
background-color: #FFFFFF;
}
#mainpage {
width:685px;
float:middle;
padding:5px 5px 5px 0px;
height:0 auto;
}
#mainpage p {
line-height:22px;
margin:10px 0px 0px 0px;
}
#mainpage blockquote {
background:#efefef;
display:block;
margin:5px;
font:Georgia, "Times New Roman", Times, serif;
font-style:italic;}
h1, h2, h3, h4, h5 {
color:#FDD017;
font-weight:bold;
font-family: Arial, Helvetica, sans-serif;
}
#mainpage h1 {
font-size:24px;
color: #FDD017;
}
#mainpage h2 {
font-size:18px;
padding-top: 20px;
padding-bottom: 5px;
border-bottom: 1px solid #FDD017;
}
#mainpage h3 {
font-size:20px;}
#mainpage h4 {
font-size:18px;}
#mainpage h5 {
font-size:16px;}
.style_2 {
font-size: 7px;
color: #000011;
}
.style_2 a{
font-size: 7px;
color: #000011;
}
.style_2 a:hover{
font-size: 7px;
color: #000011;
}
#content #mainpage ol {
margin:10px 10px 10px 25px;}
#content #mainpage ol li {
padding:5px 5px 5px 20px;}
#content #mainpage ul li {
display:block;
padding:0px;
border-bottom: dashed 1px #D6E4A7;}
/*Sidebar*/
#sidebar {
margin:0px 0px 0px 0px;
width: 225px;
float: right;
}
#sidebarcontents {
padding:5px 0px 5px 0px;
}
/*Sidemenu*/
#menu {
list-style:none;
}
#menu li ul {list-style:none;}
#menu li ul li {
display:block;
height:25px;
border-bottom:solid 1px #efefef;}
#menu li ul a, #menu li ul a:visited, #menu li ul a:active {
display:block;
height:20px;
padding:5px 5px 0px 5px;
text-decoration:none;
color:#333333;}
#menu li ul a:hover {
background:#F8F9F2;
color:#FDD017;
}
#menu h2 {
display:block;
border-bottom:solid 1px #D2E6CA;
padding:5px;
margin:10px 0px 0px 0px;
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
color:#FDD017;
font-weight:bold;
}
/*footer*/
#footer {
margin:0 auto;
width:685px;
height:15px;
padding:10px;
color:#FFFFFF;
text-align: center;
background:#333333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
clear: both;
}
#credit {font-size:10px;
padding:3px;}
#sitename a{
text-decoration :none;
font-size:24pxx;
color:#FFFFFF;
padding-top:20px;
}
#topbar{
height:78px;
}
#caption{
height:50px;
background:url(images/caption.gif) repeat-x top left;
}
.bold{font-size:16px;
color:#FFFFFF;
padding-left:100px;
padding-top:25px;
}
#mitte {
float:middle;
width: 600px ;
height: 400px;
margin-top:20px;
margin-bottom: 20px;
display: block;
margin-left: auto;
margin-right: auto;
border: 3px solid #000000;
}
#aufklappen
* {
margin:0;
padding:0;
list-style:none;
text-decoration:none;
font-size: 12px;
padding:5px 0px 0px 0px;
}
ul#navi {
float:left;
width:100%;
}
ul#navi a {
display:block;
padding:5px;
color:#fff;
font-weight:bold;
border-right:0px solid #fff;
text-align:center;
}
ul#navi li {
position:relative;
float:left;
width:9.375em
}
ul#navi ul ,
ul#navi li:hover ul ul ,
ul#navi li:hover ul ul ul {
position:absolute;
left:-9999px;
background:#000;
}
ul#navi li:hover ul {
background:#000;
}
ul#navi li:hover ul ul {
}
ul#navi li:hover ul ul ul {
}
ul#navi ul {
top:auto;
}
ul#navi li:hover ul {
left:0;
}
ul#navi ul li:hover ul ,
ul#navi ul ul li:hover ul {
position:absolute;
left:100%;
top:0;
}
ul#navi li:hover > a , ul#navi ul li:hover > a, ul#navi ul ul li:hover > a, ul#navi ul ul ul li:hover > a {
background:#FDD017;
color:#fff;
}
ul#navi a span {
float:right;
font-weight:normal;
}
h6 { font-size:100%;
color:#000000;
font-style:italic; }
h7 { font-size:100%;
color:#000000
font-style:italic;
"center"
}
