RPG-Maker Quartier
http://forum.rpg2000.4players.de/phpBB3/

Layout für Webseite ohne Table
http://forum.rpg2000.4players.de/phpBB3/viewtopic.php?f=9&t=98943
Seite 1 von 1

Autor:  TheWhiteShadow [ So Jun 23, 2013 18:29 ]
Betreff des Beitrags:  Layout für Webseite ohne Table

Hallo,

Ich versuch grad mein Layout zu optimieren und schaff es nicht ohne eine Tabelle. Wenn es nun so ist, ist es auch egal, möchte aber gerne wissen ob es nicht doch über css geht.
Ich möchte links einen Hauptteil variabler breite und rechts eine Sidebar mit fixer Breite.
Problem ist, dass sich der Haupteil immer über oder unter der Sidebar schiebt, statt daneben zu bleiben.

Folgender Code zeigt meinen Testfall.
Die oberen Container verhalten sich bei Änderung der Größe korrekt, sind aber mit einer table angeordnet, die unteren nicht.
Code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">

table
{
   border-collapse:collapse;
}

table, th, td
{
   width: 100%;
   border: none;
}

table td
{
   vertical-align:top;
}

.main
{
   display: inline-block;
   background-color: #0FF;
   width: 100%;
}

.side
{
   background-color: #FF0;
   float: right;
   height: 60px;
   width: 20em;
}

</style>
</head>
<body>
   <table><tr>
   <td><div class="main">Hauptteil<br/>blub blub blub blub blub blub blub blub blub blub blub blub blub blub blub blub blub blub blub blub blub blub blub blub </div></td>
   <td><div class="side">Sidebar</div></td>
   </tr></table>

   <div class="main">Hauptteil<br/>blub blub blub blub blub blub blub blub blub blub blub blub blub blub blub blub blub blub blub blub blub blub blub blub </div>
   <div class="side">Sidebar</div>
</body>
</html>


Jemand ne Ahnung?

Autor:  Xardas der Dunkle [ So Jun 23, 2013 19:54 ]
Betreff des Beitrags:  Re: Layout für Webseite ohne Table

DIV haben immer die volle Breite, daher brauchst du das 100% nicht und auch das display: inline-block ist eher kontraproduktiv.
Elemente die Rechts gefloatet werden müssen vor dem daneben liegenden Element definiert werden.

Code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.main
{
   background-color: #0FF;
   margin-right: 21em; /* Kannst du auch weglassen, sorgt nur dafür das die box nicht unter die Sidebar rutscht. */
}

.side
{
   background-color: #FF0;
   float: right;
   height: 60px;
   width: 20em;
}

</style>
</head>
<body>
   <div class="side">Sidebar</div>
   <div class="main">Hauptteil<br/>blub blub blub blub blub blub blub blub blub blub blub blub blub blub blub blub blub blub blub blub blub blub blub blub </div>
</body>
</html>

Autor:  TheWhiteShadow [ So Jun 23, 2013 20:36 ]
Betreff des Beitrags:  Re: Layout für Webseite ohne Table

jo, width 100% + inline-block haben die gleiche Wirkung wie block.

Zitat:
/* Kannst du auch weglassen, sorgt nur dafür das die box nicht unter die Sidebar rutscht. */

Das ist doch genau das was ich gesucht hab.
"Den Offset auf einer Seite durch margin definieren."

Sollte ich eigentlich wissen. Mein html/css Kurs ist nur schon fast 2 Jahre her, da kann man auch so was simples mal vergessen.

Danke.

mfg TWS

Autor:  Xardas der Dunkle [ So Jun 23, 2013 20:43 ]
Betreff des Beitrags:  Re: Layout für Webseite ohne Table

Zitat:
jo, width 100% + inline-block haben die gleiche Wirkung wie block.

Nicht ganz ... bei width: auto; wird padding und margin mit einbezogen, während 100% immer + padding, margin, border zählt. Folge ist das eine Box mit 100% Breite und nem Padding plötzlich breiter ist als gewollt.

Autor:  TheWhiteShadow [ Mo Jun 24, 2013 19:18 ]
Betreff des Beitrags:  Re: Layout für Webseite ohne Table

Ich hab ein neues oder eher ein Folgeproblem:
Da ich als Inhalt wiederum floats benutze, springt der Inhalt beim ersten clear: right; unterhalb der Sidebar.
Lässt sich das irgendwie vermeiden oder muss ich doch ne Tabelle nehmen?

Code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">

body *
{
   margin: 1em;
}

.main
{
   margin-right: 22em;
   background-color: #0FF;
}

.side
{
   background-color: #FF0;
   float: right;
   width: 20em;
}

.left { float: left; }
.right { float: right; }
.clear { clear: both; }

</style>
</head>
<body>
   <div class="side">
   <h1>Sidebar</h1>
   <p>Seite 1</p>
   <p>Seite 2</p>
   <p>Seite 3</p>
   <p>Seite 4</p>
   <p>Seite 5</p>
   </div>
   <div class="main">
      <h1>Hauptteil</h1>
      <p class="left">Links</p>
      <p class="right">Rechts</p>
      <!-- Dieses Element mach Probleme -->
      <hr class="clear" />
      <p>blub blub blub blub blub blub blub blub blub blub blub blub blub blub blub blub blub blub blub blub blub blub blub blub</p>
   </div>
</body>
</html>

