Nicht mehr ganz neu hier
Hallo,
momentan erstellen wir in der Schule in einer AG neue Intranet-Seiten für unsere Schule. Jetzt sind wir auf ein Problem gestossen, das auch unser Lehrer nicht beheben konnte.
Den Grundteil der Seite haben wir nach folgendem Tutorial zusammengebastelt:
Nun wollten wir auf einer Seite mit Seitenbox eine Liste mit Links erstellen die auch einen Hover-Effekt haben. Die Links und den Effekt haben wir zwar hinbekommen, allerdings ist nun das Problem das die Seitenbox komplett verschwunden ist und der Content komplett nach unten gerutscht ist.
CSS-Datei:
HTML-Code:
Weiß eventuell jemand eine Lösung für unser Problem?
Gruß
ohr
momentan erstellen wir in der Schule in einer AG neue Intranet-Seiten für unsere Schule. Jetzt sind wir auf ein Problem gestossen, das auch unser Lehrer nicht beheben konnte.
Den Grundteil der Seite haben wir nach folgendem Tutorial zusammengebastelt:
Nun wollten wir auf einer Seite mit Seitenbox eine Liste mit Links erstellen die auch einen Hover-Effekt haben. Die Links und den Effekt haben wir zwar hinbekommen, allerdings ist nun das Problem das die Seitenbox komplett verschwunden ist und der Content komplett nach unten gerutscht ist.
CSS-Datei:
Code:
body {
font:10px verdana;
color:#555;
margin:20px;
background:url(../images/body2.png) top repeat-x #CCC;
}
* {
margin:0;
padding:0;
}
#wrapper {
margin:0 auto;
background:#fff;
padding:5px;
border:4px solid #3a4870;
height:700px;
width:1024px;
}
#header {
height:110px;
background:url(../images/header.png) top repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
#header h1 {
height:45px;
font:250% Trebuchet MS;
padding:30px 20px 10px 20px;
color:#fff;
text-align: center;
}
#nav {
margin:0 0 0 0;
}
#nav li {
list-style:none;
display:inline;
padding:7px 0;
}
#nav li a {
padding:7px;
color:#EBEAEA;
text-decoration:none;
}
#nav li a:hover {
background:#333;
border-bottom: 4px solid #3a4870;
color:#E009;
}
#seitenbox_links h2 {
font:36 Arial;
color:#009;
border-top:1px solid #009;
border-bottom:1px solid #009;
padding:5px;
}
#seitenbox_links p {
line-height:10px; /* wichtig: ändert Zeilenabstand in der linken Seitenbox */
}
#navi {
margin:0 0 0 0;
}
#navi li {
list-style:none;
padding:7px 0;
}
#navi li a{
padding:7px;
color:#000;
text-decoration:none;
}
#navi a {
padding:15px;
color:#000;
text-decoration:none;
}
#navi a:hover {
background:#666666;
border-bottom: 1px solid #3a4870;
color:#CCC;
#content {
padding:0 15px;
font-size:120%;
}
#content h3 {
font:140% Arial;
color:#222;
border-top:1px solid #009;
border-bottom:1px solid #009;
padding:5px;
}
.mit_seitenbox {
margin:0 0 0 200px;
}
#content h1,h2,h3,h4,p,ul,ol {
margin:15px 0;
line-height:20px; /* wichtig: ändert Zeilenabstand für den gesamten Text im Content */
}
/* Für die linke Seitenbox, nicht dringend benötigt, der Vollständigkeit halber:
#sidebar_left h1,h2,h3,h4,p,ul,ol,blockquote {
margin:15px 0;
}
*/
code {
background:#009;
}
#footer {
margin:30px -5px -5px -5px;
padding:15px;
background:#fff;
border-top:2px solid #eee;
clear:left;
}
a {
font-family: Verdana, Geneva, sans-serif;
font-size: 18px;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 36px;
}
h2 {
font-size: 36px;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Benni - Intranet</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/default.css" type="text/css" media="screen" />
</head>
<body>
<!-- Beginn Wrapper -->
<div id="wrapper">
<!-- Beginn Header -->
<div id="header">
<!-- Seitentitel im Header -->
<h1>Gymnasium der Beneditktiner<strong> - Intranet</strong></h1>
<!-- Beginn Navigationsmenü -->
<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="aktuelles.html">Aktuelles</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="abisz.html">A bis Z</a></li>
<li><a href="rechtundordnung.html">Recht & Ordnung</a></li>
<li><a href="mailto:verwaltung@gymn-benedictinum.de">Kontakt</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
<!-- Ende Header -->
</div>
<!-- Beginn Seitenbox -->
<div id="seitenbox_links">
<h2>
<ul id="navi">
<li><a href="deutsch.html">Deutsch</a> </pre> </li>
<li><a href="englisch.html">English</a></li>
<li><a href="franze.html">Französisch</a> </li>
<li><a href="latein.html">Latein</a> </li>
<li><a href="mathe.html">Mathematik</a> </li>
<li><a href="chemie.html">Chemie</a> </li>
<li><a href="physik.html">Physik</a> </li>
<li><a href="biologie.html">Biologie</a> </li>
<li><a href="geschichte.html">Geschichte</a> </li>
<li><a href="erdkunde.html">Erdkunde</a> </li>
<li><a href="politik.html">Politik</a> </li>
<li><a href="sowi.html">SoWi</a> </li>
<li><a href="philosophie.html">Philosophie</a> </li>
<li><a href="paedagogik.html">Pädagogik</a> </li>
<li><a href="informatik.html">Informatik</a> </li>
<li><a href="kunst.html">Kunst</a> </li>
<li><a href="musik.html">Musik</a> </li>
<li><a href="religion.html">Religion</a> </li>
<li><a href="sport.html">Sport</a></pre> </li>
</ul>
</h2>
</p>
<!-- Ende Seitenbox -->
</div>
<!-- Beginn Content MIT Seitenbox -->
<div id="content" class="mit_seitenbox">
<h2>Einleitung</h2>
<p>
Hallo und Herzlich Willkommen zum Homepage-Workshop 2 von eFoX.</p>
<p> Diese <b>Homepage</b>, die ihr so ähnlich am Ende dieses Workshops selbst gebaut habt ist sehr schlicht gehalten und dennoch modern gestaltet. Durch (X)HTML ist der Inhalt vom Design getrennt, das ermöglicht eine leichtere Verwaltbarkeit; somit lassen sich Inhalte sehr schnell umgestalten ohne die Seite komplett neu zu schreiben.
</p>
<h2>Die Seitenbreite</h2>
<p>
Die Seite hat eine <em>fixe</em> Breite von 760px, diese könnte aber auch <em>prozentual</em> zur Bildschirmauflösung des jeweiligen Besuchers angegeben werden. Im Div "Wrapper" wird diese Option zur Zeit festgelegt mit:
</p>
<code>
#wrapper {<br />
margin:0 auto;<br />
background:#fff;<br />
padding:5px;<br />
border:4px solid #555;<br />
<b>width:760px;</b><br />
}
</code> Der markierte Tag könnte beispielsweise durch: <b>width:80%;</b> ersetzt werden.
<h3>Ein Wort zur linken Seitenbox</h3>
<p>
Das beste an ihr, man kann sie auch komplett weglassen! Für eine Bilderseite ganz praktisch. Dazu müsst ihr einfach im Quelltext:
</p>
<code>
<div id="seitenbox_links"><br />
leerlassen, kein text hier rein ... <br />
</div>
</code>
<p>
Und beim Content-Div: <code><div id="content" class="mit_seitenbox"></code><br />
muss die Class einfach entfernt werden! Ein Anzeigebeispiel findet ihr im späteren Verlauf des Workshops, im Kapitel "Weitere Seiten organisieren".
</p>
<h2>Blindtext</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ultrices risus sit amet lectus. Cras vulputate augue in enim. Cras feugiat diam non odio suscipit rutrum. Nullam quam arcu, tincidunt eget, varius ac, semper non, massa. Sed lorem leo, gravida ut, mattis vitae, suscipit id, enim. Sed ac metus et lectus semper varius. Morbi posuere rutrum ante. Etiam ac purus. Sed mattis aliquam tortor. Duis facilisis tellus placerat lorem.
</p>
<!-- Ende Content -->
</div>
<!-- Beginn Footer -->
<div id="footer">
<p style="float:right;">
Validiertes <a href="http://validator.w3.org/check?uri=referer">HTML</a> &
<a href="http://jigsaw.w3.org/css-validator/">CSS</a>
</p>
<p>
© by HTML-AG 2009
</p>
<!-- Ende Footer -->
</div>
<!-- Ende Wrapper -->
</div>
</body>
Gruß
ohr