Thema: Topmenü Hintergrund

Hallo, ich habe im Headerbereich eine Durchgezogene Linie. mit einem Bild habe ich diese Linie hinter dem Topmenü "unsichtbar" gemacht. Mein Problem dabei ist, daß nun natürlich auch zwischen den Topmenü-Punkten keine Linie mehr erscheint, da sie ja auch überdeckt wird.
Nun dachte ich mir, man könne ja einen dreigeteilten Hintergrund machen.
Nur wie? Oder hat wer ne andere Idee?

Hallo,

ein Link zu der Seite oder ein wenig Code wären hilfreich, da man sich sonst nichts dadrunter vorstellen kann.
Einen dreigeteilten Hintergrund gibt es allerdings nicht, zumindest nicht für ein Element (z.B. div, es geht nur ein Hintergrund)

Zitat von Tazzi

Hallo, ich habe im Headerbereich eine Durchgezogene Linie. mit einem Bild habe ich diese Linie hinter dem Topmenü "unsichtbar" gemacht. Mein Problem dabei ist, daß nun natürlich auch zwischen den Topmenü-Punkten keine Linie mehr erscheint, da sie ja auch überdeckt wird.
Nun dachte ich mir, man könne ja einen dreigeteilten Hintergrund machen.
Nur wie? Oder hat wer ne andere Idee?

index.php und template.css öffnen (aus deinem template ordner),
darin dann den hintergrund eintragen, dazu musst natürlich noch die position wissen, die bekommst du so raus : Geh auf Deine HP und schreib dahinter ?tp=1

Gruß Thorsten

Hi,
danke schonmal, n Link kann ich leider nicht geben, da die Seite erstmal offline erstellt wird.

aber n bild.



also im Moment ist als Hintergrundgrafik für das Topmenü eine schmale beige Linie eingetragen, damit die blaue dort nicht zu sehen ist. aber dadurch ist natürlich auch zwischen den Menüpunkten keine blaue Linie zu sehen. Im moment siehts ja eher so aus:
------------------ 1 2 3 Kontakt Impressum ---------------------------

soll aber so aussehen
------------------ 1 -- 2 -- 3 -- Kontakt -- Impressum --------------------------



die entsprechende css sieht im Menüteil so aus:

Code:

/* Top Navigation */
/*Topmenü*/
div.headernav ul {
	margin: 0;
	padding-top: 20px;
	padding-right: 20px;
	list-style:none;

}

div.headernav li {
	float: right;
	border-left:solid 0px #2a64ad;
	border-right:solid 0px #2a64ad;
	margin: 0;
	padding: 0;
        background: transparent url(../images/Line1.png) repeat-x;
}

div.headernav a {
	font-family: Arial,"Trebuchet MS", Verdana;
	font-size: 12px;
	font-weight: bold;
	float:left;
	display:block;
	height: 24px;
	line-height: 24px;
	padding: 0 20px;
	color: #2a64ad;
	text-decoration: none;
}
/* Hover Topmenü*/
div.headernav a:hover {
        background-color:#e6dce4;
        color: #000000;
}

div.headernav a#active_menu-nav {
	margin-top:0px;
	height: 24px;
	line-height: 24px;
	background-position: 0 0;
}

div.search input {
	background:no-repeat;
	width: 130px;
	padding-right:20px;
	border:none;
}

td.article_column {padding: 10px;}



/* Main Menu */

Am besten arbeitest Du Dich gleich in die Web Developer Toolbar ein, dann kannst Du das alles selber machen.

Zu Deinem speziellen Problem: ich habe einen schnellen Blick drauf geworfen (ohne Link wie gesagt schwierig) und wollte fragen: erscheinen die Menüpunkte so, wie Du es willst, wenn Du mit der Maus drüber gehst (bei :hover haben sie eine background-color)?

hehe ja, das mit dem hover weiß ich, das ist alles noch nicht fertig, die background color ist in diesem fall auch das beige. kommt aber dann auch noch weg. erstmal die großen probleme, dann die kleinen feinheiten. das ist ja eher was simples.

was genau suchst du denn, wenn du nen link hättest?
die tp=1 kann ich ja als bild einstellen, wenn du die brauchst.

Ich hab noch mal genauer hingeguckt: mach mal bei "div.headernav a" probeweise aus dem padding ein margin.

Allerdings ist das hier ohne Link für mich praktisch unmöglich zu lösen. Irgendwoher kriegen die a's denke ich noch ne background-color.

Wenn das oben genannte nicht klappt und Du gar nicht weiter kommst und auch keine Zeit für die Einarbeitung in die Web Dev. T. hast, dann stell die unfertige Seite mit Verzeichnisschutz online und schick mir die Logindaten.

egal ob margin oder padding, es ändert sich nicht die kleinste kleinigkeit.

aber nu haste ne pm

Hallo.

Installier dir Firebug. Dann klickst du mit der rechten Maustaste auf dein Menüpunkt und gehst auf element untersuchen, dann klappt der Code auf genau an der Stelle wo das Menü ist.
Wenn du dann im Code über die DIVs mit der Maus gehst, zeigt dir Firebug auf deiner Seite das Element welches du gerade mit der Maus überfährst umrandet von einem Blauen bzw. Gelben Bereich. Das eine Davon ist dem Element zugewiesener Margin und das andere Padding. Somit kannst du sehen, welche Elemente womit den Hintergrund bedecken.

Ok Tazzi,

probier mal:

Code:

div.headernav li {
	float: right;
	border-left:solid 0px #2a64ad;
	border-right:solid 0px #2a64ad;
	margin: 0;
	margin:0px 10px 0px 10px;
        background:#e6dce4;
}

statt:

Code:

div.headernav li {
	float: right;
	border-left:solid 0px #2a64ad;
	border-right:solid 0px #2a64ad;
	margin: 0;
	padding: 0;
        background: transparent url(../images/Line1.png) repeat-x;
}

Die Ebenen in CSS überlagern auch mit einer Hintergrundfarbe die drunterliegenden, da brauchst Du kein Verdeckungsbild.

Das margin muss natürlich für das li genommen werden, das die a's umschliesst - die der a's drücken lediglich die Listenelemente auseinander und bestimmen so ihre Breite. Und diese wiederum müssen einen horiz. Abstand voneinander bekommen, damit die Linie darunter zwischendrinnen sichtbar wird.

Wenn Du jetzt den die Linie verdeckenden Raum unter den Links in der Breite ändern willst, ändere den zweiten Wert von margin bei "div.headernav a".

Sollte so klappen!? Zieh Dir unbedingt die Web Developer Toolbar oder Firebug rein. Dann hast Du mit CSS - kein Stress