✔ DIV-Box Höhe 100%

Hi,

vergleich mal deine drei Regeln zur Einrichtung einer Mindesthöhe für #body:
CSS: 
min-height:100%; height:auto; height:100%;

mit meinen:
CSS: 
#body {
...
min-height:100%;
height:auto !important;
height:100%;
...
}

Bei dir fehlt die !important-Regel, mit der die standardkonformen Browser angewiesen werden, die nachfolgende height:100%-Deklaration zu ignorieren, die dem IE6 gewidmet ist, der min-height nicht interpretiert, dafür aber die height-Eigenschaft als "Mindesthöhe" betrachtet.

mfg Maik
 
An dem "!important" hats nicht gelegen. Der Bereich in dem der Hintergrund nicht eingeblendet wird, ist immer das Stück, was gescrollt wird.

CSS:
Code: 
#body			{ width:803px; margin:0 auto; min-height:100%; height:auto !important; height:100%; background:url(../images/bg02.jpg) repeat-y; }
#head			{ width:803px; height:251px; padding:10px 0px 0px 0px; background:#727783; }
#navi			{ width:801px; height:32px; margin:0px 1px 0px 1px; background:url(../images/bg03.jpg) repeat-x; }
#content		        { width:763px; padding:20px 20px 0px 20px; }
#leftcolumn		{ width:463px; float:left; padding-right:50px; }
#rightcolumn	{ width:229px; float:right; padding-left:20px; display:inline; position:relative; border-left:1px dashed #FFFFFF; }

Das hier wär der body-Tag:
HTML: 
<body>
  <div id="body">
  <div id="head"><img src="images/head.jpg" alt="" width="803" height="251" /></div>
  <div id="navi">
    <table class="menue" cellpadding="0" cellspacing="0">
      <tr>
        <td><a href="index.php?page=001">Punkt 1</a></td>
        <td><a href="index.php?page=002">Punkt 2</a></td>
        <td><a href="index.php?page=003">Punkt 3</a></td>
        <td><a href="index.php?page=004">Punkt 4</a></td>
        <td><a href="index.php?page=005">Punkt 5</a></td>
        <td><a href="index.php?page=006">Punkt 6</a></td>
      </tr>
    </table>
  </div>
  <div id="content">{content}</div>
  </div>
</body>

In der Content-DIV wird "{content}" durch den Inhalt einer einzelnen html-Seite per PHP-Script ersetzt.

einzelne HTML-Seiten:
HTML: 
<div id="leftcolumn">
  <h1>Text</h1>
  <p>Text.</p>
</div>
<div id="rightcolumn">
  <h1>Text:</h1>
  <h2>Text</h2>
  <ul>
    <li>Punkt a</li>
    <li>Punkt b</li>
    <li>Punkt c</li>
  </ul>
</div>

Gruß
Simon
 
Ah jetzt hab ich es studiert und verstanden :). Super und Danke.

Hätte da noch eine Frage, vielleicht kann man das hier direkt mitbeantworten.
Und zwar hab ich mein Menü auch mit CSS gemacht.

Code:
Code: 
.menue			{ border:0px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; text-align:center; }

.menue a:link, .menue a:visited
				{ text-decoration:none; display:block; width:100px; color:#ffffff; background:url(../images/button.jpg) repeat-x; line-height:32px; 
				  text-align:center; border-right:1px solid #ffffff; }
			
.menue a:hover, .menue a:active, .menue a:focus
				{ text-decoration:none; color:#ffffff; background:url(../images/button-hover.jpg) repeat-x; }

Funktioniert auch alles super bis auf eine Sache.
Geh ich mit der Maus drüber wechselt die Farbe. Klick ich auf den Punkt und der Inhalt wird mir angezeigt ist die Farbe aber wieder normal und nicht wie bei "hover"

Gruß
Simon
 
Die :active-Pseudoklasse besitzt ihre Gültigkeit auch nur bei gedrückter Maustaste.

mfg Maik
 
_SimonSez_ hat gesagt.:
Sie wurd ja gedrückt.
Zum Vergrößern anklicken....
... und im nächsten Moment (nach dem Klick) wird sie losgelassen, womit die :active-Pseudoklasse ihre Gültigkeit verliert.

Im "Normalfall" lässt sich dein Vorhaben, den aktuell geöffneten Menüpunkt optisch hervorzuheben, mit dieser CSS-Technik umsetzen:


Da du aber beim Anklicken der Links keine neuen Seiten aufrufst, in denen der <body>-Tag jeweils einen anderslautenden ID-Bezeichner besitzt, sondern in dem Hauptdokument mittels PHP die Inhalte austauschst, müsstest du mit PHP dem aktuell ausgewählten Link einen Klassenbezeichner zuordnen, der die Formatierung besitzt.

mfg Maik
 
Solch ein Script, das ich in längst vergangenen Tagen mal irgendwo aufgeschnappt habe, konnte ich eben in den Tiefen meiner HD wieder hervorkramen :)

  • PHP-Script zum Includen:
PHP: 
<?php
if (!empty($_GET['section']))
    {
        $section=$_GET['section'];
        if ((strpos($section,"index")>-1) || (strpos($section,"http:")>-1) || (strpos($section,"https:")>-1) || (strpos($section,"ftp:")>-1))
            {
                header("Location:index.php");
            }
        else
            {
                include('inc/'.$section.".php");
            }
    }
else
    {
        include("inc/home.php");
    }

?>
  • PHP-Script zum Tauschen des Klassenbezeichners für den aktuell gewählten Link:
PHP: 
<?php
$entries=array('home','news','impressum');
if (isset($_GET['section']))
    {
        $section=$_GET['section'];
    }
else
    {
        $section='home';
    }
$styles=array();
for ($x=0;$x<count($entries);$x++)
    {
        if ($entries[$x]==$section)
            {
                $styles[$entries[$x]]='current';
            }
        else
            {
                $styles[$entries[$x]]='normal';
            }
    }
?>

<ul id="nav">
    <li><a href="index.php?section=home" class="<?php echo $styles['home']; ?>">Home</a></li>
    <li><a href="index.php?section=news" class="<?php echo $styles['news']; ?>">News</a></li>
    <li><a href="index.php?section=impressum" class="<?php echo $styles['impressum']; ?>">Impressum</a></li>
</ul>
  • CSS-Klassen:
CSS: 
ul#nav a.normal { ... }
ul#nav a.current { ... }


mfg Maik
 
Das ist ja Klasse. Müsstest mir dabei aber noch helfen, da ich kein Experte in PHP bin.

Die alte Klasse für Menü kann ich dann löschen? Und die neue CSS-Klassen müssten dann so aussehen:
Code: 
#nav a.normal	{ text-decoration:none; display:block; width:100px; color:#ffffff; background:url(../images/button.jpg) repeat-x; line-height:32px; 
				  text-align:center; border-right:1px solid #ffffff; }
#nav a.current	{ text-decoration:none; color:#ffffff; background:url(../images/button-hover.jpg) repeat-x; }

Wo muss ich nun die beiden PHP-Code hinpacken?

Ich hab eine PHP-Datei (index.php) in der sich das script für das ersetzen des "content" befindet
PHP: 
<?php
$main = file_get_contents('main.html');
$sub  = file_get_contents('001.html');

if(file_exists($_GET['page'].'.html')) $sub = file_get_contents($_GET['page'].'.html');

$main = str_replace('{content}', $sub, $main);

echo $main;
?>

Und dann die html-Datei (main.html).
HTML: 
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="styles/main.css" />
    <link rel="shortcut icon" href="images/icon.ico">
    <script type="text/javascript" src="scripts/links.js"></script>
  </head>

  <body>
    <div id="body">
      <div id="head"><img src="images/head.jpg" alt="" width="803" height="251" /></div>
      <div id="navi">
	    <table class="menue" cellpadding="0" cellspacing="0">
  		  <tr>
    	    <td><a href="index.php?page=001">P1</a></td>
    		<td><a href="index.php?page=002">P2</a></td>
    		<td><a href="index.php?page=003">P3</a></td>>
  	  	  </tr>
	    </table>
	  </div>
	  <div id="content" class="clearfix">
        {content}
      </div>
  </div>
</body>

Gruß
Simon
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück