nerviges Problem mit horizontaler Navigation

NadineHaa

Hallo Leute,

ich verzweifel gerade an dem Versuch eine horizontale Navigation anzulegen. Ich habe schon einige Tutorials, auch hier im Forum besprochene versucht und erhalte trotz alle dem immer die selben dummen Fehler.

Zu meinem Problem:

Ich habe eine index.php in der vor dem abschließenden /head das steht:

PHP

<?php get_header(); ?>

In meiner header.php steht im body-tag folgendes:

PHP

<body>
<!-- horizontale Navigation: Farbe, Hover-Effekt -->


<div id="navmenu">
<ul>
	<li><a href="<?php echo get_settings('home'); ?>">HOME</a></li>
	<li><a href="wordpress/portfolio/">PORTFOLIO</a></li>
	<li><a href="wordpress/aktuell/">AKTUELL</a></li>
    <li><a href="wordpress/leistungen/">LEISTUNGEN</a></li>
    <li><a href="wordpress/uebermich/">&Uuml;BER MICH</a></li>
    <li><a href="wordpress/kontakt/">KONTAKT</a></li>
	</ul>
</div>


<!-- horizontale Navigation: Farbe, Hover-Effekt ende -->
</body>

Alles anzeigen

Meine style.css sieht nun so aus...

Code

#navmenu ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	list-style-image: none;
	font-family: "Arial Black", Gadget, sans-serif;
	font-size: 12px;
	color: #4b4946;
}
#navmenu li {
	display: inline;
	padding: 5px 20px 5px 20px;
	font-family: "Arial Black", Gadget, sans-serif;
	font-size: 12px;
	color: #4b4946;
}
#navmenu a {
	text-decoration:none;
	color: #4b4946;
	font-family: "Arial Black", Gadget, sans-serif;
	font-size: 12px;
}
#navmenu a:hover {
	color: #86154d;
	font-family: "Arial Black", Gadget, sans-serif;
	font-size: 12px;
}

Alles anzeigen

... aber wenn ich nun alles auf meinen Server lade und die Seite aktualisiere steht die Navi immer noch mit den Bullets davor in Standardschrift und blau und vor allen Dingen untereinander und nicht horizontal, was mich echt fuchsig macht :(

Könnt ihr mir helfen meinen Fehler zu finden?
Ich komm absolut nicht weiter.

Besten Dank

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

Domino5702

Hallo,

Ich habe in meinen Navigationen immer bei "ul" display:none und bei "a" display:block. Und es heisst immer list-style:none - also ohne type oder image. Bei der Definition der "li" muss mE ein float:left rein sowie die height und line-height auf einen Wert so 20-30 gesetzt sein.

LG Domi

CSS

#topmenu {
        width: 650px;
        float: left;
        margin-left: 20px;
        margin-top: 3px;
}


.topnav {
        margin: 0;
        padding: 0;
        list-style: none;
}


.topnav * {
        margin: 0;
        padding: 0;
        list-style: none;
}




.topnav ul {
        position: absolute;
        top: -999em;
        display: none;
}


.topnav li {
        float: left;
        position: relative;
        z-index: 999;
        height: 25px;
        line-height: 25px;
        background: url(images/toplibg.png) no-repeat right;
        padding-right: 15px;
        margin-right: 13px;
}


.topnav a {
        display: block;
        font-size: 11px;
        font-weight: bold;
        margin: 0;
        padding: 0;
        color: #073f65;
        text-transform: uppercase;
        font-family: Arial, Helvetica, Sans serif;
        text-decoration: none;
}


.topnav li#current a,
.topnav li.current_page_item a,
.topnav li:hover a {
        text-decoration: none;
}


.topnav ul li{
        width: 120px;
}


.topnav li:hover ul,
ul.topnav li.sfHover ul {
        left: -17px;
        top: 23px;
        width: 120px;
        background: url(images/topulbg.png) no-repeat bottom;
        padding-bottom: 7px;
}


.topnav li:hover li ul,
.topnav li.sfHover li ul {
        top: -999em;
}


.topnav li li:hover ul,
ul.topnav li li.sfHover ul {
        left: 120px;
        top: -1px;
}


.topnav li:hover ul,
.topnav li li:hover ul {
        top: -999em;
}


.topnav li li {
        display: block;
        padding: 0px;
        height: auto !important;
        border: none;
        background: #fff;
        margin: 0;
}


