✔ 1 css 6 verschiedene Darstellungen

[napsi]

Hallo!

Ich habe folgendes Problem:

Ich möchte eine Navigation mit 1 css machen, obwohl es vom button 5 mutationen gibt (siehe anhang).

Den MAsterbutton habe ich schon, aber wie kann ich die anderen 5 machen, oder hat jemand eine andere Idee? Mit grafiken ist das insofern unangenehm, da sich die ganze Homepage aus einer DAtenbank zusammensetzt und ich somit die Benamsungen nicht hardcodiert eintragen kann, bzw. als Bild ist es generell wegen den ladezeiten uninteressant.

.main_nav {
	font-size: 14px;
	margin-left: 2px;
	margin-top: 8px;
	font-weight: bolder;
}

#navi_left {
	border-style: solid;
	border: 1px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	width: 255px;
	margin-top: 4px;
	/*height:400px;*/
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 15em;
}
ul li {
	padding: 0.1em;
	position: relative;
}
ul li a {
	color: #fff;
	background-color: #bf4038;
	background-image: url(../Img/Img_HPstyle/shape.gif);
	background-position: top right;
	background-repeat: no-repeat;
	display: block;
	font-family: 'Arial', sans-serif;
	font-size: 14pt;
	font-weight: bold;
	padding: 0.5em;
	text-decoration: none;
}
img {
	border: 0;
}

		<div id="navi_left">
			<div class="main_nav">
				<ul>
					<li><a href="#">Mannschaften</a></li>
					<li><a href="#">Sponsoren</a></li>
					<li><a href="#">Spielplan</a></li>
					<li><a href="#">Tabelle</a></li>
					<li><a href="#">News</a></li>
					<li><a href="#">Verein</a></li>
					<li><a href="#">Board</a></li>
					<li><a href="#">Links</a></li>
					<li><a href="#">Kontakt</a></li>
				</ul>
			</div>
                                  </div>

bitte um hilfe

lg.

NApsi

 

[Grille]

ich glaube so wie du das mit der Liste umsetzen willst müstest du der Box "navi_left" eine große Grafik mit den Buttons geben.

Ich würde für jeden Button ein eigenes css anlegen welches notfalls die Buttongrafik im Hintergrund hat.

soll denn der text vom Content auch unterhalb dieser navi-spitze fließen, oder soll es dort frei bleiben?

 

[Maik]

Hi,

und worauf willst du nun konkret hinaus?

mfg Maik

 

[napsi]

hallo!

nein, ich brauche keine große grafik, habe nun eine andere lösung gefunden.

hat sich ein anderes problem ergeben, aus irgend einem grund wird mir die grafik nicht richtig angezeigt, wenn ich im HTML Code den CSS Code eingebe. wenn ich allerdings im CSS die zeile eingebe, dann funktioniert es. Hier der Code, der nicht funktioniert:

<div id="navi_left">
			<div class="main_nav">
				<ul>
					<li style="width: 15em; background-image:url(Img/Img_HPstyle/shape.gif)"><a href="#">Mannschaften</a></li>
					<li style="width: 13em; background-image:url(Img/Img_HPstyle/shape.gif)"><a href="#">Sponsoren</a></li>
					<li style="width: 11em; background-image:url(Img/Img_HPstyle/shape.gif)"><a href="#">Spielplan</a></li>
					<li style="width: 9em; background-image:url(Img/Img_HPstyle/shape.gif)"><a href="#">Tabelle</a></li>
					<li style="width: 7em; background-image:url(Img/Img_HPstyle/shape.gif)"><a href="#">News</a></li>
					<li style="width: 7em; background-image:url(Img/Img_HPstyle/shape.gif)"><a href="#">Verein</a></li>
					<li style="width: 7em; background-image:url(Img/Img_HPstyle/shape.gif)"><a href="#">Board</a></li>
					<li style="width: 7em; background-image:url(Img/Img_HPstyle/shape.gif)"><a href="#">Links</a></li>
					<li style="width: 7em; background-image:url(Img/Img_HPstyle/shape.gif)"><a href="#">Kontakt</a></li>
				</ul>
			</div>
		</div>

.main_nav {
	font-size: 14px;
	margin-left: 2px;
	margin-top: 8px;
	font-weight: bolder;
}

#navi_left {
	border-style: solid;
	border: 1px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	width: 255px;
	margin-top: 4px;
	/*height:400px;*/
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 15em;
}
ul li {
	padding: 0.1em;
	position: relative;
}
ul li a {
	color: #fff;
	background-color: #bf4038;
	background-repeat: no-repeat; 
	background-position: top right;
	/*background-image: url(../Img/Img_HPstyle/shape.gif);*/
	display: block;
	font-family: 'Arial', sans-serif;
	font-size: 14pt;
	font-weight: bold;
	padding: 0.5em;
	text-decoration: none;
}
img {
	border: 0;
}

kann mir jemand sagen, warum die 3 ecke und das 4eck nicht angezeigt werden?

lg.

napsi

 

[Maik]

Kann man sich die Seite mal "online" anschauen, denn ohne die eingebundenen Hintergrundbilder ist da nicht viel zu erkennen.

mfg Maik

 

[napsi]

http://www.mgloop.at/UEHV ist der link

stelle es gerade online

 

[napsi]

ist online. wie es aussehen soll, ist im bild vom 1. beitrag zu sehen

 

[Maik]

http://www.mgloop.at/Img/Img_HPstyle/shape.gif führt zumindest schonmal auf eine Fehlerseite, aus der zu schliessen ist, dass die Datei auf dem Server bzw. in dem Verzeichnis nicht vorhanden ist.

Außerdem hast du dort, entgegen deinem zuletzt gezeigten HTML-Code, einen falschen Pfad zur Grafik gesetzt, und das Hintergrundbild müsste noch mit "background-position:right top" am rechten Rand positioniert werden.

mfg Maik

 

[napsi]

die backroundposition ist im css selber definiert.

das bild ist aber in diesem verzeichnis

 

[Maik]

Stimmt denn auch der Verzeichnispfad überein?



mfg Maik