✔ 3 Reihen Layout - klappt nicht so ganz

M

Myar

Mitglied
Hallöchen!

Seit zwei Tagen google ich mich dumm und dämlich und habe mich nun entschieden, mein Problem hier darzustellen.

Es geht um folgendes:
Ich möchte dieses Layout verwirklichen:

Das Bild an sich ist der Bildschrim, während der Wrapper halt nicht den ganzen Bildschrim mit 1000px ausfüllt und die anderen Elemente enthält.
dreireihenlayout.jpg


Mit meinem bisherigen Code überlappen sich Navi und Main und zwar unterschiedlich in den browsern -.-.
Zudem will navi nicht zentriert sein (also auch der Text). mal sitzt es links, mal rechts, die Links in der Navi sind übereinander...
Desweiteren, könnte aber auch Bild liegen, sind wenn ich das Hintergrundbild vom Seitenhintergrund zentriere und beim Textbereich margin-left und margin-right auf auto setze, liegt der Text nicht auf dem mittigen Hintergrund...

Es ist halt auch so, dass der gesamte Hintergrund ein zentriertes Hintergrundbild hat, welches in der Mitte einen bereich simuliert, auf dem halt der Text aufliegen soll. Der Wrapperhintergrund ist nochmal ein Bild, in diesem sind drei Linien, auf die halt die Navi gelegt werden soll.
Die adneren drei Bereiche haben keinen Hintergrund.

Naja, das übliche halt noch, der Fuß immer am unteren Bildschirmrand bei wenig Content.
Alles mittig.

Hier noch eine Testseite.
Nicht über das Bild wundern, dass habe ich zu testzwecken auf 1000px Breite gequetscht, da kommt noch ein gänzlich anderes hin^^
Klick mich

Hier mal mein bisheriger CSS und HTML Code:

CSS:
Code: 
*
    {
      margin: 0;
      padding: 0px;
    }

    option
    {
      padding-left: 0.4em;
    }
	
	html
	{
	  height: 100%;
	}
	
    body
	{
	  color: #426941;
  	  font-size: 105%;
  	  margin-bottom: 3%;
  	  font-family: arial, helvetica, tahoma ,verdana, sans-serif;;
  	  background-image: url(../img/layout2/bgmain.jpg);
  	  background-position: center;
  	  text-align: left;
  	  display: block;
  	  height: 100%;
	}

    /* Standardrahmen zurücksetzen */
    fieldset, img
    {
      border: 0;
    }

    /* Anpassung für Safari Browser. font-size:100% ist für den Safari in Formularen zu groß */
    select, input, textarea
    {
      font-size: 80%;
    }

    /* ######################################################################################################
    ** ### DIV-Container des Basislayouts ###################################################################
    ** ######################################################################################################
    */

    #wrapper /*Container für alle*/
    {
      z-index: 1;
      width: 1000px;
      margin: auto;
      min-height: 100%;
      background-image: url(../img/layout2/wrapperbg.jpg);
      background-repeat: no-repeat;
      /*background-color: white;*/    
    }
  
    #navi /*Navigation oben*/
    {
      z-index: 2;
      position: absolute;
      text-align: center;
      width: 1000px;
      margin: auto;
      padding-top: 98px;
      
    }

    #main /*Hauptabschnitt */
    {
      z-index: 3;
      width: 65%;
      min-height: 89.6%;
      margin-left: auto;
      margin-right: auto;
      padding-top: 20%;
	}

	#fuss /*Fuß*/
    {
      position: relative;
	  margin: auto;
      z-index: 4;
      clear: both;
      height: 10%;
    }
    
    * html #fuss
	{
		margin-top: -7.4em;
	}
	
    #navi_content /*Die immer sichtbare navi */
    {
      padding:0px 0px 0px 0px;
    }
    
    #navi_unternavi1 /*Erster Unternavi Bereich */
    {
      padding: 30px;
        
    }
    
    #navi_unternavi2 /*Zweiter Unternavi bereich*/
    {
      padding: 30px;
    }
    
    #main_contenthead /*Hauptabschnitt-Überschrift */
    {
      text-align: left;
      padding: 80px 0px 30px 20px;
        
    }
	
    #main_contenttext /*Hauptabschnitt-Text */
    {
      text-align: left;
      padding: 20px 20px 0px 20px;
        
    }
	
    #fuss_content /* Fuss-Text */
    {
      text-align: center;
      padding: 5px 20px;
        
    }

    /* clearfix zum Aufheben der Floatumgebung */

	.clearfix:after
	{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	}

	.clearfix {display: inline-block;}

	/* Hides from IE-mac \*/
	* html .clearfix {height: 1%;}
	.clearfix {display: block;}
/	* End hide from IE-mac */

HTML:
HTML: 
<?xml version="1.0" encoding="UTF-8"?>
<!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>
    <link href="css/gde.css" rel="stylesheet" type="text/css" />
    <title>Garten der Engel - {titel}</title>
	</head>
<body>

  <div id="wrapper"> <!-- Container start -->
	
	<div id="navi" class="clearfix"> <!-- Hauptnavi start -->
  		
  		<div id="navi_content" class="clearfix"> <!-- navi_content start -->
  			
  			<a href="1_ankunft.html">Ankunft</a>
  			<span class="menutrenn">•</span>
  			<a href="1_news.html">Neues</a>
  		
  		</div><!-- navi_content ende -->
  		
  		<div id="navi_unternavi1" class="clearfix"><!-- navi_unternavi1 start -->
  			{contentnavi}
  		</div><!-- navi_unternavi1 ende -->
  		
  		<div id="navi_unternavi1" class="clearfix"><!-- navi_unternavi2 start -->
  			{contentnavi}
  		</div><!-- navi_unternavi2 ende -->
  	
  	</div><!-- Hauptnavi ende -->
  	
	<div id="main"><!-- Hauptbereich start -->
   		
   		<div id="main_contenthead" class="clearfix"><h2>{contenthead}</h2></div>
        <div id="main_contenttext" class="clearfix">{contenttext}</div>
    
    </div><!-- Hauptbereich ende -->
		
	<div id="fuss"><!-- Fuß start -->
        <div id="fuss_content" class="clearfix">{fuß}</div>
    </div><!-- Fuß start -->
    
    <div style="clear: both;"></div>
  
  </div><!-- Container ende -->
  
  
  
</body>
</html>

Danke schonmal fürs Lesen :)

Gruß
Myar
 
Hi,

dass sich die Navigation und der Inhalt überschneiden, dürfte an der absoluten Positionierung der Navigation liegen, die du zum Gegenvergleich in eine relative umwandeln kannst, die das Verhalten der beiden Boxen zueinander immens verändert.

Zur horizontalen Zentrierung der Navigationspunkte empfehle ich dir diesen Code:
HTML: 
<div id="navi_content">
     <ul>
         <li><a href="1_ankunft.html">Ankunft</a></li>
         <li><span class="menutrenn">•</span></li>
         <li><a href="1_news.html">Neues</a></li>
     </ul>
</div>
CSS: 
#navi_content {
    text-align:center;
}
ul {
    list-style:none;
    margin:0;
    padding:0;
}
li {
    display:inline;
}


mfg Maik
 
hi Maik!

Super! Danke dir!
So schnelle Antwort und auf Anhieb geklappt *thumbsup*

Edit: was hier stand war Schmarm, da war was falsch auskommentiert...
Ja, die Hyperlinkformatierung mit dem display:block; hat alles verutschen lassen.

Danke dir nochmals!

Gruß
Myar
 
Zuletzt bearbeitet:
Was meinst du, wie sich ein Element mit der Eigenschaft display:block im Textfluß verhält?

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück