Kubrick: Zusätzliches horizentales Menu unter Header-Grafik?

EncGuano

Hallo allerseits...

habe gerade Joomla verlassen und schließe mich hiermit offiziell der WordPress-Gemeinde an... und habe direkt eine kleine Frage:

Wie kann ich bei WordPress (2.0.2) am im deutschen Default-Theme (Kubrick) ein ganz einfaches horizontales Menü (kein Drop-Down oder ähnliches) direkt unter der Header-Grafik realisieren? Dort sollen dann einige der statischen Seiten gelistet werden.

Ich hatte schon das Plugin Sticky Menu (http://tela-web.com/wordpress-plugins/sticky-menu/) als mögliche Lösung gefunden, aber vielleicht geht das ja auch ganz ohne Plugins?

Vielen lieben Dank für Eure Hilfe!
EncGuano

PS. Bin schwer begeistert von WordPress! Schöner sauberer Code! (Zumindest auf den ersten Blick ;))

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

MaD

schau mal dir meinen leider noch halbfertigen Blog an ... dann wechselst du im Themeswitcher auf Topnavigation 1 ... meinst du das so?

wenn ja schau mal hier ... da findest eine Anleitung

kinjin

Moin Moin,

bei mir sieht das so aus.

Dazu habe in den Themes mit dem Themes-Editor, die header.php gearbeitet.

Öffne Sie und suche nach der Zeile

PHP

<div id="header">
	<div id="headerimg">
		<h1><a href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
		[b]<div class="description">[/b]
                         <?php bloginfo('description'); ?>
                [b]</div>[/b]
	</div>

Und ändere Sie dementsprechend um

PHP

[b]<div class="description">[/b]
	<div id="hnav">
		<ul>
			<li><a href="<?php bloginfo('url'); ?>">Startseite</a></li>
			<li><a href="http://www.xx.yy/1/">Galerie</a></li> 
			<li><a href="http://www.xx.yy/2/">&Uuml;bersicht</a></li>
			<li><a href="http://www.xx.yy/3/">Kontakt</a></li>
			<li><a href="http://www.xx.yy/4/">Impressum</a></li>
	        </ul>
	</div>
[b]</div>[/b]

Alles anzeigen

Hier noch meine CSS-Datei dazu:

Code

/* headmenue */


#hnav ul
{
text-align: center;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 0;
margin-top: 0;
/* cancels gap caused by top padding in Opera 7.54 */
margin-left: 0;
background-color: transparent;
color: #F2EEEC;
width: 100%;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
line-height: 18px;
/* fixes Firefox 0.9.3 */
}


#hnav ul li
{
display: inline;
padding-left: 0;
padding-right: 0;
padding-bottom: 5px;
padding-top: 5px;
}


#hnav ul li a
{
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-top: 5px;
color: #F2EEEC;
text-decoration: none;
}


#hnav ul li a:hover
{
	background: #F2EEEC;
	color: #3A291F;
}

Alles anzeigen

Also, innerhalb von der Class description, muss dein Menü eingepflegt werden, dann passt das...

kinjin

EncGuano

Moin ihr beiden!

Vielen Dank für Eure Hilfe!

Beide Lösungen sind prima, ich habe mich dann letzlich für die Lösung von kinjin entschieden, da diese ein wenig Platz spart. ;-)

Allerdings habe ich im Header schon über die Headergrafik Text integriert (siehe http://www.gaiadelic.org%29... somit würde ich gerne den Headertitel ausblenden und das Menü an den unteren Rand der headergrafik verbannen.

Hatte das probiert, indem ich

PHP

<h1><a href="<?php echo get_settings('home'); ?>/">
<?php bloginfo('name'); ?></a></h1>

auskommentiert habe und im CSS padding-top erhöht habe:

Code

#topnav ul
{
text-align: center;
padding-bottom: 5px;
padding-top: 170px; /* ########## Geändert von: 5px;*/
padding-left: 0;

Das hat im FireFox dann auch irgendwie ganz ok ausgeschaut, der IE hat´s dann aber verrissen.

Wie mache ich das am geschicktesten?

Und Danke nochmal für eure Hilfe!

Liebe Grüße,
EncGuano

EncGuano

Kann mir da vielleicht jemand weiterhelfen?

Ich stecke fest, ehrlich! :o)

MaD

das ist immer so ein Problem ... du könntest z.B. eine Abfrage einbauen, ob es sich um den IE handelt und dann eine eigene IE.css Datei gestalten ...

kinjin

Moin Moin,

ich schaue mal ob ich heute Nachmittag da etwas testen kann...
Melde mich dann,

kinjin

EncGuano

Zitat von MaD

das ist immer so ein Problem ... du könntest z.B. eine Abfrage einbauen, ob es sich um den IE handelt und dann eine eigene IE.css Datei gestalten ...

Jou, das wäre sicherlich machbar... aber vielleicht gibt es ja doch noch eine "integrierte" Lösung... :)

kinjin: Das wär toll... ich bin leider immer noch mehr oder weniger Nixblicker was CSS angeht... auf Verdacht an irgendwelchen Werten rumspielen klappt ganz gut, aber alles was darüber hinausgeht... naja. ;)

Liebe Grüße,
Enc

kinjin

Hi EncGuano,

ich habe dann mal mir dein CSS angeschaut.

Blenden wir als erstes mal die Überschrift weg.

Code

#headerimg h1 {
	font-size: 4em;
	text-align: center;
	display:none;
}

und nun verschieben wir deine Navigation nach unten, indem wir den Abstand nach oben vergrößern.

Code

#headerimg .description {
	font-size: 1.2em; /* ########## Geändert von: 1.2em;*/
	text-align: center;
} 
.description{
	margin-top:170px;
}

Die Klasse description habe ich in deinem CSS Sheet garnicht gefunden, die umgibt aber deine Top-Navigation.
Dadurch ist dann ein Ausrichten möglich.

Leider kann ich dir nicht sagen / versprechen, das es auch im IE / Opera so funktioniert.
Passe dein Stylesheet an und dann schauen wir uns das ganze in verschienden Browsern an.

kinjin

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Kubrick: Zusätzliches horizentales Menu unter Header-Grafik?

Jetzt mitmachen!