✔ Menü macht Probleme...

Status
Nicht offen für weitere Antworten.
Radhad

Radhad

Erfahrenes Mitglied
Hallo zusammen,

ich habe auf der Website http://radhad.de/ mal die Site hochgeladen.

Im Firefox ist die Navigationsleiste (Home & Forum) nach Links rausgeschoben. Im IE passt es genau. Zusätzlich ist im FF oben eine kleine Lücke. Wie kann ich das beheben?



Gruß Radhad
 
Nimm mal alle border-collapse-Angaben aus dem Stylesheet raus und notiere dafür die Attribute cellpadding="0" cellspacing="0" in allen Tabellen.

Die Lücke zum oberen Bild schliesst Du folgendermaßen:

Code: 
<img src="bilder/start_banner.png" style="display:block;">
 
So, ein weiteres Problem auf der Website http://radhad.de zusehen...

Ich möchte die Horizontale Navigation mit der statischen Breite von 80px durch einen dynamischen Rand von 5px oder so ersetzen. Wie funktioniert das? meine Idee mittels padding ging so ein bissl daneben, da am ende noch ein <td> verwendet wird für die Ausgabe von Datum & Uhrzeit.



Gruß Radhad
 
Vielleicht solltest Du an dieser Stelle mal über ein tabellenloses Seitenlayout nachdenken?

Denn hierfür sind Tabellen (eigentlich) nicht gedacht ;)

So liessen sich die einzelnen Bereiche (Header, Navigation, Content, usw.) durch DIV-Blöcke, und die horizontale Navigation durch ein CSS-Listenmenü ersetzen.
 
Da hätte ich dann das problem, dass ich total aufgeschmissen wäre und bestimmt 1 - 2 Monate zurückfallen würde :/
 
Na, dann hab ich die ein- bis zweimonatige "Entwicklungsarbeit" innerhalb von einer Stunde aufgeholt ;)

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//DE"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>F1 DLM Liga</title>

<style type="text/css">
<!--
html, body {
margin: 0;
padding: 0;
}

body {
background: #333;
font: 10px Verdana, sans-serif;
color: #000;
}

#wrapper {
width: 982px;
margin: 0 auto;
}

#login {
width: 100%;
background: #000;
}

#login p {
float: left;
margin: 0;
padding: 0;
color: #fff;
}

/* Style für Formularfelder */
.formular {
margin: 0px;
float: right;
}

.formfeld {
border: 1px solid;
width: 120px;
border-color:#a5acb2;
color:  #000;
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
background: #fff;
margin: 0px;
}

.formbuttonlogin {
border: 1px solid #a5acb2;
width: 50px;
color: #fff;
font: bold 10px Verdana, sans-serif;
background: #ac1e26;
margin: 0px;
}

.formbuttonreg {
border: 1px solid #a5acb2;
width: 100px;
color: #fff;
font: bold 12px Verdana, sans-serif;
background: #ac1e26;
margin: 0px;
}

#banner_header {
background: url(bilder/start_banner.png);
width: 100%;
height: 93px;
}

#menu {
background: #000;
border: 1px solid #fff;
border-right: 0;
font-size: 12px;
}

#menu ul#nav {
margin: 0;
padding: 0;
float: left;
}

#menu ul#nav li {
display: inline;
}

#menu ul#nav li a:link, #menu ul#nav li a:visited {
padding: 0 10px;
border-right: 1px solid #fff;
display: block;
float: left;
}

#menu ul#nav li a:hover {
background: #df1e26;
}

#menu ul#time {
margin: 0;
padding: 0;
float: right;
}

#menu ul#time li {
display: inline;
color: #fff;
}

#content {
background: #e1e1dd;
}

#banner_footer {
background: url(bilder/start_down_banner.png);
width: 100%;
height: 95px;
}

#footer {
text-align: center;
}

.clear {
clear: both;
height: 0;
line-height: 0;
font-size: 1px;
}

a:link, a:visited, a:hover, a:active {
color: #fff;
text-decoration: none;
}
-->
</style>

