Momentan lern ich fleissig aus einem Buch von Zero2Hero HTML & CSS.
In diesem Buch hab ich eine Menge über HTML und CSS gelernt. nun bin ich dabei mein erstes Layout zuerstellen, was nicht gerade einfach ist, da etwas nicht richtig geschrieben wurde oder ich hab es einfach falsch aufgeschrieben. Was ich nicht glaube, denn ich hab alles 1 zu 1 abgeschrieben sprich gelernt.
was ich gerne wissen möchte ist, wie krieg ich die unterleiste fixiert? mit Position:Fixed; hats leider nicht so geklappt wie ich es mir erhofft hatte.
dazu möcht ich noch wissen, wie man eine navigationsleiste verlängern kann, sprich die farbe runter ziehen kann. Sodas es am unteren "fuss" balken dran ist.
ich meine diese zeile hier. border-top: 30px solid #dad9b2;
hier mal den Layout CSS code:
- Code: Alles auswählen
* {
margin: 0;
padding: 0;
}
body {
font: 100% sans-serif;
color: #000;
background-color: #fff;
}
#kopf {
font: 1.8em serif;
text-align: center;
background-color: #dad6b1;
color:#000;
border-bottom: #6f7400 2px solid;
padding: 40px;
}
#container {
margin: auto;
width: 960px;
}
#navigation {
width: 250px;
float: left;
}
#inhalt {
margin-left: 300px;
}
#inhalt h2{
color: #565919;
}
#fuss {
background-color: #dad6b1;
padding: 42px;
color: #000;
border-top: 2px solid #6f7400;
clear:left;
margin-top: 15px;
}
p {
margin-bottom: 20px;
}
Navigations CSS Code:
- Code: Alles auswählen
#Navigation {
background-color: #ebea2e;
width: 250px;
font-size: 0.8em;
border-top: 30px solid #dad9b2;
}
#Navigation ul {
list-style-type: none
margin: 0;
padding: 0;
}
#Navigation a, #Navigation strong {
text-decoration: none;
letter-spacing: 1px;
display: block;
padding: 5px 15px;
border-bottom: 1px solid white;
color: #565919;
#Navigation a:hover, #navigation a:focus, #navigation a:active, #Navigation a:strong {
background-color:#e6e0cf;
font-weight: normal;
}
und zu gute letzte:
Html Code
- Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="XAR Files" content="index_htm_files/xr_files.txt"/>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252"/>
<meta name="Generator" content="Xara HTML filter v.3.1.1.387"/>
<link rel="stylesheet" type="text/css" href="CSS/Bilder_einfügen_CSS.css" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="CSS/Navigation_CSS.css" />
<link rel="stylesheet" type="text/css" href="CSS/layout_CSS.css" />
<html>
<title>beispiellayout</title>
</head>
<body>
<div id="kopf">
<ul>
<h1>Eine schöne grosse Kopfzeile
</h2>
</ul>
</div>
<div id="container">
<ul>
</ul>
</div>
<div id="Navigation">
<ul>
<li><strong>Startseite </strong></li>
<li><a href="#">Aktuelles </a></li>
<li><a href="#">Angebote </a></li>
<li><a href="#">Service </a></li>
<li><a href="#">Kontakt </a></li>
<li><a href="#">Impressum </a></li>
</ul>
</div>
<div id="inhalt">
<ul>
<h2>Lorem ipsum dolor sit.
</h2>
<p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer
</p>
</ul>
</div>
<div id="fuss">
<ul>
</ul>
</div>
</body>
</html>
