Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 11

Thema: DIV statt Tabelle, für horizontale Navigationsleiste

  1. #1
    HTML Newbie
    Registriert seit
    14.09.2009
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard 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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Interessierte/r Avatar von AnyKey
    Registriert seit
    31.01.2016
    Ort
    Raum Oldenburg / Bremen
    Beiträge
    107
    Danke
    16
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: DIV statt Tabelle, für horizontale Navigationsleiste

    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!
    Drücken Sie die Any-Taste um fortzufahren!

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    14.09.2009
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: DIV statt Tabelle, für horizontale Navigationsleiste

    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?
    Geändert von cadoham (03.03.2016 um 18:43 Uhr)

  4. #4
    Moderator Avatar von Arne Drews
    Registriert seit
    20.01.2016
    Ort
    Friedrichstadt, NF
    Beiträge
    1.231
    Danke
    21
    Bekam 120 mal "Danke" in 119 Postings

    Standard AW: DIV statt Tabelle, für horizontale Navigationsleiste

    Lässt Du immer das ganze www für Dich arbeiten?
    https://www.html.de/threads/horizont...tabelle.55708/

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    14.09.2009
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: DIV statt Tabelle, für horizontale Navigationsleiste

    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?
    Geändert von cadoham (03.03.2016 um 19:37 Uhr)

  6. #6
    König(in)
    Registriert seit
    13.06.2012
    Beiträge
    1.150
    Danke
    14
    Bekam 63 mal "Danke" in 61 Postings

    Standard AW: DIV statt Tabelle, für horizontale Navigationsleiste

    Zitat 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.

  7. #7
    Interessierte/r Avatar von AnyKey
    Registriert seit
    31.01.2016
    Ort
    Raum Oldenburg / Bremen
    Beiträge
    107
    Danke
    16
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: DIV statt Tabelle, für horizontale Navigationsleiste

    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?
    Drücken Sie die Any-Taste um fortzufahren!

  8. #8
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: DIV statt Tabelle, für horizontale Navigationsleiste

    So geht's auch ohne leere Div's #links, #rechts
    Code:
    <!DOCTYPE html>
    <html>
    
    <head>
    <title>Ren&eacute; Scheibel | Leidenschaftliche Fotografie</title>
    
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="author" content="">
        <meta name="keywords" content="">
        <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)">
    <style>
    
    
     body {
       margin:0;
       padding:0;
       background:url(background_wood.jpg);
    
    }
     
    #navigation {
     margin:70px 0 20px 0;
     background:#000;
     width:100%;
     float:left;;
     text-align:center;
    }
    
    #navigation ul {
     margin:0 auto;
     padding:0;
     list-style:none;
     display:table;
     width:705px;
     background:url(bg_nav.jpg) top center;
    }
    
    #navigation ul li {
     margin:0;
     padding:0;
     float:left;  
    }
    
    #navigation a {
     display:block;
     width:135px;
     padding-top:20px;
     background:#000;
     margin-left:5px;
     color:#fff;
     text-decoration:none;
     text-align:right;
    }
    
    #navigation li:nth-child(5) a {
     margin-right:5px;
    }
    
    #content {
     margin:0 auto;
     clear:both;
     width:700px;
     background:#fff;
     min-height:300px;
     border:1px solid #000;
    }
    </style>
    
    </head>
    
    
    <body>
    
    
    <div id="navigation">
    <ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">ABOUT ME</a></li>
    <li><a href="#">EQUIPMENT</a></li>
    <li><a href="#">STORY</a></li>
    <li><a href="#">GALLERY</a></li>
    </ul>
    </div>
    <div id="content">
    </div>
    
    
    </body>
    </html>
    bg_nav.jpg
    Geändert von djheke (03.03.2016 um 21:39 Uhr)

  9. #9
    König(in)
    Registriert seit
    13.06.2012
    Beiträge
    1.150
    Danke
    14
    Bekam 63 mal "Danke" in 61 Postings

    Standard AW: DIV statt Tabelle, für horizontale Navigationsleiste

    Zitat Zitat von AnyKey
    Zur Diskussion:

    Gegen welche Regel hat cadoham denn genau verstoßen?
    Eine Forenregel, Zitat:

    Inhalt von Beiträgen:

    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:

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

  10. #10
    Moderator Avatar von Arne Drews
    Registriert seit
    20.01.2016
    Ort
    Friedrichstadt, NF
    Beiträge
    1.231
    Danke
    21
    Bekam 120 mal "Danke" in 119 Postings

    Standard AW: DIV statt Tabelle, für horizontale Navigationsleiste

    Zitat 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.

Ähnliche Themen

  1. Horizontale Navigationsleiste?
    Von JokerxHarley im Forum Forum-Hilfe.de intern
    Antworten: 1
    Letzter Beitrag: 23.05.2015, 01:36
  2. Horizontale Navigationsleiste mit Dropdown
    Von Anthony89 im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 22.10.2014, 20:42
  3. Horizontale Navigationsleiste mit JQuery
    Von phzu im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 0
    Letzter Beitrag: 22.09.2011, 21:02
  4. Tabelle statt Frames?
    Von 1z3m4n im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 04.12.2006, 16:27
  5. Tabelle statt frames !
    Von gelöschter User im Forum HTML & CSS Forum
    Antworten: 19
    Letzter Beitrag: 25.10.2004, 13:43

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •