Inhalt + Seitenleiste gleich hoch

hzirl

So mal sehen, ob ich eine halbwegs verständliche Beschreibung meiner Frage schaffe ;):

Mein Template ist so angelegt, dass es eine fixe Breite von 760 Pixel hat und in der Mitte der Seite positioniert ist. Als Hintergrundbild für die Seite habe ich einen Farbverlauf von oben (dunkel) bis etwa zur Mitte (weiß). Das Template besteht aus fünf verschiedenen Divs, Kopfzeile, Menüzeile, Inhaltsbereich, Seitenleiste und Fußleiste. Inhaltsbereich und Seitenleiste liegen gefloatet nebeneinander und haben als Hintergrundfarbe ebenfalls weiß.

Da ich die Hintergrundgrafik mit fixer Position angegeben habe, kann es passieren, dass man beim Scrollen der Seite sehen kann, dass entweder Inhaltsbereich oder Seitenleiste kürzer sind und nicht bis zur Fußzeile reichen.

Ich habe mich schon auf alistapart.com umgesehen, wo eine Lösung mit einer Hintergrundgrafik beschrieben wird. Bei meinem Design läuft das allerdings auf eine ziemlich große Grafik hinaus, die entsprechend Zeit zum Laden benötigt.

Ich habe auch bereits versucht, um Inhaltsbereich und Seitenleiste einen weiteren div zu legen und in dem eine gemeinsame Hintergrundfarbe zu definieren, bei IE funktioniert das, bei FF und Opera leider nicht.

Kennt jemand von euch eine weitere Möglichkeit, wie ich das Problem lösen könnte?

LG, hzirl

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

mastermind

Wie heißt es so schön: Ein Bild sagt mehr als tausend Worte.
Gib uns bitte mal einen Link zu Deiner Baustelle.

hzirl

Tja, ist ja nicht so, dass ich nen Link nicht schon bei meiner Beschreibung hätte reingeben wollen... Da das ganze Projekt allerdings bei mir noch am localhost läuft, habe ich mal einen Screenshot gemacht:

http://img47.imageshack.us/my.php?image=screenshotur8.jpg
Ich hoffe, das zeigt mein Problemchen ebenfalls :| ...
Bin für jeden Tipp dankbar!

LG, hzirl

Jeriko

Der Screenshot nützt in dem Fall leider nix; schon beim Lesen der Überschrift war klar, dass in irgendeinem der div-Container ein clear:both; bzw. overflow:hidden fehlt. Welcher hängt aber davon ab, wie die untereinander verschachtelt sind.

Kannst du den Code der index.php hier mal posten?

Gruß Jeriko

hzirl

Okay, hier kommt der HTML-Code aus der index.php. Ich hab allerdings ein bißchen was gelöscht (Text und so), damit die Struktur leichter zu lesen ist.

HTML

<!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">
...
<body>
<a name="top"></a>
<div id="container">
<!--Kopfbereich-->   
<div id="header">
       <div id="description"><a href="http://localhost/buecherwurm/">Josef-Huber-Gasse 2<br />A-8010 Graz</a>
       </div>
</div>
<div id="navi">
    <ul>
        <li id="first"><a href="http://localhost/buecherwurm">Home</a></li>
    <li class="page_item"><a href="http://localhost/buecherwurm/index.php/buecher/" title="Bücher">Bücher</a></li>
        <li class="page_item"><a href="http://localhost/buecherwurm/index.php/romanhefte/" title="Romanhefte">Romanhefte</a></li>
        <li class="page_item"><a href="http://localhost/buecherwurm/index.php/comics/" title="Comics">Comics</a></li>
        <li class="page_item"><a href="http://localhost/buecherwurm/index.php/kontakt/" title="Kontakt">Kontakt</a></li>
        <li class="page_item"><a href="http://localhost/buecherwurm/index.php/links/" title="Links">Links</a></li>
        <li class="page_item"><a href="http://localhost/buecherwurm/index.php/impressum/" title="Impressum">Impressum</a></li>
    </ul>
</div>
<!-- umspannt Inhalt und Seitenleiste -->
<div id="contside">
   <!-- Inhaltsbereich --> 
   <div id="content">
   ...   </div>
   <!-- Seitenleiste -->
   <div id="sidebar">
        
      <form method="get" id="searchform" action="/buecherwurm/index.php">


      <input type="text" value="" name="s" id="s" />
      <input type="submit" id="searchsubmit" value="Suche" />
      </form>
      <div class="box">
      <h6>Login</h6>
    <ul>
           <li><a href="http://localhost/buecherwurm/wp-login.php">Anmelden</a></li>
    </ul>
      </div>    
      <div class="box">
      <h6>&Ouml;ffnungszeiten</h6>
    <ul>
       <li>Montag - Freitag</li>
       <li>9 - 12  u. 15 - 18 Uhr</li>
       <li>Samstags nach Vereinbarung</li>
    </ul>
      </div>
    </div>            
</div>
<div id="footer">
    <a href="#top">nach oben</a>
</div>
</div>
</body>
</html>

Alles anzeigen

Hier noch die Angaben aus dem Stylesheet für die Container:

Code

* {
    padding:0;
    margin:0;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:0.97em;
}


body {
    background:url(images/background.jpg) repeat-x top fixed;
}


/*Container um alle DIVs rundherum */
#container {
    text-align:center;
}


/*Kopfbereich*/
#header {
    background:url(images/header.jpg) no-repeat;
    height:192px;
    width:740px;
    margin:0 auto;
    }


    
/*Navigationsbereich*/
#navi {
    width:740px;
    background:#004499 url(images/menu.gif) no-repeat bottom;
    margin:0 auto;
    padding:0;
    text-align:left;
    height:2em;
}




/*container umspannt sidebar und content */
#contside {
    width:740px;
    margin:0 auto;
    background-color:white;
}


/*Sidebar*/
#sidebar {
    background-color:#fff;
    float:right;
    width:146px;
    text-align:left;
    padding:4px 0 0 8px;
    font-size:85%;
}


#sidebar .box {
    margin: 10px 8px 0 0;
    border: 2px solid #6699CC;
    padding: 4px;
}


/*Content: zeigt Blogeinträge oder Pages*/
#content {
    background-color:white;
    float:left;
    width:570px;
    text-align:left;
    padding:4px 8px 4px 8px;
}




/*Fußzeile*/
#footer {
    clear:both;
    width:740px;
    height:20px;
    margin:0 auto;
    font-size:85%;
    background:#004499 url(images/footer.gif) no-repeat top;
    padding-top:10px;
    text-align:right;
}

Alles anzeigen

Da es mehr oder weniger mein erster Versuch ist, mit divs ein Layout zu gestalten, will ich nicht ausschließen, dass da Fehler drin sind :roll: ...

LG, hzirl

hzirl

Okay, ich habe eine Lösung gefunden, die mir ganz gut gefällt:
Ich habe jetzt dem Container, der alle anderen divs umspannt, ein Hintergrundbild in der passenden Breite gegeben, das in der y-Ebene wiederholt wird. Damit reicht der weiße Bereich auf jeden Fall immer bis ans Ende der Seite.
Trotzdem danke für eure Reaktionen!

LG, hzirl

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Inhalt + Seitenleiste gleich hoch

Jetzt mitmachen!