Menüleiste Links ausrichten

[Charlie_M]

Ich hab mir mal eine Menüleiste zusammengestrickt, allerdings schaffe ich es iwie nicht daß die Links mittig zur Grafik sind. Erscheinen zur Grafik nach unten versetzt:
[ externes Bild ]

overall_header:

Code: Alles auswählen

<table class="tablebg" width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
	<td class="buttons" colspan="3" width="100%">
		<!-- IF not S_IS_BOT -->
			<!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED --><a href="{U_REGISTER}">{L_REGISTER}</a>&nbsp;&nbsp;<img src="{T_THEME_PATH}/images/menu.png" alt="" />&nbsp;<!-- ENDIF -->
	<a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a>&nbsp;&nbsp;<img src="{T_THEME_PATH}/images/menu.png" alt="" />&nbsp; 
			<!-- IF S_USER_LOGGED_IN --><a href="{U_PROFILE}">{L_PROFILE}</a>&nbsp;&nbsp;<img src="{T_THEME_PATH}/images/menu.png" alt="" />&nbsp;<!-- ENDIF -->
		<!-- ENDIF -->
		<!-- IF U_RESTORE_PERMISSIONS --><a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a>&nbsp;&nbsp;<img src="{T_THEME_PATH}/images/menu.png" alt="" />&nbsp;<!-- ENDIF -->
       		<a href="{U_INDEX}">{L_FORUM}</a>&nbsp;&nbsp;<img src="{T_THEME_PATH}/images/menu.png" alt="" />&nbsp;
		<!-- IF not S_IS_BOT -->
			<!-- IF S_USER_LOGGED_IN -->
				<!-- IF S_DISPLAY_PM --><a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a><!-- IF PRIVATE_MESSAGE_INFO_UNREAD --><a href="#"> / </a><a href="{U_PRIVATEMSGS}" class="pm-new-link">{PRIVATE_MESSAGE_INFO_UNREAD}</a><!-- ENDIF -->&nbsp;&nbsp;<img src="{T_THEME_PATH}/images/menu.png" alt="" />&nbsp;<!-- ENDIF -->
			<!-- ENDIF -->
			<!-- IF S_DISPLAY_MEMBERLIST --><a href="{U_MEMBERLIST}">{L_MEMBERLIST}</a>&nbsp;&nbsp;<img src="{T_THEME_PATH}/images/menu.png" alt="" />&nbsp;<!-- ENDIF -->
		<!-- ENDIF -->
		<!-- IF S_DISPLAY_SEARCH --><a href="{U_SEARCH}">{L_SEARCH}</a>&nbsp;&nbsp;<img src="{T_THEME_PATH}/images/menu.png" alt="" />&nbsp;<!-- ENDIF -->
		<a href="{U_FAQ}">{L_FAQ}</a>
	</td>
</tr>
</table>

stylesheet:

Code: Alles auswählen

.buttons {
	color: #E8E8EE;
	border-top: solid 1px #D1DD22;
	border-bottom: solid 1px #D1DD22;
	height: 24px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	font-weight: bold;
	text-align: center;
	vertical-align: text-top; 
	white-space: nowrap;
	padding: 0px;
	padding-top: 6px;
}

Wäre nett wenn Jemand eine Lösung für mich hat
Danke!

[Talk19zehn]

Hello Charlie_M,

du könntest versuchen, der Grafik ein align-middle zuzuweisen.

Code: Alles auswählen

 <!-- IF not S_IS_BOT -->
         <!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED --><a href="{U_REGISTER}">{L_REGISTER}</a>&nbsp;&nbsp;<img src="{T_THEME_PATH}/images/menu.png" align="middle" width="xxx" height="xxx"alt="" />&nbsp;<!-- ENDIF -->

Die Klasse Buttons würde ich gar nicht verwenden wollen.

Siehe auch: http://de.selfhtml.org/html/grafiken/ausrichten.htm

[Onassis]

Versuche mal das hier:
viewtopic.php?f=86&t=211811&start=10#p1213526

Onassis

[Charlie_M]

Sorry, hatte die Tage kaum Zeit mich drum zu kümmern

@ Talk19zehn
Danke für den Tip, habs jetzt erstmal so gelöst:

Code: Alles auswählen

<img src="{T_THEME_PATH}/images/menu_sep.png" style="vertical-align:middle" alt="" />

Code: Alles auswählen

align="middle"

hat nicht gefunzt..k. Ahnung warum

Mir ist so eine Lösung mit CSS wie Onassis gepostet hat lieber, da ich das noch woanders einsetze. Muss ich mir nochmal genauer anschauen.
Danke!

[Talk19zehn]

Hello, bitte gern geschehen. Wobei mich verwundert, dass das Konstrukt, auch, wenn es nicht deiner Vorstellung einer Umsetzung entspricht, nicht funktioniert.
Hoffentlich hatte ich dich richtig verstanden, den Text neben die Grafiken zu platzieren?

Ich habe es noch einmal ausprobiert und keine Fehler in der Darstellung. Da ich allerdings deine Größe der Grafiken nicht kenne, habe ich ein entsprechend zur Mitte rechnerisches Maß gewählt. Und die Grafiken sind in meinem Teststyle nicht vorhanden, so dass sie nur entsprechend der Vorgabe "angedeutet" sein können: Daher, bitte nicht irritieren lassen...
Zur Veranschaulichung ist das Bildchen jedoch bestimmt ausreichend, denke ich.

[ externes Bild ]


Meine Codierung:

Code: Alles auswählen

<table class="tablebg" width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
   <td colspan="3" width="100%">
      <!-- IF not S_IS_BOT -->
         <!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED --><a href="{U_REGISTER}">{L_REGISTER}</a>&nbsp;&nbsp;<img src="{T_THEME_PATH}/images/menu.png" align="middle" width="20px" height="30px" alt="" />&nbsp;<!-- ENDIF -->
   <a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a>&nbsp;&nbsp;<img src="{T_THEME_PATH}/images/menu.png" width="20px" height="30px" align="middle" alt="" />&nbsp; 
         <!-- IF S_USER_LOGGED_IN --><a href="{U_PROFILE}">{L_PROFILE}</a>&nbsp;&nbsp;<img src="{T_THEME_PATH}/images/menu.png" width="20px" height="30px" align="middle"  alt="" />&nbsp;<!-- ENDIF -->
      <!-- ENDIF -->
      <!-- IF U_RESTORE_PERMISSIONS --><a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a>&nbsp;&nbsp;<img src="{T_THEME_PATH}/images/menu.png" align="middle" width="20px" height="30px" alt="" />&nbsp;<!-- ENDIF -->
             <a href="{U_INDEX}">{L_FORUM}</a>&nbsp;&nbsp;<img src="{T_THEME_PATH}/images/menu.png" align="middle" width="20px" height="30px" alt="" />&nbsp;
      <!-- IF not S_IS_BOT -->
         <!-- IF S_USER_LOGGED_IN -->
            <!-- IF S_DISPLAY_PM --><a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a><!-- IF PRIVATE_MESSAGE_INFO_UNREAD --><a href="#"> / </a><a href="{U_PRIVATEMSGS}" class="pm-new-link">{PRIVATE_MESSAGE_INFO_UNREAD}</a><!-- ENDIF -->&nbsp;&nbsp;<img src="{T_THEME_PATH}/images/menu.png" width="20px" height="30px" align="middle" alt="" />&nbsp;<!-- ENDIF -->
         <!-- ENDIF -->
         <!-- IF S_DISPLAY_MEMBERLIST --><a href="{U_MEMBERLIST}">{L_MEMBERLIST}</a>&nbsp;&nbsp;<img src="{T_THEME_PATH}/images/menu.png" align="middle" width="20px" height="30px" alt="" />&nbsp;<!-- ENDIF -->
      <!-- ENDIF -->
      <!-- IF S_DISPLAY_SEARCH --><a href="{U_SEARCH}">{L_SEARCH}</a>&nbsp;&nbsp;<img src="{T_THEME_PATH}/images/menu.png" align="middle" width="20px" height="30px" alt="" />&nbsp;<!-- ENDIF -->
      <a href="{U_FAQ}">{L_FAQ}</a>
   </td>
</tr>
</table>

BTW:
Wenn Du eine andere Lösung findest, wäre sie auch für mich interessant.

Viele Grüße

[Charlie_M]

Auf die schnelle kann ich die Größe ja mitteilen, sie beträgt 15x15 Pixel.
Ja, der Text sollte ebenfalls vertikal mittig ausgerichtet sein, seltsamerweise war der Text zur Grafik nach unten versetzt. Ich bin eigentlich davon ausgegangen daß die Postitionierung der Grafik mit CSS auch funzt...

Momentan komm ich nicht dazu, werd mich nach den Feiertagen wieder drum kümmern. Wenn ich eine Alternative hab werde ich sie selbstverständlich mitteilen.

Danke!

[Talk19zehn]

Hello Charlie_M,

es ginge der Einfachheit halber ganz simpel ohne Berechnung etwaiger Grafikgrößen...........


Nur ein Beispiel:

Code: Alles auswählen

<table width='100%' cellpadding='4' cellspacing='0'>
<tr>
<td style="text-align:center" width='10%'><img src="./styles/prosilver/theme/images/icon_home.gif" width="12" height="11" alt="..." />&nbsp;<a href='#'><b>Linkbezeichnung</b></a></td>
<td style="text-align:center" width='10%'><img src="./styles/prosilver/theme/images/icon_home.gif" width="12" height="11" alt="..." />&nbsp;<a href='#'><b>Linkbezeichnung</b></a></td>
<td style="text-align:center" width='10%'><img src="./styles/prosilver/theme/images/icon_home.gif" width="12" height="11" alt="..." />&nbsp;<a href='#'><b>Linkbezeichnung</b></a></td>
<td style="text-align:center" width='10%'><img src="./styles/prosilver/theme/images/icon_home.gif" width="12" height="11" alt="..." />&nbsp;<a href='#'><b>Linkbezeichnung</b></a></td>
<td style="text-align:center" width='10%'><img src="./styles/prosilver/theme/images/icon_home.gif" width="12" height="11" alt="..." />&nbsp;<a href='#'><b>Linkbezeichnung</b></a></td>
<td style="text-align:center" width='10%'><img src="./styles/prosilver/theme/images/icon_home.gif" width="12" height="11" alt="..." />&nbsp;<a href='#'><b>Linkbezeichnung</b></a></td>
</tr>
</table>

Größe in deinem Falle 15x15px bitte noch anpassen.


Ich weiß nicht wirklich, ob ich den Aufwand betreiben würde, dies mittels CSS unter Anwendung der Deklaration float, line-height und Absatz auszurichten.


Best regards

[Talk19zehn]

Hello Charlie_M und @All,,

ich entsinne mich, dass auch ich bereits neben einer Grafik einen einzeiligen kurzen Text zentriert zum Bild ausgegeben habe und habe im "Archiv" nachgesehen.

CSS - Bild hier linkseitig und Text rechts davon. Die Grafik hat im Beispiel eine Höhe von 140px und durch die Deklaration von line-height in der Ausgabe ( Element Absatz ) wird der Text neben dem Bild zentriert.
Mit margin-right steuerte ich den rechten Abstand des Textes zum Bild. Die Klasse wird dem img-tag hinzugefügt.

Code: Alles auswählen

.textrechtsvombild {
float: left;
margin-right: 15px;
} 

Ausgabe:

Code: Alles auswählen

<div class="headerbar">
<div class="inner"><span class="corners-top"><span></span></span>

<img class="textrechtsvombild" src="./.........jpg" alt="..." title="..." />
<p style="margin: 0; line-height: 140px;"> 
Text Text ..Willkommen...     
</p>

<span class="corners-bottom"><span></span></span></div>
</div>

Bei einer Grafikhöhe von 15px macht es m. E. wenig Sinn, einen Text von einer Schriftgröße ( 11px oder 1.0em ) neben der Grafik "unbedingt" zu zentrieren? Diese Grafiken müssten m.E. entsprechend vergrößert werden, wie bereits erwähnt oder mit dem Aufzählungszeichen verknüpft werden. Weitere Möglichkeiten erschließen sich mir momentan leider nicht.
Bekanntlich führen ja viele Wege zum Ziel. Über Ideen und weitere Ansätze freue ich mich selbstverständlich!


Vielleicht hilft dieser neue Ansatz ein wenig weiter, -

Beste Grüße