position: absolute; right: 50px

**Uwe_B** · 19.06.2012, 17:14

Hallo zusammen,
ich habe die Container etc. auf meinen Seiten bisher meist mit Floating angeordnet, würde nun aber gerne ein Element am rechten Rand ausrichten, wie im Thread-Titel beschrieben: position: absolute; right: 50px

Das klappt soweit wie gewünscht, doch wenn ich das Browserfenster verkleiner zieht das Element nun natürlich mit. Bis zu einem gewissen Punkt soll das auch so sein, ich würde jedoch gerne verhindern, dass das Element bei entsprechend schmalem Browserfenster bis zum linken Rand wandert.

Gibt es eine Möglichkeit zusätzlich einen Mindestabstand für die linke Seite anzugeben (ähnlich wie bspw. min-width bei der Elementbreite, irgend etwas das die Funktion min-left erfüllen würde)?

Danke!

**PascalKremp** · 20.06.2012, 00:04

Hi Uwe,

HTML-Code:

<style>
@media (min-width: 768px) and (max-width: 979px) { // Zahlen anpassen
 // Feuert wenn der Browser kleiner als 979px breit und größer als 768px breit ist

 .rechtes-ding {
  display:none;
  // Oder sonst was damit machen
 }

}
</style>

Gruß
Pascal

**Uwe_B** · 20.06.2012, 15:15

Hallo Pascal,
danke für deine Antwort, aber das funktioniert irgendwie nicht. Scheint mir auch ein wenig um die Ecke konstruiert zu sein, gibt es keine einfache und direkte Lösung?

**PascalKremp** · 20.06.2012, 18:04

Hi Uwe, teste mal das:

HTML-Code:

<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		.container {
			width:50%;
			margin:0 auto;
			border:1px solid #CCCCCC;
			padding:1em;
		}
		.element-am-rand {
			position:absolute;
			right:50px;
			top:150px;
			border:1px solid green;
			height:200px;
			width:25px;
			background-color:green;
		}
		@media (min-width: 400px) and (max-width: 1000px) {

		 .element-am-rand {
		  /*display:none;*/
		  background-color:red;
		 }

		}		
	</style>
</head>
<body>
	<div class="element-am-rand">

	</div>
	<div class="container">
		<article>
			<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, </h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</article>
	</div>
</body>
</html>

Wenn das bei dir nicht funktioniert, ist dein Browser vielleicht veraltet. Einfacher geht's nicht. Es geht nur "komplizierter" mit JavaScript.

**wildmieze** · 21.06.2012, 10:24

@Pascal:
Leider sind die veralteten Browser immer noch so weit verbreitet, daß ich persönlich immer noch kein CSS3 verwende. Was nützt es mir, wenn meine Seite bei mir gut aussieht, aber bei einem Großteil der Besucher nicht?

@Uwe:
Wie Pascal schon sagte, Javascript wäre eine Möglichkeit. Wobei es da dann einfacher ist, das nur beim Laden der Seite zu berechnen (sprich: wenn einer das Fenster im Nachhinein per Hand verkleinert, schiebt der Container sich doch wieder nach links). Aber wie der Code dafür aussehen muss, sollte jemand schreiben, der sich damit auskennt

Ansonsten .. hmm .. spontan fällt mir höchstens noch ein, den Container in einem weiteren, absolut positionierten Container zu plazieren. Diese größere Container kriegt dann die gewünschte Mindestbreite, und theoretisch dürfte dann Dein kleinerer Container auch nicht weiter nach links rutschen.. Allerdings kann ich Dir gerade nicht sagen, ob das tatsächlich funktioniert, und ob das praktisch umsetzbar ist - der Container läge dann nämlich vermutlich über dem Rest der Seite, was diese evtl. unbenutzbar macht, oder es werden andere positionierte Elemente beeinflusst .. aber das wäre vielleicht mal ein Ansatz zum Ausprobieren ..

**Uwe_B** · 21.06.2012, 10:58

Der umrahmende Container ist die Lösung, danke!

Die komplette Seite ist jetzt einfach im Container #rahmen, mit den Attributen { position: absolute; min-width: 1000px; width: 100%;}. Das funktioniert perfekt, danke für die Tipps.

**PascalKremp** · 21.06.2012, 13:20

@wildmieze:

Da muss ich dir zustimmen. Natürlich muss man abwägen, wie wichtig das Element am Rand ist.

Hier eine JavaScript-Lösung:

HTML-Code:

<script>

// jQuery einbinden

randDing = $('.element-am-rand');

$(window).resize(function() {

    windowWidth = $(this).width(); //Fensterbreite ermitteln und abspeichern
    if (windowWidth < 400) {
        randDing.hide(); //oder sonst was damit machen
    } else {
        //.... und das was passieren soll, wenns >  400 ist...
    }

});
</script>

Gruß

zur Startseite vom TP

Thema: position: absolute; right: 50px

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

position: absolute; right: 50px

Aktive Benutzer

Aktive Benutzer

Ähnliche Themen

[CSS] position: absolute

absolute Position -> Ebene

[CSS] absolute/fixed position für den IE

Position:absolute vs. IE

position:absolute; bei ie6...

Aktive Benutzer

Aktive Benutzer

Berechtigungen