• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Wie kriege ich dieses Layout hin?

P

paoloposo

Mitglied
Sorry für den nichts-sagenden Titel, aber ich konnts halt nicht beschreiben ;-)

Also, wie kriege ich das hier programmiertechnisch hin? Dazu sei gesagt, das Alle Elemente als ganzes Zentriert werden sollen!
Das ist prinzipiell kein Problem, aber die Container "Sidebar" und "Inhalt" sind unterschiedlich groß, je nach dem was ihr Inhalt ist. Wie kriege ich es hin, dass diese beiden Container immer gleich groß sind, also die Größe sich nach dem größeren der beiden Container richtet (und das unabhängig davon, wie viel Inhalt drin ist)?

Hier ein Link, wo ich das beschriebene haben will: activegaming.de/neu
 
Zuletzt bearbeitet:
CSS Code :

Code: 
*{margin: 0;padding: 0;border: 0;}
html{font-family: Arial;}
div#wrapper{margin: 0 auto;margin-top: 20px;width: 90%;}
div#header{height: 150px;background: #2684F1;border: 5px solid #000000;}
div#header h1{text-align: center;padding-top: 50px;}
div#sidebar{float: left;width: 45%;background: #E8FF00;height: 600px;border: 5px solid #000000;margin-top: 50px;}
div#sidebar h1{text-align: center;padding-top: 300px;}
div#content h1{text-align: center;padding-top: 300px;}
div#content{float: right;width: 45%;background: #00FF03;height: 600px;border: 5px solid #000000;margin-top: 50px;}

HTML Code :

HTML: 
<!DOCTYPE html>
<html>
<head>
 <title>Design</title>
 <link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
 <div id="wrapper">
  <div id="header">
   <h1>Menü</h1>
  </div>
  <div id="sidebar">
   <h1>Sidebar</h1>
  </div>
  <div id="content">
   <h1>Inhalt</h1>
  </div>
 </div>
</body>
</html>

Ich hoffe es ist so gemint, wie du dachtest. :D
 
@vitus37:
Soweit ich das verstanden habe funktioniert Faux Columns nur mit einfachen Hintergründen und eckigen Rahmen, oder?
Das fällt dann leider auch weg. :???:

@didi_55:
So wollte ich es eigentlich nicht - Sidebar und Inhalt sollen schließlich keine feste Höhe haben.
Einen Wrapper habe ich auf meiner Site ja auch, aber das machts nicht besser.
 
Wird wohl vorerst die beste Lösung sein, aber es hat halt nicht jeder JavaScript aktiviert.
Bei Gelegenheit probiere ich mal aus, die Container Sidebar und Inhalt gegen eine Tabelle auszutauschen, da ja jede Zelle in einer Zeile die gleiche Größe hat.
 
Okay, so modifiziert funktioniert der Code:

<script type="text/javascript">
var sidebar = $('#sidebar').height();
var inhalt = $('#inhalt').height();
if (sidebar > inhalt){ $('#inhalt').css('height', sidebar); }
else{ $('#sidebar').css('height', inhalt); }
</script>
Zum Vergrößern anklicken....

Ups, wie kann ich Code anzeigen?
Und warum bitte nicht, was soll denn der Nachteil einer Tabelle sein, das unterstützen doch alle gängigen Browser, oder nicht?
 
activegaming.de.to schrieb:
Und warum bitte nicht, was soll denn der Nachteil einer Tabelle sein, das unterstützen doch alle gängigen Browser, oder nicht?
Zum Vergrößern anklicken....

Es ist semantisch schlecht und darüber hinaus unnötig komplex, ein modernes, responsives und crossbrowser-komaptibles Seitenlayout mittels Tabellen zu schreiben. Ich musste so etwas letztens tatsächlich mal machen und habe mir dabei fast die Finger gebrochen. Weil weder deprecated Tags noch JavaScript oder Browserhacks erlaubt waren.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben