myGully.com - Mitlaufende Navigation in CSS

myGully.com (https://mygully.com/index.php)

- Entwicklung & Programmierung (https://mygully.com/forumdisplay.php?f=72)

- - Mitlaufende Navigation in CSS (https://mygully.com/showthread.php?t=3009052)

Mitlaufende Navigation in CSS

Hallöchen :)

Ich hab da ein kleines Problem. Ich programmiere ein Browsergame in php. Läuft auch alles wunderbar. Mir gehts nur tierisch auf die Nerven, jedes Mal, wenn ich ganz unten was lese, wieder nach oben scrollen zu müssen, um die Navigation zu erreichen. Deshalb wollte ich jetzt, dass die Navigation mitläuft.
Die Templates sind HTML und CSS, daher wäre eine CSS Lösung am Effektivsten. Ich habe es auch schon mit position:fixed; versucht, das war allerdings von mäßigem Erfolg gekrönt, da die Navigation auf einmal so aussah:

[Link nur für registrierte und freigeschaltete Mitglieder sichtbar. Jetzt registrieren...]

statt wie üblich so:

[Link nur für registrierte und freigeschaltete Mitglieder sichtbar. Jetzt registrieren...]

Ich hoffe mir kann einer helfen. Falls benötigt gebe ich auch gerne das gesamte Template, also HTML und CSS an, Anhänge posten geht ja leider nicht

Zitat:

Zitat von Hera137 (Beitrag 24807162)

Mir gehts nur tierisch auf die Nerven, jedes Mal, wenn ich ganz unten was lese, wieder nach oben scrollen zu müssen, um die Navigation zu erreichen.

Dafür gibt es ja die Pos1-Taste.
Ansonsten schau mal hier: [Link nur für registrierte und freigeschaltete Mitglieder sichtbar. Jetzt registrieren...]

Da wird halt auch auf position: fixed verwiesen, was mir aber die Navigation so verhaut

Zitat:

Zitat von Hera137 (Beitrag 24807834)

Da wird halt auch auf position: fixed verwiesen, was mir aber die Navigation so verhaut

Dann liegt der Fehler in Deiner Navigation.

Die Links werden halt über PHP festgelegt, nicht über HTML. Kanns daran liegen?

Zitat:

Zitat von Hera137 (Beitrag 24808592)

Die Links werden halt über PHP festgelegt, nicht über HTML. Kanns daran liegen?

Nein, definitiv nicht.

Ok, anders...

Ich poste hier mal das Template. Es funktioniert ja, die Navigation ist ja da. Es läuft nur halt nicht. Vielleicht hab ich doch nen Fehler irgendwo...

HTML:

Code:

<!--!header-->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//DE">

<html>

  <head>

    <title>Totenwelt Himera</title>

    <link href='templates/hime spezial.css' rel='stylesheet' type='text/css'>

    {heads*****}{s*****}

  </head>

  <body bgcolor="#000000" text="#ffffff" style="margin: 0px; padding: 0px;">



  <table border="0" width="100%" cellpadding="2">



 <td colspan="3" height="50px">

           <table border="0" id="table1" cellspacing="0" cellpadding="0" background="templates/himera/oben.gif" width="100%" height="105">

           <tr>

           <td>

           </td>

           </tr>

           </table>

        <center><span class='pagetitle'>{title}</span></p></center>

     </td>

    </tr>



    <tr>

     <td colspan="3">

       &nbsp;&nbsp;{motd} • {mail} • {petition}

     </td>



    </tr>

    

    <tr>

      <td width="13%" valign="top">

        <br><br><br><br>

       <img src='templates/himera/links-oben.gif' width='140' height='25' alt=''>{nav}<img src='templates/himera/links-unten.gif' width='140' height='25' alt=''>

      </td>

      <td width="70%" valign="top"><p>&nbsp;</p><!--!footer--></td>

      <td width="17%" valign="top"><p>&nbsp;</p><p>&nbsp;</p><img src='templates/himera/rechts-oben.gif' width='160' height='25' alt=''>{stats}{useronline}<img src='templates/himera/rechts-unten.gif' width='160' height='25' alt=''></td>

          

    </tr>



  </table>



  <table border="0" width="100%">

    <tr><!--{paypal}-->

      <td width="30%">&nbsp;</td>

      <td width="60%">{copyright} Design: das Puschel</td>

      <td width="10%" align="right">{source}</td>

    </tr>

    <tr>

      <td width="100%" colspan="3" align="center">{pagegen}</td>

    </tr>

  </table>



  <!--!statstart-->

  <table cellpadding="2" cellspacing="0" class="charinfo" width="150">



    <!--!stathead-->

    <tr>

      <td class='charhead' colspan='2'><b>{title}</b></td>

    </tr>





    <!--!statrow-->

    <tr>

      <td class='charinfo'><b>{title}</b></td><td class='charinfo'>`^{value}</td>

    </tr>



    <!--!statbuff-->

    <tr>

      <td class='charinfo' colspan='2'><b>{title}:</b>`n{value}</td>



    </tr>



  <!--!statend-->

  </table>



  <!--!navhead--> <span class="navhead">—{title}—<br></span>

  <!--!navhelp--> <span class="navhelp">{text}<br></span>

  <!--!navitem--> <a href="{link}"{accesskey}class='nav' {popup}>{text}<br></a>



  <!--!login-->

  <table width='212' height='234' border='0' cellpadding='0' cellspacing='0' background='images/logindragon.gif' class='noborder'>

    <tr>

      <td valign='bottom' align='center' class='noborder'>

        {username}: <br><input name='name' accesskey='u' size='10'><br>

        {password}:<br><input name='password' accesskey='p' type='password' size='10'><br>

        <input type='submit' value='{button}' class='button'><br>



        <img src='images/trans.gif' width='1' height='37' align='absmiddle' alt=''>

        <img src='images/trans.gif' width='1' height='15'>

      </td>

    </tr>

  </table>



  <!--!full-->

  <table width='212' height='234' border='0' cellpadding='0' cellspacing='0' background='images/logindragon.gif' class='noborder'>

    <tr>



      <td valign='bottom' align='center' class='noborder'>

        <br>`b`$Server<br><br>voll!`b<br><br><br>

        <img src='images/trans.gif' width='1' height='37' align='absmiddle' alt=''>

      </td>

    </tr>

  </table>



  </body>

</html>

zugehöriges CSS:

Code:

/* CSS Document */

td {

        font-family: Verdana, Arial, Helvetica, sans-serif;

        font-size: 11px;

}



table.nav {

/*        background-color: #000000;*/

        border: 1px solid #000000;

        height: auto;

        width: 135px;

        float: left;

}



.navhead {

        text-decoration: none;

        width: 135px;

        height: auto;

        padding: 1px;

        line-height: 10px;

        float: left;

        clear: none;

        background-color: #000000;

        font-weight: bold;

        color: #FFFFFF;

        cursor: default;

        text-align: center;

}



a {

        color: #808080;

        text-decoration: none;

}



a.nav {

        text-decoration: none;

        position:fixed;

    width: 135px;

        height: auto;

    padding: 1px;

        float: left;

        clear: none;

        background-color: #000000;

        border: 1px solid #000000;

}



.navhelp {

        text-decoration: none;

    width: 135px;

        height: auto;

    padding: 1px;

        float: left;

        clear: none;

        background-color: #000000;

        border: 1px solid #000000;

}



a:hover.nav {

    background-color: #111111;

        border-top: 1px solid #ffffff;

        border-left: 1px solid #ffffff;

        border-bottom: 1px solid #ffffff;

        border-right: 1px solid #ffffff;

}

a.navhilite {

        text-decoration: none;

        width: 135px;

        height: auto;

        padding: 1px;

        float: right;

        clear: none;

        color:#FFFF00;

        background-color: #330000;

        border-top: thin solid #330000;

        border-bottom: thin solid #330000;

        border-right: thin none #330000;

        border-left: thin none #330000;

}

a:hover.navhilite {

        background-color: #990000;

        border-top: thin outset #CC0000;

        border-right: thin none #CC0000;

        border-bottom: thin outset #CC0000;

        border-left: thin none #CC0000;

}





table {

}

td.charinfo {

        border-top-width: 1px;

        border-top-style: solid;

        border-top-color: #00cc00;

        border-right-style: none;

        border-bottom-style: none;

        border-left-style: none;

        cursor: default;

}

td.charhead {

        /*background-color: #00cc00;*/

        border: none;

        cursor: default;

        color: #FF0000;

}

table.charinfo {

        border: none;

        width: 140px;

}

td.pageheader {

        background-color: #000000;

        background-image: url(../templates/himera/oben.gif);

        height: 52px;

}

td.popupheader {

        background-color: #000000;

        background-image: url(../templates/himera/oben.gif);

        height: 52px;

}

td.noborder {

        border: none;

}

table.noborder {

        border: none;

}

td.village {

        background-image: url(../images/village.jpg);

        background-repeat: no-repeat;

        background-position: right bottom;

}

td.forest {

        background-image: url(../images/forest.jpg);

        background-repeat: no-repeat;

        background-position: center bottom;

}

td.dragon {

        background-image: url(../images/dragon.jpg);

        background-repeat: no-repeat;

        background-position: center center;

        background-attachment: fixed;

}

input {

        background-color: #000000;

        border: 1px solid #ffffff;

        color: #CCCCCC;

}

.button {

font-family: verdana,arial,helvetica,sans-serif;  

     font-size: 12px;  

     color: #cccccc;  

     background-color: #000000;  

     border-top: 1px solid #ffffff;  

     border-left: 1px solid #ffffff;  

     border-right: 1px solid #c0c0c0;  

     border-bottom: 1px solid #c0c0c0;

}

.input {

        background-color: #000000;

        border: 1px solid #ffffff;

        color: #CCCCCC;

}

select {

        background-color: #000000;

        border: 1px solid #ffffff;

        color: #CCCCCC;

}

table.vitalinfo {

        /*background-color: #000000;*/

        border: 1px solid #000000;

        width: 160px;

}

a.motd {

        text-decoration: none;

        color:#00cc00;

}

a:hover.motd {

        font-weight: bold;

}



a.hotmotd {

text-decoration: blink;

   text-align: center;

   color:7CFC00;

   width: 181px;

   height: auto;

   padding: 1px;

   float: center;

   clear: none;



   background-color: #806B4D;

   border-top: thin solid #FF9900;

   border-bottom: thin solid #FF9900;

   border-right: thin solid #FF9900;

   border-left: thin solid #FF9900;

}

.pagetitle {

        font-family: "Verdana", "Times New Roman";

        font-size: 14px;

        color: #666666;

}

td.footer {

        background-image: url(../templates/schwarz/unten.jpg);

        background-repeat: repeat-x;

        background-position: top;

}

.navhi {

        color: #00FF00;

        text-decoration: underline;

}

Nur mit CSS nicht möglich. Punkt.

Hilfreiche Links:
[Link nur für registrierte und freigeschaltete Mitglieder sichtbar. Jetzt registrieren...]
[Link nur für registrierte und freigeschaltete Mitglieder sichtbar. Jetzt registrieren...]

Kleiner Zusatzhinweis: [Link nur für registrierte und freigeschaltete Mitglieder sichtbar. Jetzt registrieren...]

Zitat:

Zitat von weberleins (Beitrag 24812011)

Nur mit CSS nicht möglich. Punkt.
Hilfreiche Links:
...

sorry, das ist falsch. siehe [Link nur für registrierte und freigeschaltete Mitglieder sichtbar. Jetzt registrieren...]

andere nützliche links zum thema [Link nur für registrierte und freigeschaltete Mitglieder sichtbar. Jetzt registrieren...]

Spielplatz mit Erklärungen: [Link nur für registrierte und freigeschaltete Mitglieder sichtbar. Jetzt registrieren...]

problem sehe ich eher darin, dass das layout ohne div sondern nur mit tabellen aufgebaut wird. sobald du ein div mit position absolute reinbringst, darin die navi abbildest, kannst du es positionieren wo und wie fest du willst.

Ok, dann versuch ichs mal so. Danke :)

Sorry, aber das ist doch richtig.

Zitat:

Zitat von nichdiemama (Beitrag 24812384)

... sobald du ein div mit position absolute reinbringst, darin die navi abbildest, kannst du es positionieren wo und wie fest du willst.

Stimmt. Du kannst es fixieren, aber nicht mitscrollen lassen.

Und die Frage war:

Zitat:

Zitat von Hera137

Deshalb wollte ich jetzt, dass die Navigation mitläuft.

und nicht nach fixieren.

Auch wenn ihm damit vielleicht auch schon geholfen ist - und da hast Du dann mit div zu 100% Recht. Aber fixieren und mitlaufen/scrollen lassen sind 2 paar Stiefel - auch wenn sie sehr ähnlich sind, was das Ergebnis für den User betrifft.

dann hab ich das anscheinend falsch verstanden. Soweit ich es sehe ist das Ergebnis von fixed divs und milaufendem menü ähnlich; so kann sich der TE ja zwischen einem der beiden Ansätze entscheiden :)

JA, das Ergebnis ist von der Funktion her nahezu identisch - optisch macht die Version "mitlaufen" allerdings schon deutlich mehr her (und schwieriger umzusetzen ist sie eigentlich auch nicht).

Ich bin nur kurz drüber geflogen, wo soll denn die Navigation angeordnet werden? Sehe leider keine Bilder und mich rein knien und den Code durchsuchen wo was angegliedert ist - kein Bock.

Ich habe es bei mir so gemacht, dass die Navigation immer am oberen Rand ist, per CSS.

Beispiel:

#nav {
width: 100%;
Position: fixed;
top: 0;
left: 0;
}

Und schon bleibt der div mit der id=nav immer am oberen Rand.
Wichtig ist natürlich, dass der Content dementsprechend um die Höhe deiner Nav nach unten gesetzt wird.
Ansich solltest du damit dir nichts zerschießen.

@Gamebeast1989

1. Diese Antwort kam schon. Grundsätzlich funzt das auch, aber danach wurde nicht gefragt. Du fixierst die Navigation, aber der TE schrieb:

Zitat:

Zitat von Hera137 (Beitrag 24807162)

.... Deshalb wollte ich jetzt, dass die Navigation mitläuft.
...

2. Auch diese Frage ist schon lange beantwortet.

3. Der TE hat also schon seit längerem beide Möglichkeiten: es nur über die CSS zu regeln (fixieren der Navigation) oder etwas mehr zu machen und dann die Navigation mitlaufen zu lassen.

4. Trotzdem Danke das Du eine Antwort parat hattest, das nächste Mal nur vielleicht den Thread lesen und dann mehr Energie in noch offene Threads stecken. Damit ist dann allen mehr geholfen.