Positionieren von Pfeile für die Einstellung der Reihenfolge...

[Darian]

Hallo Leute,

es sieht zwar schon so aus wie es sollte, aber ich denke dass ich das umständlich gemacht habe.

Im Bild seht ihr wie es sein sollte. Ich habe die Pfeile einfach wie folgt plaziert.

CSS-Style:

.travel_entry {
margin-bottom:25px;
}

.arrows {
position:relative;
bottom:50px;
left:540px;
cursor:pointer;
}

#show_trips li label {
width:300px;
font-size:12px;
}

Kommt mir aber komisch vor es einfach mit relativer Positionierung zu machen, und es dann über den ganzen Bildschirm zu verschieben. Ich bin mir sicher dass es da noch eine bessere und schönere Möglichkeit gibt, und da bitte ich bitte um Infos. (wir wollen es ja in Zukunft dann besser machen können)

Hier noch der HTML Code:

	<ul>
	{foreach from=$travels item=item}
	<li class="travel_entry"><label>{$item.title}</label><input type="button" value="Reise editieren" onClick="window.location.href='{$smarty.const.DOCUMENT_ROOT}index.php?action=adm_edittrip&travel_id={$item.id}&lang={$language.name}'"> <input type="button" value="Reise löschen" onClick="javascript:delete_trip('{$smarty.const.DOCUMENT_ROOT}index.php?action=adm_deletetrip&travel_id={$item.id}&lang={$language.name}')"></li>
	
	<div class="arrows">
		<img src="{$smarty.const.DOCUMENT_ROOT}images/admin/arrow_up.gif">
		<img src="{$smarty.const.DOCUMENT_ROOT}images/admin/arrow_down.gif">
	</div>
	{/foreach}
	</ul>

Würde mich freuen wenn mir das jemand noch erklären könnte. Mit float habe ich irgendwie nichts erreicht das gepasst hätte.

lg und danke für alle Infos
Darian

 

[Maik]

Hi,

wenn du das Markup valide auszeichnest, funktioniert es auch mit der float-Eigenschaft, und erübrigt die relative Positionierung.

	<ul>
	{foreach from=$travels item=item}
	<li class="travel_entry"><label>{$item.title}</label><input type="button" value="Reise editieren" onClick="window.location.href='{$smarty.const.DOCUMENT_ROOT}index.php?action=adm_edittrip&travel_id={$item.id}&lang={$language.name}'"> <input type="button" value="Reise löschen" onClick="javascript:delete_trip('{$smarty.const.DOCUMENT_ROOT}index.php?action=adm_deletetrip&travel_id={$item.id}&lang={$language.name}')">
	
	<div class="arrows">
		<img src="{$smarty.const.DOCUMENT_ROOT}images/admin/arrow_up.gif">
		<img src="{$smarty.const.DOCUMENT_ROOT}images/admin/arrow_down.gif">
	</div>
        </li>
	{/foreach}
	</ul>

.travel_entry label, .travel_entry input, .travel_entry .arrows {
float:left;
}

.arrows {
cursor:pointer;
}

mfg Maik

 

[Darian]

Hey Maik,

ja danke für die Infos, hat natürlich funktioniert.

Sorry dass ich so lange nicht geschrieben habe, aber ich habe komischerweise kein Mail über die Antwort bekommen, darum dachte ich es hat niemand geantwortet.

Also für die Zukunft, wenn ich float benutzte, muss ich die elemente in der selben Reihe auch mit dem selben float bearbeiten. Darum dachte mir, bei einem Menü hat es ja schon einmal so funktioniert. (das war früher mal)

Jetzt sind aber die Elemente die ich noch unten habe, direkt in der Liste. Müssten die nicht automatisch unten kommen. Ich habe sie auch nicht speziell positioniert, dass sich das erklären würde.

Hier noch einmal der HTML Code:

<div id="show_trips">

	<h4>Aktuelle Reisen</h4>
	
	<ul>
	{foreach from=$travels item=item}
	<li class="travel_entry"><label>{$item.title}</label><input type="button" value="Reise editieren" onClick="window.location.href='{$smarty.const.DOCUMENT_ROOT}index.php?action=adm_edittrip&travel_id={$item.id}&lang={$language.name}'"> <input type="button" value="Reise löschen" onClick="javascript:delete_trip('{$smarty.const.DOCUMENT_ROOT}index.php?action=adm_deletetrip&travel_id={$item.id}&lang={$language.name}')">
		<div class="arrows">
			<img onClick="window.location.href='{$smarty.const.DOCUMENT_ROOT}index.php?action=adm_slide&direction=up&travel_id={$item.id}&lang={$language.name}'" src="{$smarty.const.DOCUMENT_ROOT}images/admin/arrow_up.gif">
			<img onClick="window.location.href='{$smarty.const.DOCUMENT_ROOT}index.php?action=adm_slide&direction=down&travel_id={$item.id}&lang={$language.name}'" src="{$smarty.const.DOCUMENT_ROOT}images/admin/arrow_down.gif">
		</div>
	</li>
	{/foreach}
	</ul>


	<h4>Neue Reise erstellen</h4>
	<form name="travels" method="post" action="">
		<ul>
			<li><label>Reisetitel:</label><input type="text" name="title"></li>
		</ul>
		<input id="submit_savetravel" type="submit" name="submit_savetravel" value="Reise eintragen">
	</form>
</div>

CSS-Code

.travel_entry label, .travel_entry input, .travel_entry .arrows {
float:left;
margin-bottom:25px;
}

.arrows {
cursor:pointer;
margin-left:10px;
}

#show_trips li label {
width:300px;
font-size:12px;
}

Also die Überschrift "Neue Reise erstellen" und auch die anderen Elemente, sind direkt in der Liste.

Auf wunsch poste ich gerne noch ein Foto.

Danke für die Infos.
Darian

Edit:
Habe jetzt doch noch gleich ein Bild dazu gegeben.