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

Vertikales Menü

R

Revenget

Neues Mitglied
Hey, aso ich brauche wie gesagt ein vertikales menü... jetzt nich ein drop-down menü, das hab ich schon... ich meine so eins (LINK auf der linken seite), nur für die rechte seite anstatt die linke...

ich weiß nicht, ob das bei css richtig ist... wenn nich, bitte verschieben oder so...

Danke schonmal
Revenget :]
 
Texte zu kippen geht mit zukünftigen CSS-Versionen die derzeit nur ganz wenige Browser ansatzweise unterstützen. In deinem Link oben wurden dafür Bilder verwendet.
 
also ich habs jetzt erst einmal nur mit html gemacht und css hat geklappt... als ich dann die stylesheets in css machen wollte mit einer id, hat irgendwie nichts mehr geklappt...
mein ziel dabei war es, dass andere bilder angezeigt werden, wenn ichmit der maus drüber gehe...

ich weiß nur nicht, wo ich den fehler gemacht hab... (kenn mich noch nicht so mit css aus...)

in html:
Code: 
<html>
    <head>
        <title>sidebar</title>
    </head>

    <body>

        <div style="position:absolute; top:290px; left:1318px; border:0px;">
          <a title="Anmelden" href="#"><img border="0px" src="http://img832.imageshack.us/img832/4407/anmeldens.png"/></a>
        </div>

        <div style="position:absolute; top:403px; left:1318px; border:0px;">
          <a title="Registrieren" href="#"><img border="0px" src="http://img62.imageshack.us/img62/357/registrieren.png"/></a>
        </div>

        <div style="position:absolute; top:516px; left:1318px; border:0px;">
          <a title="Design wechseln" href="#"><img border="0px" src="http://img821.imageshack.us/img821/1705/designwechseln.png"/></a>
        </div>

    </body>
</html>
in css:
Code: 
<html>
    <head>
        <title>sidebar</title>

        <style type="text/css">

            body { 
              background:#313131; 
            }


            #navi1 a {
              background:url(http://img832.imageshack.us/img832/4407/anmeldens.png);
              postition:absolute;
              margin: 209px 0px 0px 1318px;
            }

            #navi1 a:hover {
              background:url(http://img10.imageshack.us/i/anmeldenhover.png/);
              postition:absolute;
              margin: 209px 0px 0px 1318px;
            }


            #navi2 a {
              background:url(http://img62.imageshack.us/img62/357/registrieren.png);
              postition:absolute;
              margin: 403px 0px 0px 1318px;
            }

            #navi2 a:hover {
              background:url(http://img140.imageshack.us/img140/9863/registrierenhover.png);
              postition:absolute;
              margin: 403px 0px 0px 1318px;
            }


            #navi3 a {
              background:url(http://img821.imageshack.us/img821/1705/designwechseln.png);
              postition:absolute;
              margin: 516px 0px 0px 1318px;
            }

            #navi3 a:hover {
              background:url(http://img714.imageshack.us/img714/4984/designhover.png);
              postition:absolute;
              margin: 516px 0px 0px 1318px;
            }
            
    </head>

    <body>

        <div id="navi1">
          <a title="Anmelden" href="#"> </a>
        </div>

        <div id="navi2">
          <a title="Registrieren" href="#"> </a>
        </div>

        <div id="navi3">
          <a title="Design wechseln" href="#"> </a>
        </div>

    </body>
</html>
 
oh haha xD danke, meine vergesslichkeit mal wieder xDD

okay, es klappt trotzdem nicht :[

ich hab auch schon herum probiert, ob ich dem background ne größe geben muss, hat aber auch nichts gebracht...

momentaner code:
Code: 
<html>
	<head>
		<title>sidebar</title>

		<style type="text/css">

			body { 
			  background: #313131;
			  margin:0px
			}


			#navi1 a {
			  background: url(http://img832.imageshack.us/img832/4407/anmeldens.png);
			  postition: absolute;
			  margin: 209px 0px 0px 1318px;
			}

			#navi1 a:hover {
			  background: url(http://img10.imageshack.us/i/anmeldenhover.png/);
			  postition: absolute;
			  margin: 209px 0px 0px 1318px;
			}


			#navi2 a {
			  background: url(http://img62.imageshack.us/img62/357/registrieren.png);
			  postition: absolute;
			  margin: 403px 0px 0px 1318px;
			}

			#navi2 a:hover {
			  background: url(http://img140.imageshack.us/img140/9863/registrierenhover.png);
			  postition: absolute;
			  margin: 403px 0px 0px 1318px;
			}


			#navi3 a {
			  background: url(http://img821.imageshack.us/img821/1705/designwechseln.png);
			  postition: absolute;
			  margin: 516px 0px 0px 1318px;
			}

			#navi3 a:hover {
			  background: url(http://img714.imageshack.us/img714/4984/designhover.png);
			  postition: absolute;
			  margin: 516px 0px 0px 1318px;
			}
			
		</style>
	</head>

	<body>

		<div id="navi1">
		  <a title="Anmelden" href="#"> </a>
		</div>

		<div id="navi2">
		  <a title="Registrieren" href="#"> </a>
		</div>

		<div id="navi3">
		  <a title="Design wechseln" href="#"> </a>
		</div>

	</body>
</html>
 
Da fehlt noch ein Doctype.

Die absolute Positionierung ist ziemlich sinnfrei, semantisch ist das was Du da hast auch nicht korrekt. Was soll das werden? Ein Menü? Oder ein sehr spezielles Design?

Zudem kannst Du keine Bilder von imageshack auf die Art einbinden:
ImageShack® - Online Photo and Video Hosting <-- das ergibt eine HTML-Datei, die kann nicht als Hintergrundbild dargestellt werden
http://img832.imageshack.us/img832/4407/anmeldens.png <-- ist "forbidden"

Also prüfe erstmal, ob Du überhaupt Bilder verwendest die angezeigt werden dürfen. Du musst sie auch nicht dorthin hochladen. Wenn Du noch lokal auf deinem Computer arbeitest genügt es die Bilder einfach im selben Verzeichnis abzulegen und nur mit Dateinamen zu referenzieren.

Code: 
background-image: url(anmeldens.png);
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben