zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Tabelle1 rutscht nach unten

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.01.2021, 19:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.03.2017
Beiträge: 15
taotao2 befindet sich auf einem aufstrebenden Ast
Standard Tabelle1 rutscht nach unten

Hallo,
irgendwas mache ich falsch.
Ich wollte Tabelle1 direkt unter Div1 haben. Das klappt solange die Tabelle1 und Div1 zusammen schmaler sind als der Bildschirm (von der Breite).
Sobald die Tabelle1 und Div1 breiter ist, dann rutscht Tabelle1 unter Div1.
Siehe Bild.


Ich hatte bei Div1 und Tabelle1 unter css "float:left;" eingegeben, aber das hat nicht geholfen.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.01.2021, 20:37
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Ohne den HTML- und CSS-Code ist eine konkrete Hilfe nicht möglich.

Allgemein: float ist für dein Vorhaben weder gedacht noch geeignet. Beschäftige dich mit Flexbox (display: flex) und CSS-Grid (display: grid).

Welche der beiden CSS-Möglichkeiten für deine Seite sinnvoller ist hängt vom Quellcode ab.

Deiner Grafik nach tendiere ich eher zu CSS-Grid. Das ist aber nur nach meinen Erfahrungen geraten.

Geändert von MrMurphy (20.01.2021 um 20:39 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.01.2021, 23:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.03.2017
Beiträge: 15
taotao2 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von MrMurphy Beitrag anzeigen
Ohne den HTML- und CSS-Code ist eine konkrete Hilfe nicht möglich.
css:
Code:
#Div1 { float: left }
#Tabelle1 { float: left }
html:
HTML-Code:
<body>
    <div id="Div1"></div>
    <p id="p1">bla</p>
    <div id="Div2"></div>
    <table id="Tabelle1">
       <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Age</th>
       </tr>
    </table>
</body>
Flexbox (display: flex) und CSS-Grid (display: grid) schaue ich mir mal an
Mit Zitat antworten
  #4 (permalink)  
Alt 21.01.2021, 01:17
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Eine Lösung mit CSS-Grid:

Zunächst musst du die beiden float-Angaben löschen. Und dann das folgende CSS hinzufügen:

Code:
      body {
         display: grid;
         grid-gap: 1rem;
         grid-template-columns: 200px 1fr;
         grid-template-rows: 1fr 1fr 1fr;
         grid-template-areas:
            "div1 p1"
            "div1 div2"
            "div1 tabelle1"
         ;
      }
      #Div1 { 
        grid-area: div1; 
      } 
      #p1 { 
        grid-area: p1; 
      } 
      #Div2 { 
        grid-area: div2; 
      } 
      #Tabelle1 { 
        grid-area: tabelle1; 
      }
Mit Zitat antworten
  #5 (permalink)  
Alt 21.01.2021, 09:28
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Was MrMurphy sagt. Zusätzliche kleine Ergänzung:

Es heißt mittlerweile nicht mehr grid-gap sondern nur noch gap (und kann auch bei zB flexbox angewandt werden)
Mit Zitat antworten
  #6 (permalink)  
Alt 21.01.2021, 12:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.03.2017
Beiträge: 15
taotao2 befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank, ich schau mir das mal an.
Als ich vor 10 Jahren in HTML und CSS intensiver was gemacht hatte, gab es noch kein flexbox oder css-grid. Da musste man das mit float lösen.
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
3-spaltiges Layout: Mittlere Box rutscht immer hoch dowhile CSS 2 07.06.2012 16:59
Navigation rutscht heraus Muamicus CSS 19 04.01.2011 20:04
Inhalt rutscht unter Navigationsleiste Blackcherity CSS 2 03.06.2009 12:17
Inhalt des Footers rutscht weg Ninerian CSS 4 23.03.2009 12:42
IE: div-Box rutscht in die Fußzeile mux CSS 12 06.11.2008 21:59


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:28 Uhr.