• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Menüpunkte mit gleichen Eigenschaften

B

Basti225

Neues Mitglied
Hallo,

ich habe ein Problem.
Ich will ein Menü machen, wo alle 'Abschnitte' gleich aussehen.
Also ich meine Frage ist jetzt eigentlich, ob ich die CSS Eigenschaften für alle Menüpunkte nur 1 mal schreiben kann? Wenn ja, wie?

Und ob ich für jeden Link eine Grafik machen muss, mit der Aufschrift oder ob ich das dann einfach eine Grafik als Hintergrund nutzen kann?

mfG.

Basti
 
Es reicht, wenn du die Eigenschaften für li definierst. Die sind dann überall gleich.
Am einfachsten ist es, wenn du mit einer einheitlichen Hintergrundgrafik arbeitest und den Linktext dann innehalb des a-Tags einfügst.
Vertikale Listennavigation
 
Danke,

aber wie mache ich es jetzt, wie bei z.b. HTML.de?
Also der normale Hover ist klar.
Aber wenn man auf der Seite ist, ist ja eine andere Grafik.
Das ist doch nicht a:visited oder?
 
Nein, in dem Fall müsste man eine extra Klasse, z.B. "aktiv" setzen und über diese Klasse das Aussehen anpassen.
 
Danke,
wie bekomme ich das Menü jetzt Waagerecht?

Mit float: left funktioniert es nicht :?

Code: 
#navi li {
float: left;
}

mfG.

Basti
 
Noch eine Frage :P
Wollte den Menüpunkten jetzt noch einen Hintergrund verpassen, der genau so groß ist, wie der Bildschirm.

Habe es jetzt schon mit width: 100% versucht, funktioniert aber nur teilweise.
D.h. das es nur ein Stück angezeigt wird!

CSS

Code: 
#navi
{
background-image: url(menue.png);
background-repeat: repeat-x;
font-family: Verdana, Arial;
font-size: 14px;
margin-left: 200px;
margin-top: -290px;
}

#navi ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

#navi li {
float: left;
}

#navi a
{
display: block;
padding-top: 14px;
padding-left: 15px;
padding-right: 15px;
height: 30px;
background-image: url(menue.png);
text-decoration: none;

}

#navi a:link, #navi a:visited
{
color: #000;
}

#navi a:hover
{
background-image: url(menuehover.png);
}

#navi #aktuell a
{
background-image: url(menueaktiv.png);
}

HTML
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Test </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="content">
<h1> Test </h1>
<div id="line">
<br/>
Text
<br/>
<br/> 
text
<div id="line">
<br/>
<center> Copyright </center>
<div id="navi">
<ul>
<li id="aktuell"><a href="#">Seite 1</a></li>
<li><a href="#">Seite 2</a></li>
<li><a href="#">Seite 3</a></li>
</ul>
</div>
</body>
</html>
 
Zuletzt bearbeitet:
Poste bitte einen Link zur Seite oder zumindest den zugehörigen HTML-Code.

Es könnte an deinem margin-left-Wert bei navi liegen. Bei navi fehlt auch noch die vorangestellte Raute (#navi)
 
Basti225 schrieb:
Wollte den Menüpunkten jetzt noch einen Hintergrund verpassen, der genau so groß ist, wie der Bildschirm.
Zum Vergrößern anklicken....
Das geht nicht. CSS weiß nicht, wie groß der Bildschirm ist. Außerdem wird ja auch die Website nicht im Bildschirm, sondern im Viewport des Browserfensters dargestellt.
 
Ich meine ja so groß wie der Browser.
Habe auch schon gegoogelt und es sollte eig. mit repeat-x funktionieren.
Funktioniert aber nicht.
Also muss ich doch einen Fehler drinne haben, den ich nicht finde?!
 
Basti225 schrieb:
Ich meine ja so groß wie der Browser.
Zum Vergrößern anklicken....
Nenn mich jetzt einen Korinthenkacker, aber ich habe schon so viele Probleme erlebt, die nur daraus entstanden sind, dass der eine schwammig geredet hat, der andere das aber für bare Münze nimmt. Auch die Größe des Browsers ist CSS unbekannt. Ich schrieb ja nicht umsonst "Viewport". Das ist nur ein Teil des Browsers, der bei jedem Nutzer unterschiedlich groß sein kann.

Was Dein Problem angeht...wir wissen ja nicht, was Du geschrieben hast. Daher ist es immer besser, den aktuellen Stand, bei dem es nicht funktionieren soll, als Link irgendwo abzulegen. Sonst kann man Dir nur sagen, "Ja, dann hast Du wohl einen Fehler gemacht".

Dein Link, dem Du das Image zuweist, hast Du richtig als Block-Element definiert (sonst ginge keine Angabe von width/height), repeat-x als Wert für background-repeat würde das Hintergrundbild in x-Richtung kacheln. Also vermutlich das, was Du willst. Wenn es nicht geht, hast Du was falsch gemacht. Aber was, das wissen wir nur, wenn Du uns zeigst, was Du gemacht hast, in dem Code, den Du weiter oben gepostet hast, steht davon nichts drin.
 
Efchen, ich versteh jetzt nicht wirklich, was du meinst, was ich posten soll?
Meinst du die Sachen hochladen und dann hier als Link noch dazu posten?
Falls du das meintest hier:

tunetek
 
Weshalb sollen denn die Menüpunkte so groß wie der Bildschirm sein? Du kennst doch gar nicht die Bildschirmgrößen deiner Besucher.
Nochmal: Bitte einen Link, damit man alles im Zusammenhang mit den verwendeten Grafiken sehen kann.
Der Zahnarzt kann dir ja auch nicht vom Telefon aus helfen ;-)
 
Ich meine nicht die Menüpunkte!
Ich möchte unter den Menüpunkten einen Background haben, der 1 Pixel breit ist und sich wiederholt.
Und von W3, die Fehler versteh ich nicht ganz ^^
Was ist denn da dran falsch?
<div id="content">
oder
<div id="content">
 
Du darfst die Meldungen des Validators nicht wortwörtlich nehmen. Geh von oben nach unten durch. Hinweis: du verwendest xhtml als Doctype. Da schreibt man das <link />-Element etwas anders als Du es geschrieben hast.
 
Wenn der Hintergrund nur aus einem Pixel besteht, einfarbig ist und nicht von Text überlagert werden soll, dann definiere ohne als Border (Rahmen). Andernfalls musst Du eine passende Grafik erstellen und diese als sich wiederholenden Hintergrund angeben.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben