Vertical-Align in Block-Menu

[mdstudio]

Hallo erstmal... Ich lebe seit vielen Jahren in Mexico und habe daher kein AE und UE etc. Auf meinem Keybord... Hoffe das ist gedulet

Mein erster Post und ich bring gleich mal eine Frage mit..

Ich habe ein einfaches CSS Menu erstellt, welches man hier anschauen kann...
http://www.mdstestserver.com/figurat/indextest.html

Es handelt sich um das Hauptmenu (oben). Nun moechte ich den Text nach :bottom haben. Um das nochmals anderst auszudruecken. Die linie soll auf bleiben wo sie ist nur der Text soll noch unten verueckt werden.

Ok und hier die codes:

<a class="navigation" href="page2.html" title="page 2">Page 2</a>
              <a class="navigation" href="page3.html" title="page 3">Page 3</a>
              <a class="navigation" href="page4.html" title="page 4">Page 4</a>
              <a class="navigation" href="page5.html" title="page 5">Page 5</a>

#navigation ul {
	list-style: none;
	margin: 0px;
	padding: 0px 0px 0px 0px;
}
#navigation li {
	float: left;
	 
}
#navigation a:link, #navigation a:visited {
	color: #990000;
	float:left;
	display:block;
	padding-top:0px;
	padding-left:7px;
	padding-right:7px;
	border-left:1px #CCCCCC solid;
	height:75px;
	text-decoration: none;
	font: 12px   Arial, geneva, sans-serif;
	
}

#navigation a:hover {
	color: #333;
	font-weight: bold;
	text-decoration: none;
	border-left:1px #CCCCCC dashed;
	background-color:#F4F4F4;
	font: 12px Arial, geneva, sans-serif;
}

Ok eigenlich sollte das problem ja mit:

vertical-align:bottom;

geloest werden. Aaaaaber.... es funktioniert einfach nicht...


Vieleicht hat jemand Rat?

 

[Maik]

Hi,

um vertical-align "außerhalb" eines Tabellenelements in einem der übrigen HTML-Elemente nutzen zu können, benötigt das Element daneben einen Tabellenwert der display-Eigenschaft.

Das Demo http://www.pmob.co.uk/temp/vertical-align9.htm enthält zudem einen Workaround für die komplette IE-Familie, die diese Tabelleneigenschaften bislang nicht zu interpretieren weiß.

mfg Maik

 

[mdstudio]

Danke erstmals!

Hier wird es wohl anspruchsvoll.

Ich habe es versucht zu loesen mit der xerxos's method, aber ich bin leider gescheitert.

Habe ich das richtig verstanden das der IE damit nicht zurecht kommt und ich es daher aufgeben soll, oder kann man es mit der xerxos's method doch erstellen?

Wen ja kannst du mir vieleicht nochmals auf die Spruenge helfen da ich es nicht wirklich verstanden habe wie ich zur Loesung komme.

Danke nochmals!

 

[Maik]

#navigation a:link, #navigation a:visited {
        color: #990000;
        display:table-cell;
        vertical-align:bottom;
        padding-top:0px;
        padding-left:7px;
        padding-right:7px;
        border-left:1px #CCCCCC solid;
        height:75px;
        text-decoration: none;
        font: 12px   Arial, geneva, sans-serif;
}

Dass, und wie es im IE funktioniert, zeigt dir mein empfohlener Link.

mfg Maik

 

[Maik]

Hi Maik,

Ich habe es nicht hinbekommen mit dem Algin vom Post: http://www.tutorials.de/forum/css/335583-vertical-algin-block-menu.html

Die neue CSS version welche du mir geschickt hast hat nicht hingehaunen. Getestet im Firefox 3.

Eh egal ich brauche es kompatible fuer IE .

Bei mir hat der Vorschlag im FF3 auf Anhieb reibungslos funktioniert:



Und die IE-kompatible CSS-Technik kannst du doch dem Quellcode des Demos entnehmen.

mfg Maik

 

[mdstudio]

Ok... Ich bin so weit gekommen:

Ich habe den Code rausgeschnipselt aus der Seite die du empfohlen hast.

Das sieht dan so aus:

http://mdstestserver.com/figurat/ieee.gif

