Profice
Neues Mitglied
Hallo Leute,
ich bin neu hier und beschäftige mich erst seit kurzem mit HTML und CSS. Mein Problem ist, dass ich es nicht auf die Reihe bekomme die Unternavigation"2014; 2013" unter dem Mutterelement "Galerie" so zu fixieren, dass die Unternavigation auch wenn das Browserfenster verkleinert wird, immer unter "Galerie" stehen bleibt. Die Seite soll immer zentriert ausgerichtet werden...
Ich hoffe ihr könnt mir helfen...
Danke schonmal!
Gruß Stefan
---------------------------------------------------------------------
Hier der Html-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charseet=utf-8">
<title>Galerie</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<style type="text/css">
</style>
</head>
<body>
<div class="container">
<nav>
<ul>
<li><a href="index">Home</a></li>
<li><a href="Biografie">Biografie</a></li>
<li><a href="Die Band">Die Band</a></li>
<li><a href="">Galerie</a>
<ul>
<li><a href="">2014</a></li>
<li><a href="">2013</a></li>
</ul>
</li>
<li><a href="Termine">Termine</a></li>
<li><a href="Gästebuch">Gästebuch</a></li>
</ul>
</nav>
</body>
</html>
--------------------------------------------------------------------------
Hier der CSS Code:
{ margin-left: 0 padding: 0;}
header, nav, section, article, aside, footer {display: block;}
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #000;
color: #FFF;
width: 1000px;
margin: 0 auto;
}
.container {margin: auto; width: 1000px; padding: 20px 0; height: 1%;}
header {
background-color: #1d1d1d;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
height: 52px;
}
nav { margin-top: 0; padding: 0 0;}
nav ul{ list-style: none; font-size: 20px; text-transform: uppercase;}
nav ul li { display: inline; margin: 0; padding: 0;}
nav ul li a{
padding: 0 10px;
background-color: #FFF;
color: #000;
display: inline;
text-decoration: none;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
nav ul li.active a,
nav ul li a:hover
{
background-color: #824140;
color: #FFF;
}
nav li ul {
position: fixed;
display: none;
z-index: 100;
top: auto;
left: 780px;
}
nav li:hover ul{
display: block;
}
nav li ul li {
padding: 0;
width: 100%;
white-space: nowrap;
}
nav li ul li a {
display: block;
padding: 3px 10px 3px 10px;
}
nav li ul li a:hover {
background: #FFF;
color: #824140;
}
---------------------------------------------------------------
ich bin neu hier und beschäftige mich erst seit kurzem mit HTML und CSS. Mein Problem ist, dass ich es nicht auf die Reihe bekomme die Unternavigation"2014; 2013" unter dem Mutterelement "Galerie" so zu fixieren, dass die Unternavigation auch wenn das Browserfenster verkleinert wird, immer unter "Galerie" stehen bleibt. Die Seite soll immer zentriert ausgerichtet werden...
Ich hoffe ihr könnt mir helfen...
Danke schonmal!
Gruß Stefan
---------------------------------------------------------------------
Hier der Html-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charseet=utf-8">
<title>Galerie</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<style type="text/css">
</style>
</head>
<body>
<div class="container">
<nav>
<ul>
<li><a href="index">Home</a></li>
<li><a href="Biografie">Biografie</a></li>
<li><a href="Die Band">Die Band</a></li>
<li><a href="">Galerie</a>
<ul>
<li><a href="">2014</a></li>
<li><a href="">2013</a></li>
</ul>
</li>
<li><a href="Termine">Termine</a></li>
<li><a href="Gästebuch">Gästebuch</a></li>
</ul>
</nav>
</body>
</html>
--------------------------------------------------------------------------
Hier der CSS Code:
{ margin-left: 0 padding: 0;}
header, nav, section, article, aside, footer {display: block;}
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #000;
color: #FFF;
width: 1000px;
margin: 0 auto;
}
.container {margin: auto; width: 1000px; padding: 20px 0; height: 1%;}
header {
background-color: #1d1d1d;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
height: 52px;
}
nav { margin-top: 0; padding: 0 0;}
nav ul{ list-style: none; font-size: 20px; text-transform: uppercase;}
nav ul li { display: inline; margin: 0; padding: 0;}
nav ul li a{
padding: 0 10px;
background-color: #FFF;
color: #000;
display: inline;
text-decoration: none;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
nav ul li.active a,
nav ul li a:hover
{
background-color: #824140;
color: #FFF;
}
nav li ul {
position: fixed;
display: none;
z-index: 100;
top: auto;
left: 780px;
}
nav li:hover ul{
display: block;
}
nav li ul li {
padding: 0;
width: 100%;
white-space: nowrap;
}
nav li ul li a {
display: block;
padding: 3px 10px 3px 10px;
}
nav li ul li a:hover {
background: #FFF;
color: #824140;
}
---------------------------------------------------------------
