Frage stellen
Ich erstelle gerade eine Website für mich, habe aber absolut keine Ahnung wie ich in das bestehende Layout ein Rausklappmenü für die Navigation erstellen kann. Ich habe es schon mit Little Boxes versucht, aber bedingt dadurch das mein Layout schon steht, habe ich keine Chance mit dem Code aus Little Boxes das hinzubekommen. Mir fehlt halt leider die Logik, da ich mich doch noch relative wenig mit CSS auskenne.
Könnt Ihr mir helfen?
- Code: Alles auswählen
/* ===============================================
Stylesheet fuer alb-muennich.de
Stand: ready
Datei: boxen.css
Datum: 19.11.2011
Autor: Silke Münnich
Aufbau: 1. Kalibrierung und Restauration
2. Allgemeine Styles
3. Styles fuer Layoutbereiche
4. Sonstige Styles
================================================ */
/* ======================================
1. Kalibrierung und Restauration
====================================== */
/* Reset - alle Abstaende auf NULL */
* { padding: 0; margin: 0; }
/* optional: erzwingt Scrollbar im Firefox */
html { overflow-y: scroll; } /*statt { height: 100%; margin-bottom: 1px; } damit es zwischen den einzelnen Seiten nicht ruckelt. (Scrollbalken)*/
h2, p, ul, ol { margin-bottom: 1em; }
ul ul { margin-bottom: 0; }
li { margin-left: 1em ; }
/* hier ggfs. Abstaende fuer weitere Elemente restaurieren */
/* ======================================
2. Allgemeine Styles
====================================== */
body {
background-color: #FDF5F2;
color: #427C04;
font-family: sans-serif, Verdana, Arial;
font-size: small;
}
h1 { font-size: 150%; }
h2 { font-size: 120%; }
h3 { font-size: 110% }
h4 { font-size: 110%}
h5 { font-size: 110%}
h1 { color: black; }
h2 { color: #659C1A}
h3 { color: #C55930; }
h4 { color: #659C1A; }
h5 { color: black; }
address {
text-align: center;
font-size: 80%;
font-style: normal;
letter-spacing: 2px;
line-height: 1.5;
color: black;
}
a {
text-decoration: none;
/* outline: none; */ /* nur wenn es Sie wirklich stoert */
}
a:link { color: black; }
a:visited { color: black; }
a:hover,
a:focus {
border-bottom: 1px solid #1B4397;
}
a:active {
color: white;
background-color: #1B4397;
}
/* Allgemeine Klassen und IDs */
img#logo {
background-color: white;
color: black;
padding: 10px;
border: 10px solid #d9d9d9;
}
#stand {
font-size: 10px;
}
/* ======================================
3. Styles fuer die Layoutbereiche
====================================== */
#outbox {
background: #C3D3A8;
width: 940px;
height: auto;
margin: 0 auto;
}
#box {
background: white url(fotos/box_top_left.jpg) no-repeat;
position: relative;
padding: 20px 20px 20px 13px;
color: black;
width: 740px;
height: auto;
margin: 0 auto;
}
span.box-top-right, span.box-bottom-left, span.box-bottom-right {
position: absolute;
width: 20px;
height: 20px;
display: block;
}
span.box-top-right {
background: url(fotos/box_top_right.jpg) no-repeat;
top: 0;
right: 0;
}
span.box-bottom-left {
background: url(fotos/box_bottom_left.jpg) no-repeat;
bottom: 0;
left: 0;
}
span.box-bottom-right {
background: url(fotos/box_bottom_right.jpg) no-repeat;
bottom: 0;
right: 0;
}
#wrapper { /*Hintergrund unter Logo-Kopf */
background: #C3D3A8 url(fotos/hintergrund_oben.gif) no-repeat;
color: #427C04;
width: 951px;
margin: 0 auto;
}
#kopfbereich {
background: #000101;
color: white;
padding: 0 20px 0 20px;
}
#kopfbereich p {
padding: 5px 0 5px 0;
margin-bottom: 0;
}
div#kopfbereich p span {
color: #427C04;
}
.skiplink {
font-size: 0.9em;
}
#navibereich {
text-align: right;
color: #427C04;
padding: 230px 116px 4px 100px;
}
#navibereich ul { margin-bottom: 0; }
#navibereich li {
display: inline; /*damit kann man Listenelemente nebeneinander stellen*/
list-style-type: none;
margin: 0;
}
#navibereich a {
color: white;
background-color: #C55930;
padding:2px 8px 2px 8px;
border: 1px solid white;
border-bottom: 0;
}
#startseite #navi01 a,
#betreuung #navi02 a,
#senioren #navi0201 a,
#behinderte #navi0202 a,
#kinder #navi0203 a,
#tiere #navi0204 a,
#grundpflege #navi03 a,
#haushalt #navi04 a,
#organisation #navi05 a,
#soziales #navi06 a,
#kontakt #navi07 a,
#impressum #navi08 a
{
color: black;
background-color: #C3D3A8;
}
#navibereich a:hover
{
color: white;
background-color: #659C1A;
border-bottom-color: white;
}
#navibereich a:focus
{
color: white;
background-color: #659C1A;
border-bottom-color: white;
}
#navibereich a:active {
color: #C55930;
background-color: #659C1A;
border-bottom-color: white;
}
#textbereich {
padding: 10px 50px 10px 50px;
}
#textbereich1 {
padding: 10px 50px 10px 50px;
background: white url(fotos/impressum.gif) no-repeat right;
}
#textbereich2 {
padding: 10px 50px 10px 50px;
}
#textbereich a {
border-bottom: 1px dotted;
color: #C55930;
}
#textbereich2 a {
border-bottom: 0;
color: black;
}
#textbereich a:hover,
#textbereich a:focus {
border-bottom: 0;
}
#fussbereich {
padding: 10px 20px 20px 20px;
margin-top: 0;
color: white;
}
/*---------Fotogalerie---------*/
div.galerie {
overflow: hidden; /* Zum Einschliessen der Floats */
background-color: white;
padding: 0 10px 10px 0;
margin: 0 3px 3px 0;
}
div.galerie img {
float: left;
padding: 4px;
border: 1px solid gray;
margin-right: 50px; /*Zwischenabstand zwischen den Bildern*/
margin-bottom: 15px;
}
div.galerie2 img {
float: right;
padding: 4px;
border: 1px solid gray;
margin-right: 50px 100px; /*Zwischenabstand zwischen den Bildern*/
margin-bottom: 15px;
}
div.galerie hr {
width: 0;
height: 0;
font-size: 0;
line-height: 0;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
/* IE-Patch fuer Clearfix */
.clearfix {display: inline-block; }
/* Vor IE5/Mac vertstecken: Commented Backslash Hack \*/
* html .clearfix { height: 1px; }
.clearfix {display: block; }
/* Ende Versteckspiel fuer IE5/Mac */
/* Sternchen-Hack und Holly-Hack bewirken hasLayout im IE6 */
* html div.galerie { height: 1%; }
.clearing { clear: both; }
/*----------Fotogalerie Ende----------*/
/* ======================================
4. Sonstige Styles
====================================== */
/*Das Kontaktformular*/
form {
width: 300px; /*Breite des Formulars*/
padding: 5px 20px 10px 0px;
border: 1px black;
margin: 0;
}
label { /*Beschriftung auf eigener Zeile*/
display: block;
cursor: pointer; /*Mauszeiger wird zur Hand*/
}
input#absender,
textarea {
width: 300px;
border: 1px solid #8c8c8c;
margin-bottom: 1em;
}
textarea {
height: 10em;
}
input:focus,
textarea:focus {
background-color: #d9d9d9;
}
/* =======================================
E N D E D E S S T Y L E S H E E T S
======================================= */
- Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<html lang="de">
<title>Alltagsbegleitung</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="Administrator">
<meta name="robots" content="index, follow" />
<meta name="description" content="alb " />
<meta name="author" content="" />
<meta name="author-site" content="" />
<link rel="stylesheet" type="text/css" href="boxen.css" />
<link href="druckversion.css" rel="stylesheet" type="text/css" media="print" />
<link href="favicon.ico"="shortcut icon" />
<!--[if lt IE 6]>
<link href="ie5x.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body id="startseite">
<div id="wrapper">
<div id="kopfbereich">
</div> <!-- Ende kopfbereich -->
<div id="navibereich">
<ul>
<li id="navi01"><a href="index.html">Startseite</a></li>
<li id="navi02"><a href="betreuung.html">Betreuung</a></li>
<li id="navi03"><a href="grundpflege.html">Grundpflege</a></li>
<li id="navi04"><a href="haushalt.html">Haushalt</a></li>
<li id="navi05"><a href="organisation.html">Organisation</a></li>
<li id="navi06"><a href="soziales.html">Soziales</a></li>
<li id="navi07"><a href="kontakt.php">Kontakt</a></li>
<li id="navi08"><a href="impressum.html">Impressum</a></li>
</ul>
</div> <!-- Ende navibereich -->
<div id="box">
<span class="box-top-right"></span>
<div id="textbereich2">
<h1>Startseite</h1>
<br>
<div class="galerie">
<img src="fotos/traurig.jpg" width="200" height="203" border="0" alt="Traurige Frau">
<br>
<br>
<br>
<br>
<h3>Sind Sie verzweifelt, einsam, traurig, überschuldet,
<br><br> überfordert und wissen einfach nicht mehr weiter?
<br><br>Benötigen Sie Hilfe für Ihre Angehörige?</h3>
</p>
</div>
<h5>Wir von der alb Alltagsbegleitung wollen dazu beitragen,
<br><br>
</h5>
<ul>
<li><a href="grundpfglege.html">die Isolierung älterer, pflegebedürftiger und hilfebedürftiger Menschen zu verhindern und ihren Platz in der Gesellschaft zu erhalten</a></li>
<li><a href="organisation.html">bei der Schuldenregulierung</a></li>
<li><a href="organisation.html">Sie bei bürokratischen Dingen zu unterstützen</a></li>
<li><a href="haushalt.html">Sie zu entlasten bei Einkauf, Haus- und Gartenarbeit</a></li>
<li><a href="betreuung.html">Ihre Kinder zu betreuen</a></li>
<li><a href="betreuung.html">Ihre Tiere zu betreuen</a></li>
<li><a href="organisation.html">Ihnen den Umgang mit dem PC zu ermöglichen</a></li>
<li><a href="soziales.html">Ihnen die Einsamkeit zu nehmen</a></li>
<li>und noch vieles mehr</li>
</ul>
</div> <!-- Ende textbereich -->
<span class="box-bottom-left"></span>
<span class="box-bottom-right"></span>
</div>
<div id="fussbereich">
<address>
</div> <!-- Ende fussbereich -->
</div> <!-- Ende wrapper -->
</body>
</html>
Würde mich sehr freuen.
L.G. fanusa
