✔ DIV-Box Höhe 100%

Ok, bekomm die jetzt aber nicht neben den #head.
Hab jetzt den #wrapper um 210px vergrößert. und dann #left und #right angelegt.

CSS:
Code: 
#wrapper		{ width:1013px; margin:0 auto; min-height:100%; height:auto !important; height:100%; background:url(../images/bg02.gif) repeat-y; }
#left			{ width:105px; background:#dfe0e3; background:url(../images/bg05.jpg) no-repeat; float:left; }
#right			{ width:105px; background:#dfe0e3; background:url(../images/bg06.jpg) no-repeat; float:right; }
#head			{ width:803px; height:251px; padding:10px 0px 0px 0px; background:#727783; }

PHP:
PHP: 
  <body>
    <div id="wrapper">
      <div id="left"></div>
      <? include ("head.php") ;?>
      <? include ("navi.php") ;?>
      <div id="content" class="clearfix">
        <div id="leftcolumn">
          <h1>Überschrift</h1>
          <p>Text Text</p>
        </div>
        <div id="rightcolumn">
          <h1>Überschrift</h1>
          <p>Text</p>
        </div>
      </div>
      <div id="right"></div>
    </div>
  </body>

Was hab ich falsch gemacht?

Gruß
Simon
 
Bist du nicht mehr im Besitz meines Tutorials, das dir hier anfangs als Arbeitsvorlage diente, und in dem ich ein dreispaltiges Layout innerhalb von #wrapper eingerichtet habe? :rolleyes:

Das rotmarkierte Markup gehört in ein übergeordnetes DIV, das den mittleren Spaltenblock bildet:
Code: 
  <body>
    <div id="wrapper">
      <div id="left"></div>
      <? include ("head.php") ;?>
      <? include ("navi.php") ;?>
      <div id="content" class="clearfix">
        <div id="leftcolumn">
          <h1>Überschrift</h1>
          <p>Text Text</p>
        </div>
        <div id="rightcolumn">
          <h1>Überschrift</h1>
          <p>Text</p>
        </div>
      </div>
      <div id="right"></div>
    </div>
  </body>


mfg Maik
 
Ich geh hier langsam kaputt. Habe jetzt folgendes gemacht:

CSS:
Code: 
#wrapper		{ width:1013px; margin:0 auto; min-height:100%; height:auto !important; height:100%; position:relative; }
#left			{ width:105px; height:100%; background:#dfe0e3; background:url(../images/bg05.jpg) no-repeat; float:left; }
#center			{ width:803px; margin:0 auto; background:url(../images/bg02.gif) repeat-y; }
#right			{ width:105px; height:100%; background:#dfe0e3; background:url(../images/bg06.jpg) no-repeat; float:right; }

PHP: 
<div id="wrapper" class="clearfix">
      <div id="left">left</div>
      <div id="center">center</div>
      <div id="right">right</div>
    </div>

Irgendwas stimmt mit dem #center nicht. Habe #left und #right in #wrapper gepackt und sie sind nebeneinander, aber sobald ich #center reinpack, rutscht #right runter.

Gruß
Simon
 
CSS: 
#center                        { 
width:803px; 
margin:0; /* ohne auto */ 
background:url(../images/bg02.gif) repeat-y; 
float:left; /*veranlasst #right, das Element rechtsseitig zu umfliessen */ 
}

mfg Maik
 
Jetzt hat die Seite endlich wieder Form angenommen :)
Habe aber noch zwei Punkte.

In die #left- und #right-DIV habe ich die Grafiken gepackt. Jetzt hab ich das Problem das die 800px hoch sind und er jetzt immer nach unten scrollt.
Wenn ich die Grafiken in den DIV´s als Hintergrundbild einbaue, werden Sie nicht angezeigt, weil kein Inhalt in den DIV´s ist/kommt. Kann ich die DIV´s
irgendwie so einstellen, das sie immer angezeigt werden auch wenn kein Inhalt drin ist?

Hier noch mal mein Code
CSS:
Code: 
#wrapper		{ width:1013px; margin:0 auto; min-height:100%; height:auto !important; height:100%; background:url(../images/bg02.gif) repeat-y; }
#left			{ width:105px; height:100%; background:url(../images/bg05.jpg) #dfe0e3 no-repeat; float:left; }
#center			{ width:803px; margin:0; float:left; }
#right			{ width:105px; height:100%; background:url(../images/bg06.jpg) #dfe0e3 no-repeat; float:right; }

Gruß
Simon
 
Jo, indem du ihre relative Höhe in eine absolute umwandelst. Wie hoch waren doch gleich die Grafikdateien?

mfg Maik
 
Perfekt. Hab die Grafiken verkleinert und den DIV´s eine Höhe von 500px gegeben.

Das andere Problem was ich noch hab, taucht bei mir nur im IE auf. Firefox stellt es richtig da.
Und zwar handelt es sich um meine Navigation.

CSS:
Code: 
#navi			{ width:801px; height:32px; margin:0px 1px 0px 1px; background:url(../images/bg03.jpg) repeat-x; float:left; }
#navi ul		{ list-style-type:none; }
#navi li		{ font-size:12px; display:inline; line-height:32px; }
#navi a:link, .menue a:visited 
				{ text-decoration:none; display:block; width:95px; color:#ffffff; background:url(../images/button.jpg) repeat-x; line-height:32px; 
				  text-align:center; border-right:1px solid #ffffff; float:left; }
#navi a:hover, .menue a:active, .menue a:focus	
				{ text-decoration:none; color:#ffffff; background:url(../images/button-hover.jpg) repeat-x; }
#navi #currentpage a 
				{ text-decoration:none; color:#ffffff; background:url(../images/button-hover.jpg) repeat-x; }

PHP: 
<div id="navi">
  <ul>
    <li<?php if ($thisPage=="index.php") echo " id=\"currentpage\""; ?>><a href="index.php">home</a></li>
    <li<?php if ($thisPage=="001.php") echo " id=\"currentpage\""; ?>><a href="001.php">unternehmen</a></li>
    <li<?php if ($thisPage=="002.php") echo " id=\"currentpage\""; ?>><a href="002.php">leistungen</a></li>
    <li<?php if ($thisPage=="003.php") echo " id=\"currentpage\""; ?>><a href="003.php">referenzen</a></li>
    <li<?php if ($thisPage=="004.php") echo " id=\"currentpage\""; ?>><a href="004.php">kontakt</a></li>
    <li<?php if ($thisPage=="005.php") echo " id=\"currentpage\""; ?>><a href="005.php">impressum</a></li>
  </ul>
</div>

Auf dem Bild ist oben die Darstellung im Firefox, welche richtig ist und unten im IE, die falsch ist.
Hast du eine Idee woran das liegen könnte?

Nachtrag:
Habe grad an einem andern PC gesehen das es bei Firefox 3.5 auch so wie im IE dargestellt wird und erst ab Firefox 3.6 so angezeigt wird, wie es seien soll.

Gruß
Simon
 

Anhänge

  • navi.jpg
    navi.jpg
    50,6 KB · Aufrufe: 15
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück