Navigationslinks vertikal zentrieren...

[claudi22]

Hi,

nachdem ich mich eigentlich mit HTML beschäftigen wollte, wurde mir gestern nahegelegt (http://forum.de.selfhtml.org/my/?t=183071&m=1212164), meine Designidee lieber in CSS umzusetzen. Nun hab ich mich den ganzen Abend durchgelesen und bin soweit ganz zufrieden - wenn mir auch der Kopf raucht... Für ein Problem hab ich allerdings keine Lösung gefunden, und das ist die Navigation. Wie bekomme ich die Links vertikal zentriert? So sieht es ja nicht wirklich schön aus.

http://www.tier-fotografien.de/besca_css.html

Über eine Hilfestellung würde ich mich freuen. Falls ich sonst etwas sehr falsch gemacht hab, bitte melden :)

Grüßle, Claudi

[Wizard]

Schön,Schön wenn auf einen gehört wird :-)

Erstmal entfernen wir das <center></center> weil, dass können wir ja mit css über text-align:center machen. Und dann weise doch mal dem div mainnav line-height: 30px(die höhe des umgebenden #mainnav) zu.
Für weitere Fragen und Erfolgsmeldungen gern offen

Wizard

[claudi22]

Hallihallo,

na, ich bin doch lernfähig :)
Allerdings hab ich das wohl falsch gemacht... ich soll das hier einsetzen?

<div id="mainnav" line height="30px">

Falls ja, funzt das leider nicht.
Was mach ich falsch?

Nächtliche Grüße,
Claudi

[Wizard]

nein, setze das ganze in den css teil, im bereich für den div mainnav.

#mainnav  
	{  
		font-family: verdana, arial, helvetica, sans-serif;  
		font-size:10pt;  
		width:900px;  
		height: 30px;  
		background-color: #303f03;  
		border-width:1px;  
                border-style:solid;  
                border-color:#303f03;  
		color:#90aa3c;  
                */HIERHIN/*  
	}  

[claudi22]

Sooo einfach? Sensationell! Tausend Dank!
Vermutlich werd ich demnächst mit neuen Problemen vorbeischauen.
Bis dahin Gute Nacht & dankeschön :)

Claudi

[Malcolm Beck´s]

hi,

<div id="mainnav">

Falls ja, funzt das leider nicht.
Was mach ich falsch?

#mainnav {  
  margin:0;  
  padding:10px 0;  
}  
[code lang=html]oder umgekehrt

#mainnav {
  margin:10px 0;
  padding:0;
}
[/code]

Dann hast du es auch „Vertikal“ Zentriert.

mfg

[claudi22]

oh klasse, danke, notier ich gleich mal in meiner schlauen "CSS-Lerndatei" :)

[Beat]

Für ein Problem hab ich allerdings keine Lösung gefunden, und das ist die Navigation. Wie bekomme ich die Links vertikal zentriert? So sieht es ja nicht wirklich schön aus.
http://www.tier-fotografien.de/besca_css.html

Über eine Hilfestellung würde ich mich freuen. Falls ich sonst etwas sehr falsch gemacht hab, bitte melden :)

Ich mache es heutzutage so

<ul id="navigation">
  <li><a>Link</a></li>
  <li><a>Link</a></li>
  <li>Aktuelle Seite</li>
  ...
</ul>

und im CSS:

#navigation, #navigation li
    { margin:0; padding:0; list-sytle:none; }
#navigation
    { text-align:center; }
#navigation li
    { display:inline; }

mfg Beat

[Kai345]

[latex]Mae  govannen![/latex]

Ich mache es heutzutage so

Würde ich nicht, denn

{ margin:0; padding:0; list-sytle:none; }

die Browser werden eine der drei Eigenschaften ignorieren. ;)

Immer diese Typos *g*

Cü,

Kai

[Beat]

Ich mache es heutzutage so
Würde ich nicht, denn
     { margin:0; padding:0; list-sytle:none; }
die Browser werden eine der drei Eigenschaften ignorieren. ;)
Immer diese Typos *g*

Halb Richtig.
Bis die Zeile display-inline geparst wird, ist display:block durchaus für <li> gültig, und damit auch eine margin-Angabe. Dass sie danach irrelevant wird, macht das CSS nicht ungültig.

Eigentlich wollte ich ursprünglich inline-block angeben, wie ich es selbst verwende. Aber auf MSIE hacks wollte ich dann doch nicht zu reden kommen, da ich sah, dass für die konkreten Zwecke display:inline für <li> ausreicht.

mfg Beat

[Kai345]

[latex]Mae  govannen![/latex]

Ich mache es heutzutage so
Würde ich nicht, denn
     { margin:0; padding:0; list-sytle:none; }
die Browser werden eine der drei Eigenschaften ignorieren. ;)
Immer diese Typos *g*

Halb Richtig.
Bis die Zeile display-inline geparst wird, ist display:block durchaus für <li> gültig, und damit auch eine margin-Angabe. Dass sie danach irrelevant wird, macht das CSS nicht ungültig.

Ich rede nicht von margin. Es gibt kein list-sytle daher die Warnung, damit das CSS nicht einfach so von $random_user kopiert wird

Cü,

Kai

[MudGuard]

Hi,

Bis die Zeile display-inline geparst wird, ist display:block durchaus für <li> gültig,

nur, wenn man es explizit vorher auf display:block umgesetzt hat.
Normale Browser setzen für li-Elemente den Wert von display auf list-item.

cu,
Andreas

[claudi22]

Noch klingt mir das wie "böhmische Dörfer" (so schnell lernt man halt doch kein CSS...), aber ich befass mich morgen nochmal damit, wenn ich richtig wach bin :)
Auch Dir lieben Dank!

[Wizard]

Du solltest Dir übrigens das http://de.selfhtml.org/html/kopfdaten/meta.htm#zeichenkodierung@title=hier mal durchlesen, dann sind auch "die komischen Fragezeichen" weg.

[claudi22]

ich seh gar keine Fragezeichen, aber das werd ich dennoch auch mal lesen :) Danke!

[Malcolm Beck´s]

hi,

nachdem ich mich eigentlich mit HTML beschäftigen wollte, wurde mir gestern nahegelegt (http://forum.de.selfhtml.org/my/?t=183071&m=1212164), meine Designidee lieber in CSS umzusetzen.

http://www.tier-fotografien.de/besca_css.html

Viel CSS sieht man ja nicht auf deiner Seite. Dabei ist das Konstrukt an sich sehr schnell umgesetzt, ca. 17 min.

Für das Problem mit Frames gibt es auch eine ganz einfache Lösung.

mfg

[Malcolm Beck´s]

hi,

» http://www.tier-fotografien.de/besca_css.html

Viel CSS sieht man ja nicht auf deiner Seite.

Ahh, jetzt sieht es schon anders aus. Ich hatte noch die Tabellen-Version gesehen.

mfg

[claudi22]

hi,

»» » http://www.tier-fotografien.de/besca_css.html
»»
»» Viel CSS sieht man ja nicht auf deiner Seite.

Ahh, jetzt sieht es schon anders aus. Ich hatte noch die Tabellen-Version gesehen.

mfg

Ah, dann ist gut :) Hatte mich grade schon gewundert. Dein CSS Design sieht vom Quelltext her natürlich deutlich professioneller aus, aber ich fang ja erst seit 2 Tagen an, mich damit zu beschäftigen. Man darf wohl keine Wunder erwarten ;)

Grüßle, Claudi

[Malcolm Beck´s]

hi,

Ah, dann ist gut :) Hatte mich grade schon gewundert. Dein CSS Design sieht vom Quelltext her natürlich deutlich professioneller aus, aber ich fang ja erst seit 2 Tagen an, mich damit zu beschäftigen. Man darf wohl keine Wunder erwarten ;)

Nein, Wunder erwartet niemand, gerade am Anfang ist das ganze ja noch ein wenig schwer. Aber zumindest die Links könntest du in eine Liste packen, dann hast du diese Baustelle schon mal erledigt.

http://www.alvit.de/css-showcase/css-navigation-techniques-showcase.php -- Ein Paar Beispiele basierend auf CSS.

Und dein Footer z. B. kannst du direkt in ein „<p id="footer">“  packen, statt eines „<div>“; dass <p>-Element kannst du genauso formatieren, wie ein <div>-Element und es ist an dieser stelle angebrachter, als ein <div>.

mfg

[Malcolm Beck´s]

hi,

ein Paar Ergänzungen zu deiner CSS-Seite:

Diese Seite Bookmarken.

<h2>Überschrift <p>Text</p> </h2>

Das ist nicht zulässig, <hx> darf kein <p> enthalten und umgekehrt.
Also:

<h2>Überschrift</h2>  
<p>Text</p>  

Den Header der Seite kannst du in ein <h1> schreiben statt eines <div>, das Bild, dass den Header der Seite bildet kannst du dann als Hintergrundbild einbinden:

<h1>Besca - A dog's life / Im Leben eines Hundes</h1>

Und ins CSS

h1 {  
  margin:10px 0 0 0;  
  padding:0;  
  height:154px;  
  text-indent:-20000px; /* Den Text aus dem Sichtbaren Bereich rausziehen */  
  background: url(http://www.tier-fotografien.de/besca_header.jpg) no-repeat;  
}

Die Navigations-links in eine Liste und schon hast du eine weitestgehend Korrekt Ausgezeichnete HTML-Seite.

Zum testen ist es immer ratsam, sich die Seite mit deaktivierten Styles (also ohne CSS zu betrachten), da sieht man die Groben Fehler auf Anhieb.

mfg