#navigation a:link, #navigation a:visited {
        color: #990000;
        display:table-cell;
        vertical-align:bottom;
        padding-top:0px;
        padding-left:7px;
        padding-right:7px;
        border-left:1px #CCCCCC solid;
        height:75px;
        text-decoration: none;
        font: 12px   Arial, geneva, sans-serif;
}

.inner {
	width:100%;
	height:75px;
	display:table-cell;
	vertical-align:bottom;
	position: relative;
}

<!--[if IE ]>
<style type="text/css">
.inner {top:100%;left:0;}
.inner p{top:-100%;	position:relative;}
</style>
<![endif]-->

Was mach ich falsch? Muss ich irgentwo im HTML:

<a class="navigation" href="page2.html" title="page 2">Page 2</a>
              <a class="navigation" href="page3.html" title="page 3">Page 3</a>
              <a class="navigation" href="page4.html" title="page 4">Page 4</a>
              <a class="navigation" href="page5.html" title="page 5">Page 5</a>

Die class einbinden? Wen ja wie? Ich stehe total auf dem Schlauch.

 

[Maik]

Schon mal auf die Idee gekommen, die vorgegebene Markup-Struktur des Beispiels zu nutzen, und darin die Textabsätze (= p) durch deine Links (= a) zu ersetzen?

<!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>
<title>Vertical-align an element of unknown height</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0}
.outer {
        position:relative;
        display:table;
        height: 75px;
        width: 100px;
        vertical-align: middle;
        border-left: 1px solid #CCCCCC;
        float:left
}
.inner {
        width:100%;
        display:table-cell;
        vertical-align:bottom;
        position:relative;
}
</style>
<!--[if IE ]>
<style type="text/css">
.inner {top:100%;left:0;}
.inner a{top:-100%;        position:relative;}
</style>
<![endif]-->
</head>
<body>
<h1>Vertical align elements of different heights (based on xerxos's method)</h1>
<div class="outer">
  <div class="inner">
    <a href="#">Page 1</a>
  </div>
</div>
<div class="outer">
  <div class="inner">
    <a href="#">Page 2</a>
  </div>
</div>
<div class="outer">
  <div class="inner">
    <a href="#">Page 3</a>
  </div>
</div>
<div class="outer">
  <div class="inner">
    <a href="#">Page 4</a>
  </div>
</div>
</body>
</html>

mfg Maik

 

[mdstudio]

Ja hab ich... Funktioniert leider nicht aus dem Grund dass ich es fuer ein Joomla Template brauche.

In joomla wird das alles im Div durch ein PHP code ersetzt daher kann ich nur klassen im Div vergeben und nicht jedem einzelnen Link.

D.h.

Der ganze HTML Code (<a class="navigation" href="page2.html" title="page 2">Page 2</a>) wird rausgeloescht und mit einem PHP code ersetzt.

Gibt es keine andere Moeglichkeit?

 

[Maik]

Moin,

von welcher Klasse sprichst du? In dem Beispiel erhalten die Links überhaupt keine Klasse, sondern werden in zwei DIVs eingebettet.

Und wenn die Links mit PHP in die Seite geschrieben werden, muß halt der Scriptcode erweitert werden, damit er das Markup aus dem Demo generiert:

<div class="outer">
  <div class="inner">
    <a href="#">...</a>
  </div>
</div>

Oder kann Joomla da etwa nur "lose" aneinandergereihte <a>...</a>-Tags in das Dokument schreiben?

Was machst du denn, wenn dort ein Dropdown-Menü erwünscht / erforderlich ist, das üblicherwerweise mit verschachtelten ul-Listenelementen ausgezeichnet und mit CSS entsprechend formatiert werden?

Solch ein horizontales Listenmenü könnte hier übrigens für den IE-Workaround ebenfalls verwendet werden, denn die einzelnen li-Elemente würden die äußeren div-Elemente (.outer) ersetzen:

<ul id="nav">
  <li class="outer">
    <div class="inner">
      <a href="#">...</a>
    </div>
  </li>
  <li class="outer">
    <div class="inner">
      <a href="#">...</a>
    </div>
  </li>
</ul>

mfg Maik