Zwei DivContainer in dreispaltigen Layout

brimberry · #1 (**permalink**) 05.04.2011, 12:19

Hi,

ich möchte zwei Div-Container in den contentbereich (mitte) eines dreispaltiges Layout einfügen. Dabei stehen die zwei Div-Container über der Anzeige der aktuellen Position und dem eigentlichen Layout.

So soll das aussehen:

Mein Problem ist jetzt, dass der Div-Container mit der aktuellen Position (aktuelle Seite) sich über die bzw. neben die beiden Container schiebt.

Siehe hier:

Zu Beachten ist vielleicht, dass derzeit die rechte Spalte (contentbar-right) nicht gefüllt ist. Trotzdem darf das nächste DIV nicht in diesen Bereich gehen.

Zudem will ich vielleicht hinzufügen, dass ich nicht mit display: table arbeiten möchte, da es nicht zwingend abwärtskompatibel ist.

Gibt es mit float bzw. claer eine Möglichkeit? Bei clear: both rückt der Bereich auch unter das linke und rechte Menü (eigentlich auch logisch).

Ich möchte auch keine Position definieren und sagen px y und px x. Das funktioniert nicht auf Handhelds oder iPhone o.ä. - ich habe möglichst alles in Prozentangaben gemacht.

HTML-Code: (Den PHP-Code bitte außenvor lassen)

HTML-Code:

<!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >    
  <head>    
    <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />    
    <jdoc:include type="head" />    
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />      
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/print.css" type="text/css" media="Print" />      
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" media="screen, projection" />      
    <!--[if lte IE 7]> 
        <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/ie7only.css" ype="text/css" media="screen, projection" /> 
        <![endif]-->       
    <!--[if lte IE 6]> 
        <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/ie6only.css" type="text/css" media="screen, projection" /> 
        <![endif]-->   
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/javascript/equalcolumns.js"></script>     
    <style type="text/css">
    body {
      background: #FFFFFF url(<?php echo $this->baseurl ?>templates/<?php echo $this->template ?>/images/verlauf.jpg) top left repeat-x;
    }
    #header {
      background-image: url(<?php echo $this->baseurl ?> templates/<?php echo $this->template ?>/images/header.jpg);
    } 
    </style>                      
  </head>                       
  <body>                                       
    <div id="wrapper">                                                       
      <div id="kopfbereich">
        <jdoc:include type="modules" name="top" style="xhtml" />                                                                
      </div>             
      <div id="headbar">                                                                                                                            
          <div id="navbar">                                                                                                           
              <jdoc:include type="modules" name="navioben" style="xhtml" />                                                                                                                                                                                                                      
            <!-- Ende sidebar_innen -->                                                                                                   
          </div>                                                                                             
          <!-- Ende sidebar -->                                                                                                   
          <div id="searchbar">                                                                                                           
              <jdoc:include type="module" name="search" style="xhtml" />                                                                                                                                                                                                                      
            <!-- Ende textbereich_innen -->                                                                                                   
          </div>                                                                                                            
      </div>             
      <div id="bodycontent">                                                       
          <!-- Ende kopfbereich -->       
          <?php if($this->countModules('left')) : ?>                                                               
          <div id="navibereich">                                                                       
            <div id="navibereich_innen">
              <jdoc:include type="modules" name="left" style="xhtml" />                                                                        
            </div>                                                                         
            <!-- Ende navibereich_innen -->                                                               
          </div>      
          <?php endif; ?>                                                         
          <!-- Ende navibereich -->       
          <?php if($this->countModules('right')) : ?>                                                                 
          <div id="sidebar">                                                                       
            <div id="sidebar_innen">
              <jdoc:include type="modules" name="right" style="xhtml" />                                                                       
            </div>                                                                         
            <!-- Ende sidebar_innen -->                                                               
          </div>      
          <?php endif; ?>                                                         
          <!-- Ende sidebar -->                                                               
          <div id="textbereich" class="col_<?php echo $contentwidth; ?>">                                                                       
            <div id="textbereich_innen">                                                                                  
              <div id="contentbar">
              <?php if($this->countModules('contentbar-left')) : ?>                                                                                                                                     
                  <div id="contentbar-left">                                                                                                               
 
                      <jdoc:include type="modules" name="contentbar-left" style="xhtml" />                                                                                                              
                                                                                                              
                  </div>
                  <?php endif; ?> 
                  <?php if($this->countModules('contentbar-right')) : ?>                                                                                                                                                                             
                  <div id="contentbar-right">                                                                                                               

                      <jdoc:include type="modules" name="contentbar-right" style="xhtml" />                                                                                                                
                                                                                                   
                  </div>
                  <?php endif; ?>                                                   
                                                              
              </div>                     
              <div id="breadcrumb">                                                 
                                                                                   
                  <jdoc:include type="modules" name="breadcrumb" style="xhtml" />                                          
                                                              
              </div>                                                       
              <div id="content">                                      
                      
                  <jdoc:include type="message" />                     
                  <jdoc:include type="modules" name="debug" />                     
                  <jdoc:include type="component" />             test             
                  <jdoc:include type="modules" name="content" style="xhtml" />                                                             
                                          
              </div>                                                                       
            </div>                                                                         
            <!-- Ende textbereich_innen -->                                                               
          </div>                                                         
          <!-- Ende textbereich -->           
      </div>                                                              
      <div id="fussbereich">      &copy; 2010 - 
        <?php echo date('Y'); ?> 
        <?php echo $app->getCfg('sitename'); ?>      
        <jdoc:include type="modules" name="footer" style="xhtml" />                                                            
      </div>                                                         
      <!-- Ende fussbereich -->                                               
    </div>                                         
    <!-- Ende wrapper -->                               
  </body>
