[Gelöst] Bilder als Navigationsbuttoms

Pelgro · 24. Februar 2010

Hallo,

kann ich Bilder in der Navigation benutzen? Anstatt man auf Text klickt um auf die nächste Seite zu kommen, klickt man uaf ein Bild.
Geht das?
Habe es schon versucht, nur leider ist es dann nur ein Lila Streifen :D. (in HTML)

Kann man das nicht mit CSS machen?
Oder macht man es mit einer anderen Sprache?

lg

lauras · 25. Februar 2010

Hey,

naja, du kannst einfach Grafiken erstellen und dann als Navigationselemente benutzen, indem du statt Text in einen Link Grafiken einbindest.

Die andere (bessere) Methode wäre die, dass du den Text schon ins HTML schreibst, jedoch die Grafik als Hintergrundbild nimmst, so könntest du sie auch z.B. beim Drüberfahren mit der Maus verändern.

Da gibts viele Möglichkeiten, auch je nach Verwendungszweck.

Gruß
Laura

Pelgro · 25. Februar 2010

Nur klappt es leider nicht. :?
Egal ob ich es über CSS oder HTML mache.

lauras · 25. Februar 2010

Zeig doch mal deinen Code

Pelgro · 25. Februar 2010

Mach' ich

index.html

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>German Playboys Clanhomepage | News</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="content-language" content="de" />
<meta name="author" content="Garrit Petersen" />
<meta name="copyright" content="German Playboys" />
<meta name="keywords" content="German Playboys, german playboys, playboys, Playboy, Playboys, playboy" />
<meta name="description" content="Clanhomepage des Counter-Strike:Source Clans German Playboys. Hier gibt es verschiedene Informationen über diesen Clan." />
<meta name="page-topic" content="German Playboys Clanhomepage" />
<meta name="page-type" content="Clanhomepage" />
<meta name="language" content="Deutsch" />
<meta name="revisit" content="After 30 days" />
<meta name="robots" content="index, nofollow" />
<link rel="stylesheet" type="text/css" href="design.css" />
<link rel="stylesheet" type="text/css" href="navi.css" />
</head>
<body>
<div id="seitenbereich">
   <div id="bild">
   </div>
   <div id="navi">
      <a href="index.html" id="a"></a>
      <a href="users.html" id="b"></a>
      <a href="squads.html" id="c"></a>
      <a href="forum.html" id="d"></a>
      <a href="downloads.html" id="e"></a>
      <a href="joinus.html" id="f"></a>
      <a href="fightus.html" id="g"></a>
      <a href="kontakt.html" id="h"></a>
      <a href="galerie.html" id="i"></a>
   </div>
   <div id="links">
      <p>Sponsoren</p>
      <a href="http://teamspeak-time.de" title="TeamSpeak Server" target="_blank">
      <img src="http://tools.teamspeak-time.de/linkus/tst_button_1.gif" border="0" alt="TeamSpeak Server" />
      </a>
   </div>
   <div id="inhalt">
       <p></p>
    </div>
   <div id="rechts">




   </div>
   <div id="fusszeile">
      <p>
            Copyright by German Playboys - All rights reserved <br /> 
            Homepage erstellt von Garrit Petersen
      </p>
   </div>
</div>
</body>
</html>

Alles anzeigen

design.css

Code

* { margin: 0; padding: 0; }




body { 
   text-align: center; min-width: 40.1em;
   background-image: url(bg.jpg); repeat-x repeat-y;
}




#seitenbereich {
   border: 1px black solid;
   width: 85%;
   margin: 0 auto;
   text-align: left;
}




#bild {
   height: 150px;
   background: url(bild.jpg) no-repeat center;
   border-bottom: 1px black solid;

}




#links {
   border: 1px black solid;
   margin-left: 1.5px;
   width: 14%;
   min-height: 600px;
   height: auto;
   float: left;
   background: grey;
   text-align: center;

}




#inhalt {
   border: 1px black solid;
   margin-left: 1.5px;
   width: 71%;
   height: auto;
   min-height: 600px;
   float: left;
   background: white;
}




#rechts {
   border: 1px black solid;
   margin-left: 1.5px;
   width: 14%;
   min-height: 600px;
   height: auto;
   float: left;
   background: grey;
   text-align: center;
}




#fusszeile {
   clear: both;
   height: auto;
   border-top: 1px black solid;
   text-align: center;
   color: white;
   font-size: small;
}

Alles anzeigen

navi.css

Code

#navi {
   height: 30px;
   width: 1200px;
}




#a {
   margin:0px 0px 0px 0px;
   width:133px;
   background:url (news.jpg);
}




#b {

}




#c {

}




#d {

}




#e {

}




#f {

}




#g {

}




#i {

}

Alles anzeigen

Basi · 25. Februar 2010

Code

#a { 
   margin:0px 0px 0px 0px; 
   width:133px; 
   background:url (news.jpg); 
}

Nö, versuch es so:

Code

