Lücke in der Navigationsleiste

Maho88 · 18.09.2005, 13:25

Hallo,
ich bastele gerade an meiner Homepage für meine Klasse... zuerst hatte ich die mit Frames gemacht aber jetzt probier ich das mal mit Div-Containern. Allerdings hab ich jetz ein problem. Immer wenn der Inhalt länger ist als die Navigationsleiste ist in der eine weiße Lücke (wenn der Abstand zu groß ist)
Sieht man hier auf dem Bild sehr deutlich:

Woran kann das liegen?
Die CSS Datei sieht so aus:

Code:

body {
	text-align: center;
	
	}
div#root {
	width: 760px;
	margin: 0px auto;
	text-align: left;
		
	}
div#navi {
	background-color: #ff8c00;
	width: 128px;
	float: left;

	}
div#navi a:link {
	text-decoration:none;
	font-weight: bold;
	color: black;
  	}
	
div#navi a:visited {
	text-decoration:none;
	font-weight: bold;
	color: black;
  	}
	
div#navi a:hover {
	text-decoration: underline;
	font-weight: bold;
	color: red;
  	}
	
div#navi a:active {
	text-decoration:none;
	font-weight: bold;
	color: black;
	}

div#content {
	border: 1px solid #daa520;
	background-color: #daa520;
	width: 610px;
	float: right;
	padding: 0px 10px;
	}
div#header {
	background-color: #ff8c00;
	padding: 10px 10px;
	}
div#footer {
	background-color: #ff8c00;
	clear: both;
	padding: 4px;
	}

Viele Grüße
Alexander

18.09.2005, 13:29

bring doch einfach an den anfang deiner css

html {
background-color: #ff8c00;
}

Maho88 · 18.09.2005, 14:23

Ne, so gehts glaub ich nicht. Hatte vergessen zu sagen, dass der Inhalt zentriert ist. und der body ein Hintergrundbild bekomme soll...

18.09.2005, 14:54

achso ... na dann ...