</html>

CSS-Code:

Code:

/* ======================================  1. Kalibrierung und Restauration  ====================================== */
/* Reset - alle Abstände auf NULL */
* {
	padding: 0;
	margin: 0;
	font-size: 1em;
}
html {
	height: 100%;
/* Notwendig?! */
}
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: black;
}
/* ======================================  2. Allgemeine Styles  ====================================== */
ul.menu {
	list-style-type: none;
	margin: 1em auto;
/* zum zentrieren des Menues */
}
ul.menu li {
	margin-left: 1em;
	float: left;
	background: gray;
}
/* ======================================  3.  Styles für die Layoutbereiche  ====================================== */
.search {
	margin: 1em auto;
}
#wrapper {
	width: 100%;
	min-width: 66%;
	max-width: 80%;
/* Einstellen der Seitengröße */
	margin: 1em auto;
/* zum zentrieren des Wrappers */
}
* html #wrapper {
	width: 80%;
}
#kopfbereich {
	position: relative;
/* Notwendig?! */
}
#headbar {
	width: 100%;
/* Notwendig?! */
	background: red;
}
#navbar {
	background: red;
	float: left;
/* um den Zeilenumbruch des ul zu entfernen */
	width: 60%;
	height: 3em;
}
* html #navbar {
	width: 11%;
}
#searchbar {
	background: orange;
	float: right;
	width: 40%;
	height: 3em;
	text-align: center;
}
* html #searchbar {
	width: 11%;
}
#bodycontent {
	background: silver;
	width: 100%;
}
#navibereich {
	float: left;
	width: 20%;
}
* html #navibereich {
	width: 11%;
}
#navibereich_innen {
	padding: 0;
}
#sidebar {
	float: right;
	width: 20%;
}
* html #sidebar {
	width: 11%;
}
#sidebar_innen {
	padding: 0;
}
#textbereich {
	background: white;
	margin-left: 20%;
	margin-right: 20%;
}
* html #textbereich {
	margin-left: 13%;
	margin-right: 13%;
}
#textbereich_innen {
	padding: 0;
}
#textbereich.col_960 {
	width: 100%;
}
#textbereich.col_770 {
	width: 80%;
}
#textbereich.col_580 {
	width: 60%;
}
#contentbar {
	height: 20%;
	width: 100%;
}
#contentbar-left {
	float: left;
	width: 50%;
	height: 100%;
}
* html #contentbar-left {
	width: 11%;
}
#contentbar-right {
	float: right;
	width: 50%;
	height: 100%;
}
* html #contentbar-right {
	width: 11%;
}
#breadcrumb {
	background: green;
	height: 20%;
	width: 100%;
}
#content {
	width: 100%;
}
#fussbereich {
	clear: both;
	padding: 1em 2em 2em 2em;
	border-top: 1px solid #8c8c8c;
	margin-top: 0;
}

Und mit Tabellen soll man ja nicht layouten. Daher frage ich euch. Habt ihr eine Idee? Geht es mit irgendwelchen Tricks, so dass es auch abwärtskompatibel sein kann? Es muss aber nicht zwingend in IE 4 oder 5 laufen. Aber der IE 6 sollte das schon noch kapieren.

Danke für eure Antwort.
Grüße brimberry

K.Roland · #2 (**permalink**) 05.04.2011, 15:04

Hallo

Ich blicke hier noch nicht so recht durch.
Meiner Meinung nach ist das ganze Layout falsch aufgebaut.
Mit ..% Angaben u.s.w.

pkipper · #3 (**permalink**) 05.04.2011, 15:21

Hi Brimberry,

Hmmm... Also ich verstehe leider auch nicht so ganz was Du jetzt wolltest. Lade doch bitte mal ein Testcase hoch, dann sind die Leute auch eher gewillt Dir zu helfen

Was den Float anbelangt so gib der gelben Box doch einfach "float:left" der dunkelgrünen "float:right" und der rosa Box "clear: both". Das ganze sollte sich natürlich in einem Wrapper befinden.

Liebe Grüsse,

Philippe

cebito · #4 (**permalink**) 05.04.2011, 15:23

Zitat:

Zitat von K.Roland

Meiner Meinung nach ist das ganze Layout falsch aufgebaut.
Mit ..% Angaben u.s.w.

Und was bitte ist falsch an Prozentangaben?

@TE - geht mir auch so, dein Anliegen wird einem nicht so richtig klar. Und der pure Quelltext animiert nicht wirklich sich da durchzuwursten.

brimberry · #5 (**permalink**) 05.04.2011, 17:08

Zitat:

Zitat von K.Roland

Hallo

Ich blicke hier noch nicht so recht durch.
Meiner Meinung nach ist das ganze Layout falsch aufgebaut.
Mit ..% Angaben u.s.w.

Da ist nichts falsch aufgebaut. Du hättest es wahrscheinlich mit Tabellen gemacht. Die Prozentangaben sind besser und notwendig - gerade wenn man eine Webseite auch gleich für mobile Endgeräte bauen will. Dann passt sich nämlich die Seite, Schriftgröße (deswegen in em) gleich an die Größe des Browsersbzw. Endgeräts an. So einfach ist das.

Zitat:

Zitat von pkipper

Hi Brimberry,

Hmmm... Also ich verstehe leider auch nicht so ganz was Du jetzt wolltest. Lade doch bitte mal ein Testcase hoch, dann sind die Leute auch eher gewillt Dir zu helfen

Was den Float anbelangt so gib der gelben Box doch einfach "float:left" der dunkelgrünen "float:right" und der rosa Box "clear: both". Das ganze sollte sich natürlich in einem Wrapper befinden.

Liebe Grüsse,

Philippe

Danke! Die Idee ist einfach Großartig!!! Also mit dem Wrapper das war mir klar. Ich habe auch einen Wrapper um das dreispaltige Layout gesetzt. Aber das ist ja quasi ein zusätzlicher Wrapper im content (in der mittleren spalte).. sozusagen. Man darf nur nicht vergessen, dem Wrapper selbst dann aber auch noch float: left; zuzuweisen, damit nämlich das clear:both von unten her aufgehoben wird (so gilt es nämlich dann nur noch im Wrapper selbst).

Dankeschön für den Gedankenanstoß.

Grüße
brimberry

K.Roland · #6 (**permalink**) 05.04.2011, 18:22

Und was bitte ist falsch an Prozentangaben?

Hallo

Ok vieleicht past ja alles hier mit Prozentangaben.

Prozentngaben hin oder herr, kann jeder machen wie er will.
Trotzdem würde ich das ganze anders Aufbauen.

Ich werde das ganze mal Nachbauen.

stolle · #7 (**permalink**) 05.04.2011, 19:00

Hallo,

ich hätte es vermutlich so die Richtung gemacht:

HTML

Code:

<!--  Obere Bereich -->
<div id="wrapper_top">
	
	<div id="nav_top"> Navigation oben</div>
	<div id="searchbar">Searchbar</div>
</div>


<!--  3 Spalten-Layout -->

<div id="nav_links">Navigation Links</div>

<div id="sidebar">Sidebar</div>

<div id="wrapper_content">
	<!-- Bereiche im Content -->
	<div id="last_news">Letzte News</div>
	<div id="neue_eintraege">Neueste Forenbeiträge</div>
	<div id="aktuelleSeite">aktuelle setienposition</div>
	<div id="content">content</div>
</div>

CSS:

Code:


#wrapper_top {
	width: 100%;
}

#nav_top {
	width: 60%;
	background-color: red;
	float:left;
}

#searchbar {
	display: inline-block;
	width: 40%;
	background-color: blue;
}

#nav_links {
	float: left;
	width: 150px;
	background-color: blue;
}

#sidebar {
	float: right;
	width: 150px;
	background-color: green;	
}

#wrapper_content {
	margin-left: 150px;
	margin-right: 150px;
}

#last_news {
	float: left;
	background-color: yellow;
	width: 60%;
}

#neue_eintraege {
	float: right;
	width: 40%;
	background-color: purple;
}

#aktuelleSeite {
	clear:both;
	background-color: orange;
}

#content {
	background-color: red;
}

Hab das jetzt so runtergeschrieben, ich bin mir auch nicht sicher, ob das so die Toplösung ist. Kann für dich aber vllt. ein Anhaltspunkt sein.

Edit: Achso, die Höhenangaben und breiten etc. müsstest du dir natürlich anpassen wie du es brauchst, es ging ja in erster Linie um die Floats im mittleren Bereich wenn ich es richtig verstanden habe.

Gruß

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Bitte um Hilfe - CSS und Prozentangaben	sprefer	CSS	3	01.03.2011 04:11
Untermenü im IE	nici	CSS	10	22.06.2009 21:19
Höhe in einem dreispaltigen Layout	sliver2203	CSS	4	24.02.2009 10:55
Probleme mit Layout	kruemelchen26	CSS	0	15.05.2007 22:40
Dynamische Layout Breite und Höhe	altes-kind	CSS	7	12.01.2007 11:54