zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Responsive: Floatverhalten von 3 Spalten bei kleineren Bildschirmen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 10.09.2014, 15:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.09.2014
Beiträge: 4
herrweiss befindet sich auf einem aufstrebenden Ast
Standard Responsive: Floatverhalten von 3 Spalten bei kleineren Bildschirmen

Hallo zusammen,

Hallo,

ich habe ein Problem bei der Responsive Anpassung eines 3 Spalten Layouts (Holy Grail). Die Spalten sind wie folgt aufgeteilt:

HTML-Code:
<div class="container">
   <div id="main"></div>
   <aside id="left"></div>
   <aside id="right"></div>
</div>
Bei einer verkleinerten Fensteransicht soll die linke Spalte (#left) unter die Hauptspalte (#main) rutschen und die rechte Spalte soll weiterhin nach rechts floaten. Und nun zu meinem Problem: Die rechte Spalte orientiert sich leider an der linken Spalte, welche nun unter der Hauptspalte (#main) angezeigt wird und wird erst auf der Höhe der linken Spalte gefloatet und nicht auf der Höhe der Hauptpalte (#main). Dieses Verhalten leuchtet mir auch ein, aber ich habe keine Idee wie ich das nur mit CSS beeinflussen kann.

Damit es klarer wird, was ich meine, habe ich hier eine Beispielskizze angehängt: beispiel_spalten.jpg

Mein CSS Code:

HTML-Code:
@media (max-width: 768px) {

#main,
#left,
#right {
float: none;
position: relative;
margin-right:0;
margin-left:0;
left:0;
right:0;
box-sizing: border-box;
}

#main,
#left {
width: 70%;
float: left;
}

#right {
float:right;
width: 30%;
}

}
Hat jemand eine Idee wie ich das Problem lösen könnte?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 10.09.2014, 15:49
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.071
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Soll das ganze auch im IE8 und IE9 funktionieren?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.09.2014, 15:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.09.2014
Beiträge: 4
herrweiss befindet sich auf einem aufstrebenden Ast
Standard

In erster Linie geht es um die Darstellung auf Tablets... IE8 und IE9 müssen nicht zwingend berücksichtigt werden.
Mit Zitat antworten
  #4 (permalink)  
Alt 11.09.2014, 08:37
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

Zitat:
Zitat von herrweiss Beitrag anzeigen
... Dieses Verhalten leuchtet mir auch ein, aber ich habe keine Idee wie ich das nur mit CSS beeinflussen kann.
Die rechte Spalte darf dann nicht floaten ( float: none; ).
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/

Geändert von etux (11.09.2014 um 08:40 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 11.09.2014, 08:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.09.2014
Beiträge: 4
herrweiss befindet sich auf einem aufstrebenden Ast
Standard

Was meinst Du damit? Meinst Du die rechte Spalte soll in der vollen Breite unter der Linken Spalte angezeigt werden? So habe ich das auch bisher immer gelöst und so war es auch in meinem Entwurf vorgesehen, aber leider möchte mein Kunde das so umgesetzt haben, wie beschrieben
Mit Zitat antworten
  #6 (permalink)  
Alt 11.09.2014, 08:57
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

Zitat:
Zitat von herrweiss Beitrag anzeigen
Was meinst Du damit? Meinst Du die rechte Spalte soll in der vollen Breite unter der Linken Spalte angezeigt werden?
Nein, die rechte Spalte „verliert“ ihr Float, bekommt aber „margin-left“ (mit oder ohne Breite).

P.S.: die linke Spalte muss natürlich ein „clear: left“ dazu bekommen, um unter dem „#main“-div zu floaten.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/

Geändert von etux (11.09.2014 um 09:00 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 11.09.2014, 09:10
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

Mal so auf die Schnelle:
HTML-Code:
<!doctype html>
<meta charset="UTF-8">
<title>herrweiss :: xhtmlforum.de</title>
<style>
* { margin: 0; padding: 0; }
html { padding: 10px; }
body:before, body:after { content: ""; display: table; } body:after { clear: left; }
/* statt Inhalt */#main, #left, #right { padding-bottom: 4em; }

body {
  width: 50%;
  margin: 0 auto;
}
.container {
  float: left;
  width: 200%;
  margin-left: -50%;
}
#main,
#left,
#right {
  float: left;
  border: 10px solid #fff;
  box-sizing: border-box;
  background-color: #999;
}
#main {
  width: 50%;
  margin-left: 25%;
}
#left {
  width: 25%;
  margin-left: -75%;
}
#right {
  width: 25%;
}

@media (max-width: 768px) {
  body { width: auto; }
  .container {
    width: 30%;
    margin-left: 70%;
    background-color: #999;
  }
  #main,
  #left,
  #right {
    border: none;
  }
  #main {
    margin-bottom: 1em;
  }
  #main,
  #left {
    clear: left;
    float: left;
    width: 233%;
    margin-left: -233%;
    border-right: 1em solid #fff;
  }
  #right {
    float: none;
  }
}
</style>
<div class="container">
  <div id="main"><p>Hauptspalte ...</p></div>
  <aside id="left"><p>Linke Spalte ...</p></aside>
  <aside id="right"><p>Rechte Spalte ...</p></aside>
</div>
Du sprichst vom „Holy Grail“. So weit ich mich erinnere, haben bei dem Layout die Seitenspalten feste Breiten. Deine aber nicht

.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
  #8 (permalink)  
Alt 11.09.2014, 09:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.09.2014
Beiträge: 4
herrweiss befindet sich auf einem aufstrebenden Ast
Standard

Den Holy Grail löse ich im Mediaquery auf mit:

#main,
#left,
#right {
float: none;
position: relative;
margin-right:0;
margin-left:0;
left:0;
right:0;
}

Danke für Deinen Lösungsansatz, werde ich gleich mal testen!
Mit Zitat antworten
Antwort

Stichwörter
css, float, floating layouts, responsive

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
Kundeninteresse an Responsive Layout heiko_rs Offtopic 18 24.05.2013 13:37
Problem beim ein/ausblenden von Spalten in Tabellen via CSS und JavaScript chrisol_76 CSS 2 21.07.2008 17:37
3 dynam. Spalten mit Inhaltsüberlauf spacegaier CSS 6 12.10.2007 00:24


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:37 Uhr.