Waagerechte Menu Ausgabe

[alexander912]

Moin zusammen.
Ich hab mir ein Menu gebaut was per PHP ausgegeben wird.
Das PHP Script liest die Menu Items aus einer .txt Datei aus.

<?php

/*menu*/

$datei=fopen("menuitem.txt","r+");
while(!feof($datei))
{
$zeile = fgets($datei,1000);
/*ausgabe*/
echo '<div class="menuitem">';
echo $zeile;
echo '</div>';
}
fclose($datei); 

/*menuende*/

?>

Entsprechend sollte jedes Item durch die CSS Datei formatiert werden. (class="menuitem").

#menu
{
    left: 50%;
    margin-left: -400px;
    height: 120px;
    width: 800px;
    position: absolute;
    border: #666 solid 1px;
    
}

.menuitem
{
    margin: 10px;
    height: 100px;
    width: 100px;
    background-color: #FF8C00;
    border: #666 solid 1px;
    line-height: 100px;
    font-size: 17px;
    text-align: center;
}

Gewollt war das jedes Item neben einander angezeit wird. Jedoch angezeigt wird alles unter einander.

Ich vermute ja das es daran liegt, da das PHP beim auslesen den Zeilenumbruch mit nimmt.

Könntet ihr mir da vllt en Tip geben an was es liegen könnte ?

Schonmal vielen Dank!

gruß Alex

 

[stachelbeer]

Nein es leigt daran, dass Div ein Block-Element ist und Block-Elemente gewöhnlich eine neue Zeile optisch erzeugen. Semantisch gehört ein Menüeintrage aber nicht in Bedeutungslose-Elemente. Benutze dafür ein Liste. Häufig wird dafür eine ungeordnete Liste genommen aber das muss in Deinem Fall nicht zutreffend sein. Geordnete Listen und Definitionslisten, können auch zum Einsatz kommen. Für dieses Beispiel werde ich auf eine geordnete Liste zurück greifen. Wenn Du dann sowas wie:

<ol>
  <li>Menüeintrag</li>
  <li>Menüeintrag</li>
  <li>Menüeintrag</li>
</ol>

erzeutgt hast, kannst Du mit:

ol {
  list-style-type:none;
}
li {
  float:left; /* wahl weise float */
  display:inline; /* oder inline Formatierung erreicht man eine Horizontale ausrichtung */
}

das ganze in die Horizontale bringen.
Beachte, dass bei der inline-Formatierung, die Abstande im Quellcode als Lücken in der Formatierung erhalten bleiben und dass sich inline und float gegenseitig ausschließen..

 

[alexander912]

Heyho,
danke für deine Antwort.
Klappt wunderbar mit der Liste
Danke!