✔ Menü Umsetzung mit Tabelle oder CSS? Und wie?

[Merbi]

Hallo allerseits,

ich bastel derzeit eine Homepage für eine kleine Kirchengemeinde.
Nun möchte ich dort ein menü umsetzen wie im Anhang zu sehen habe aber keine Idee wie ich es am Besten Umsetze.

Ich hatte zuallererst an ein Tabellenmenü gedacht wusste aber nicht ob und wie dies dann umzusetzen ist.

Lieber würde ich es in CSS machen aber das erscheint mir zu schwer.

Grüße Daniel

 

[Maik]

Hi,

Nun möchte ich dort ein menü umsetzen wie im Anhang zu sehen habe aber keine Idee wie ich es am Besten Umsetze.

Da ich hier bislang nirgends einen Anhang entdecken kann, hab ich auch keine Idee, wie sich das "UMO"* am Besten umsetzen lässt

mfg Maik

* UMO = Unbekanntes Menü Objekt :suspekt:

 

[Merbi]

Hi,
Da ich hier bislang nirgends einen Anhang entdecken kann, hab ich auch keine Idee, wie sich das "UMO"* am Besten umsetzen lässt

mfg Maik

* UMO = Unbekanntes Menü Objekt :suspekt:

Das ist mir jetzt Peinlich:-(

Jetzt aber.

 

[Maik]

Na, da fällt mir doch spontan auch gleich was zu ein ;-)

Diese "alternierende Struktur" könnte man beispielsweise ganz einfach mit zwei ul-Listenelementen umsetzen, die horizontal ausgerichtet sind.

mfg Maik

 

[Merbi]

Na, da fällt mir doch spontan auch gleich was zu ein ;-)

Diese "alternierende Struktur" könnte man beispielsweise ganz einfach mit zwei ul-Listenelementen umsetzen, die horizontal ausgerichtet sind.

mfg Maik

Da hatte ich auch spontan dran gedacht aber die führen immer schnell zu Problemen und da ich die Quadratisch machen muss mit verschiedenen Schriftgrößen was schon Sch**ße ist hmm

 

[Maik]

Ich wüsste jetzt nicht, wo sich da Probleme ergeben sollen, und das quadratische Format der einzelnen Menüpunkte stellt ebenso wenig ein Hindernis dar, um darin unterschiedliche Schriftgrößen festzulegen.

So ein Menü, egal in welcher Form und Ausrichtung, bringt immer eine gewisse Vorlaufzeit für die Entwicklungsarbeit mit sich - aber genau das ist doch das "Salz in der Suppe" ;-)

mfg Maik

 

[Merbi]

Ich wüsste jetzt nicht, wo sich da Probleme ergeben sollen, und das quadratische Format der einzelnen Menüpunkte stellt ebenso wenig ein Hindernis dar, um darin unterschiedliche Schriftgrößen festzulegen.

So ein Menü, egal in welcher Form und Ausrichtung, bringt immer eine gewisse Vorlaufzeit für die Entwicklungsarbeit mit sich - aber genau das ist doch das "Salz in der Suppe" ;-)

mfg Maik

Habe jetzt mal angefangen und werde gleich sicherlich an meine Grenzen gestoßen sein dann meld ich mich hier nochmal derweil probiere ich aber erstmal aus

 

[Merbi]

So jetzt steh ich vor meinem Ersten Problem.

Mein Code:

ul {
	list-style-type: none;
	margin:	0;
	padding: 0;
}

li {
	width: 65px;
	margin: 5px;
	float: left;
	text-align: center;
}

.link1 a {
	text-decoration: none;
	color: #FEFF99;
	display: block;
	width: 100%;
	background-color: #78002D;
	padding: 2px 0px;
}

.link1 a:hover {
	background-color: #78002D;
	color: #FEFF99;
}

.link2 a {
	text-decoration: none;
	color: #78002D;
	display: block;
	width: 100%;
	background-color: #FEFF99;
	padding: 2px 0px;
}

.link2 a:hover {
	background-color: #FEFF99;
	color: #78002D;
}

	<div>
		
	<ul>
		<li class="link1"><a href="#">Eintrag 1</a></li>
		<li class="link2"><a href="#">Eintrag 2</a></li>
		<li class="link1"><a href="#">Eintrag 3</a></li>
		<li class="link2"><a href="#">Eintrag 4</a></li>
	</ul>
	
	</div>
	<div>

	<ul>
		<li class="link2"><a href="#">Eintrag 1</a></li>
		<li class="link1"><a href="#">Eintrag 2</a></li>
		<li class="link2"><a href="#">Eintrag 3</a></li>
		<li class="link1"><a href="#">Eintrag 4</a></li>
	</ul>
	
	</div>

Nun werden die Beiden Menüs aber nebeneinander angezeigt aber ein Menü soll ja direkt unter dem anderen stehen. Auch ein

<br>

ändert daran nichts.

Auch ein Problem stellt das einstellen der Höhe der Links. Ich bekomme sie leider nicht Quadratisch.

Vielen Dank für die Hilfe

Daniel

 

[Maik]

Zeichne mal das DIV der zweiten Liste mit clear:left aus, um seinen Textfluß unterhalb der Floatumgebung zu erzwingen.

Wo im Stylesheet keine Höhendeklarationen existieren, können die Elemente auch nicht in die Höhe wachsen ;-)

mfg Maik

 

[Merbi]

Zeichne mal das DIV der zweiten Liste mit clear:left aus, um seinen Textfluß unterhalb der Floatumgebung zu erzwingen.

Wo im Stylesheet keine Höhendeklarationen existieren, können die Elemente auch nicht in die Höhe wachsen ;-)

mfg Maik

Danke, das funktionier.
Das mit der Höhe hatte ich wieder rausgenommen weil es nicht funktioniert hatte