Hallo Leute, ich bin grad dabei mir ein wenig CSS beizubringen.
Leider scheitere ich grad an Abständen unter dem blauen head und bei "was kannst du hier erreichen":
und hier mal direkt die html:
und nun die dazugehörige CSS Datei:
Frage: woher kommen die Abständen und wie bekomme ich die weg ?
Vielen Dank.
Leider scheitere ich grad an Abständen unter dem blauen head und bei "was kannst du hier erreichen":
und hier mal direkt die html:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html;" />
<title>titel</title>
<meta name="author-personal" content="name" />
<meta name="author-mail" content="mailto:[email protected]" />
<meta name="description" content="blablabla" />
<meta name="language" content="de" />
<meta name="robots" content="index, follow" />
<!-- Einbundung der CSS Datei -->
<link rel="stylesheet" href="default.css" type="text/css" media="screen, projection" />
</head>
<!-- Anfang der eigentlichen Seitenstruktur -->
<body>
<!-- Header -->
<div id="head">
<h1><img src="headernew2.png" alt="Kochbar" width="467"/></h1>
<!-- Navigationspunkte -->
<ul>
<li><strong><a href="index.html">Startseite</a></strong></li>
<li><a href="ueber-uns.html">Über mich</a></li>
<li><a href="möglichkeiten.html">Möglichkeiten</a></li>
<li><a href="projekte.html">Projekte</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</div>
<!-- Deklaration der Blockelemente -->
<div id="main">
<div id="sidebar"/>
<!-- Sidebar -->
<div>
<h2>Kontakt</h2>
<p>Email: bla@bla</p>
<h2>Was kannst Du hier erreichen ?</h2>
<h3>blablabla</h3>
<p><a href="konzept.html">Konzept</a></p>
</div>
<div id="footer">
<!-- Footer -->
</div>
</body>
</html>
Code:
/**
* Globale Einstellungen und Bugfixes
*
* @section Browser-Reset
*/
/* Zurücksetzen der Innen- und Außenabstände */
* {
margin: 0;
padding: 0;
}
/**
* Schriftgröße kontrollieren
*/
body, td, th { font: normal 75%/167% Georgia, Palatino, "Times New Roman", serif; }
td, th { font-size: 100%; }
/* Farben und Hintergründe setzen */
html, body {
color: #3b2b20;
background-color: white;
}
/**
* @section Content
*/
div#content {
margin: 0 0 0 288px;
padding: 0 12px 0 36px;
}
#content h1 { margin-top: 0; }
#content img {
float: left;
margin: .5em .5em .5em 0;
}
/**
* Regeln für allgemeine Elemente
*
* @section Überschriften
*/
h1 {
color: #9F0F00;
background-color: white;
font-size: 3em;
line-height: 1.1;
margin: .8em 0;
}
h2 {
color: #3C6331;
background-color: white;
font-size: 1.5em;
line-height: 1.1;
margin: .8em 0;
text-transform: uppercase;
}
/**
* @section Absätze
*/
p { margin: .8em 0; }
/**
* @section Links und Anker
*/
a:link {
color: #980c02;
background-color:transparent;
}
a:visited {
color: #999;
background-color: transparent;
}
a:hover, a:focus {
color: #FF7700;
background-color: transparent;
}
a:active {
color: white;
background-color: #980c02;
}
/* Farben und Hintergründe setzen */
html, body {
color: #3b2b20;
background-color: white;
}
body {
background: url(backroundnew.png) top center repeat-x;
}
/**
* @section Hauptbereich
*/
div#main {
color: inherit;
background: white url(blut2.png) top center repeat-x;
}
#main div#main-inner {
width: 2px;
margin: 0;
padding: 0 0 0 0;
}
/**
* Regeln für besondere Bereiche
*
* @section Kopfbereich
*/
div#head {}
#head h1 {
margin: 0;
padding: 0;
width: 467px;
}
/**
* Regeln für besondere Bereiche
*
* @section Kopfbereich
*/
div#head {
width: 1250px;
margin: auto;
position: relative;
}
#head h1 {
margin: 0;
padding: 0;
width: 467px;
}
/**
* @section Hauptmenü
*/
#head ul {
position: absolute;
bottom: 8px;
left: 350px;
}
#head ul li {
float: left;
list-style: none;
margin: 0 2px 0 0;
}
#head ul a,
#head ul strong {
color: #352545;
background:#FBFBFB url(grau.jpg) bottom left repeat-x;
display: block;
padding: 0px;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
#head ul a:hover,
#head ul a:focus,
#head ul a:active,
#head ul strong {
color: white;
background: #638F56 url(grün.jpg) bottom left repeat-x;
}Vielen Dank.
