✔ untereinander liegende elmente mit css vertauschen (relativ, nicht absolut!)

pointhi

pointhi

Erfahrenes Mitglied
Hy,
Ich arbeite gerade an meinem layout, und bin gerade beim umschreiben von meinem layout. Es bassiert komplett auf css, und ich bin dabei die wenigen absolut positionierten elemente relativ zu positionen da es teilweise zu darstellungsprobleme bei bildschirmbreiten von 800px und weniger gekommen ist (referenzseite war dabei rechts).
Ich hab das ganze soweit geschafft, mir fehlt nur noch 1. Positionierung, und bei dieser ist der html code vorgegeben (joomla). Es geht dabei um den header des content. Der HTML-code lautet dabei:
Code: 
				<div id="article">
					<!-- <jdoc:include type="component" /> -->
					<div class="item-page">
						<h2> <a href="#">TITEL</a> </h2>
						
						<ul class="actions">
							<li class="print-icon">
								<a href="/team?tmpl=component&amp;print=1&amp;layout=default&amp;page=" title="Drucken" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no'); return false;" rel="nofollow"><img src="img/joomla/printButton.png" alt="Drucken"  /></a>
							</li>
							<li class="email-icon">
								<a href="/component/mailto/?tmpl=component&amp;template=test_htl_01&amp;link=298db7a28d79751cc665752cd9129b07a0ac24d3" title="E-Mail" onclick="window.open(this.href,'win2','width=400,height=350,menubar=yes,resizable=yes'); return false;"><img src="img/joomla/emailButton.png" alt="E-Mail"  /></a>
							</li>
						</ul>					
						<dl class="article-info">
							<dt class="article-info-term">Details</dt>
							<dd class="create">Erstellt am Montag, 06. Februar 2012 12:27</dd>
							<dd class="modified">Zuletzt aktualisiert am Montag, 06. Februar 2012 12:27	</dd>
							<dd class="createdby">Geschrieben von pointhi</dd>
							<dd class="hits">Zugriffe: 17</dd>
						</dl>

(hab einfach den code aus einer aktuellen joomla-installation herauskopiert)

Das ziel ist jetzt <ul class="actions"> und <dl class="article-info"> über <h2> <a href="#">TITEL</a> </h2> anzeigen zu lassen, und das ohne absolute positionierung. Diese beide Elemente sollen dann auf das darüberliegende div "article" positioniert sein. Konkret soll als erstes "article-info" wobei "article-info-term" seitlich steht positioniert sein, und darunter die beiden icons neben den titel (aber rechts positioniert) liegen.

ich hab keine ahnung wie ich es machen soll. Ich schau noch ob ich es mit float hinkriege aber sonst hab ich keine idee mehr.

mfg. pointhi
 
Was spricht beim vertikalen Austausch der Elemente gegen die absolute Positionierung, die mir hier erfolgsversprechend(er als die erwähnte float-Regel) erscheint, und überhaupt keinen Einfluß auf die angesprochene Bildschirmbreitenproblematik hat?

Eine andere CSS-technische Möglichkeit der Umsetzung deines Vorhabens besteht meines Wissens hier auch nicht, da die anvisierte relative Positionierung negative top-Wertangaben zum Verrücken nach oben voraussetzt, was eine(n) unerwünschte(n) Lücke / Abstand im Textfluß zu den nachfolgenden HTML-Elementen zur Folge hätte.
 
Zuletzt bearbeitet:
Das problem ist das absolut gut ausschaut, wenn der bildschirm nicht in die nähe von 800px kommt. Ich hab um andere probleme zu vermeiden die minimale breite der webseite auf 680px gesetzt. Wenn der bildschirm aber kleiner als 800px wird, bleibt das element nicht stehen, wie alle anderen elemente sondern wandert langsam in ein anderes hinein. Bei handybildschirmen könnte man dieses Element höchswarscheinlich nicht mehr lesen. Es geht also darum das element nicht am bildschirm sondern am div zu fixieren bzw. eine if struktur zu implementieren, was meines wissen in css aber nicht möglich ist.

"if(breite <=800px)right:irgendwas richtiges;"

ich hab die seite auf meinem free-webspace online gestellt: http://eap.4lima.de/template01/

Die seite ist noch nicht fertig, besonders grafikmäßig, aber auch css fehlt noch vieles. Wäre also auch für tipps dieser richtung interressiert. Wenn man das Browserfenster unter 800px zusammenschiebt sieht man das problem, und ich weiß dass die darstellung bei ie < 9 nicht alles beinhaltet wie bei firefox, ect. Nutze aber auch schon teile von CSS3, HTML5 hab ich derzeit noch nichts enthalten da z.b. <article> bei IE8 nicht wirklich erkannt wurde. Aber in richtung zusätzliche informationen für browser, suchmaschine werde ich html5 sicher nutzen.

mfg. pointhi
 
Die korrekte Mindestbreite würde im vorliegenden Demo für die Klasse .bg 780px anstelle der 680px betragen, ohne die Elemente zusammenschieben und umbrechen zu lassen, wie ich es eben mittels Firebug analysiert habe.

Ansonsten müsste hier die Schriftgröße der Menüpunkte von 20px auf 16px verringert werden, um mit deiner gewählten Mindestbreite erfolgreich auszukommen.
 
Zuletzt bearbeitet:
bei dem menü muss ich sowieso noch schauen ob ich einen zeilenumbruch hinbekomme, falls der platz zu wenig wird. Weiß ja nicht genau wie die hauptmenüs dann sicher heißen, und wie lange die version in englisch sein wird. (für die zukunft wenn ich besser in englisch bin)

Aber mir geht es ja um "Details" und den dazugehörigen daten, damit es bei der mindestbreite nicht weiter einrückt. hab es mit margin-left probiert hat aber nicht funktioniert.

Hab den einen fehler behoben

mfg. pointhi
 
danke funktioniert, und das so einfach.
Langsam bekommt die seite release status, sie braucht aber 100% wesentlich mehr farbe. Zumindestens oben und villeicht am footer.

Noch eine kurze frage: man sieht es am footer, ich hab 2 menüs mit unterschiedlicher länge. wie kann ich das 2. Menü die volle höhe geben? height:100%; funktioniert nicht.

mfg. pointhi
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück