Brauche Hilfe beim Ausrichten von Buttons

Beitrag von **Pfotenwelt** » 21.03.2008 13:37

Ich habe das Template Prosilver etwas umgebaut. Jetzt möchte ich eigentlich Buttons direkt im Header, bzw. direkt unter dem Site Logo einbauen.

Soweit so gut. Der eine Button für das Profil sollte rechts sein. Habe ich auch gemacht und über das common.css auch eine neue ID gegeben. Dort stimmt es auch perefkt.

Nun möchte ich aber auf der Rechten Seite auch noch Buttons rein machen. Allerdings richtet es mir diese nicht ganz rechts aus. Ich habe jetzt fast alles versucht. Auch wenn ich eine neue ID über das CSS vergebe, dann zieht es mir das ganze nach unten. Kann mir jemand helfen?

Das ist der Code im overall_header.html

Code: Alles auswählen

<div id="site-description">
				<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
				 
			    <ul class="linklist leftside">
				<a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="u" id="menu_button" >
				<img src="{T_IMAGESET_PATH}/button/button_ucp.jpg" alt=""id="button1bla" 
				onmouseover="button1bla.src='{T_IMAGESET_PATH}/button/button_ucp_rollover.jpg'"
                onmouseout="button1bla.src='{T_IMAGESET_PATH}/button/button_ucp.jpg'" /></a>
			<ul class="linklist rightside" align="right" >
			     <a href="{U_ARCADE}" title="{L_ARCADE_EXPLAIN}" id="menu_button"  >
				 <img src="{T_IMAGESET_PATH}/button/button_arcade.jpg" alt=""id="button1b2a" 
				onmouseover="button1b2a.src='{T_IMAGESET_PATH}/button/button_arcade_rollover.jpg'"
                onmouseout="button1b2a.src='{T_IMAGESET_PATH}/button/button_arcade.jpg'" /></a>
				
			     <a href="{U_GALLERY_MOD}" title="{L_GALLERY_EXPLAIN}" id="menu_button">
				 <img src="{T_IMAGESET_PATH}/button/button_gallery.jpg" alt=""id="button1b3a" 
				onmouseover="button1b3a.src='{T_IMAGESET_PATH}/button/button_gallery_rollover.jpg'"
                onmouseout="button1b3a.src='{T_IMAGESET_PATH}/button/button_gallery.jpg'" /></a>
			</div>

weiss auch nicht wie ich das ändern kann dass die Buttons oben rechts ganz nach rechts gehen.

Schaut mal

FORUM

Lieben Gruss

Pfote

Beitrag von **JFooty** » 21.03.2008 14:11

Code: Alles auswählen

<div id="site-description">
<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a> 
<ul class="linklist rightside" align="right" > 
     <a href="{U_ARCADE}" title="{L_ARCADE_EXPLAIN}" id="menu_button"  > 
        <img src="{T_IMAGESET_PATH}/button/button_arcade.jpg" alt=""id="button1b2a"             onmouseover="button1b2a.src='{T_IMAGESET_PATH}/button/button_arcade_rollover.jpg'"                 onmouseout="button1b2a.src='{T_IMAGESET_PATH}/button/button_arcade.jpg'" /></a> 
     <a href="{U_GALLERY_MOD}" title="{L_GALLERY_EXPLAIN}" id="menu_button"> 
        <img src="{T_IMAGESET_PATH}/button/button_gallery.jpg" alt=""id="button1b3a"            onmouseover="button1b3a.src='{T_IMAGESET_PATH}/button/button_gallery_rollover.jpg'"                onmouseout="button1b3a.src='{T_IMAGESET_PATH}/button/button_gallery.jpg'" /></a> 
     <a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="u" id="menu_button" > 
        <img src="{T_IMAGESET_PATH}/button/button_ucp.jpg" alt=""id="button1bla"             onmouseover="button1bla.src='{T_IMAGESET_PATH}/button/button_ucp_rollover.jpg'"                 onmouseout="button1bla.src='{T_IMAGESET_PATH}/button/button_ucp.jpg'" /></a>
</div>

Vielleicht so?

Edit: So ist es natürlich erst richtig richtig.

Code: Alles auswählen

<div class="headerbar">
<ul class="linklist rightside">
<li>
<a id="menu_button" title="Spiele spielen in der Spielhalle" href="./arcade.php?sid=f24d31238dddc2e5c4a86778631b996e">
	<img onmouseout="button1b2a.src='./styles/prosilver/imageset/button/button_arcade.jpg'" onmouseover="button1b2a.src='./styles/prosilver/imageset/button/button_arcade_rollover.jpg'" id="button1b2a" alt="" src="./styles/prosilver/imageset/button/button_arcade.jpg"/></a>
</li>
<li>
<a id="menu_button" title="Bilder Galerie" href="./gallery/index.php?sid=f24d31238dddc2e5c4a86778631b996e">
	<img onmouseout="button1b3a.src='./styles/prosilver/imageset/button/button_gallery.jpg'" onmouseover="button1b3a.src='./styles/prosilver/imageset/button/button_gallery_rollover.jpg'" id="button1b3a" alt="" src="./styles/prosilver/imageset/button/button_gallery.jpg"/></a>
</li>
<li>
<a id="menu_button" accesskey="u" title="Persönlicher Bereich" href="./ucp.php?sid=f24d31238dddc2e5c4a86778631b996e">
	<img onmouseout="button1bla.src='./styles/prosilver/imageset/button/button_ucp.jpg'" onmouseover="button1bla.src='./styles/prosilver/imageset/button/button_ucp_rollover.jpg'" id="button1bla" alt="" src="./styles/prosilver/imageset/button/button_ucp.jpg"/></a>
</li>
</ul>
</div>

Beitrag von **Pfotenwelt** » 21.03.2008 14:29

danke für die Antwort.

habs versucht, aber die sind immer noch mittig.

Ich möchte ja nur die zwei Buttons " Gallery" Und "Spielhalle" ganz nach rechts aussen haben.

edit: kann es daran liegen, dass die buttons in dem falschen div drinn sind? Also ich meine in dem wo das Logo angepasst ist? irgendwie richtet es sich nach dem aus. aber ich müsste es ja na dem div ausrichten wo auch die Grafik bg_header.gif ist oder nicht? Blos wo finde ich das?

Beitrag von **JFooty** » 21.03.2008 14:56

Probier es mal so:

Code: Alles auswählen

<div id="page-header">
	<div class="headerbar">
		<div class="inner"><span class="corners-top"><span/></span>
			<div id="site-description">
				<a id="logo" title="Foren-Übersicht" href="./index.php?sid=f9b4f747adb063ddce091d3f7c17ad44"><img width="831" height="160" title="" alt="" src="./styles/prosilver/imageset/site_logo.jpg"/></a>
			</div>
			<div class="headerbar"> 
			    <ul class="linklist leftside">
					<li>
					<a id="menu_button" accesskey="u" title="Persönlicher Bereich" href="./ucp.php?sid=f9b4f747adb063ddce091d3f7c17ad44">
				<img onmouseout="button1bla.src='./styles/prosilver/imageset/button/button_ucp.jpg'" onmouseover="button1bla.src='./styles/prosilver/imageset/button/button_ucp_rollover.jpg'" id="button1bla" alt="" src="./styles/prosilver/imageset/button/button_ucp.jpg"/></a>
					</li>
				</ul>
				<ul class="linklist rightside">
				<li>
				<a id="menu_button" title="Spiele spielen in der Spielhalle" href="./arcade.php?sid=f9b4f747adb063ddce091d3f7c17ad44">
				<img onmouseout="button1b2a.src='./styles/prosilver/imageset/button/button_arcade.jpg'" onmouseover="button1b2a.src='./styles/prosilver/imageset/button/button_arcade_rollover.jpg'" id="button1b2a" alt="" src="./styles/prosilver/imageset/button/button_arcade.jpg"/></a>
				</li>
				<li>
				<a id="menu_button" title="Bilder Galerie" href="./gallery/index.php?sid=f9b4f747adb063ddce091d3f7c17ad44">
				<img onmouseout="button1b3a.src='./styles/prosilver/imageset/button/button_gallery.jpg'" onmouseover="button1b3a.src='./styles/prosilver/imageset/button/button_gallery_rollover.jpg'" id="button1b3a" alt="" src="./styles/prosilver/imageset/button/button_gallery.jpg"/></a>
				</li>
				</ul>
			</div>
			<span class="corners-bottom"><span/></span>
		</div>
	</div>
	<div class="navbar">
		<div class="inner"><span class="corners-top"><span/></span>
			<ul class="linklist navlinks">
				<li class="icon-home"><a accesskey="h" href="./index.php?sid=f9b4f747adb063ddce091d3f7c17ad44">Foren-Übersicht</a> </li>
				<li class="rightside"><a title="Suche" href="./search.php?sid=f9b4f747adb063ddce091d3f7c17ad44">SUCHE</a></li>
			</ul>
			<ul class="linklist rightside">
				<li class="icon-chat"><a target="_blank" title="Online: " href="chat/">Im Chat: 0</a></li>
				<li><a title="Filebase" href="./filebase.php?sid=f9b4f747adb063ddce091d3f7c17ad44">Filebase</a></li>
				<li class="icon-ucp"><a title="Spiele spielen in der Spielhalle" href="./arcade.php?sid=f9b4f747adb063ddce091d3f7c17ad44">Spielhalle</a></li>
				<li class="icon-faq"><a title="Häufig gestellte Fragen" href="./faq.php?sid=f9b4f747adb063ddce091d3f7c17ad44">FAQ</a></li>
				<li class="icon-gallery"><a title="Bilder Galerie" href="./gallery/index.php?sid=f9b4f747adb063ddce091d3f7c17ad44">Galerie</a></li>
				<li class="icon-register"><a href="./ucp.php?mode=register&sid=f9b4f747adb063ddce091d3f7c17ad44">Registrieren</a></li>					<li class="icon-logout"><a accesskey="l" title="Anmelden" href="./ucp.php?mode=login&sid=f9b4f747adb063ddce091d3f7c17ad44">Anmelden</a></li>
			</ul>
			<span class="corners-bottom"><span/></span>
		</div>
	</div>
</div>

Zusätzlich musst du bei #site-description das float:left entfernen. Dann sollte es so aussehen, wie du beschrieben hast.

Beitrag von **Pfotenwelt** » 21.03.2008 15:56

hat leider irgendwie auch nicht funktioniert. Aber ich habe jetzt für mich einfach so umgeschaltet, dass ich halt alle buttons in einer reihe nebeneinander habe. Geht ja auch. Und sieht nicht so schlimm aus. Jedenfalls jetzt nach fast 5 stunden rumtüfteln ist mir diese lösung am akzeptabelsten.

Danke für Deine Hilfe trotzdem.

Lieben Gruss

Pfoti

Beitrag von **JFooty** » 21.03.2008 17:00

Na ja, wenn du die xhtml-Syntax nicht einhältst, kann das auch nicht funktionieren.
Lass deine Seite mal validieren, dann siehst du was ich meine.