Zwei Elemente nebeneinander anzeigen
Martin S
- css
0 Rafael
Hallo,
ich hab das Problem, zwei Elemente nebeneinander anzeigen zu wollen, was aber leider nicht so funktioniert, wie ich das will. Mit float:left hab ich es schon funktionert, aber entweder hab ich dabei einen Fehler gemacht oder es funktioniert so einfach nicht.
Dies sind die zwei Elemente:
Elemente 1:
<style type="text/css">table.lfmWidget20070722095417 td {margin:0 !important;padding:0 !important;border:0 !important;}table.lfmWidget20070722095417 tr.lfmHead a:hover {background:url(http://panther1.last.fm/widgets/images/en/header/playlist/my_regular_blue.png) no-repeat 0 0 !important;}table.lfmWidget20070722095417 tr.lfmEmbed object {float:left;}table.lfmWidget20070722095417 tr.lfmFoot td.lfmConfig a:hover {background:url(http://panther1.last.fm/widgets/images/en/footer/blue.png) no-repeat 0px 0 !important;;}table.lfmWidget20070722095417 tr.lfmFoot td.lfmView a:hover {background:url(http://panther1.last.fm/widgets/images/en/footer/blue.png) no-repeat -85px 0 !important;}table.lfmWidget20070722095417 tr.lfmFoot td.lfmPopup a:hover {background:url(http://panther1.last.fm/widgets/images/en/footer/blue.png) no-repeat -159px 0 !important;}</style>
<table class="lfmWidget20070722095417" cellpadding="0" cellspacing="0" border="0" style="width:184px;"><tr class="lfmHead"><td><a title="aberehrlich’s Playlist" href="http://www.last.fm/listen/user/aberehrlich/playlist" target="_blank" style="display:block;overflow:hidden;height:20px;width:184px;background:url(http://panther1.last.fm/widgets/images/en/header/playlist/my_regular_blue.png) no-repeat 0 -20px;text-decoration:none;"></a></td></tr><tr class="lfmEmbed"><td><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="184" height="284" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab%23version=7,0,0,0" style="float:left;"><param name="bgcolor" value="6598cd" /><param name="movie" value="http://panther1.last.fm/widgets/playlist/14.swf" /><param name="quality" value="high" /><param name="allowScriptAccess" value="sameDomain" /><param name="FlashVars" value="lfmMode=playlist&resourceType=37&resourceID=599285&radioURL=aberehrlich%E2%80%99s+Playlist&username=aberehrlich&title=aberehrlich%E2%80%99s+Playlist&theme=blue&autostart=1&lang=en" /><embed src="http://panther1.last.fm/widgets/playlist/14.swf" type="application/x-shockwave-flash" name="widgetPlayer" bgcolor="6598cd" width="184" height="284" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" FlashVars="lfmMode=playlist&resourceType=37&resourceID=599285&radioURL=aberehrlich%E2%80%99s+Playlist&username=aberehrlich&title=aberehrlich%E2%80%99s+Playlist&theme=blue&autostart=1&lang=en" allowScriptAccess="sameDomain"></embed></object></td></tr><tr class="lfmFoot"><td style="background:url(http://panther1.last.fm/widgets/images/footer_bg/blue.png) repeat-x 0 0;text-align:right;"><table cellspacing="0" cellpadding="0" border="0" style="width:184px;"><tr><td class="lfmConfig"><a href="http://www.last.fm/widgets/?user=aberehrlich&widget=playlist&colour=blue&width=regular&autostart=1&path=&from=code" title="Get your own widget" target="_blank" style="display:block;overflow:hidden;width:85px;height:20px;float:right;background:url(http://panther1.last.fm/widgets/images/en/footer/blue.png) no-repeat 0px -20px;text-decoration:none;"></a></td><td class="lfmView" style="width:74px;"><a href="http://www.last.fm/user/aberehrlich/" title="View aberehrlich's profile" target="_blank" style="display:block;overflow:hidden;width:74px;height:20px;background:url(http://panther1.last.fm/widgets/images/en/footer/blue.png) no-repeat -85px -20px;text-decoration:none;"></a></td><td class="lfmPopup"style="width:25px;"><a href="http://www.last.fm/widgets/popup/?user=aberehrlich&widget=playlist&colour=blue&width=regular&autostart=1&path=&from=code&resize=1" title="Load this playlist in a pop up" target="_blank" style="display:block;overflow:hidden;width:25px;height:20px;background:url(http://panther1.last.fm/widgets/images/en/footer/blue.png) no-repeat -159px -20px;text-decoration:none;" onclick="window.open(this.href + '&resize=0','lfm_popup','height=384,width=234,resizable=yes,scrollbars=yes'); return false;"></a></td></tr></table></td></tr></table>
Element 2:
<style type="text/css">table.lfmWidget20070722094528 td {margin:0 !important;padding:0 !important;border:0 !important;}table.lfmWidget20070722094528 tr.lfmHead a:hover {background:url(http://panther1.last.fm/widgets/images/en/header/quilt/album_vertical_black.png) no-repeat 0 0 !important;}table.lfmWidget20070722094528 tr.lfmEmbed object {float:left;}table.lfmWidget20070722094528 tr.lfmFoot td.lfmConfig a:hover {background:url(http://panther1.last.fm/widgets/images/en/footer/black.png) no-repeat 0px 0 !important;;}table.lfmWidget20070722094528 tr.lfmFoot td.lfmView a:hover {background:url(http://panther1.last.fm/widgets/images/en/footer/black.png) no-repeat -85px 0 !important;}table.lfmWidget20070722094528 tr.lfmFoot td.lfmPopup a:hover {background:url(http://panther1.last.fm/widgets/images/en/footer/black.png) no-repeat -159px 0 !important;}</style>
<table class="lfmWidget20070722094528" cellpadding="0" cellspacing="0" border="0" style="width:184px;"><tr class="lfmHead"><td><a title="Top albums" href="http://www.last.fm/user/aberehrlich/charts/" target="_blank" style="display:block;overflow:hidden;height:20px;width:184px;background:url(http://panther1.last.fm/widgets/images/en/header/quilt/album_vertical_black.png) no-repeat 0 -20px;text-decoration:none;"></a></td></tr><tr class="lfmEmbed"><td><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="184" height="270" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab%23version=7,0,0,0" style="float:left;"><param name="bgcolor" value="000000" /><param name="movie" value="http://panther1.last.fm/widgets/quilt/11.swf" /><param name="quality" value="high" /><param name="allowScriptAccess" value="sameDomain" /><param name="FlashVars" value="type=user&variable=aberehrlich&file=topalbums&bgColor=black&theme=black&lang=en" /><embed src="http://panther1.last.fm/widgets/quilt/11.swf" type="application/x-shockwave-flash" name="widgetPlayer" bgcolor="000000" width="184" height="270" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" FlashVars="type=user&variable=aberehrlich&file=topalbums&bgColor=black&theme=black&lang=en" allowScriptAccess="sameDomain"></embed></object></td></tr><tr class="lfmFoot"><td style="background:url(http://panther1.last.fm/widgets/images/footer_bg/black.png) repeat-x 0 0;text-align:right;"><table cellspacing="0" cellpadding="0" border="0" style="width:184px;"><tr><td class="lfmConfig"><a href="http://www.last.fm/widgets/?widget=quilt&url=user%2Faberehrlich%2Fpersonal&quiltType=album&colour=black&orient=vertical&height=small&path=&from=code" title="Get your own widget" target="_blank" style="display:block;overflow:hidden;width:85px;height:20px;float:right;background:url(http://panther1.last.fm/widgets/images/en/footer/black.png) no-repeat 0px -20px;text-decoration:none;"></a></td><td class="lfmView" style="width:74px;"><a href="http://www.last.fm/user/aberehrlich/" title="View aberehrlich's profile" target="_blank" style="display:block;overflow:hidden;width:74px;height:20px;background:url(http://panther1.last.fm/widgets/images/en/footer/black.png) no-repeat -85px -20px;text-decoration:none;"></a></td><td class="lfmPopup"style="width:25px;"><a href="http://www.last.fm/widgets/popup/?widget=quilt&url=user%2Faberehrlich%2Fpersonal&quiltType=album&colour=black&orient=vertical&height=small&path=&from=code&resize=1" title="Load this quilt in a pop up" target="_blank" style="display:block;overflow:hidden;width:25px;height:20px;background:url(http://panther1.last.fm/widgets/images/en/footer/black.png) no-repeat -159px -20px;text-decoration:none;" onclick="window.open(this.href + '&resize=0','lfm_popup','height=370,width=234,resizable=yes,scrollbars=yes'); return false;"></a></td></tr></table></td></tr></table>
Danke für eure Hilfe!
Fantastische Formatierung...
Aber zum Problem: Vermutlich sind deine Elemente zu breit, um nebeneinander zu floaten. Gib ihnen jeweils eine width-Vorgabe von 50% und lasse sie dann floaten. Die gesamtbreite kannst du durch einen Container um die beiden Tabellen mit entsprechendem Style-Attribut festsetzen.