Probleme mit der Positionierung von DIV

Moin zusammen,

ich versuche gerade ein wenig über CSS zu lernen. Bin ganz frisch in dem Thema und darum fehlen mir bei meinem jetzigen Thema schlicht die Suchbegriffe um mit Google weiter zu kommen.

Ich habe nun folgenden Code gefunden, der fast genau das macht, was ich will:

Linke Spalte variable breite, rechte Spalte fixe breite.

<style>
	#container {
		background:#00FF00;
	}
	#links{
		margin-right: 150px;
		background:#FF0000;
		
	}
	#rechts{
		float: right;
		width: 150px;
	}

</style>

</head>
<body>

<div id="container">  
	<div id="rechts">  
		<b>Navigation</b><br/>
		text text text text text text text text text text text text text text text text text			
	</div>
	<div id="links">  
		<b>2-spalten-layout jea</b><br/>
		und noch ein bischen text : text text text text text text text text text text text text text text text text text
		text text text text text text text text text text text text text text text text text text text text text
		<div style="clear:both"></div>  
	</div>
</div>

Funktioniert. Nun möchte ich aber folgendes erreichen:
Wenn die Breite der linken Spalte kleiner wie N wird, soll die rechte Spalte nicht mehr rechts sondern unter der linken Spalte angezeigt werden.
Wenn ich nun in der linken Spalte min-width setze, passiert alles, aber kein Umbruch.

Wo muss ich da ansetzen?

Gruß

Please also mark the comments that contributed to the solution of the article

Content-Key: 301858

Url: https://administrator.de/contentid/301858

Printed on: April 19, 2024 at 22:04 o'clock

8 Comments

Latest comment

Moin Edzard,

schön das du dich mit dem Thema beschäftigst

Such mal nach dem Begriff "media queries", da wirst du sicherlich fündig. Ansonsten einfach noch mal fragen, wir helfen dir gern.

Viele Grüße
Toni

Bevor ich jetzt wieder Stunden zum testen falschen Codes verschwende, gib mir bitte einen kurzen Hinweis, ob ich den richtigen "Hebel" gefunden habe:

Quelle: https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Tipps_und_Tricks ... - Mobile first

aside {
  /* nur Farb- und Hintergrundformatierungen */
}
 
@media (min-width: 50em) {
  aside {
    float: left;
    width: 50%;
  }
}

Sprich Design ohne Float aufbauen und dann mittels @media (min-width: *em) float:right setzen?

Dank schon einmal für das "media queries" - damit lassen sich anscheinend ja richtig interessante Sachen basteln

Zitat von @127944:
Bevor ich jetzt wieder Stunden zum testen falschen Codes verschwende, gib mir bitte einen kurzen Hinweis, ob ich den richtigen "Hebel" gefunden habe:

Moin,
du schreibst ja du möchtest das lernen, dann ist Zeit investieren immer eine gute Sache ;)

Der Spaß ist leider nicht ganz so einfach und erfordert schon einiges an Hintergrundwissen, du beginnst mit etwas das schon etliche vor dir zur Verzweiflung gebracht hat. Mit den aktuellen Browsern ist das einfacher geworden zuvor musste man aber für verschiedene Browser etliche Umwege gehen um zum gleichen Ergebnis zu kommen.

Es wurden etliche Frameworks entworfen die einem diese Arbeit erleichtern sollten.

Ein etwas älteres ist YAML - Es ist hilfreich weil gut dokumentiert und nicht ganz so aufgebläht wie die aktuellen.
Schau dort mal rein, das dürfte dich weiter bringen: YAML
VG

Vielen Dank für den Tip.
Ich denke allerdings, das ein Framework definitiv der falsche Ansatz für mich ist. Dafür fehlen mir einfach die Grundkenntnisse - und die möchte ich mir ja gerade aneignen.

OT / BTW:

du schreibst ja du möchtest das lernen, dann ist Zeit investieren immer eine gute Sache ;)

Man hat mir ein Schlagwort genannt - ich habe mir dazu Quellen angesehen - die gelesen und denke verstanden. Was mir fehlt ist die Bestätigung das ich an der richtigen Stelle ansetze

Moin,

generell setzt du an der richtigen Stelle an.

mit
[code]
@media (min-width: 50em) { ... }
[/code]

Führst du alle CSS-Anweisungen innerhalb dieser { } Klammern ab einer Mindestbreite von 50em (ich würde Pixelmaße nehmen) aus. Bzgl. der Maße am besten an den großen Frameworks orientieren ( http://holdirbootstrap.de/css/#grid-options ).

Dort findest du auch noch einmal Informationen zu den Media Queries ansich, ohne dass du das Framework nutzen musst. In deinem Fall wäre nun aber min-width der falsche Befehl, du möchtest es ja bei kleineren Geräten untereinander haben. Also wähle hier besser max-width.

Ob der Code an sich richtig ist, am besten ausprobieren. So kann man am besten üben. Die Browser haben alle Entwicklertools (F12) womit man mittlerweile echt gut testen kann und CSS-Angaben im "Live"-betrieb ändern und anschauen kann.

Viele Grüße
Toni