Autor:  Xardas der Dunkle [ Mo Jun 24, 2013 21:45 ]
Betreff des Beitrags:  Re: Layout für Webseite ohne Table

Es gibt keinen direkten Weg.
Aber des wegen muss man noch lange keine Tabellen nehmen, die sind nicht für Layouts gedacht.

Es geht eigentlich nur mit Wrapper Elementen:

Variante eins, #main wie gehabt mit einem Inhalts div welches gefloatet ist.
Hier geht #main weiterhin bis ans Ende von #side aber wenigtens springt der Text nicht mehr nach unten. Damit #main auch nicht bis nach unten geht würde man noch einen weiteres div benötigen.

http://jsbin.com/ujiyad/1/edit

Variante zwei beide #main und #side haben %-tuale Breiten und sind beide gefloatet.
Aber auch hier wrapper divs, damit padding und Prozentangabe nicht addiert werden.

http://jsbin.com/alagal/1/edit

Autor:  TheWhiteShadow [ Mo Jun 24, 2013 23:00 ]
Betreff des Beitrags:  Re: Layout für Webseite ohne Table

danke, hat geholfen. :D

edit:
Fürs Ergebnis, folge dem Link in meiner Signatur.

Autor:  Fryie [ So Jun 30, 2013 23:39 ]
Betreff des Beitrags:  Re: Layout für Webseite ohne Table

Die definitive Referenz für dreispaltige Layouts dürfte wahrscheinlich dieser alistapart-Artikel sein.

Illustriert auch schön, wieso CSS fundamental kaputt ist, wenn ein absolutes Standardlayout wie dieses "holy grail" genannt werden muß. Tabellen sind aber in der Tat kaum besser.
Mit CSS3 gibt es glaub ich langsam bessere Alternativen, etwa FlexBox, aber dazu weiß ich nix bzw. Browser-Support ist wahrscheinlich auch noch etwas eingeschränkt.

Autor:  Xardas der Dunkle [ Mo Jul 01, 2013 16:58 ]
Betreff des Beitrags:  Re: Layout für Webseite ohne Table

Es gibt genug Gründe wieso man Jahre lang meist an starren Web-Designs fest gehalten hat. Und das CSS es nicht anders kann ist eher nicht der Hauptgrund.
Momentan entwickelt sich das Internet aber wieder etwas weg von diesen komplett starren Desings zu sogenannten Responsive Web-Designs. Hier liegt zwar ein starres Design zu Grunde, dieses wird aber für verschiedene Auflösungen optimiert: Desktop-Widescreen, Desktop, Tablets, Smartphone.

Autor:  Fryie [ Mo Jul 01, 2013 19:17 ]
Betreff des Beitrags:  Re: Layout für Webseite ohne Table

Das hat nichts mit starr oder nicht starr zu tun, sondern daß Vanilla CSS ganz einfache Layout-Strukturen schlecht umsetzen kann. Ein so langer Artikel (+ die gesamte Historie) für ein einfaches 3-Spalten-Layout bedeutet, daß da etwas schiefgeht; das Floating-Prinzip ist, für diese Aufgabe, einfach fundamental ungeeignet. FlexBox (und andere) ist nur ein lange nötiges gridbasiertes System wie es blueprint, bootstrap etc. schon lange ermöglichen - nur halt dann ohne den Sourcecode mit nicht-semantischen Klassen zuzumüllen.

Um die Frage, ob liquid, fluid oder elastic geht es dabei erst einmal nicht.

Autor:  Xardas der Dunkle [ Mo Jul 01, 2013 19:52 ]
Betreff des Beitrags:  Re: Layout für Webseite ohne Table

Solange man Layouts mit festen Breiten umsetzt, macht das bisherige floating Konzept aber keine Probleme.
Ansonsten empfehle ich nach wie vor http://960.gs/ dann brauch man sich ums floating selber keine Sorgen zu machen :D.

Autor:  Fryie [ Mi Jul 03, 2013 15:12 ]
Betreff des Beitrags:  Re: Layout für Webseite ohne Table

Xardas der Dunkle hat geschrieben:
Solange man Layouts mit festen Breiten umsetzt, macht das bisherige floating Konzept aber keine Probleme.

Da ist es zweifelsohne einfacher, aber doch: gleich hohe Spalten sind auch bei festen Breiten nicht ohne weiteres möglich - zumindest nicht bei dynamischen Content.

Zitat:
Ansonsten empfehle ich nach wie vor http://960.gs/ dann brauch man sich ums floating selber keine Sorgen zu machen :D.

Die Existenz solcher Frameworks ist doch eben genau case in point daß Vanilla CSS diese Layoutanforderungen nicht trivialerweise erfüllt; ich glaube dazu war es ursprünglich nämlich auch nie gedacht. Frameworks haben natürlich auch ihre Probleme - so legt man etwa Layoutanweisungen wie Spaltenbreiten im HTML-Code fest, was unschön ist. Nichtsdestotrotz hab ich auch schon Blueprint etc. verwendet, einfach weil es simpler ist.
Flexbox oder CSS grids sind aber für mich tatsächlich eine viel zukunftsträchtigere Alternative, nur wird der Browser-Support lange genug auf sich warten lassen - insbesondere da man die ganzen alten Browser ja so schwer vom Markt kriegt.

Seite 1 von 1 Alle Zeiten sind UTC + 1 Stunde
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/