Zur Navigation

Schönheitsfehler?!

1 tommik

Hallo,
ich habe mal wieder eine Frage :)

Und zwar...


<h1 style="border-bottom:dashed #CCCCCC 1px; padding-bottom:10px; margin-bottom:10px;"><img src="http://www.homepage-board.de/images/avatars/{$avatar_show}" alt="Avatar von {$row['username']}" width="{$ava_row_data['width']}" height="{$ava_row_data['height']}" style="margin: 0 auto;float:left;border-bottom:dashed #CCCCCC 1px;border-right:dashed #CCCCCC 1px;padding-right:5px;padding-bottom:5px;background-color:#FFFFFF;width:100px;height:100px;">Userprofil von {$row['username']}</h1>

...so sieht das ganze wirklich gut aus. Nur: Wenn ein Avatar kleiner als 100x100 Pixel ist, wird es gequetscht. Ich will aber, dass der Border von der Größe her genauso bleibt und das Avatar dann einfach kleiner in das Feld eingebunden wird.

Sollte ich mich unverständlich ausdrücken, einfach nachfragen ;-)

Gruß,
tommik.

09.09.2006 10:47

2 Jörg

Wenn ein Avatar kleiner als 100x100 Pixel ist, wird es gequetscht

Eher andersrum - wenn das Avatar kleiner ist, wird es gezerrt, wenn es größer ist, gequetscht?

Maßgeblich für die Darstellung sind die CSS-Angaben, die die HTML-Attribute für width="" und height="" überschreiben, also solltest du für erstere die realen Größenangaben übernehmen:

<h1 style="border-bottom:dashed #CCCCCC 1px; padding-bottom:10px; margin-bottom:10px;"><img src="http://www.homepage-board.de/images/avatars/{$avatar_show}" alt="Avatar von {$row['username']}" style="margin: 0 auto;float:left;border-bottom:dashed #CCCCCC 1px;border-right:dashed #CCCCCC 1px;padding-right:5px;padding-bottom:5px;background-color:#FFFFFF;width:{$ava_row_data['width']};height:{$ava_row_data['height']};">Userprofil von {$row['username']}</h1>

Falls du mit den 100px Angaben eine maximale Größe festlegen wolltest, könntest du dies mit den CS_Eigenschaften max-width und max-height erreichen - diese werden vom IE allerdings wohl erst ab Version 7 verstanden

<h1 style="border-bottom:dashed #CCCCCC 1px; padding-bottom:10px; margin-bottom:10px;"><img src="http://www.homepage-board.de/images/avatars/{$avatar_show}" alt="Avatar von {$row['username']}" style="margin: 0 auto;float:left;border-bottom:dashed #CCCCCC 1px;border-right:dashed #CCCCCC 1px;padding-right:5px;padding-bottom:5px;background-color:#FFFFFF;width:{$ava_row_data['width']};height:{$ava_row_data['height']};max-width:100px;max-height:100px">Userprofil von {$row['username']}</h1>

Und es kann hierbei natürlich auch zu Verzerrungen kommen..

09.09.2006 13:45

3 Jörg

Nachtrag:

Ich will aber, dass der Border von der Größe her genauso bleibt und das Avatar dann einfach kleiner in das Feld eingebunden wird.

Dazu musst du aber ein Element haben, das dieses Feld darstellt. Also das Bild z.B. in einem div unterbringen, welches die Größe 100*100 hat und auch die anderen Block-Eigenschaften übernimmt:

<h1 style="border-bottom:dashed #CCCCCC 1px; padding-bottom:10px; margin-bottom:10px;">
<div style="margin: 0 auto;float:left;border-bottom:dashed #CCCCCC 1px;border-right:dashed #CCCCCC 1px;padding-right:5px;padding-bottom:5px;background-color:#FFFFFF;height:100px;width:100px;text-align:center"><img src="http://www.homepage-board.de/images/avatars/{$avatar_show}" alt="Avatar von {$row['username']}" style="width:{$ava_row_data['width']};height:{$ava_row_data['height']};"></div>
Userprofil von {$row['username']}</h1>

09.09.2006 13:56 | geändert: 09.09.2006 13:57

4 tommik

Ah, vielen Dank. Ich hatte den Fehler gemacht und das <h1> einfach durch ein <div> ersetzt...


Gruß,
tommik.

09.09.2006 19:55

Beitrag schreiben (als Gast)

Beim Verfassen des Beitrages bitte die Forenregeln beachten.





[BBCode-Hilfe]