1. Liebe Forumsgemeinde,

    aufgrund der Bestimmungen, die sich aus der DSGVO ergeben, müssten umfangreiche Anpassungen am Forum vorgenommen werden, die sich für uns nicht wirtschaftlich abbilden lassen. Daher haben wir uns entschlossen, das Forum in seiner aktuellen Form zu archivieren und online bereit zu stellen, jedoch keine Neuanmeldungen oder neuen Kommentare mehr zuzulassen. So ist sichergestellt, dass das gesammelte Wissen nicht verloren geht, und wir die Seite dennoch DSGVO-konform zur Verfügung stellen können.
    Dies wird in den nächsten Tagen umgesetzt.

    Ich danke allen, die sich in den letzten Jahren für Hilfesuchende und auch für das Forum selbst engagiert haben. Ich bin weiterhin für euch erreichbar unter tti(bei)pcwelt.de.
    Dismiss Notice

div horiontale navigationsleiste zentrieren

Discussion in 'Web-Know-how für die Homepage' started by djt1990, Jun 15, 2008.

Thread Status:
Not open for further replies.
  1. djt1990

    djt1990 Byte

    Hallo,
    es ist gut möglich, dass das Thema hier irgendwann im Forum schonmal behandelt wurde, jedoch habe ich mich schon 1 Woche totgegoogled nach einer Lösung für mein Problem, welches ist:

    Ich habe eine xhtml Seite, die ich mit css designe. Ich habe eine Navigationsleiste programiert, die aber irgendwie sich nicht zentrieren lässt. Sie soll horizontal verlaufen, dafür habe ich das float element benutzt. Dummerweise ist das ja ein widerspruch fürs zentrieren etc...

    Ich suche eine alternative Art die Navigationsleiste horizontal darzustellen, oder eine Lösung, wie man trotz float:left die navigationsleiste KOMPLETT zentrieren kann.

    PS: beides müsste Valide sein.

    HTML
    [ZITAT]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>LOST IN FRAMES - DE - Metal Koblenz Köln www.LostInFrames.de</title>
    <link href="Lost In Frames.css" rel="stylesheet" type="text/css" />
    </head>

    <body>

    <p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    </p>

    <div id="bl_main_nav">
    <ul>
    <li><a id="main_nav1" href="home" target="_top">News</a></li>
    <li class="spacer"></li>
    <li><a id="main_nav2" href="general_person.shtml" target="_top">Gigs </a></li>
    <li class="spacer"></li>
    <li><a id="main_nav3" href="general_skills.shtml" target="_top">Media </a></li>
    <li class="spacer"></li>
    <li><a id="main_nav4" href="general_projects.shtml" target="_top">Kontakt</a></li>
    <li class="spacer"></li>
    <li><a id="main_nav5" href="general_contact.shtml" target="_top">Guestbook</a></li>
    </ul>
    </div>

    </body>
    </html>
    [/Zitat]


    CSS

    [ZITAT]
    body
    {
    background-color:#000000;
    background-image: url(head.jpg);
    background-repeat: no-repeat;
    background-position:center top;
    background-attachment:scroll;
    font-family:"Times New Roman", Times, serif;
    text-align: center;
    }

    td
    {
    color:#FFFFFF;
    }

    table
    {
    border-color:#FFFFFF;
    border-style:solid;
    border-width: thin;
    }

    h2
    {
    font-family:"Times New Roman", Times, serif;
    }



    #bl_main_nav ul
    {
    margin:0px;
    padding:0px;
    width:600px;
    line-height:20px;
    list-style-type:none;
    letter-spacing:0px;
    text-align:center;
    margin:auto;
    margin-left:auto;
    margin-right:auto;
    }

    #bl_main_nav li
    {
    margin:0px;
    padding:0px;
    text-align:center;
    display:inline;
    display:block;
    border:0px solid #000000;
    margin:auto;
    margin-left:auto;
    margin-right:auto;
    float:left;




    }

    li.spacer {
    margin:0px;
    padding:0px;
    width:2px;
    border:0px solid #000000;
    }

    #bl_main_nav a
    {
    color:#FFFFFF;
    font-weight:bold;
    display:block;
    height:18px;
    width:100px;
    padding-top:0px;
    background:#BAB590;
    text-decoration:none;
    border:1px solid #BAB590;

    }

    #bl_main_nav a:hover
    {
    color:#990000;
    background:#FFFFFF;
    border:1px solid #990000;

    }


    #home #bl_main_nav #main_nav1 {color:#990000;background:#BAB590;border: 1px solid #BAB590;}
    #home #bl_main_nav #main_nav1:hover {color:#990000;background:#FFFFFF;border: 1px solid #990000;}

    #person #bl_main_nav #main_nav2 {color:#990000;background:#FFFFFF;border: 1px solid #BAB590;}
    #person #bl_main_nav #main_nav2:hover {color:#990000;background:#FFFFFF;border: 1px solid #990000;}

    #skills #bl_main_nav #main_nav3 {color:#990000;background:#FFFFFF;border: 1px solid #BAB590;}
    #skills #bl_main_nav #main_nav3:hover {color:#990000;background:#FFFFFF;border: 1px solid #990000;}

    #projects #bl_main_nav #main_nav4 {color:#990000;background:#FFFFFF;border: 1px solid #BAB590;}
    #projects #bl_main_nav #main_nav4:hover {color:#990000;background:#FFFFFF;border: 1px solid #990000;}

    #contact #bl_main_nav #main_nav5 {color:#990000;background:#FFFFFF;border: 1px solid #BAB590;}
    #contact #bl_main_nav #main_nav5:hover {color:#990000;background:#FFFFFF;border: 1px solid #990000;}

    [/ZITAT]

    Hoffe jemand kann mir helfen, verzweifle schon!
     
    djt1990, Jun 15, 2008
    #1
  2. Jogy05

    Jogy05 Kbyte

    Hallo,
    also ich habe mal die Seite mit deinen Daten nachgebaut.
    Im Anhang kannst du sehen, wie es in meinem FF 3.0 aussieht. Im IE 7 ist es genauso.
    Wenn es bei dir nicht funktioniert, versuche mal den Browsercache zu löschen.

    Gruß
    Jürgen
     

    Attached Files:

    Jogy05, Jun 15, 2008
    #2
  3. djt1990

    djt1990 Byte

    danke!!!
    Das mit dem Cache hat irgendwie das Problem gelöst, ich verstehe das nicht, warum das bei mir die ganze Zeit falsch angezeigt wurde...

    Viele dank für die hilfe!!! :) weis das sehr zu schätzen^^
     
    djt1990, Jun 15, 2008
    #3
  4. Mylin

    Mylin Viertel Gigabyte

    mit <meta http-equiv="cache-control" content="no-cache"> im Kopf deiner Seite, wird der Cache nicht benutzt und immer das Original geladen.

    Gruß
    Mylin
     
    Mylin, Jun 15, 2008
    #4
  5. Jogy05

    Jogy05 Kbyte

    Das stimmt so leider nicht ganz!
    Beim Einlesen der CSS-Dateien habe ich das schon öfter beobachtet, dass das oder ein "aktualisieren" oder "neu laden" nichts bringt. erst das explizierte löschen des Caches bringt Erfolg.
     
    Last edited: Jun 15, 2008
    Jogy05, Jun 15, 2008
    #5
  6. Jogy05

    Jogy05 Kbyte

    Bitte! Gerne!
     
    Jogy05, Jun 15, 2008
    #6
  7. Mylin

    Mylin Viertel Gigabyte

    ... dann nehmen wir noch <meta http-equiv="expires" content="0"> dazu, für die die die Seite schon besucht haben.
     
    Mylin, Jun 15, 2008
    #7
  8. kalweit

    kalweit Hüter der Glaskugel

    Die Metatags zur Cacheverwaltung sind sinnfrei, da sie vom User (oder dessen User Agent) beeinflusst werden können. Ebenfalls reagieren div. Proxies darauf allergisch, was in der Konsequenz zum gegenteiligen Effekt führen kann. Geht es nur um das Testen von eigenen Seiten, sind die Cacheoptionen des eigenen Browsers der unkomplizierteste Weg - dann funktioniert auch der "einfache" Reload. Will man zwingend Seiten dynamisch ausliefern, sollte man einen passenden Contenttype seitens des Servers ausliefern, der den Browser eindeutig auf dynamische Seiten hinweist - simpelste z.B. die Seite auf php enden lassen, auch wenn sie gar nicht geparst wird. In hartnäckigen Fällen hilft es den aktuellen Timestamp als Parameter in Links auf nicht zu cachende Seiten anzuhängen.

    Zu Nebenwirkungen und Risiken.... (was aber bei ein kleinen privaten Seite eher theoretischer Natur wäre)
     
    kalweit, Jun 15, 2008
    #8
Thread Status:
Not open for further replies.

Share This Page