Ankündigung

Einklappen
Keine Ankündigung bisher.

Lücke in der Navigationsleiste

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Lücke in der Navigationsleiste

    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

  • #2
    bring doch einfach an den anfang deiner css

    html {
    background-color: #ff8c00;
    }

    Kommentar


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

      Kommentar


      • #4
        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

        Kommentar


        • #5
          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";
              
          ?>

          Kommentar


          • #6
            Keiner mehr ne idee

            Kommentar


            • #7
              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>

              Kommentar

              Lädt...
              X