html menü?

didi2005

Hi!

Ich würde gerne ein html menü für meine HP machen, kann aber nur langweilige Textmenüs:-/
Und ich kann zu 95% nur im Entwurfmodus von Dreamweaver abeiten:-/

Hat vielleicht jemand von euch ne Idee wie ich ein schönes Menü für meine HP machen kann?

Ins Menü kommen nur:

Home - News - Steckbrief - Fotos - Links - G-Book - Forum - Impressum

sejuma

"Schön" ist relativ. Sieh dich mal hier um, da gibt's genügend Beispiele.

Den CSS-Code musst du innerhalb des head-Bereichs schreiben, und zwar zwischen folgenden tag:

Code

<style type="text/css">


CSS-Code
</style>

didi2005

Danke!

Habe mich schon umgeschaut, aber nix gefunden.

Tikonteroga

Hallo ich habe dir hier mal drei Varianten eines horizontalen Menues.

CSS:

Code

body
{
	0px;
}
div.variant1, div.variant2, div.variant3
{
	width:248px;
	margin:20px auto;
}


div.variant1
{
	border-top:2px solid rgb(0,0,0);
	border-bottom:2px solid rgb(0,0,0);
}
div.variant2
{
	background-color:rgb(0,0,0);
}
div.variant3
{
	background-color:rgb(230,230,230);
}
a.variant1, a.variant2, a.variant3
{
	font-family:'Trebuchet MS';
	font-size:12px;
	font-weight:normal;
	text-decoration:none;
	display:inline;
	float:left;
	line-height:20px;
	padding-left:12px;
	padding-right:12px;
}
a.variant1
{
	color:rgb(0,0,0);
}
a.variant2
{
	color:rgb(255,255,255);
}
a.variant3
{
	color:rgb(0,0,0);
	border-right:solid 2px rgb(0,0,0);
}
a.variant1:hover
{
	color:rgb(0,0,0);
	background-color:rgb(230,230,230);
}
a.variant2:hover
{
	color:rgb(255,128,0);
}
a.variant3:hover
{
	background-color:rgb(191,191,191);
}

Alles anzeigen

HTML:

HTML

<html>
<head>
<style>/*CSS-Code (siehe oben)*/</style>
</head>
<body>
	<div class="variant1">
		[url='']Startseite[/url]
		[url='']Neuigkeiten[/url]
		[url='']Kontakt[/url]
	</div>


	<div class="variant2">
		[url='']Startseite[/url]
		[url='']Neuigkeiten[/url]
		[url='']Kontakt[/url]
	</div>


	<div class="variant3">
		[url='']Startseite[/url]
		[url='']Neuigkeiten[/url]
		[url='']Kontakt[/url]
	</div>
</body>
</html>

Alles anzeigen

Wenn du es testen willst, dann kopiere den CSS- und den HTML-Code in eine HTML Datei. Achte darauf, dass du den CSS-Code an die richtige Stelle kopierst. Im HTML-Code ist ein entsprechender Vermerk.

didi2005

Erstmal ein frohes neues Jahr an euch alle!!

Super danke!!

Wie bekomme ich das Menü untereinander, es soll links in die Spalte über Renate mit dem UEFA-Cup in der Hand?
Sorry, das hätte ich natürlich vorher sagen können*schäm*

Tikonteroga

Hallo,

also du könntest im Stylesheet beim Element a dem Atribut "display" den Wert "block" zuweisen und das Atribut float müsstest du löschen.

a { display:block }

Dann verhält sich das <a>...</a> Element, dass ja eigentlich ein Inline-Element ist wie ein Block-Element. Block-Elemente beginnen immer in einem neuen Absatz und Inline-Elemente werden in der aktuellen Zeile nebeneinander gestellt.

Probier mal ob es so funktioniert.

Aus gestallterischen Gründen soltest du dem <a>...</a> Element noch eine feste height und width vergeben, falls du z. B. beim a:hover die background-color ändern möchtest ...

Ich würde dir jedoch vorschlagen, das du versuchst die Leiste selber zu erstellen und meinen Code nur als Vorlage zu verwenden. Ich selbst bin auch noch ein Einsteiger und bestimmt kann man das anders besser machen, als ich es gemacht habe.

didi2005

Habe ich gemacht, jetzt ist es aber nur noch ein schwarzer Kasten.
Hab wohl was falsch gemacht?
Ich befürchte das bekomme ich net gebacken, hab keinen Peil von css ect. *schäm*

<html>
<head>
<style>body
{
0px;
}
div.variant1, div.variant2, div.variant3
{
width:248px;
margin:20px auto;
}

div.variant1
{
border-top:2px solid rgb(0,0,0);
border-bottom:2px solid rgb(0,0,0);
}
div.variant2
{
background-color:rgb(0,0,0);
}

a.variant1, a.variant2, a.variant3
{
font-family:'Trebuchet MS';
font-size:12px;
font-weight:normal;
text-decoration:none;
display:inline;
display:block;
line-height:20px;
padding-left:12px;
padding-right:12px;
}
a.variant1
{
color:rgb(0,0,0);
}
a.variant2
{
color:rgb(255,255,255);
}
a.variant3
{
color:rgb(0,0,0);

}
a.variant1:hover
{
color:rgb(0,0,0);
background-color:rgb(203,230,230);
}
a.variant2:hover
{
color:rgb(255,128,0);
}
a.variant3:hover
{
background-color:rgb(490,191,191);
} </style>
</head>
<body>
<div class="variant2">[url='']Startseite[/url][url='']Neuigkeiten[/url]
[url='']Kontakt[/url]
</div>

</body>
</html>

didi2005

Habe mir jetzt damit was gebastelt:
http://www.homepage-total.de/tools/css_menugenerator.php#

Tags