zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden wie float wieder entfernen?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.07.2013, 13:02
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 17.01.2008
Beiträge: 153
Shyne befindet sich auf einem aufstrebenden Ast
Standard wie float wieder entfernen?

Hallo

Ich habe meine beiden Divs links und rechts positioniert, und zwar so:

HTML-Code:
.div-left { width: 50%; float: left; }
.div-right { width: 50%; float: right }
Ich möchte nun, dass die Klasse div-right oberhalb der Klasse div-left angezeigt wird, wenn die max-width bei 767px liegt.

Ich habe es mal so probiert
HTML-Code:
@media (max-width: 767px) {	
	.div-right { clear: right; display: block }
}
scheint aber nicht wirklich zu funktionieren.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.07.2013, 14:54
Benutzer
neuer user
 
Registriert seit: 18.06.2013
Beiträge: 76
vanDerb befindet sich auf einem aufstrebenden Ast
Standard

Das ist m.W. nach nicht möglich. Das ist natürlich das Standardverhalten von HTML. Von oben nach unten.

Du kannst natürlich dein Right ab einer bestimmten Breite Absolute positionieren und dem left dann den Abstand nach oben geben.

Natürlich schwierig, wenn die Höhe von div-right variiert.

Test auf jsbin
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 11.07.2013, 15:02
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 30.04.2012
Beiträge: 163
schatzi sorgt für eine eindrucksvolle Atmosphäreschatzi sorgt für eine eindrucksvolle Atmosphäre
Standard

Hallo!

Warum sollte das nicht funktionieren?
Solange im HTML das .div-right VOR dem .div-left liegt, ist das kein Problem.

Edit this Fiddle - jsFiddle
__________________
Gruß schatzi
Mit Zitat antworten
  #4 (permalink)  
Alt 11.07.2013, 15:04
Benutzerbild von plastiko
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.12.2007
Ort: Hannover
Beiträge: 945
plastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblick
Standard

Auf die Frage im Threadtitel:
Code:
float: none;
Damit erreichst du aber nicht unbedingt was du beschrieben hast. Das hängt auch von der Anordnung der Elemente im html ab.

Edit:
Schatzis Post zu spät gelesen.
__________________
MfG
Jens

Geändert von plastiko (11.07.2013 um 15:07 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 12.07.2013, 08:01
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Von einem langjährigen Forum-User hätte ich eine deutlich bessere Fragestellung erwartet.
Ich gehe davon aus, dass div.div-left im Quelltext vor div.div-right liegt und Du, aus welchem Grund auch immer, deren Reihenfolge nicht ändern kannst. In welcher Umgebung die beiden Elementen liegen, verrät mir aber leider auch meine Kristallkugel nicht.

Zitat:
Zitat von Shyne Beitrag anzeigen
Ich möchte nun, dass die Klasse div-right oberhalb der Klasse div-left angezeigt wird, ...
Das ist durchaus möglich, hängt aber davon ab, in welcher Umgebung sich die zwei DIVs befinden.
Wenn die zwei DIVs die einzige Elementen sind, ist es sehr einfach, das untere Element vor dem oberen Element darzustellen. Natürlich haben die Elementen keine feste Höhe (sonst wäre es ja zu einfach ) – deren Inhalt bestimmt die Höhen.
Auf meiner Testsite habe ich ein einfaches Beispiel gefunden:
Inhalt zuerst
Die Technik kann man auch bei kompletten Layouts anwenden:
Demo-Layout : Inhalt zuerst, zwei gleich hohe Spalten, elastisch :: emil-webdesign.net

Und hier ein Testcase als mögliche Lösung:
HTML-Code:
<!DOCTYPE html>
<meta charset="utf-8">
<title>zweites Element zuerst</title>			
<style>
* { margin: 0; padding: 0; }
html, body { width: 100%; }
.div-left, .div-right { float: left; width: 50%; }

@media only screen and ( max-width: 767px ) {
	body { position: relative; }
	.div-left { position: absolute; top: 100%; width: 100%; }
	.div-right { float: none; width: 100%; }
}

/* Design */
html { font-size: 100%; }
body { font-size: medium; color: #222; background: #626262; }
div { padding: 2em 0; }
.div-left { background: #ddd; }
.div-right { color: #ddd; background: #2d333c; }
b { padding: 0 2em; }
span { padding: 1em 2em; }
/* mehr Inhalt */
div:hover i, span { display: none; }
div:hover span { display: block; }
</style>

<div class="div-left">
	<b>links</b>
</div>
<div class="div-right">
	<b>rechts</b> <i>... mehr Inhalt »</i><span>Dagegen tadelt und hasst man mit Recht Den, welcher sich durch die Lockungen einer gegenwärtigen Lust erweichen und verführen lässt, ohne in seiner blinden Begierde zu sehen, welche Schmerzen und Unannehmlichkeiten seiner deshalb warten ...</span>
</div>
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/

Geändert von etux (12.07.2013 um 08:15 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 12.07.2013, 09:13
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Nachtrag:
Der „Trick“ ist sehr einfach und sollte alleine aus dem Quelltext im Testcase leicht zu erkennen sein. Dennoch eine kurze Erklärung, wie das zweite Element vor dem ersten dargestellt wird:

+ das erste Element wird aus dem Dokumentenfluss genommen (position: absolute). So beeinflusst das Element die Höhe vom body nicht mehr - die Höhe vom body wird jetzt nur durch das zweite Element bestimmt

+ body wird als Containing Block für das (abs. pos.) erste Element definiert (position: relative)

+ das erste Element bekommt ein „top: 100%;“. D.h. die obere Kante des ersten Elements liegt immer da an, wo das body endet (an dessen Unterkante).

= Da die Unterkanten vom zweiten Element und body letzt auf einander liegen, fängt das erste Element immer da an, wo das zweite endet. Unabhängig davon, ob und wie sich der Inhalt der Elementen ändert .

Im Beispiel habe ich das body-Element genommen, um den Quellcode übersichtlich zu halten. Selbstverständlich könnte man mit einem anderen Element die zwei DIVs umschließen. So wie in den anderen zwei Beispiele (s. Links in meinem ersten Beitrag).
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS von Plugin beisst! expand CSS 0 28.09.2012 18:44
joomla template wrock CSS 2 06.04.2012 20:24
CSS - CMS - lange Menus Balken/BG oben? shinobi CSS 3 13.10.2011 22:12
Webseite für Smartphones Optimieren. Cybertronic CSS 8 25.08.2011 12:44
Webseite für Smartphones Optimieren Cybertronic CSS 8 18.08.2011 10:16


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:00 Uhr.