Seitenbox kaputt/css-probleme

doofesohr · 06.12.2009

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:

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-Code:

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>
                
    &lt;div id="seitenbox_links"&gt;<br /> 
    leerlassen, kein text hier rein ... <br />
    &lt;/div&gt;
                        
    </code>
                
    <p>
    Und beim Content-Div: <code>&lt;div id="content" class="mit_seitenbox"&gt;</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> &amp; 
        <a href="http://jigsaw.w3.org/css-validator/">CSS</a>
        </p>

        <p>
        © by HTML-AG 2009 
        </p>
        
        <!-- Ende Footer -->
        </div>




<!-- Ende Wrapper -->
</div>

</body>

Weiß eventuell jemand eine Lösung für unser Problem?

Gruß

ohr

Alex · 06.12.2009

AW: Seitenbox kaputt/css-probleme

Hi,
ich kenne das Tutorial nicht, aber müsst Ihr dem div zur Seitenbox nicht noch ein float zuweisen, damit der Content daneben eingeblendet wird? (so hatte ich zumindest verstanden, dass Ihr Euch das vorstellt)

Code:

#seitenbox_links {
	float: left;
}

Gruß

cebito · 06.12.2009

AW: Seitenbox kaputt/css-probleme

Alex schrieb:
Hi,
ich kenne das Tutorial nicht, aber müsst Ihr dem div zur Seitenbox nicht noch ein float zuweisen, damit der Content daneben eingeblendet wird? (so hatte ich zumindest verstanden, dass Ihr Euch das vorstellt)

Code:

#seitenbox_links { float: left; }

Gruß

So ist es, außerdem fehlt da noch eine geschweifte Klammer:

Code:

#navi a:hover {
 background:#666666;
 border-bottom: 1px solid #3a4870;
 color:#CCC;
        /* <<<<<<<<< da fehlt was! <<<<<<<<< */
#content {
 padding:0 15px;
 font-size:120%;
}

Edit: Was macht das </pre> da drin?

HTML:

<li><a href="deutsch.html">Deutsch</a>   </pre> </li>

Herr_D · 06.12.2009

AW: Seitenbox kaputt/css-probleme

der sitebox float:left und eine weite zuordnern...

nach dem Content dann ein clear:both...

Euer Lehrer ist was?

#ne ol in 'ne h einzuordnen wer hat das erlaubt?

cebylon · 06.12.2009

AW: Seitenbox kaputt/css-probleme

... und beim #wrapper würde ich generell jegliche height herausnehmen

doofesohr · 06.12.2009

AW: Seitenbox kaputt/css-probleme

aiaiai
scheint ja einiges im argen zu liegen

naja mein lehrer hat auch nich soo die ahnung - aber er bemüht sich

werde demnächst mal versuchen das zu beheben was ihr bisher gesagt habt.
danke schonmal für die antworten

das ganze hab ich jetz schonmal so weit übernommen.
hätte nun allerdings noch ne frage, wie schaffe ich es das sich der wrapper von der höhe her an die größe meines contents anpasst, mindestens aber so groß ist wie meine seitenbox?

une_art · 06.12.2009

AW: Seitenbox kaputt/css-probleme

doofesohr schrieb:
hätte nun allerdings noch ne frage, wie schaffe ich es das sich der wrapper von der höhe her an die größe meines contents anpasst, mindestens aber so groß ist wie meine seitenbox?

Ich hab jetzt nicht deinen ganzen Code komplett studiert, aber ich würde es wie folgt machen:

div#wrapper keine höhe zuweisen (somit ändert sich diese mit dem Inhalt)
deine seitenbox wie schon erwähnt mit "float:left" und dann noch eine höhe mit "height:__px" zuweisen

So streckt die Seitenbox den Wrapper immer auf ihre eigene Höhe und da er ja variabel ist, kann er auch größer sein, wenn der Inhalt es erfordert.

Ich hoffe das war einigermaßen verständlich und auch soweit richtig

doofesohr · 07.12.2009

AW: Seitenbox kaputt/css-probleme

aus irgendeinem grund will der wrapper sich noch immer nicht an die seitenbox anpassen

mit dem content klappts allerdings mittlerweile

WebMediaService · 07.12.2009

AW: Seitenbox kaputt/css-probleme

ich weiß jetzt nicht, wieviele Änderungen du jetzt schon im Code vorgenommen hast, ich gehe von deinem ersten gepostetem aus.
Gib dem header eine breite von 1024px, dann wird deine sitebox automatisch nach unten geschoben - ohne float. Der Sitebox einen float left und eine deklaration für clear float left (both) bevor deine content kommt.
Dein Quellcode ist schlecht formatiert und dadurch sind Fehler nur schwer zu erkennen, speziell dein css.