zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Zwei Spalten mit verschiedenen Reihen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.05.2017, 11:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.05.2017
Beiträge: 5
Kwasimudu befindet sich auf einem aufstrebenden Ast
Standard Zwei Spalten mit verschiedenen Reihen

Hallo,

ich probiere seit Tagen eine Seite zu erstellen, die zwei Spalten und in den Spalten verschiedene sind.
(Siehe Screenshot https://ibb.co/jgs25v)

Ich hab es probiert, mit Tabellen in Tabellen zu machen aber das funktioniert nicht...

Am Besten wäre es, wenn die Reihen eine feste Position haben und nicht durch Text o.ä. automatisch erweitert werden.


Vielen Dank schon mal!

Gruß
Thomas
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 19.05.2017, 11:13
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.005
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Ohne den Quellcode und den Inhalt zu kennen kann ich dir leider nur sehr allgemein helfen.

Zunächst benötigst du zwei Container (je nach Inhalt zum Beispiel article, section, aside, ...) und stellst die mittels Flexbox (display: flex; ) nebeneinander.

In die schreibst du jeweils drei weitere Container, die dann automatisch untereinander stehen. Da das das ganz normale Verhalten ist brauchst du nichts weiter im CSS zu bestimmen.

Die Breiten bestimmt du per CSS über flex-basis, width, min-width und / oder max-width, je nachdem was du benötigst.

Gruss

MrMurphy
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 19.05.2017, 12:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.05.2017
Beiträge: 5
Kwasimudu befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

Ah okay klingt im Prinzip ganz einfach.
Ich hab nicht wirklich einen Quellcode weil alles bisher nicht funktioniert hat...

Kannst du mir vielleicht zeigen, wie ich das am Besten mache?

Die Idee mit Tables war also nicht so gut
Mit Zitat antworten
  #4 (permalink)  
Alt 19.05.2017, 13:06
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.631
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

Was genau ist denn dein Ziel? Also in Hinblick darauf, dass sich die Bereiche nicht anpassen sollen? Das ist ja eigentlich konträr zu dem, was HTML/CSS ausmacht, dass sich Inhalte der Seite anpassen.
Mit Zitat antworten
  #5 (permalink)  
Alt 19.05.2017, 16:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.05.2017
Beiträge: 5
Kwasimudu befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

also im Prinzip brauche ich eine Fullscreen Seite mit dem Aufbau wie in dem Bild.
Ein User soll in den jeweiligen Bereichen Text einstellen, jedoch nur so viel, wie ich als Admin es festlege.
Daher sollen die Bereiche fixe Positionen haben, die sich nicht durch Text o.ä ändern.
Mit Zitat antworten
  #6 (permalink)  
Alt 19.05.2017, 17:58
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.005
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Ein User soll in den jeweiligen Bereichen Text einstellen, jedoch nur so viel, wie ich als Admin es festlege.
Das geht nicht nur mit HTML und CSS sondern erfordert zusätzlich PHP und JavaScript.

Und wie soll das bei unterschiedlichen Bildschirmgrößen funktionieren? Smartphoneuser dürfen 10 Worte schreiben und User mit supergroßen Bildschirmen einen halben Roman? Und was ist mit Desktopusern, die nicht im Vollbildmodus ihres Browsers surfen?

Wie bereits geschrieben sind Webseiten grade nicht für bestimmte Größen ausgelegt, sondern können im Prinzip unendlich groß werden.

Außerdem wird zur richtigen Anwendung der Container der Inhalt der Seite benötigt oder zumindest, was in welchem Container passieren soll.

Oder willst du ein Formular erstellen? Dann kannst du für Textfelder die maximale Anzahl der Zeichen bestimmen. Das hat aber wiederum nichts mit der Containergröße zu tun.

Gruss

MrMurphy

Geändert von MrMurphy (20.05.2017 um 07:09 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 20.05.2017, 12:21
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.05.2017
Beiträge: 5
Kwasimudu befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

okay das verstehe ich.
Wenn wir aber jetzt davon ausgehen, dass ich es erstmal lokal, bei mir, auf meinem Apache, laufen lassen möchte und nur mein Monitor derzeit die "größe angibt".

Das einfügen vom Text hab eich mir bisher auch, erstmal, nur statisch, sprich im Quellcode, vorgestellt.

Also bisher soll es nur Statisch sein.
Ich hab es zur Zeit so (siehe Link) aber schön ist es nicht...

https://pastebin.com/GUEum3ZP
https://pastebin.com/tey7QTPc

Danke & ein schönes Wochenende!
Mit Zitat antworten
  #8 (permalink)  
Alt 21.05.2017, 01:49
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.005
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Dann würde ich zu dem HTML

Code:
   <main id="content" class="content">
      <div>
         <div>
            <h1>Tabellendarstellung</h1>
         </div>
         <div>
            <p>Feld2</p>
         </div>
         <div>
            <p>Feld3</p>
         </div>
      </div>
      <div>
         <div>
            <p>Feld4</p>
         </div>
         <div>
            <p>Feld5</p>
         </div>
         <div>
            <p>Originaldiskussion: <a href="https://xhtmlforum.de/73243-zwei-spalten-mit-verschiedenen-reihen.html">https://xhtmlforum.de/</a></p>
         </div>
      </div>
   </main>
dieses CSS

Code:
      .content {
         width: 1000px;
         height: 500px;
         margin: 0rem auto 0rem auto;
         display: flex;
      }
      .content>* {
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: 1px;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
      }
      .content>*>* {
         overflow: hidden;
         border: 1px solid grey;
         flex-grow: 0;
         flex-shrink: 0;
      }
      .content>:nth-child(1)>:nth-child(1) {
         flex-basis: 26%;
      }
      .content>:nth-child(1)>:nth-child(2) {
         flex-basis: 24%;
      }
      .content>:nth-child(1)>:nth-child(3) {
         flex-basis: 50%;
      }
      .content>:nth-child(2)>:nth-child(1) {
         flex-basis: 40%;
      }
      .content>:nth-child(2)>:nth-child(2) {
         flex-basis: 40%;
      }
      .content>:nth-child(2)>:nth-child(3) {
         flex-basis: 20%;
      }
empfehlen.

Gruss

MrMurphy
Mit Zitat antworten
  #9 (permalink)  
Alt 21.05.2017, 22:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.05.2017
Beiträge: 5
Kwasimudu befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

okay das ist doch schon mal klasse.
Danke!!! Das ist echt toll!


Ich habe die Width der Seiet (content) jetzt auf 100% gesetzt.
Das funktioniert auch super.
Jetzt frag ich mich noch, wie ich z.B. die Spalte mit dem Inhalt " <h1>Tabellendarstellung</h1>" fixieren kann, sprich das "Feld" soll sich nicht erweitern, wenn mehr Text drin steht.


Danke und ein schönen Wochenanfang!
Mit Zitat antworten
Sponsored Links
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
Problem beim ein/ausblenden von Spalten in Tabellen via CSS und JavaScript chrisol_76 CSS 2 21.07.2008 17:37
drei Spalten gleich hoch, bei verschiedenen Inhalten michi-muc CSS 1 07.11.2007 16:46
3 dynam. Spalten mit Inhaltsüberlauf spacegaier CSS 6 12.10.2007 00:24
3 Spalten immer gleich hoch. Wie mach ich das? Fanello CSS 7 21.02.2006 15:39
Tooltip für Spalten ? SolCom (X)HTML 0 21.11.2005 15:26


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:02 Uhr.