[ChristianS]

Hallo Forum,

mein Problem:
Die Flaggen und der Text sollen vertical in der Mitte sein - sind sie aber nicht.

Hier die Seite zum anschauen:
CLW Bonn

TS im Setup:

Typoscript-Code:

1: 2: 3: 4:

page.10.marks { SPRACHWECHSEL = PHP_SCRIPT SPRACHWECHSEL.file = fileadmin/example_languageMenu02.php }

Hier die languageMenu.php:

PHP-Code:

 // First, select all pages_language_overlay records on the current page. Each represents a possibility for a language.
$res = $GLOBALS['TYPO3_DB']->exec_SELECTquery('*', 'pages_language_overlay', 'pid='.intval($GLOBALS['TSFE']->id).$GLOBALS['TSFE']->sys_page->enableFields('pages_language_overlay'), 'sys_language_uid');

$langArr = array();
while($row = $GLOBALS['TYPO3_DB']->sql_fetch_assoc($res))    {
    $langArr[$row['sys_language_uid']] = $row['title'];
}

// Little red arrow, which is inserted to the left of the flag-icon if the TSFE->sys_language_uid equals the language uid (notice that 0=english, 1=danish and 2=german is SPECIFIC to this database, because these numbers refer to uid's of the table sys_language)
$pointer = '<img src="fileadmin/imgs/designvorlage/content_client.gif" width="7" height="10" alt="" />'.'&nbsp;';

// Set each icon. If the language is the current, red arrow is printed to the left. If the language is NOT found (represented by a pages_language_overlay record on this page), the icon is dimmed.
$flags = array();
$flags[] = ($GLOBALS['TSFE']->sys_language_uid==0?$pointer:'<img src="fileadmin/imgs/designvorlage/1pxtrans.gif" width="7" height="10" vspace="2" alt="" />'.'&nbsp;').'<a href="'.htmlspecialchars('index.php?id='.$GLOBALS['TSFE']->id.'&L=0').'" target="_top"><img src="fileadmin/imgs/designvorlage/flag_de.gif" width="21" height="13" hspace="0" border="0" alt="" />&nbsp;Deutsch</a>
<img src="fileadmin/imgs/designvorlage/1pxtrans.gif" width="7" height="10" alt="" />
';

$flags[] = ($GLOBALS['TSFE']->sys_language_uid==1?$pointer:'<img src="fileadmin/imgs/designvorlage/1pxtrans.gif" width="7" height="10" vspace="2" alt="" />'.'&nbsp;').'<a href="'.htmlspecialchars('index.php?id='.$GLOBALS['TSFE']->id.'&L=1').'" target="_top"><img src="fileadmin/imgs/designvorlage/flag_uk'.($langArr[1]?'':'_d').'.gif" width="21" height="13" hspace="0" border="0" alt="" />&nbsp;English</a>';


// Make the little menu. Notice, the menu does ONLY transfer the page-id and the "L" variable (which is also SPECIFIC for this website because "L" has been used in the extension template used to control the language setup)
$content = '<table width="180px" class="sprachwechsel" border="0" cellpadding="0" cellspacing="0"><tr><td>'.implode($flags).'
</td>
</tr>
</table>';
?> 


Hier mein CSS:

.sprachwechsel { font-family: verdana; color: #ffffff; font-weight: bold;
font-size: 10px; text-decoration: none; padding-top:0; margin-top:0;
margin-left:0; vertical-align:middle; text-align:center;}

Was mache ich falsch? Warum sind die Flaggen und die Schrift dahinter nicht vertical auf einer Linie?

Vielen Dank für eure Hilfe!

Chris

[Kurt51]

Zitat von ChristianS

Hallo Forum,

mein Problem:
Die Flaggen und der Text sollen vertical in der Mitte sein - sind sie aber nicht.

Hier die Seite zum anschauen:
CLW Bonn

TS im Setup:

Typoscript-Code:

Hier die languageMenu.php:

PHP-Code:

 // First, select all pages_language_overlay records on the current page. Each represents a possibility for a language.
$res = $GLOBALS['TYPO3_DB']->exec_SELECTquery('*', 'pages_language_overlay', 'pid='.intval($GLOBALS['TSFE']->id).$GLOBALS['TSFE']->sys_page->enableFields('pages_language_overlay'), 'sys_language_uid');

$langArr = array();
while($row = $GLOBALS['TYPO3_DB']->sql_fetch_assoc($res))    {
    $langArr[$row['sys_language_uid']] = $row['title'];
}

// Little red arrow, which is inserted to the left of the flag-icon if the TSFE->sys_language_uid equals the language uid (notice that 0=english, 1=danish and 2=german is SPECIFIC to this database, because these numbers refer to uid's of the table sys_language)
$pointer = '<img src="fileadmin/imgs/designvorlage/content_client.gif" width="7" height="10" alt="" />'.'&nbsp;';

// Set each icon. If the language is the current, red arrow is printed to the left. If the language is NOT found (represented by a pages_language_overlay record on this page), the icon is dimmed.
$flags = array();
$flags[] = ($GLOBALS['TSFE']->sys_language_uid==0?$pointer:'<img src="fileadmin/imgs/designvorlage/1pxtrans.gif" width="7" height="10" vspace="2" alt="" />'.'&nbsp;').'<a href="'.htmlspecialchars('index.php?id='.$GLOBALS['TSFE']->id.'&L=0').'" target="_top"><img src="fileadmin/imgs/designvorlage/flag_de.gif" width="21" height="13" hspace="0" border="0" alt="" />&nbsp;Deutsch</a>
<img src="fileadmin/imgs/designvorlage/1pxtrans.gif" width="7" height="10" alt="" />
';

$flags[] = ($GLOBALS['TSFE']->sys_language_uid==1?$pointer:'<img src="fileadmin/imgs/designvorlage/1pxtrans.gif" width="7" height="10" vspace="2" alt="" />'.'&nbsp;').'<a href="'.htmlspecialchars('index.php?id='.$GLOBALS['TSFE']->id.'&L=1').'" target="_top"><img src="fileadmin/imgs/designvorlage/flag_uk'.($langArr[1]?'':'_d').'.gif" width="21" height="13" hspace="0" border="0" alt="" />&nbsp;English</a>';


// Make the little menu. Notice, the menu does ONLY transfer the page-id and the "L" variable (which is also SPECIFIC for this website because "L" has been used in the extension template used to control the language setup)
$content = '<table width="180px" class="sprachwechsel" border="0" cellpadding="0" cellspacing="0"><tr><td>'.implode($flags).'
</td>
</tr>
</table>';
?> 


Hier mein CSS:

.sprachwechsel { font-family: verdana; color: #ffffff; font-weight: bold;
font-size: 10px; text-decoration: none; padding-top:0; margin-top:0;
margin-left:0; vertical-align:middle; text-align:center;}

Was mache ich falsch? Warum sind die Flaggen und die Schrift dahinter nicht vertical auf einer Linie?

Vielen Dank für eure Hilfe!

Chris

Da fehlt nur noch ein wenig in der css:
< td style="height:24px; vertical-align:middle;" > Vielleicht muss Du dem img auch noch "float:left" mitgeben!?

[ChristianS]

Zitat von Kurt51

Da fehlt nur noch ein wenig in der css:
< td style="height:24px; vertical-align:middle;" > Vielleicht muss Du dem img auch noch "float:left" mitgeben!?

Habe die Tabelle unten in languageMenu.php ergänzt:

PHP-Code:

$content = '<table width="180px" class="sprachwechsel" border="0" cellpadding="0" cellspacing="0"><tr><td style="height:24px; vertical-align:middle;" >'.implode($flags).'
</td>
</tr>
</table>'; 


Das hat nicht den gewünschten Erfolg.


Dann habe ich "Style="float:left;" in die img-tags eingefügt:

PHP-Code:

$flags = array();
$flags[] = ($GLOBALS['TSFE']->sys_language_uid==0?$pointer:'<img src="fileadmin/imgs/designvorlage/1pxtrans.gif" width="7" height="10" vspace="2" alt="" />'.'&nbsp;').'<a href="'.htmlspecialchars('index.php?id='.$GLOBALS['TSFE']->id.'&L=0').'" target="_top"><img src="fileadmin/imgs/designvorlage/flag_de.gif" width="21" height="13" hspace="0" border="0" style="float:left;" alt="" />&nbsp;Deutsch</a>
<img src="fileadmin/imgs/designvorlage/1pxtrans.gif" width="7" height="10" alt="" />
';

$flags[] = ($GLOBALS['TSFE']->sys_language_uid==1?$pointer:'<img src="fileadmin/imgs/designvorlage/1pxtrans.gif" width="7" height="10" vspace="2" alt="" />'.'&nbsp;').'<a href="'.htmlspecialchars('index.php?id='.$GLOBALS['TSFE']->id.'&L=1').'" target="_top"><img src="fileadmin/imgs/designvorlage/flag_uk'.($langArr[1]?'':'_d').'.gif" width="21" height="13" hspace="0" border="0" style="float:left;" alt="" />&nbsp;English</a>'; 


Da haben sich die Flaggen dann total verschoben. Schau mal:
CLW Bonn

Ich glaube, ich habe Dich nicht richtig verstanden. Kannst Du mir das anders erklären, bitte.

[Kurt51]

Zitat von ChristianS

Habe die Tabelle unten in languageMenu.php ergänzt:

PHP-Code:

$content = '<table width="180px" class="sprachwechsel" border="0" cellpadding="0" cellspacing="0"><tr><td style="height:24px; vertical-align:middle;" >'.implode($flags).'
</td>
</tr>
</table>'; 


Das hat nicht den gewünschten Erfolg.


Dann habe ich "Style="float:left;" in die img-tags eingefügt:

PHP-Code:

$flags = array();
$flags[] = ($GLOBALS['TSFE']->sys_language_uid==0?$pointer:'<img src="fileadmin/imgs/designvorlage/1pxtrans.gif" width="7" height="10" vspace="2" alt="" />'.'&nbsp;').'<a href="'.htmlspecialchars('index.php?id='.$GLOBALS['TSFE']->id.'&L=0').'" target="_top"><img src="fileadmin/imgs/designvorlage/flag_de.gif" width="21" height="13" hspace="0" border="0" style="float:left;" alt="" />&nbsp;Deutsch</a>
<img src="fileadmin/imgs/designvorlage/1pxtrans.gif" width="7" height="10" alt="" />
';

$flags[] = ($GLOBALS['TSFE']->sys_language_uid==1?$pointer:'<img src="fileadmin/imgs/designvorlage/1pxtrans.gif" width="7" height="10" vspace="2" alt="" />'.'&nbsp;').'<a href="'.htmlspecialchars('index.php?id='.$GLOBALS['TSFE']->id.'&L=1').'" target="_top"><img src="fileadmin/imgs/designvorlage/flag_uk'.($langArr[1]?'':'_d').'.gif" width="21" height="13" hspace="0" border="0" style="float:left;" alt="" />&nbsp;English</a>'; 


Da haben sich die Flaggen dann total verschoben. Schau mal:
CLW Bonn

Ich glaube, ich habe Dich nicht richtig verstanden. Kannst Du mir das anders erklären, bitte.

Das mit dem float war nichts!
Ansonsten sieht das im Firefox und im IE7 gut aus! Mit welchem Browser "entwickelst" Du? Mit Firefox und dem Addon "Firebug" kannst Du mit den CSS-Daten rumexperimentieren in den live-Daten.
Vielleicht nimmet der eine oder andere Browser die CSS-Daten zum TR-Tag!? Dort kannst Du sie auch mal eintragen. Ich würde das auch eher in die CSS-Datei als Klasse eintragen und dann im TS dem TD eine eigene Klasse zuteilen oder eben table.sprachwechsel td { height:25px; ... }

[ChristianS]

HIER DIE LÖSUNG DES PROBLEMS:

In der Datei languageMenu.php habe ich die Worte "Deutsch" und "English" einfach jeweils mit einem font-tag umgeben:

PHP-Code:

...
<font class="sprechwechsel">Deutsch</font>
...
...
<font class="sprechwechsel">English</font>
... 


(Den Rest der php-Datei seht ihr ja oben im thread)

Dann in meine css Datei folgendes:

font.sprechwechsel {
    position: relative;
    top: -3px;
}

1. position: relative; MUSS sein, sonst geht es nicht
2. die negative Zahl "-3px" gibt den Wert an, um den der Text weiter oben sitz als andere Contents.

Hoffe, das hilft auch anderen weiter. ;-)