mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 14:25 Benutzername: Passwort: Auto-Login

Thema: Navigationsliste aus mehreren Bildern vom 10.02.2009


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Navigationsliste aus mehreren Bildern
Seite: 1, 2, 3  Weiter
Autor Nachricht
Deelishiz
Threadersteller

Dabei seit: 20.01.2009
Ort: Göttingen
Alter: 36
Geschlecht: Weiblich
Verfasst Di 10.02.2009 14:24
Titel

Navigationsliste aus mehreren Bildern

Antworten mit Zitat Zum Seitenanfang

Hallo, muss grad ne Website für die schule machen und hab jetzt grad ein Problem mit der Navigation.Vorab. Ich bin Anfänger Lächel 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 * Wo bin ich? * kann mir wer helfen??es soll auch so angeordnet sein und zentriert im bworserfenster.
[/img]lg DeeLishiZ
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Di 10.02.2009 14:29
Titel

Antworten mit Zitat Zum Seitenanfang

deine ansätze sind doch schon ganz ok.
probiere es doch einfach mal aus.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Deelishiz
Threadersteller

Dabei seit: 20.01.2009
Ort: Göttingen
Alter: 36
Geschlecht: Weiblich
Verfasst Di 10.02.2009 14:31
Titel

Antworten mit Zitat Zum Seitenanfang

sitze seit 3 Tagen dran *Schnief* kriegs nicht hin versuche die ganze zeit aber ich weiß es echt nicht.*Schnief* ah bitte muss das für die schule fetrig kriegen *Schnief*
  View user's profile Private Nachricht senden
choise

Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht: Männlich
Verfasst Di 10.02.2009 14:33
Titel

Antworten mit Zitat Zum Seitenanfang

zeig mal deinen bisherigen code, dann kann man helfen auszubessern.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Deelishiz
Threadersteller

Dabei seit: 20.01.2009
Ort: Göttingen
Alter: 36
Geschlecht: Weiblich
Verfasst Di 10.02.2009 14:49
Titel

Antworten mit Zitat Zum Seitenanfang

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);
}
  View user's profile Private Nachricht senden
leinich

Dabei seit: 23.09.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 10.02.2009 15:14
Titel

Antworten mit Zitat Zum Seitenanfang

Code:
#navi li.Bild 1 a
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>
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Di 10.02.2009 15:22
Titel

Antworten mit Zitat Zum Seitenanfang

zeigt er dein Logobild an?

falls ja, weißt du hoffentl warum er die listenbilder nicht anzeigt.
  View user's profile Private Nachricht senden
Deelishiz
Threadersteller

Dabei seit: 20.01.2009
Ort: Göttingen
Alter: 36
Geschlecht: Weiblich
Verfasst Di 10.02.2009 15:56
Titel

Antworten mit Zitat Zum Seitenanfang

wenn ich es wsste würd ich ja nicht fragen *zwinker* 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);
}
  View user's profile Private Nachricht senden
 
Ä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
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2, 3  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.