.topnav li li a:link,
.topnav li li a:visited {
        display: block;
        height: auto !important;
        line-height: 30px;
        text-transform: uppercase;
      color: #666;
        font-weight: normal;
        font-family: arial, helvetica, sans-serif;
        font-size: 10px;
        border: none;
        margin: 0;
        padding: 0;
        margin-left: 10px;
}


.topnav li li a:hover {
        color: #699ebb !important;

Alles anzeigen

NadineHaa

Hallo Domino,

danke für deine Antwort.

Also bei mir in Deamweaver siehts jetzt gut aus. (s.i.)
Allerdings hat sich bei Wordpress immer noch nichts geändert. :(

Mein Code in der style.css sieht jetzt so aus:

Code

#navmenu ul {
	margin: 0;
	padding: 0;
	display: none
	list-style: none	
	font-family: "Arial Black", Gadget, sans-serif;
	font-size: 12px;
	color: #4b4946;
}
#navmenu li {
	display: inline;
	float: left
	line-height: 20px;
	height: 20 px;
	padding: 5px 20px 5px 20px;
	font-family: "Arial Black", Gadget, sans-serif;
	font-size: 12px;
	color: #4b4946;
}
#navmenu a {
	display:block
	text-decoration:none;
	color: #4b4946;
	font-family: "Arial Black", Gadget, sans-serif;
	font-size: 12px;
}
#navmenu a:hover {
	color: #86154d;
	font-family: "Arial Black", Gadget, sans-serif;
	font-size: 12px;
}

Alles anzeigen

Noch irgend eine Idee?

Danke und beste Grüße

Domino5702

Hmmm .... rufe Deine Seite auf, aktiviere das Theme und drücke STRG+F5, um den Cache zu leeren. Wenn es im DW gut ist, sollte es auch online gut sein - aber: nicht die Theme-Vorschau anschauen, und in mehreren Browsern testen.

Und damit die Besucher Deiner Seite nichts von Deinen Versuchen mitbekommen, kannst Du das WP Maintenance Mode Plugin installieren.

LG Domi

NadineHaa

Lieb gemeint, aber leider sieht es auch nach dem
leeren des Cache und der Aktivierung, egal ob über Vorschau oder über Seite anzeigen immernoch falsch aus. Es ist zum Mäuse melken. :((
Ich weiß einfach nicht, was ich falsch mache.

Domino5702

Hmmm

Code

<!-- From the classic WordPress theme example -->
<style type="text/css" media="screen">
@import url( http://deine-hp.de/wp-content/themes/psd2css/style.css );
</style>

bzw. die zweite Definition weiter unten im Quelltext

Ist das noch das richtige Stylesheet?

LG Domi

Morris

probier mal

HTML

#navmenu li {list-style: none;}

Gruß
Mo

Domino5702

Zitat von Morris
probier mal
HTML
#navmenu li {list-style: none;}
Gruß
Mo

OK, aber wird das nicht von der "ul" vererbt?

LG Domi

NadineHaa

Probier es nocheinmal bitte, ich hatte ein anderes Theme aktiv.

Domino5702

Zitat von Morris
probier mal
HTML
#navmenu li {list-style: none;}
Gruß
Mo

Zitat von NadineHaa

Probier es nocheinmal bitte, ich hatte ein anderes Theme aktiv.

Es sieht mir danach aus, als ob der Pfad zum Stylesheet nicht stimmen würde, kann das sein?

LG Domi

Morris

Zitat von Domino5702

Es sieht mir danach aus, als ob der Pfad zum Stylesheet nicht stimmen würde, kann das sein?
LG Domi

Mein Fehler...sorry. Hatte das Ganze etwas missverstanden.
Wenn natürlich überhaupt kein CSS greift stimmt die Referenzierung nicht.

Gruß
Mo

NadineHaa

wie sieht die Anbindung der style.css bei dir aus?

Domino5702

Nein, ist nicht Dein Fehler - das sind zwei verschiedene Dinge. Dein Einwand mag berechtigt sein, ich weiss es nicht, ob die Kaskade so spielt. Die andere Frage war an Nadine

LG Domi

Domino5702

Der komplette absolute Pfad

HTML

<link rel="stylesheet" type="text/css" media="all" href="http://meine-hp.de/wp-content/theme/mein-theme/style.css" />

LG Domi

NadineHaa

Ich habs XD Frag mich nicht, was ich gemacht habe aber ich habs :)
Ja, du hattest recht, es lag an dem Script für das style.css.

Vielen lieben Dank an euch.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

nerviges Problem mit horizontaler Navigation

Jetzt mitmachen!

Benutzer online in diesem Thema