Moin zusammen,
ich hab ein design für eine Selbsthilfegruppe in der nähe gemacht und hab 2.Probleme wo ich aktuell nicht die lösung finde.
Problem 1: Die Linke Box Reihe steht mit der Mittleren normal auf einer höhe nur die Rechte ist versetzt zu den anderen beiden
Problem 2: Das DropdownMenü will nicht so ganz wie ich will, wenn ich mit der Maus rüber gehe drop es für ne kurze zeit runter aber man kann nicht wirklich was auswählen.
CSS Code
CSS
@charset "utf-8";
body {
background: url(http://print24.com/de/blog/wp-content/uploads/2011/02/text-effekt1-a.jpg);
background-position: top, center;
background-color: #d5d5d5;
}
#Container
{
min-width: 920px;
max-width: 1200px;
Background-Color: #ececec;
margin: 0 auto;
border: Black solid 1px;
}
#Header
{
Height: 300px;
background-image:url(header.jpg);
background:position: top, center;
}
#Menu
{
background-image: linear-gradient(to bottom, rgba(247, 172, 74, 1), rgba(225, 132, 9, 1));
background-repeat: no-repeat;
height: 50px;
border-top: 1px solid black;
border-bottom: 1px solid black;
font-size:14px;
}
#Content_Container
{
min-width: 920px;
max-width: 1200px;
}
#Content_middle
{
min-width: 600px;
max-width: 500px;
float: left;
height: 50%;
background-color: #fce2bf;
border-left: 1px black solid;
border-right: 1px black solid;
border-bottom: 1px black solid;
}
#Content_left
{
min-width: 300px;
max-width: 300px;
float: left;
clear: none;
}
#Content_right
{
min-width: 300px;
max-width: 300px;
float: right;
clear: none;
}
.clearfix:after {
content: ".";
clear: both;
display: block;
visibility: hidden;
height: 0px;
}
#footer
{
margin-top: 10px;
border-top: 1px solid black;
height: 30px;
background-image: linear-gradient(to bottom, rgba(247, 172, 74, 1), rgba(225, 132, 9, 1));
}
#Menu ul {
list-style-type:none;
list-style-image:none;
text-align: center;
padding:0px;
position:absolute; }
#Menu ul ul {margin-top: 20px;}
#Menu li.topmenu {
float:left;
}
.topmenu a {
float:left;
width:110px;
text-align:center;
}
.topmenu ul{
display:none;
}
.topmenu a, .submenu a{
padding:1px 5px;
color:#FFF;
font-weight:bold;
text-decoration:none;
margin:0px;
}
.submenu a{
font-size:12px;
width:110px;
background-color:#b2b2b1;
clear:both; /* special IE6 */
}
#Menu a:hover, .topmenu.on a {
color:#000000;
background-color:#a1a1a1 !important;
}
.topmenu:hover ul {
display:block;
z-index:500;
}
Alles anzeigen
HTML Code
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="Container" class="clearfix">
<div id="Header"></div>
<div id="Menu" >
<ul>
<li class="topmenu">
<a href="">Menü 1</a>
<ul>
<li class="submenu"><a href="">Unterpunkt 1.1</a></li>
<li class="submenu"><a href="">Unterpunkt 1.2</a></li>
</ul>
</li>
<li class="topmenu">
<a href="">Menü 2</a>
<ul>
<li class="submenu"><a href="">Unterpunkt 2.1</a></li>
<li class="submenu"><a href="">Unterpunkt 2.2</a></li>
</ul>
</li>
<li class="topmenu">
<a href="">Menü 3</a>
<ul>
<li class="submenu"><a href="">Unterpunkt 3.1</a></li>
<li class="submenu"><a href="">Unterpunkt 3.2</a></li>
</ul>
</li>
</ul>
</div>
<div id="Content_Container" align="center" class="clearfix">
<div id="Content_left">Links</div>
<div id="Content_middle">
<p>Mitte</p>
</div>
<div id="Content_right" class="clearfix">Rechts</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
Alles anzeigen