#a { 
   display: block;
   margin:0px 0px 0px 0px; 
   width:133px; 
   background:url (news.jpg); 
}

Pelgro · 25. Februar 2010

was genau macht display: block; ?

EDIT:
Klappt auch nicht

Basi · 25. Februar 2010

Es macht deinen div zu nem Block Element, kp warum er bei dir kein block Element zu sein scheint, aber so sollte es klappen.

Warte auf Lauras, ich wette sie hat nen Link für dich, ich grade nich

Pelgro · 25. Februar 2010

Okay

Habe ich alles richtig geschrieben? Also ohne Fehler?
index.html hat 2 Fehler ich weiss, aber das sind Fehler zur verlinkung des Sponsors und der Sponsor hat es so vorgegeben.

Und wie sieht es mit den CSS-Dateien aus?

Ach, und nochmal danke das du mir geholfen hattest.
Da ich das meiste bei CSS jetzt weiss musst du mir nicht mehr alles erklären xD
Weiss es jetzt.

Nur eins.

Code

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

Woher weiss man, was da hin soll oder soll man den jetzt immer benutzen?

Basi · 25. Februar 2010

Ich persönlich weiss es nicht auswendig,

lade dir am besten dieses Programm runter, wenn du eine HTML Seite erstelst erhälst du automatisch diese Zeile + Meta Tags + HTML Grundgerüst:

Webocton Scriptly

Am CSS ist nur nicht gut das die divs a - i keine Styles enthalten.

lauras · 25. Februar 2010

Formal ist eine Navigation ein Liste, also ul.
Innerhalb dessen definierst du ein li pro Listenpunkt, in den du dann noch ein a für den Link packst. Das ganze sieht dann ca. so aus:

Code

<ul>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>

Innerhalb dieser Liste in die Links kannst du jetzt

1. ein Bild einbinden, falls das Bild Inhalt hat oder

2. für gleichen Hintergrund dem ul eine ID geben und dann ul#ID li a definieren oder für unterschiedliche Hintergründe jedem a eine class/id.

Probiers mal so und schau dann mal.

Wenn du willst, kann ich dir mal ein Beispiel eines etwas komplizierteren Menus per Mail schicken, wo mit wechselnden Hintergründen auf einer relativ einfachen Basis gearbeitet wird. Einfach PN oder so.

LG
Laura

Basi · 25. Februar 2010

Ganz blöde Frage von mir

Horizontale Navi = Tabelle,
oder gibts da neb esserere Lösung?

lauras · 25. Februar 2010

Tabellen sind zum tabellarischen Darstellen von Inhalten gedacht... Für die horizontale Navi gilt das gleiche.
Wenn du möchtest, kann ich auch dir mein Beispiel mal schicken, das ist nämlich horizontal. Einfach PN oder so.

Gruß
Laura

Basi · 25. Februar 2010

Ich sag nur die IE Treppe 0.o

Pelgro · 25. Februar 2010

Also,

ich wollte für jede Seite ein anderes Bild verwenden.

Die Idee die Navigation so zu machen wie es jetzt machen wollte habe ich auf einer anderen Seiten gesehen.

Hier mal die Codes

index.html

Code

</div>
      <a href="../news" id="A"></a>
	  <a href="../squads" id="B"></a>
	  <a href="../clanwars" id="C"></a>
	  <a href="../forum" id="D"></a>
	  <a href="../downloads" id="E"></a>
	  <a href="../gallery" id="F"></a>
	  <a href="../gb" id="G"></a>
	  <a href="../sites/?show=1" id="H"></a>




	  <a href="../contact" id="I"></a>

Alles anzeigen

design.css

Code

#A,#B,#C,#D,#E,#F,#G,#H,#I          {position:absolute;top:160px;height:31px}
#A                                  {margin:0px 0px 0px 0px;width:122px;background:url(../Bilder/ztsite_07.jpg);}
#A:hover                            {background:url(../Bilder/rztsite_07.jpg);}
#B                                  {margin:0px 0px 0px 122px;width:122px;background:url(../Bilder/ztsite_08.jpg);}
#B:hover                            {background:url(../Bilder/rztsite_08.jpg);}
#C                                  {margin:0px 0px 0px 244px;width:97px;background:url(../Bilder/ztsite_09.jpg);}
#C:hover                            {background:url(../Bilder/rztsite_09.jpg);}
#D                                  {margin:0px 0px 0px 341px;width:97px;background:url(../Bilder/ztsite_10.jpg);}
#D:hover                            {background:url(../Bilder/rztsite_10.jpg);}
#E                                  {margin:0px 0px 0px 438px;width:122px;background:url(../Bilder/ztsite_11.jpg);}
#E:hover                            {background:url(../Bilder/rztsite_11.jpg);}
#F                                  {margin:0px 0px 0px 560px;width:96px;background:url(../Bilder/ztsite_12.jpg);}
#F:hover                            {background:url(../Bilder/rztsite_12.jpg);}
#G                                  {margin:0px 0px 0px 655px;width:109px;background:url(../Bilder/ztsite_guestbook.jpg);}
#G:hover                            {background:url(../Bilder/rztsite_guestbook.jpg);}
#H                                  {margin:0px 0px 0px 763px;width:103px;background:url(../Bilder/ztsite_14.jpg);}
#H:hover                            {background:url(../Bilder/rztsite_14.jpg);}
#I                                  {margin:0px 0px 0px 866px;width:114px;background:url(../Bilder/ztsite_15.jpg);}
#I:hover                            {background:url(../Bilder/rztsite_15.jpg);}

Alles anzeigen

Pelgro · 28. Februar 2010

Hat keiner eine Lösung?

lauras · 28. Februar 2010

Naja, du musst schon sagen was genau der Fehler ist, von der Idee ist das was du hast schon richtig.
Überprüf nur nochmal die Form der Navigation, von wegen Liste und so.

Gruß
Laura

Pelgro · 28. Februar 2010

Der Fehler ist, dass das Bild nicht angezeigt wird.

timtim · 28. Februar 2010

lade den ganzen spaß mal irgendwo hoch. Dann kann man sich das besser anschauen.

Denn vielleicht ist das bild ja nicht vorhanden, du hast falsche pfadangaben usw..

Greetz TimTim

Pelgro · 28. Februar 2010

Link zum hochgeladender Seite.
http://php-test.cwsurf.de/

Wenn Bilder eingefügt werden die im selben Ordner sind, muss doch nur der Name angegeben werden, oder? Ohne den Pfad?

Codes:

index.html

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>German Playboys Clanhomepage | News</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="content-language" content="de" />
<meta name="author" content="Garrit Petersen" />
<meta name="copyright" content="German Playboys" />
<meta name="keywords" content="German Playboys, german playboys, playboys, Playboy, Playboys, playboy" />
<meta name="description" content="Clanhomepage des Counter-Strike:Source Clans German Playboys. Hier gibt es verschiedene Informationen über diesen Clan." />
<meta name="page-topic" content="German Playboys Clanhomepage" />
<meta name="page-type" content="Clanhomepage" />
<meta name="language" content="Deutsch" />
<meta name="revisit" content="After 30 days" />
<meta name="robots" content="index, nofollow" />
<link rel="stylesheet" type="text/css" href="design.css" />
<link rel="stylesheet" type="text/css" href="navi.css" />
</head>
<body>
<div id="seitenbereich">
   <div id="bild">
   </div>
   <div id="navi">
      <a href="index.html" id="a"></a>
      <a href="users.html" id="b"></a>
      <a href="squads.html" id="c"></a>
      <a href="forum.html" id="d"></a>
      <a href="downloads.html" id="e"></a>
      <a href="joinus.html" id="f"></a>
      <a href="fightus.html" id="g"></a>
      <a href="kontakt.html" id="h"></a>
      <a href="galerie.html" id="i"></a>
   </div>
   <div id="links">
      <p>Sponsoren</p>
      <a href="http://teamspeak-time.de" title="TeamSpeak Server" target="_blank">
      <img src="http://tools.teamspeak-time.de/linkus/tst_button_1.gif" border="0" alt="TeamSpeak Server" />
      </a>
   </div>
   <div id="inhalt">
       <p></p>
    </div>
   <div id="rechts">




   </div>
   <div id="fusszeile">
      <p>
            Copyright by German Playboys - All rights reserved <br /> 
            Homepage erstellt von Garrit Petersen
      </p>
   </div>
</div>
</body>
</html>

Alles anzeigen

design.css

Code

* { margin: 0; padding: 0; }




body { 
   text-align: center; min-width: 40.1em;
   background-image: url(bg.jpg); repeat-x repeat-y;
}




#seitenbereich {
   border: 1px black solid;
   width: 85%;
   margin: 0 auto;
   text-align: left;
}




#bild {
   height: 150px;
   background: url(bild.jpg) no-repeat center;
   border-bottom: 1px black solid;

}




#links {
   border: 1px black solid;
   margin-left: 1.5px;
   width: 14%;
   min-height: 600px;
   height: auto;
   float: left;
   background: grey;
   text-align: center;

}




#inhalt {
   border: 1px black solid;
   margin-left: 1.5px;
   width: 71%;
   height: auto;
   min-height: 600px;
   float: left;
   background: white;
}




#rechts {
   border: 1px black solid;
   margin-left: 1.5px;
   width: 14%;
   min-height: 600px;
   height: auto;
   float: left;
   background: grey;
   text-align: center;
}




#fusszeile {
   clear: both;
   height: auto;
   border-top: 1px black solid;
   text-align: center;
   color: white;
   font-size: small;
}

Alles anzeigen

navi.css

Code

#navi {
height: 20px;
widht: 1200px;







#a {
margin:0px 0px 0px 0px;
width:120px;
background:url(news-bt.jpg);
}

Alles anzeigen

[Gelöst] Bilder als Navigationsbuttoms

Jetzt mitmachen!

Teilen