Navigation

Sturmvogel · 11. Juni 2009

Also, ich verwende für meine Navigation(html/css only) ein paar "ausgestaltete Links", diese werden in einer Div Box als "align='center'" dargestellt. Das funktioniert auch, nur mein Header(ebenfalls div Box und center) wird an einer ganz anderen Stelle angezeigt:

[Blockierte Grafik: http://img200.imageshack.us/img200/341/screenweb.png]

Von meinem Design mal abgesehen^^(wird überarbeitet, wollte nur mal dass irgendwas da ist), hat es einen Grund warum das so aussieht? Wie gesagt beide Div Boxen auf align = Center

lg

PS: Bin newbie in der gegend, von daher^^

Manuel · 11. Juni 2009

Poste mal bitte deinen CSS Code. Ich habe eine Vermutung aber dazu muss ich den Code sehen.

Sturmvogel · 11. Juni 2009

Jo, ist ja nix streng vertrauliches, da kann ichs auch posten:

Code

body {
  font-size: small;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}
#navibereich li {
  display: inline;
  list-style-type: none;
  background-color: #F0B900;
  padding: 4px 0;
  border-top: 3px solid #FF9400;
  border-bottom: 3px solid #FF9400;
  margin: -4;
}


#navibereich a {
  color: black;
  text-decoration: none;
  padding: 4px 8px;
}


#navibereich a:hover,
#startseite #navi01 a,
#api #navi02 a,
#programme #navi03 a,
#snippets #navi04 a,
#Tutorials #navi05 a,
#links #navi06 a,
#kontakt #navi07 a {
  background-color: #FFC900;
}

Alles anzeigen

ist ne externe Datei

lg

Manuel · 11. Juni 2009

Wenn du die HTML Datei noch postest, kann ich genaueres darüber sagen. Ich weis ja nicht was was heißt.

Sturmvogel · 11. Juni 2009

dacht ich mir fast^^
hier:

HTML

<html>
<head>
	<title>Sturmvogel - Home</title>
	<link href="navigation.css" type="text/css" rel="stylesheet" /> 
</head>
<style type="text/css">
body {background-color: #cccccc}
body {color: #555555}
h1 {color: #000000}
h1{Background-color: #cccccc}
h1{Font-weight: bold}
h1{Font-Size: 50}
h1{Text-align: center}
h1{Text-decoration: underline}
h1{border-color: yellow}
h1{border-width: thick}
h1{border-style: double}
h1{}
code{color: #00FF00}


</style>
<body id="startseite">
<div align="center">
<img src ="Header.png" alt="Header">
</div>
<br>
<br>
<br>
<div align="center">
<ul id="navibereich">
  <li id="navi01"><a href="index.html">Startseite</a></li>
  <li id="navi02"><a href="api.html">API Referenz</a></li>
  <li id="navi03"><a href="programme.html">Meine Programme</a></li>
  <li id="navi04"><a href="snippets.html">Code Snippets</a></li>
  <li id="navi05"><a href="tutorials.html">Tutorials</a></li>
  <li id="navi06"><a href="links.html">Links</a></li>
  <li id="navi07"><a href="kontakt.html">Kontakt</a></li>
</ul>
</div>


</body>
</html>

Alles anzeigen

Ist die Startseite, der Rest ist im Moment aber noch ähnlich aufgebaut. Also bis auf den Titel ist nicht wirklich was anders.

Manuel · 11. Juni 2009

Ja also bei mir gehts. Öhm, welchen Browser benutzt du denn ?

Leon · 11. Juni 2009

Ich würds ganz anders machen. Und dann auch gleich die in den STrict-Varianten von (X)HTML nicht erlaubten Attribute vermeiden:
Pack um den Header und die Navi jeweils ne div-Box und um beide zusammen auch noch ne div-Box. Für die oberste vergibst du ne ID und dort sorgst du dann per CSS für die zentrale Positionierung.

Sturmvogel · 11. Juni 2009

Zitat von Vesprit

Ja also bei mir gehts. Öhm, welchen Browser benutzt du denn ?

Ich benutze Firefox 3, unter IE habe ich es auch getestet.

Edit:

@ Leon:
Wie meinst du über CSS die Positionierung? Über Koordinatenangabe? Ich denke es liegt eher allgemein an dem Problem, dass das Bounding Rectangle meiner Navigation einfach größer ist, als die Navigation und somit das Rechteck zentriert ist, der Rest aber nicht wirklich.

lg

Manuel · 11. Juni 2009

Das ist aber seltsamm. Ich verwende den selben Browser und bei mir geht es.

Sturmvogel · 11. Juni 2009

kannst du mir mal nen Screen senden oder so?

Manuel · 11. Juni 2009

Ja, aber das mache ich morgen. Da ich jetzt keine Zeit habe. Ich schreibe dir dann eine PN.

Plinfo · 11. Juni 2009

Ich steh auch vor einen Raetsel ?( . Ich habe es nun mit 4 verschiedenen Browsern getestet, und es hat bei jedem geklappt. Eigentlich hast du nix falsch gemacht. Vielleicht liegts aber doch am Browser? Also, wenn das nicht geht, probier vielleicht doch mal anstatt id class. Aber das ist auch kein Unterschied. Vielleicht solltest du besser, wie Leon schon schrieb, mal die ganzen Links in eine div Box packen. Dort solltest du sie dann in der mitte positonieren. align: center;
Dann wuerd ich es so machen, die Links aus den Listen zu entnehmen, und sie einfach so hinzuschreiben. Nebeneinander. Da du ja die verschieden Code in verschiedenen id's hast, schreib die id einfach in den a Tag. Wenn es dann nicht klappen sollte, dann vermute ich mal, das es an deinem Browser liegt, denn schließlich funktioniert es auch bei mir und bei Vesprit.

Sturmvogel · 11. Juni 2009

wenns bei euch geht wirds wohl auch bei anderen Usern gehen. Ist es wirklich exakt die Mitte? Ich meine ich verwende Firefox 3 und der ist ja nicht so schlecht. Bei IE könnte ich mir sowas noch erwarten. Und wenn ihr das getestet habt...

Manuel · 11. Juni 2009

Ja, es ist wirklich zu 100% exakt in der Mitte.

Sturmvogel · 11. Juni 2009

hm komisch...
Also am Browser liegts nicht, aber ihr habt meinen Header nicht oder? Vielleicht läuft da was falsch.

Manuel · 11. Juni 2009

Nein, deinen Header haben wir nicht. Ich habe einfach meinen genommen.
Das sollte aber wirklich nichts daran ändern...

Eddit: Schick mal deinen Header.

Sturmvogel · 11. Juni 2009

War nur so der erste Gedanke, mein Header ist 600*200 pixel groß.

HIer:

Spoiler anzeigen

Manuel · 11. Juni 2009

HTML

<html>
<head>
	<title>Sturmvogel - Home</title>
	<link href="navigation.css" type="text/css" rel="stylesheet" /> 
</head>
<style type="text/css">
body {background-color: #cccccc}
body {color: #555555}
h1 {color: #000000}
h1{Background-color: #cccccc}
h1{Font-weight: bold}
h1{Font-Size: 50}
h1{Text-align: center}
h1{Text-decoration: underline}
h1{border-color: yellow}
h1{border-width: thick}
h1{border-style: double}
h1{}
code{color: #00FF00}


</style>
<body id="startseite">
<div align="center">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src ="Header.png" alt="Header">
</div>
<br>
<br>
<br>
<div align="center">
<ul id="navibereich">
  <li id="navi01"><a href="index.html">Startseite</a></li>
  <li id="navi02"><a href="api.html">API Referenz</a></li>
  <li id="navi03"><a href="programme.html">Meine Programme</a></li>
  <li id="navi04"><a href="snippets.html">Code Snippets</a></li>
  <li id="navi05"><a href="tutorials.html">Tutorials</a></li>
  <li id="navi06"><a href="links.html">Links</a></li>
  <li id="navi07"><a href="kontakt.html">Kontakt</a></li>
</ul>
</div>


</body>
</html>

Alles anzeigen

  steht für einen Abstand. So kannst du es in die Mitte rutschen. Ist zwar keine Elegante Lösung, aber was anderes fällt mir momentan nicht ein.

Eddit: Mach doch deinen Banner nicht so breit. Dann dürfte es auch gehen

Sturmvogel · 11. Juni 2009

ja danke mit der unschönen Variante gehts. Wenn ich meinen Header aber kleiner mache verändert sich nichts.

**TimWolla** · 12. Juni 2009

Mach mal bei der Div Box um den Header nen

Code

style="text-align:center"

als neues Attribut. Und nimm die   raus.