gibst du dem div container keine grösse mit so erhält er die grösse des inneren Bereichs ( was heisst: ist der offset des innerHTML nur 50px hoch dann ist der container
auch nur 50px er orientiert sich nicht an dem container neben, über oder unter ihm

also kannst du das nur regeln indem du die container verschachtelst

Code:

<div style="width:750px;background-color:#ff8c00;">beherbergt alle in sich
  <div style="width:200px;float:left;background-color:#0000ff;">//der bereich der navigation</div>
  <div style="width:550px;margin-left:200px;background-color:#ff0000;">// der bereich deines contents</div>
  <br style="clear:both;" />
  <div style="width:750px;background-color:#00ff00;">// die fussnote</div>
</div>

zum daran weiterbasteln sollte es reichen

mfg

Maho88 · 18.09.2005, 15:42

Wie meinst du das? Also verschachtelt sind die Container-ich hab einen der alle anderen in sich beherbergt...
Wenn der abstand nicht so groß ist wird die Lücke geschlossen.
Das gleche Problem hab ich auch mit dem Inhalt: Wenn die Navigationsleiste länger ist als der Inhalt ist dort auch so eine Lücke...
Vielleicht hilft euch ja meine index.php...

PHP-Code:

  <?php    

    error_reporting(E_ALL);

    include "config.php"; 

    echo "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"\n";

    echo "         \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">\n";

    echo "<html>\n";

    echo "    <head>\n";

    echo "        <title>Meine Klasse am KG</title>\n";

    echo "        <link rel=\"stylesheet\" type=\"text/css\" href=\"Styles/main.css\" />\n";

    echo "        <meta http-equiv=\"Content-Type\" content=\"text/html; charset=ISO-8859-1\" />\n";

    echo "    </head>\n";

    echo "    <body>\n";

    

    echo "        <div id=\"root\">\n"; 

    echo "            <div id=\"header\">\n"; // banner

                        include "header.php"; 

    echo "            </div>\n";

    echo "            <div id=\"navi\">\n"; // linkes Menu

                        include "navi.php";

    echo "            </div>\n";

    echo "            <div id=\"content\">\n"; // Inhalt

                        include "content.php";

    echo "            </div>\n"; 

    echo "            
\n";

    echo "            <div id=\"footer\">\n"; // footer

                        include "footer.php"; 

    echo "            </div>\n";

    echo "       </div>\n";

    

    echo "    </body>\n";

    echo "</html>\n";

    ?>

Maho88 · 19.09.2005, 14:48

Keiner mehr ne idee

imported_kremser · 19.09.2005, 15:15

warum machst du das nicht mit tables?

ich würd mal sagen ca so:

Code:

<table width="800" height="100%">
   <tr>
      <td colspan="2">header</td>
   </tr>
   <tr>
      <td>navi</td>
      <td>main</td>
   </tr>
   <tr>
      <td>footer</td>
   </tr>
</table>

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
navigationsleiste soll bleiben, aber wie??		PHP Tipps 2006	8	24.02.2006 16:32
Navigationsleiste?		HTML, Usability und Barrierefreiheit	3	01.09.2005 12:08
[Erledigt] Hiiiiiiiillllllfeeeeeeeeeeee bei navigationsleiste		HTML, Usability und Barrierefreiheit	2	13.11.2004 16:32
[Erledigt] Navigationsleiste mit Datenbank erstellen		Datenbanken	10	22.06.2004 20:30


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

18.09.2005, 13:29
Gast Beiträge: n/a	bring doch einfach an den anfang deiner css html { background-color: #ff8c00; }

18.09.2005, 14:23
Maho88 Benutzer Registriert seit: 18.09.2005 Beiträge: 47	Ne, so gehts glaub ich nicht. Hatte vergessen zu sagen, dass der Inhalt zentriert ist. und der body ein Hintergrundbild bekomme soll...

18.09.2005, 14:54
Gast Beiträge: n/a	achso ... na dann ... gibst du dem div container keine grösse mit so erhält er die grösse des inneren Bereichs ( was heisst: ist der offset des innerHTML nur 50px hoch dann ist der container auch nur 50px er orientiert sich nicht an dem container neben, über oder unter ihm also kannst du das nur regeln indem du die container verschachtelst Code: <div style="width:750px;background-color:#ff8c00;">beherbergt alle in sich <div style="width:200px;float:left;background-color:#0000ff;">//der bereich der navigation</div> <div style="width:550px;margin-left:200px;background-color:#ff0000;">// der bereich deines contents</div> <br style="clear:both;" /> <div style="width:750px;background-color:#00ff00;">// die fussnote</div> </div> zum daran weiterbasteln sollte es reichen mfg

18.09.2005, 15:42
Maho88 Benutzer Registriert seit: 18.09.2005 Beiträge: 47	Wie meinst du das? Also verschachtelt sind die Container-ich hab einen der alle anderen in sich beherbergt... Wenn der abstand nicht so groß ist wird die Lücke geschlossen. Das gleche Problem hab ich auch mit dem Inhalt: Wenn die Navigationsleiste länger ist als der Inhalt ist dort auch so eine Lücke... Vielleicht hilft euch ja meine index.php... PHP-Code: <?php error_reporting(E_ALL); include "config.php"; echo "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"\n"; echo " \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">\n"; echo "<html>\n"; echo " <head>\n"; echo " <title>Meine Klasse am KG</title>\n"; echo " <link rel=\"stylesheet\" type=\"text/css\" href=\"Styles/main.css\" />\n"; echo " <meta http-equiv=\"Content-Type\" content=\"text/html; charset=ISO-8859-1\" />\n"; echo " </head>\n"; echo " <body>\n"; echo " <div id=\"root\">\n"; echo " <div id=\"header\">\n"; // banner include "header.php"; echo " </div>\n"; echo " <div id=\"navi\">\n"; // linkes Menu include "navi.php"; echo " </div>\n"; echo " <div id=\"content\">\n"; // Inhalt include "content.php"; echo " </div>\n"; echo " \n"; echo " <div id=\"footer\">\n"; // footer include "footer.php"; echo " </div>\n"; echo " </div>\n"; echo " </body>\n"; echo "</html>\n"; ?>

19.09.2005, 14:48
Maho88 Benutzer Registriert seit: 18.09.2005 Beiträge: 47	Keiner mehr ne idee

19.09.2005, 15:15
imported_kremser Erfahrener Benutzer Registriert seit: 07.06.2005 Beiträge: 274	warum machst du das nicht mit tables? ich würd mal sagen ca so: Code: <table width="800" height="100%"> <tr> <td colspan="2">header</td> </tr> <tr> <td>navi</td> <td>main</td> </tr> <tr> <td>footer</td> </tr> </table>