</head>
<body>

<div id="wrapper">
     <div id="login">
          <p>Registrieren</p>
          <form action="login_user.php" method="post" class="formular"><input type="hidden" name="PHPSESSID" value="55ef34aa89c92997af251f726b06d203" />
                <input class="formfeld" type="text" name="name" size="15" value="Benutzername" onBlur="if (value =='') {value = 'Benutzername'}" onFocus="if (value == 'Benutzername') {value =''}">
                <input class="formfeld" type="password" name="pwd" size="15" value="Kennwort" onFocus="if (value == 'Kennwort') {value =''}">
                <input class="formbuttonlogin" type="submit" value="Login">
          </form>
          <div class="clear">&nbsp;</div>
     </div>
     <div id="banner_header"></div>
     <div id="menu">
          <ul id="nav">
              <li><a href="#">Home</a></li>
              <li><a href="#">Formel1</a></li>
              <li><a href="#">GP2</a></li>
              <li><a href="#">Forum</a></li>
          </ul>
          <ul id="time">
              <li>17.10.2006 - 15:32 Uhr</li>
          </ul>
          <div class="clear">&nbsp;</div>
      </div>
      <div id="content">
          Willkommen
      </div>
      <div id="banner_footer"></div>
      <div id="footer">
          PHP Scripts & CSS by Dennis Becker<br>Design by DLM Madlook
      </div>
</div>

</body>
</html>
 
Ich habe jetzt das barrierefreie Design von dir eingefügt. Soweit sieht es ja ganz gut aus. Allerdings werden im content-div verschiedene Inhalte per include mittels PHP gerendert. Wie kann ich jetzt die verschiedenen Inhalte vernünftig darstellen? In einer Tabelle (so wie vorher)? Ich bin in Sachen div's absoluter Anfänger (vor allem da ich Jahrelang nur tables nutzte...)

UND: Es ist es auch möglich, den aktuellen Navigationspunkt rot zu unterlegen? Ich hatte früher mal ein Javascript, aber das klappt seit geraumer Zeit nicht mehr...
Mein Versuch sieht jetzt so aus:
PHP: 
if($data[0] == $nid)
	echo '<li style="background: #df1e26;"><a href="index.php?nid='.$data[0].'">'.$data[1].'</a></li>';
else
	echo '<li><a href="index.php?nid='.$data[0].'">'.$data[1].'</a></li>';
 
Zuletzt bearbeitet:
Ich weiß jetzt nicht, um was für Inhalte es sich da im einzelnen handelt, aber Du kannst das Content-DIV ja entsprechend einrichten bzw. erweitern, um darin die Inhalte zu includen.

Mit dem gezeigten PHP-Code kann ich leider nicht viel anfangen, da ich mich mit PHP nicht besonders auskenne.

Alternativ hierzu könntest Du dem Menüpunkt der aktuell geöffneten Seite eine ID #active mit den gewünschten CSS-Formatierungen übergeben.
 
Hups, bin ja im CSS Forum (sorry) Ich übersetze das mal eben in eine verständliche Sprache ;)
PHP: 
Wenn (Navigationselement gleich gewählter Menüpunkt)
dann hervorheben mittels background
       <li style="background: #df1e26;"><a href="index.php?nid=NavigationsID">Navigationselement</a></li>
Wenn ungleichdann
      <li><a href="index.php?nid=NavigationsID">Navigationselement</a></li>

Das klappt aber nicht.

Dann habe ich folgendes gemacht:
PHP: 
.menu ul.nav li a:hover { 
background: #df1e26;
}

.menu ul.nav li a:active { 
background: #df1e26;
}
Aber das geht auch nicht.

Denn das Problem ist, dass sich die Links nicht Anhand von verschiedenen Dateien unterscheiden (index.html, main.html, forum.html) sondern halt in 2 Variablen die an die index.php gehanden werden.

@content
Meine News liegen noch als Table vor :/
Und mein Selbst-geschriebenes Forum ebenfalls.
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück