Horizontale Navigation

[aqua.*]

Hallo,
ich habe folgendes Problem:

Ich möchte eine Horizontale Navigation erstellen. Dafür habe ich 7 Grafiken, die halt alle nebeneinander aufgelistet werden sollen. Ich habe vor, dass die Grafiken lediglich über CSS eingebunden werden sollen (background-image: ). Ich finde es schöner, wenn man nicht mit Rechtsklick sich den Button einzeln anschauen kann, wenn ihr versteht was ich meine ;)

Also HTML-Code dachte ich, dass der so aussehen sollte:

<div id="navi">
    <div id="home"></div>
    <div id="ferienwohnung"></div>
        ...
</div>

Nur weiß ich jetzt nicht weiter, wie ich das mit CSS anpassen soll.
Ich hoffe, ihr könnt mir weiterhelfen

 

[MrMurphy]

Hallo

wenn ihr versteht was ich meine

Nö, verstehe ich nicht. Warum denn?

Gruss

MrMurphy

 

[T!P-TOP]

Für jeden Button einen div? - soll wohl n Scherz sein

<ul id="menue">
<li><a href="index.htm">Home</a></li>
<li><a href="seite2.htm">Seite2</a></li>
</ul>

#menue {
margin: 0;
padding: 0;
}

#menue li {
list-style: none;
float: left;
width: 100px;
heigth: 20px;
}

#menue a {
background: url('image.jpg');
width: 100px;
heigth: 20px;
}

 

[aqua.*]

Also wenn ich eine Grafik über CSS einbinde, dann kann ich nicht mit Rechtsklick auf die Grafik "Grafik anzeigen" oder "Grafik speichern...".
Wenn ich das aber ganz normal mit img src mache, dann geht das ja.

edit:
danke tiptop !
Also du hast ja einmal #menue a benutzt. Wenn ich jetzt z.b. eine weitere Seite einfüge, dann kann ich ja nicht nochmal #menue a benutzen, oder?

 

[T!P-TOP]

Also wenn ich eine Grafik über CSS einbinde, dann kann ich nicht mit Rechtsklick auf die Grafik "Grafik anzeigen" oder "Grafik speichern...".
Wenn ich das aber ganz normal mit img src mache, dann geht das ja.

edit:
danke tiptop !
Also du hast ja einmal #menue a benutzt. Wenn ich jetzt z.b. eine weitere Seite einfüge, dann kann ich ja nicht nochmal #menue a benutzen, oder?

Unsinn!
Die Grafik kannst du mit rechtsklick genau so aufrufen/speichern.
Und selbst wenn das nicht möglich ist, geh ich per Fire Fox in deine CSS datei und hol mir den Bildpfad und häng ihn hinten an deine Domain...

Und keine Panik wegen den Grafiken - geistiges Eigentum ist gesetzlich geschützt!

Am CSS musst du nichts ändern. Wenn du mehr Links haben möchtest, fügst du im html Code im <ul> menü eben noch Listenlinks hinzu.

Also bei sieben Button:

<ul>
<li><a href="test.htm">erste</a></li>
<li><a href="test.htm">erste</a></li>
<li><a href="test.htm">erste</a></li>
<li><a href="test.htm">erste</a></li>
<li><a href="test.htm">erste</a></li>
<li><a href="test.htm">erste</a></li>
<li><a href="test.htm">erste</a></li>
</ul>

 

[MrMurphy]

Hallo,

ach so. Ein alberner "Diebstahlsschutz" mal wieder. Vergiss es. Was du im Internet veröffentlichst ist für jeden Interessierten ohne Probleme speicher- und nutzbar.

Unterschiedliche Buttons kannst du natürlich trotzdem einfügen:

<ul id="menue">
<li><a id="button1" href="datei.htm">Seite1</a></li>
<li><a id="button2" href="datei.htm">Seite2</a></li>
<li><a id="button3" href="datei.htm">Seite3</a></li>
</ul>

Quellcode nachträglich korrigiert. Danke für den Hinweis T!P-TOP.

Das css könnte dann so aussehen (die einzelnen Werte musst du natürlich deinen Gegebenheiten anpassen):

#button1, #button2, #button3 {
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
color: blue;
text-align: left;
vertical-align: middle;
background-position:0px 0px;
text-decoration:none;
padding: 0px;
margin:0px;
height: 17px;
width: 180px;
display: block;
}

#button1 {
background-image:url(button1.jpg);
}
#button2 {
background-image:url(button2.jpg);
}
#button3 {
background-image:url(button3.jpg);
}

Gruss

MrMurphy

 

[T!P-TOP]

Hallo,

ach so. Ein alberner "Diebstahlsschutz" mal wieder. Vergiss es. Was du im Internet veröffentlichst ist für jeden Interessierten ohne Probleme speicher- und nutzbar.

Unterschiedliche Buttons kannst du natürlich trotzdem einfügen:

<ul id="menue">
<li><a div="button1" href="datei.htm">Seite1</a></li>
<li><a div="button2" href="datei.htm">Seite2</a></li>
<li><a div="button3" href="datei.htm">Seite3</a></li>
</ul>

Das css könnte dann so aussehen (die einzelnen Werte musst du natürlich deinen Gegebenheiten anpassen):

#button1, #button2, #button3 {
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
color: blue;
text-align: left;
vertical-align: middle;
background-position:0px 0px;
text-decoration:none;
padding: 0px;
margin:0px;
height: 17px;
width: 180px;
display: block;
}

#button1 {
background-image:url(button1.jpg);
}
#button2 {
background-image:url(button2.jpg);
}
#button3 {
background-image:url(button3.jpg);
}

Gruss

MrMurphy

du fügst in ein <a> link einen div ein Den muss ich mir merken ;)


Deine Grafiken kann wie Murphy schon sagte jeder Abspeichern und das ist auch nichtmal verboten, doch niemand darf die Grafik als seine veröffentlichen, oder Änderungen an der Grafik vornehmen.

 

[MrMurphy]

Hallo,

danke. Ich habe das korrigiert. Das soll id heißen.

Gruss

MrMurphy