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

  • Maho88
    hat ein Thema erstellt Lücke in der Navigationsleiste.

    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

  • imported_kremser
    antwortet
    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>

    Einen Kommentar schreiben:


  • Maho88
    antwortet
    Keiner mehr ne idee

    Einen Kommentar schreiben:


  • Maho88
    antwortet
    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";
        
    ?>

    Einen Kommentar schreiben:


  • Gast-Avatar
    Ein Gast antwortete
    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

    Einen Kommentar schreiben:


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

    Einen Kommentar schreiben:


  • Gast-Avatar
    Ein Gast antwortete
    bring doch einfach an den anfang deiner css

    html {
    background-color: #ff8c00;
    }

    Einen Kommentar schreiben:

Lädt...
X