DIV statt Tabelle, für horizontale Navigationsleiste

  • Hallo. :)



    Ich lese mich aktuell etwas in HTML und CSS ein,
    um von den Tabellen als Layout-Grundgerüst weg zu kommen.
    Das war Ziel für meine neue, kleine Seite.


    Leider scheitere ich dabei, DIV`s richtig zu nutzen und bin etwas ratlos.


    Ziel
    Eine horizontale Navigationsleiste, dessen 5 Menüpunkte immer zentriert ausgerichtet sind,
    und wo sich die äusseren Bereiche entsprechend der Browserbreite anpassen.


    Der Teil mit dem Inhalt, soll später nur so breit werden, wie die Menüpunkte zusammen.


    Hier habe ich das mit einer Tabelle gelöst, aber es ist nicht zufriedenstellend:
    http://www.scheibel-fotografie.com



    Eigentlich sollen die Menüpunkte in der Tabelle nach unten rechts ausgerichtet werden,
    aber das spinnt alles rum.


    Auch sollen beim Menüpunkt "Storys" später mehrer Auswahlmöglichkeiten aufklappen,
    wenn man mit der Maus rüber fährt.
    Vermutlich ist das bei einer Tabelle auch nicht realisierbar?


    Problem
    Ich habe nun 2 DIV`s genommen, um den linken und rechten Bereich darzustellen.
    Diese habe ich mit float entsprechend ausgerichtet.


    Allerdings bekomme ich es nicht hin, nun 5 weitere DIV`s für die Navigation, mit einer definierten Breite zentrisch dazwischen
    zu bekommen, während sich das linke und rechts DIV dann entsprechend automatisch nur in der Breite anpassen.


    Hier mal der Aufbau mit den DIV`s:
    http://www.scheibel-fotografie.com/test.htm


    Was muss ich nun beachten, möchte ich die Leiste wie oben mit der Tabelle,
    nur in DIV`s realisieren?


    Mein css:
    body {
    margin-top: 70px;
    margin-left:0;
    margin-right:0;
    padding:0;



    }



    #left {
    float:left;
    width:250px;
    height: 50px;
    background-color:#000000;
    }
    #right {
    float:right;
    width: 250px;
    height: 50px;
    margin-left: 14em;
    background-color:#000000;
    }



    Mein body:
    <body>


    <div id="left">



    </div>



    <div id="right">


    </div>


    </body>



    Würde ich riesig freuen, etwas Input bekommen zu können!



    Gruss, Rene

  • Ich würde es folgendermaßen probieren:



    HTML


    <div id="navigation">
    <ul>
    <li>HOME</li>
    <li>ABOUT ME</li>
    <li>EQUIPMENT</li>
    <li>STORY</li>
    <li>GALLERY</li>
    </ul>
    </div>



    CSS


    #navigation {width:80%;margin:0 auto;}


    #navigation ul {list-style:none;display:block;margin: 0 auto;}


    #navigation ul li {padding:4px 3% 0%;display:inline-block;}





    Normalerweise sollte das das Problem soweit lösen.
    Die 80% width für die Navigation sind jetzt nur sporadisch eingetragen. Musst Du selbst nachher gucken, wieviel Du brauchst. ;)


    Falls noch was ist, einfach weiter fragen!

  • Herzlichen Dank für deine Hilfestellung!


    Ich habe das mal übernommen:
    http://scheibel-fotografie.com/test.htm


    div id="left">
    </div>



    <div id="navigation">
    <ul>
    <li>HOME</li>
    <li>ABOUT ME</li>
    <li>EQUIPMENT</li>
    <li>STORY</li>
    <li>GALLERY</li>
    </ul>
    </div>



    <div id="right">
    </div>


    Allerdings müsste ich nun jeden Menüpunkt in ein DIV setzten, um das wie mit der Tabelle
    optisch hinzubekommen?

  • Hallo.


    Nein, das ist weniger meine Absicht gewesen.
    Ich bin eher an verschiedenen Lösungsansätzen interessiert,
    um etwas zu lernen.


    Wie du siehst versuche ich mich auch selbst an dem Problem,
    aber komme mit meinem begrenztem Wissen nicht weiter.


    Ist das nicht der grosse Vorteil des WWW,
    das man an vielen Orten Informationen bekommen kann?

  • Zitat von cadoham


    Wenn das nicht gern gesehen wird, halte ich mich daran.


    [Kopfschüttel]
    Was heißt hier nicht gerne gesehen? Es ist sogar nach den Forenregeln verboten. Und du hast die bei der Anmeldung akzeptiert. Also akzeptiere auch das. Die Leute opfern ihre Freizeit für sowas.
    [/Kopfschüttel]

    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.

  • Zur technischen Frage:


    Dem div gibts Du eben nach Deinem Wunsch die Background-Farbe (so wie Du es schon vorher hattest).


    Für '#navigation ul li'
    kannst Du noch innerhalb der Klammern zusätzlich noch einfügen:


    border-left:1px rgba(0,0,0,0.0) solid; border-right:1px rgba(0,0,0,0.0) solid;



    Dann müsstest Du auch die Abstände dazwischen wieder haben.





    Zur Diskussion:


    Gegen welche Regel hat cadoham denn genau verstoßen?

  • So geht's auch ohne leere Div's #links, #rechts

  • Zitat von AnyKey

    Zur Diskussion:


    Gegen welche Regel hat cadoham denn genau verstoßen?


    Eine Forenregel, Zitat:

    Zitat


    Inhalt von Beiträgen:

    [FONT=Verdana, Arial, Helvetica, sans-serif]Forum-Hilfe behält sich das Recht vor, jederzeit Beiträge zu löschen, zu verschieben oder zu überarbeiten, die nicht den Forumsregeln entsprechen. Dies geschieht ohne vorherige Information des Verfassers. Die User ist alleine für die von ihnen publizierten Inhalte (Texte; Bilder oder andere Veröffentlichungen) verantwortlich und bestätigt auch damit, das er keine Copyrightgeschütze Werke und Texte hier im Forum veröffentlicht.
    Verboten oder auch unerwünscht sind folgende Inhalte: [/FONT]

    • [FONT=Verdana, Arial, Helvetica, sans-serif]extrem politisch oder religiös orientierte Postings [/FONT]
    • [FONT=Verdana, Arial, Helvetica, sans-serif]strafbare, pornographische, jugendgefährdende, beleidigende oder ehrverletzende Inhalte[/FONT]
    • [FONT=Verdana, Arial, Helvetica, sans-serif]Warez oder fremde copyrightgeschütze Werke [/FONT]
    • [FONT=Verdana, Arial, Helvetica, sans-serif]E-Mail Adressen [/FONT]
    • [FONT=Verdana, Arial, Helvetica, sans-serif]Songtexte [/FONT]
    • [FONT=Verdana, Arial, Helvetica, sans-serif]persönliche Angaben wie Telefonnummern, Adressen usw (diese bitte per PN austauschen) [/FONT]
    • [FONT=Verdana, Arial, Helvetica, sans-serif]oder anderweitig inakzeptabel Postings, die hier nicht erfasst wurden, aber gegen geltendes Recht, die guten Sitten, allgemeines Moralempfinden oder eben gegen die Forenregeln verstossen.[/FONT]
    • [FONT=Verdana, Arial, Helvetica, sans-serif]Crosspostings - die gleiche Frage in mehreren anderen Foren gleichzeitig stellen[/FONT]


    Ich weiß, niemand liest sich die Regel wirklich durch. Bei Verträgen und AGBs ist es ebenso. Hier ist es nunmal eine Hausregel.


    MfG

    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.

  • Zitat von Gastl

    Ich weiß, niemand liest sich die Regel wirklich durch. Bei Verträgen und AGBs ist es ebenso. Hier ist es nunmal eine Hausregel.


    Diese Hausregel gilt übrigens in anderen Foren auch.


    Ich denke, keiner wirft Dir hier Mutwilligkeit vor, cadoham .
    Dennoch ist das wie bereits von Gastl angesprochen nicht fair gegenüber den Helfern aus anderen Foren, die sich Deinem Problem annehmen und eigentlich nur Ihre Freizeit verpuffen.


    Nicht böse gemeint, aber in anderen Foren, wird ein solcher Thread sofort geschlossen.


    Es spricht nichts dagegen, wenn eine Diskussion nicht zielführend ist/war, sich in einem anderen Forum nach neuen Meinungen umzuhören, aber relativ zeitnah in verschiedenen Foren ist eben ein bisschen unfair, den Helfern gegenüber, die ihre Freizeit damit verbringen, euch helfen zu wollen.


    Bitte beachte das für nächsten Posts.
    Danke.
    :-)