Morgen!
Hab ein kleines Problemchen!Befasse mich seit kurzen auch mit CSS und mache so meine ersten Schritte , habe nun ein Menu welches ich komplett in die linke obere Ecke plazieren möchte was muss ich in Code ändern?Ist sicherlich keine schwere Aufgabe
aber aller Anfang ist schwer hehe...Hat da einer einen Tipp ?
Menu:
Dazugehörige CSS Datei:
Danke BTraxx
Hab ein kleines Problemchen!Befasse mich seit kurzen auch mit CSS und mache so meine ersten Schritte , habe nun ein Menu welches ich komplett in die linke obere Ecke plazieren möchte was muss ich in Code ändern?Ist sicherlich keine schwere Aufgabe
aber aller Anfang ist schwer hehe...Hat da einer einen Tipp ?Menu:
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Menu</title>
<link rel="stylesheet" media="all" type="text/css" href="css_play.css">
<link rel="stylesheet" media="all" type="text/css" href="drop_variation.css">
<style type="text/css">
</style>
</head>
<div class="menu">
<ul>
<li><a href="test.de" class="drop Stil1">Steuererklärung
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table>
<tbody>
<tr>
<td><ul>
<li><a href="http://www.test.de/" title="Steuern">Steuern</a></li>
<li><a href="http://www.test.de/" title="Sparen">Steuertipp</a></li>
<li><a href="http://www.test.de/" title="Lohnsteuer">Lohnsteuer</a></li>
<li><a href="http://www.test.de/" title="KFZ Steuer">KFZ-Steuer</a></li>
</ul></td>
</tr>
</tbody>
</table>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="test.de">Versicherung
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table>
<tbody>
<tr>
<td><ul>
<li><a href="http://www.test.de/" title="Haftpflicht">Haftpflicht</a></li>
<li><a href="http://www.test.de/" title="KFZ-Versicherung">KFZ Versicherung</a></li>
</ul></td>
</tr>
</tbody>
</table>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="test.de">Finanzierung
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table>
<tbody>
<tr>
<td><ul>
<li><a href="http://www.test.de/" title="Kapitalanlage">Kapitalanlage</a></li>
<li><a href="http://www.test.de/" title="Kindergeld">Kindergeld</a></li>
<li><a href="http://www.test.de/" title="Kredite">Kredite</a></li>
</ul></td>
</tr>
</tbody>
</table>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="test.de">Altersvorsorge
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table>
<tbody>
<tr>
<td><ul>
<li><a href="http://www.test.de/" title="Riesterrente">Riesterrente</a></li>
<li><a href="http://www.test.de/" title="Riester 2">Riester 2</a></li>
<li><a href="http://www.test.de/" title="Riester 3">Riester 3</a></li>
</ul></td>
</tr>
</tbody>
</table>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li> <a href="test.de">Rente
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table>
<tbody>
<tr>
<td><ul>
<li><a href="http://www.test.de/" title="Rente">Rente</a></li>
<li><a href="http://www.test.de/" title="Rentenausgleich">Rentenausgleich</a></li>
<li><a href="http://www.test.de/" title="Rente">Rente</a></li>
</ul></td>
</tr>
</tbody>
</table>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li> <a href="test.de">Mustervorlagen
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table>
<tbody>
<tr>
<td><ul>
<li><a href="http://www.test.de/" title="Kündigungen">Kündigungen</a></li>
<li><a href="http://www.test.de/" title="Muster 2">Muster 2</a></li>
<li><a href="http://www.test.de/" title="Vorlage 3">Vorlage 3</a></li>
</ul></td>
</tr>
</tbody>
</table>
<!--[if lte IE 6]></a><![endif]-->
</li>
</ul>
</div>
</body></html>Dazugehörige CSS Datei:
Code:
/* common styling */
/* Set up the default font and ovrall size to include image */
.menu {
font-family: tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif;
width:690;
height:10px;
background:#fff url(.jpg) 0 20px no-repeat;
position:relative;
margin:2em 50px 0 50px;
font-family: tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif;
background-image: url(.jpg);
}
/* get rid of the default padding - margin and bullets */
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}
/* make menu horizontal */
.menu ul li {
float:left;
position:relative;
}
/* set up the default top level links */
.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#000;
width:100px;
height:1.5em;
font-weight:bold;
color:#777;
border-bottom:8px solid #777;
background:#fff;
padding-left:10px;
line-height:1.5em;
margin-right:2px;
}
/* hide the drop down menu */
.menu ul li ul {
display: none;
}
/* remove all table style so that it does not interfere with the menu */
.menu table {
margin:-1px;
border-collapse:collapse;
font-size:1em;
}
/* first line for IE7 and non-IE browsers, second line for IE5.5 and IE6 */
/* style the top level hover */
.menu ul li:hover a,
.menu ul li a:hover {
color:#000;
border-bottom:8px solid #606;
}
/* make the drop down menu show and correctly position it */
.menu ul li:hover ul,
.menu ul li a:hover ul {
display:block;
position:absolute;
top:1.2em;
margin-top:11px;
left:0;
width:108px;
border:1px solid #888;
border-top:0;
background:transparent;
}
/* style the drop down links with no hover */
.menu ul li:hover ul li a,
.menu ul li a:hover ul li a {
display:block;
background:transparent url(../../opacity/opaque.png);
color:#000;
border:0;
margin:0;
color:#333;
font-weight:normal;
font-size:0.9em;
height:auto;
line-height:1em;
padding:5px;
width:99px
}
/* style the drop down menu links when hovered */
.menu ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover {
background:#888;
color:#fff;
}
/* special styling for IE5.5 and IE6 - transparency is non validating */
.menu ul li a:hover ul {
background:transparent filter: alpha(opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
opacity:0.8;
margin-top:10px; /* for IE5.5 faulty box model */
marg\in-top:11px; /* for IE6 */
}
/* IE5.5 hack for faulty box model in drop down menu */
.menu ul li a:hover ul li a {
background:#ddd;
width:108px; /* for IE5.5 faulty box model */
w\idth:108px; /* for IE6 */
}Danke BTraxx
Zuletzt bearbeitet:
