Mitlaufende Navigation in CSS

Hera137 · 20.08.13, 10:08

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:

statt wie üblich so:

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

Your_Conscience · 20.08.13, 13:50

Zitat:

Zitat von Hera137

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 Mitglieder sichtbar. Bitte einloggen oder neu registrieren ]

Hera137 · 20.08.13, 14:49

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

NetWebs · 20.08.13, 18:17

Zitat:

Zitat von Hera137

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

Dann liegt der Fehler in Deiner Navigation.

Hera137 · 20.08.13, 18:44

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

NetWebs · 20.08.13, 19:10

Zitat:

Zitat von Hera137

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

Nein, definitiv nicht.

Hera137 · 20.08.13, 19:27

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;
}

weberleins · 21.08.13, 22:39

Nur mit CSS nicht möglich. Punkt.

Hilfreiche Links:
[ Link nur für registrierte Mitglieder sichtbar. Bitte einloggen oder neu registrieren ]
[ Link nur für registrierte Mitglieder sichtbar. Bitte einloggen oder neu registrieren ]

Kleiner Zusatzhinweis: [ Link nur für registrierte Mitglieder sichtbar. Bitte einloggen oder neu registrieren ]

nichdiemama · 22.08.13, 06:51

Zitat:

Zitat von weberleins

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

sorry, das ist falsch. siehe [ Link nur für registrierte Mitglieder sichtbar. Bitte einloggen oder neu registrieren ]

andere nützliche links zum thema [ Link nur für registrierte Mitglieder sichtbar. Bitte einloggen oder neu registrieren ]

Spielplatz mit Erklärungen: [ Link nur für registrierte Mitglieder sichtbar. Bitte einloggen oder neu 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.

Hera137 · 22.08.13, 13:32

Ok, dann versuch ichs mal so. Danke

weberleins · 23.08.13, 00:55

Sorry, aber das ist doch richtig.

Zitat:

Zitat von nichdiemama

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

nichdiemama · 23.08.13, 05:56

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

weberleins · 25.08.13, 04:26

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

Gamebeast1989 · 22.09.13, 13:03

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.

weberleins · 24.09.13, 02:57

@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

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