RPG-Maker Quartier

Hier dreht sich alles um die RPG-Maker-Reihe von ASCII/Enterbrain. Der RPG-Maker ist ein Tool, mit dem du dir dein eigenes kleines Rollenspiel erstellen kannst. Du findest hier alles, was du dazu brauchst. Aber natürlich umfasst die Community noch mehr!
Aktuelle Zeit: So Sep 22, 2019 7:56

Alle Zeiten sind UTC + 1 Stunde



Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast



Ein neues Thema erstellen Auf das Thema antworten  [ 12 Beiträge ] 
Autor Nachricht
Offline
Schweizer Reiter
Schweizer Reiter
Benutzeravatar
Beiträge: 379
 Betreff des Beitrags: Layout für Webseite ohne Table
BeitragVerfasst: So Jun 23, 2013 18:29 
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?

_________________


Nach oben
 Profil  
Mit Zitat antworten  
Offline
Attention-whore
Attention-whore
Benutzeravatar
Beiträge: 1583
Alter: 30
Wohnort: /var/www
 Betreff des Beitrags: Re: Layout für Webseite ohne Table
BeitragVerfasst: So Jun 23, 2013 19:54 
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>


Nach oben
 Profil  
Mit Zitat antworten  
Offline
Schweizer Reiter
Schweizer Reiter
Benutzeravatar
Beiträge: 379
 Betreff des Beitrags: Re: Layout für Webseite ohne Table
BeitragVerfasst: So Jun 23, 2013 20:36 
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

_________________


Nach oben
 Profil  
Mit Zitat antworten  
Offline
Attention-whore
Attention-whore
Benutzeravatar
Beiträge: 1583
Alter: 30
Wohnort: /var/www
 Betreff des Beitrags: Re: Layout für Webseite ohne Table
BeitragVerfasst: So Jun 23, 2013 20:43 
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.


Nach oben
 Profil  
Mit Zitat antworten  
Offline
Schweizer Reiter
Schweizer Reiter
Benutzeravatar
Beiträge: 379
 Betreff des Beitrags: Re: Layout für Webseite ohne Table
BeitragVerfasst: Mo Jun 24, 2013 19:18 
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>

_________________


Nach oben
 Profil  
Mit Zitat antworten  
Offline
Attention-whore
Attention-whore
Benutzeravatar
Beiträge: 1583
Alter: 30
Wohnort: /var/www
 Betreff des Beitrags: Re: Layout für Webseite ohne Table
BeitragVerfasst: Mo Jun 24, 2013 21:45 
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


Nach oben
 Profil  
Mit Zitat antworten  
Offline
Schweizer Reiter
Schweizer Reiter
Benutzeravatar
Beiträge: 379
 Betreff des Beitrags: Re: Layout für Webseite ohne Table
BeitragVerfasst: Mo Jun 24, 2013 23:00 
danke, hat geholfen. :D

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

_________________


Nach oben
 Profil  
Mit Zitat antworten  
Offline
Archmaester of the Citadel
Archmaester of the Citadel
Beiträge: 6468
 Betreff des Beitrags: Re: Layout für Webseite ohne Table
BeitragVerfasst: So Jun 30, 2013 23:39 
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.


Nach oben
 Profil  
Mit Zitat antworten  
Offline
Attention-whore
Attention-whore
Benutzeravatar
Beiträge: 1583
Alter: 30
Wohnort: /var/www
 Betreff des Beitrags: Re: Layout für Webseite ohne Table
BeitragVerfasst: Mo Jul 01, 2013 16:58 
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.


Nach oben
 Profil  
Mit Zitat antworten  
Offline
Archmaester of the Citadel
Archmaester of the Citadel
Beiträge: 6468
 Betreff des Beitrags: Re: Layout für Webseite ohne Table
BeitragVerfasst: Mo Jul 01, 2013 19:17 
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.


Nach oben
 Profil  
Mit Zitat antworten  
Offline
Attention-whore
Attention-whore
Benutzeravatar
Beiträge: 1583
Alter: 30
Wohnort: /var/www
 Betreff des Beitrags: Re: Layout für Webseite ohne Table
BeitragVerfasst: Mo Jul 01, 2013 19:52 
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.


Nach oben
 Profil  
Mit Zitat antworten  
Offline
Archmaester of the Citadel
Archmaester of the Citadel
Beiträge: 6468
 Betreff des Beitrags: Re: Layout für Webseite ohne Table
BeitragVerfasst: Mi Jul 03, 2013 15:12 
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.


Nach oben
 Profil  
Mit Zitat antworten  
Beiträge der letzten Zeit anzeigen:  Sortiere nach  
Ein neues Thema erstellen Auf das Thema antworten  [ 12 Beiträge ] 

Alle Zeiten sind UTC + 1 Stunde


Du darfst keine neuen Themen in diesem Forum erstellen.
Du darfst keine Antworten zu Themen in diesem Forum erstellen.
Du darfst deine Beiträge in diesem Forum nicht ändern.
Du darfst deine Beiträge in diesem Forum nicht löschen.
Du darfst keine Dateianhänge in diesem Forum erstellen.

Suche nach:
Gehe zu:  
cron
Powered by phpBB® Forum Software © phpBB Group
Deutsche Übersetzung durch phpBB.de