Autor |
Nachricht |
Deelishiz
Threadersteller
Dabei seit: 20.01.2009
Ort: Göttingen
Alter: 36
Geschlecht:
|
Verfasst Di 10.02.2009 14:24
Titel Navigationsliste aus mehreren Bildern |
|
|
Hallo, muss grad ne Website für die schule machen und hab jetzt grad ein Problem mit der Navigation.Vorab. Ich bin Anfänger ich möchte eine Navigation machen, die aus mehreren Hintergrundgrafiken besteht, die dann zu den einzelnen Bereichen führt. Dies natürlich als Liste. Ich weiß nur nicht wie ich das mit HTML und CSS so positioniere und aufschreibe. Hab mal ein bild angehängt. Weiß von nem Kollegen irgendwie mit float:left; display; block, padding: 0px; und dann die liste definieren #navi li.kontakt a{ background-image: url(...das bild);}. aber ich weiß nicht wie ich das im html dazu aufschreibe einfach <ul><li><a href="#">...das bild</a></li></ul>...achje ich bin durcheinander kann mir wer helfen??es soll auch so angeordnet sein und zentriert im bworserfenster. [/img]lg DeeLishiZ
|
|
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Di 10.02.2009 14:29
Titel
|
|
|
deine ansätze sind doch schon ganz ok.
probiere es doch einfach mal aus.
|
|
|
|
|
Anzeige
|
|
|
Deelishiz
Threadersteller
Dabei seit: 20.01.2009
Ort: Göttingen
Alter: 36
Geschlecht:
|
Verfasst Di 10.02.2009 14:31
Titel
|
|
|
sitze seit 3 Tagen dran kriegs nicht hin versuche die ganze zeit aber ich weiß es echt nicht. ah bitte muss das für die schule fetrig kriegen
|
|
|
|
|
choise
Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht:
|
Verfasst Di 10.02.2009 14:33
Titel
|
|
|
zeig mal deinen bisherigen code, dann kann man helfen auszubessern.
|
|
|
|
|
Deelishiz
Threadersteller
Dabei seit: 20.01.2009
Ort: Göttingen
Alter: 36
Geschlecht:
|
Verfasst Di 10.02.2009 14:49
Titel
|
|
|
der zeigt nicht mal die bilder an:( hab jetzt mal text in die liste eingefügt, damit man sieht wo man ist. jedoch zeigt er die bilder nicht an?! Weiß echt nicht wie ich das machen kann :(Hier die HTML Zitat: | <!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/liste.css">
<title>Vogue Agency - International Model Agency</title>
<body class="one">
<div id="container">
<div id="logo"></div>
<div id="navi">
<ul>
<li><a href="#"></a>Bild 1</li>
<li><a href="#"></a>Bild 2</li>
<li><a href="#"></a>Bild 3</li>
<li><a href="#"></a>Bild 4</li>
<li><a href="#"></a>Bild 5</li>
<li><a href="#"></a>Bild 6</li>
</ul>
</div>
</body>
</html> | und hier das css dazu Zitat: | [/code]@charset "UTF-8";
/* CSS Document */
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #F5F5F5;
margin: 0px;
padding: 0px;
text-align: center;
color: #000000;
}
.one #container {
width: 980px;
background: #F5F5F5;
margin: 140px auto;
text-align: left;
}
#logo {
background: #F5F5F5 url(../img/logobild.jpg);
width: 310px;
height: 310px;
}
#navi {
background: #F6F6F6;
}
#navi li {
width: 150px;
height: 150px;
float: left;
overflow: hidden;
display: block;
}
#navi li.Bild 1 a {
background-image: url(/img/1.gif);
}
#navi li.Bild 2 a {
background-image: url(/img/2.gif);
}
#navi li.Bild 3 a {
background-image: url(/img/3.gif);
}
#navi li.Bild 4 a {
background-image: url(/img/4.gif);
}
#navi li.Bild 5 a {
background-image: url(/img/5.gif);
}
#navi li.Bild 6 a {
background-image: url(/img/6.gif);
}
#navi li.Bild 1 a:hover {
background-image: url(/img/1vor.gif);
}
#navi li.Bild 2 a:hover {
background-image: url(/img/2vor.gif);
}
#navi li.Bild 4 a:hover {
background-image: url(/img/4vor.gif);
}
#navi li.Bild 5 a:hover {
background-image: url(/img/5vor.gif);
}
#navi li.Bild 6 a:hover {
background-image: url(/img/6vor.gif);
} |
|
|
|
|
|
leinich
Dabei seit: 23.09.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 10.02.2009 15:14
Titel
|
|
|
kann nicht funktioneren!
Du versucht hier auf die INHALTE zuzugreifen...
Probier mal folgendes:
Code: |
#navi li.Bild1 a {................}
<body class="one">
<div id="container">
<div id="logo"></div>
<div id="navi">
<ul>
<li class="Bild1"><a href="#"></a>Bild 1</li>
<li><a href="#"></a>Bild 2</li>
<li><a href="#"></a>Bild 3</li>
<li><a href="#"></a>Bild 4</li>
<li><a href="#"></a>Bild 5</li>
<li><a href="#"></a>Bild 6</li>
</ul>
</div>
</body> |
|
|
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Di 10.02.2009 15:22
Titel
|
|
|
zeigt er dein Logobild an?
falls ja, weißt du hoffentl warum er die listenbilder nicht anzeigt.
|
|
|
|
|
Deelishiz
Threadersteller
Dabei seit: 20.01.2009
Ort: Göttingen
Alter: 36
Geschlecht:
|
Verfasst Di 10.02.2009 15:56
Titel
|
|
|
wenn ich es wsste würd ich ja nicht fragen manchmal sehen mehrere augen besser:)
also hab das mit dem code probiert. da kommt trotzdem nichts. habs so eingegeben:
HTML
Zitat: | [/code]<body class="one">
<div id="container">
<div id="logo"></div>
<div id="navi">
<ul>
<li class="Bild1"><a href="#"></a>Bild 1</li>
<li><a href="#"></a>Bild 2</li>
<li><a href="#"></a>Bild 3</li>
<li><a href="#"></a>Bild 4</li>
<li><a href="#"></a>Bild 5</li>
<li><a href="#"></a>Bild 6</li>
</ul>
</div>
</body>
</body>
</html> |
CSS
Zitat: | body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #F5F5F5;
margin: 0px;
padding: 0px;
text-align: center;
color: #000000;
}
.one #container {
width: 1400px;
background: #F5F5F5;
margin: 140px auto;
text-align: left;
}
#logo {
background: #F5F5F5 url(../img/logobild.jpg);
width: 310px;
height: 310px;
}
#navi {
background: #F6F6F6;
}
#navi li {
width: 151px;
height: 151px;
float: left;
overflow: hidden;
display: block;
}
#navi li.Bild1 a {
background-image: url(../img/1.gif);
} |
|
|
|
|
|
|
|
|
Ähnliche Themen |
[CSS] Navigationsliste mit Bildern/Icons à la Desktop
bei mehreren Bildern weißen Hintergrund durch Tranzp. ersetz
Webite aus mehreren SWF´s?
Not-Selector mit mehreren IDs in CSS
Ausrichten von mehreren Ebenen
login mit mehreren User
|
|