✔ Wie setze ich dieses Layout um?

[Rayne]

So, es handelt sich um den aktuellsten Firefox (Firefox 3.0.4 / Mac OS X 10.5 (Leopard)).

--> Screenshot von Browsershots

 

[Maik]

Hi,

vermutlich hilft es weiter, wenn du hier den linken Außenabstand verringerst, oder gleich auf "0" setzt, da sich dieses Element an der vorgegebenen Breite des Elternelements #Sprachen orientiert:

#Sprachen-ausrichten
{
margin:0 10px 0 320px;
}

Ansonsten wüsste ich jetzt nicht, weshalb der rechte Menüpunkt "English" in die nächste Zeile umgebrochen wird.

mfg Maik

 

[Maik]

Ich hab das mal mit diesen Regeländerungen via "Browsershots" in der genannten FF-Version überprüft:

#Sprachen-ausrichten
{
margin:0 10px 0 0;
text-align:right;
}

#Sprachen ul li
{
display:inline;
/*float:left;*/
font-weight:bold;
}

Sieht doch gut aus

mfg Maik

 

[Rayne]

Grandios, sieht gut aus. Danke.

Hatte es anfangs auch mit text-align:right; probiert, aber das ging nicht. Aus diesem Grund habe ich den Abstand manuell eingegeben. Das lag anscheinend an dem float:left; ?

 

[Maik]

Jepp, darum hab ich diese Angabe auch auskommentiert

mfg Maik

 

[Rayne]

Ich versuche gerade verzweifelt, den Suchbutton und das Input-Feld auf eine Höhe zu bringen, aber ohne Erfolg. Sie sind immer leicht versetzt zueinander.

index.php

<div id="Suche">
		<div id="Suche-ausrichten">
			<form name="search" action="<?php echo WB_URL; ?>/search/index.php" method="get">
				<input type="hidden" name="referrer" value="<?php echo defined('REFERRER_ID') ? REFERRER_ID : PAGE_ID; ?>" />
				<input type="submit" name="submit" class="Suchbutton" value="<?php echo $TEXT['SEARCH']; ?>" />
				<input type="text" name="string" class="Suchfeld" onfocus="this.focused=true; this.value='';" />
			</form>
		</div>
	</div>

Stylesheet

#Suche 
{
width:450px;
height:50px;
float:right;
display:inline; /* The IE5/6 Doubled Float-Margin Bug */
background:#77b900;
}

#Suche-ausrichten
{
margin:18px 0 0 180px;  
}

.Suchfeld
{
width:200px;
height:20px;
color:#2e2e2e; 
border:1px solid #2e2e2e;
}

.Suchbutton
{
width:55px;
height:20px;
background:#2e2e2e;
color:#FFFFFF;
font-family:Arial,sans-serif;
font-size:1.1em;
font-weight:bold;
border:none;
}

input:focus 
{ 
background-color:#bababa; 
}  

.highlight /*Suchbegriffe hervorheben*/
{ 													
background:#77b900;
color:#FFFFFF;
font-weight:bold;
}

 

[Maik]

Roger Johanssons Artikel Styling form controls und seine verlinkten Experimente zu den einzelnen Formularelementtypen zeigen eindrucksvoll, inwieweit sich die Formularelemente in allen verbreiteten Browsertypen auf den unterschiedlichen Betriebssystemen deckungsgleich formatieren lassen.

- Mission Impossible -

mfg Maik