Es handelt sich um folgende Testseite: Larry’s Tanzhaus
Sodele…
Die zwei oberen Div Container sind so wie sie sein sollen, leider jedoch nicht die beiden unteren.
Ich hätte ganz gerne das der rechte Container nur den roten Hintergrund hat und das Hintergrundbild „leftcorner.gif“. Momentan erstreckt sich dieser aber über die beiden unteren Container. Hätte es aber gerne nur beim rechten.
Was hab ich das versaubeutelt?
Grtz Chrille
hmm erstens kommt bei mir nur url not found
und zweitens würde ich es mal so versuchen dass das huntergrundbild in den linken container rein tust
Hat sich erledigt^^ Hatte was bei den Angaben verkehrt gemacht und jetzt gehts wieder… hatte die Datei schon vorher wieder runter genommen!
Grtz Chrille
oke kann man hier eigentlich auch *closen ??
wenn ja dann close please
Na jut, hab ein neues Problem 
Die Website als erstes: Larry’s Tanzhaus
Sodele…
Das Layout besteht im Prinzipt aus einer einfachen Tabelle 2x2!
Jetzt hätt ich aber die einzelnen Größen der Spalten ganz genau definiert.
Z.B. die Spalte wo die Navi zu finden ist, genau 130px weit. Aber irgendwie…
Ich schätze ich verplane da irgend einen Befehl oder dergleichen!
Helft mir!
Grtz Chrille
oke mal von grund auf
CSS 4 You - The Finest in Stylesheets
solltest du wirklich dringend mal durchgehen
wäre ebenfalls noch eine Idee
Du… ich versuch mich schon so weit es geht an den Sachen zu halten…
Aber meinem Problem hat das nicht geholfen!
Grtz Chrille
nochmal ein bisschen deutlicher
Keine Tabellen zum Layouten
schau dir die beiden links an und arbeite dich in das thema css hinein
oder kauf dir bücher, besuch einen kurs etc etc
es gibt genug möglichkeiten modernes webdesign zu erlernen.
mfg devilseye
Nur weil es deine Meinung ist das man damit kein Layout machen sollte ist es noch lange nicht meine Meinung.
Vielen Dank für deine Hilfe…
Man sollte einen User dabei helfen ihm bei seinem Problem zu helfen und ihn nicht zu einer anderen Idee überreden.
Grtz Chrille
Gib den beiden td-Tags in der Spalte die Breite width: 130px; (am besten über eine CSS-Klasse). Eventuell musst du dazu auch den beiden anderen td-Elementen in der anderen Spalte eine Breite geben und der Tabelle insgesamt ebenfalls. Also meinetwegen: Gesamtbreite: 800px, Breite erste Spalte: 130px, Breite zweite Spalte: 670px. Das sollte ungefähr passen. Vermutlich müsstest du dann noch cell-spacing und cell-padding für das table-Element auf 0 setzen oder dergleichen.
Man sollte einen User dabei helfen ihm bei seinem Problem zu helfen und ihn nicht zu einer anderen Idee überreden.
Na ja, sollte man ihn nicht aber auch darauf hinweisen, wenn er einen falschen Ansatz verfolgt?
Der hauptsächliche Einwand gegen Tabellenlayouts ist: Eine Client-Anwendung denkt, dass an der Stelle tabellarische Daten dargestellt werden. Das mag in einem normalen Browser von der Darstellung hinhauen, weil Platz da ist. Kritisch wird es auf kleineren Displays, die unter Umständen von sich aus versuchen würden, Elemente linear untereinander anzuordnen und/oder einfach das Stylesheet zu überschreiben. Das würde bei einem Tabellenlayout in vielen Fällen nicht funktionieren, da der Client eben davon ausgehen muss, dass hier tabellarische Daten vorliegen, die untereinander angeordnet keinen Sinn ergeben würden.
Gleiches gilt für die Druckversion einer Seite. Ein Float-Layout kann in den meisten Fällen von der Print-Routine eines Clients/Browsers wunderbar in eine halbwegs sinnvolle, linear angeordnete Variante überführt werden. Das heißt nicht, dass jedes Tabellenlayout schlecht ausdruckbar wäre, aber es bleibt ein grundsätzlicher konzeptioneller Vorteil von Float-Layouts.
Kurzversion: Es ist semantisch falsch, Tabellen zu Layoutzwecken einzusetzen. Eine korrekte Semantik ist aber der einzige Weg, eine Seite zu schaffen, die auf jedem Client für jeden Benutzer verwendbar ist.
Das hilft mir schon einmal weiter. Mit der Erklärung warum man keine Tabellen zum Design nehmen soll, die überzeugt mich, weil ich sie verstehe und nicht nur einen „plumpen“ Satz lesen darf.
Aber wie z.b sollte das Quelltext mäßig dann aussehn?
Zwei DIV Container per float:Left; nebeneinander und per clean:Left; beenden.
Darunter dann noch einmal zwei DIV mit float und clear, wo die Navigation und der Inhalt hin kommt.
Selbiges sollte dann alles in einem DIV Container den ich per margin:auto; zentrieren lasse und die Höhe auf 100% festlege und die Breite fest lege.
In der CSS steht dann zusätzlich im „html“ und „Body“ 100% width und hight.
Damit sollte es dann doch funktionieren, und der Inhalt ohne Probleme darstellbar sein!
Gruß Christian
[html]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>New</title>
<style type="text/css">
/**
* new clearfix
*
* @see http://perishablepress.com/press/2009/12/06/new-clearfix-hack/
*/
.clear:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clear { zoom: 1; } /* IE6 */
*:first-child+html .clear { zoom: 1; } /* IE7 */
.left {
float: left;
}
.right {
float: right;
}
body {
margin: 0;
padding: 0;
/* Data URI. Should be replaced with path to external image file */
background: #fff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANwAAAABCAIAAAA6mFcnAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMBw4uC7Edvf8AAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAEklEQVQoz2P8v1WJYRSMgsEEAMAlAdgq6OnoAAAAAElFTkSuQmCC') top left repeat-y;
}
#header {
background: #ffb522;
padding: 10px;
min-width: 960px;
/* #content.min-width + #content.padding
+ #content.margin-left */
}
#header img {
display: block;
border: none;
}
#sidebar {
float: left;
width: 200px;
padding: 120px 10px 10px 10px;
}
#content {
margin-left: 220px;
min-width: 600px;
padding: 70px;
background: #fff url('http://larrystanzhaus.de/bilder/leftcorner.gif') top left no-repeat;
}
</style>
<!--[if IE 6]>
<style type="text/css">
/*
- There is no support for min-width in IE6
- IE6 does not support data URIs
*/
/* Holly Hack -- fixes IE6 Three Pixel Text-Jog */
#content { zoom: 1; }
</style>
<![endif]-->
</head>
<body>
<div id="header" class="clear">
<div class="logo-larry left">
<a href="./"><img src="http://larrystanzhaus.de/bilder/larrystanzhaus.gif" alt="Logo von Larry's Tanzhaus" /></a>
</div>
<div class="logo-adtv right">
<a href="./"><img src="http://larrystanzhaus.de/bilder/ADTV.gif" alt="Logo des ADTV" /></a>
</div>
</div>
<div id="sidebar">
<ul>
<li>Tanzkurse</li>
<li>Spezialkurse</li>
<li>Kindertanz</li>
<li>Teenager</li>
<li>Kontakt</li>
<li>Über uns</li>
<li>…</li>
</ul>
</div>
<div id="content">
<h2>Aktuelle Termine für Stufe A</h2>
<p>Wir würden Sie darum bitten uns vorher Bescheid zu geben, ob Sie sich für einen unserer Anfänger Kurse interessieren.</p>
<p>So können wir uns besser darauf vorbereiten wie viele Kursus-Teilnehmer an diesem Tag erscheinen werden.</p>
<p>Vielen Dank</p>
<p>Fusce dapibus, massa at mollis sollicitudin, justo ligula porta diam, a scelerisque quam magna posuere justo. Suspendisse potenti. Sed nisl nisi, sodales id varius id, suscipit ac ipsum. Integer tempor magna ut neque malesuada quis pretium nisi tempor. Sed dapibus dui non neque semper id pulvinar mi tristique. Suspendisse erat velit, viverra ultrices consectetur ut, feugiat a turpis. Aliquam purus purus, malesuada ut aliquam sed, luctus et sapien. Vestibulum pellentesque scelerisque metus at placerat. Pellentesque diam orci, fermentum vel fringilla ut, fringilla et diam. Nulla facilisi. Nulla velit nisl, mattis eu malesuada vitae, eleifend at odio. Ut vitae venenatis enim. Morbi in nibh quam, venenatis rhoncus quam. Curabitur iaculis pulvinar mattis. Mauris vel sem nibh. Nunc gravida tortor id orci ultricies adipiscing.</p>
</div>
</body>
Sehr geile Sache! Vielen dank dir dafür! Bist mir echt eine große Hilfe
Ich glaube ich hatte das noch nicht so ganz mit dem float und clear verstanden und dank dir ist mir das jetzt klarer.
Na, ich werde mal die Tage die Seite noch einmal hier bebauen und dann mich nochmal hier melden!
Vielen lieben dank dir!
Grtz Chrille
http://larrystanzhaus.de/temp/
Das ist jetzt was ich selber mit Hilfe des oberen Programmcodes gebastelt habe.
Jedoch hab ich direkt zwei Probleme. Wie kriege ich den Inhalt direkt auf die 100% Höhe ohne einen Scrollbalken zu erschaffen,
und warum fehlt in den zwei rechten Container auf einmal das Padding von 5px?
Grtz Chrille
PS: Ich weiß ich habe den Code dort oben, dennoch möchte ich gerne meinen eigenen Quelltext schreiben
PPS: Du hast nirgends die Höhe angegeben, warum zieht er sie dennoch auf immer 100% an?
Ich komme meiner Sache immer näher… nun habe ich das hier erschaffen:
body {
color:white;
margin:0;
padding:0;
width:100%;
height:100%;
}
div {
padding:5px 0px 5px 5px;
}
.left {
float:left;
}
.right {
float:right;
}
div.inhalt1 {
width:1024px;
height:100%;
background-color:black;
margin:auto;
padding:0;
}
div.inhalt2 {
background-color:lightgrey;
color:black;
height:100px;
}
div.inhalt3 {
background-color:grey;
width:130px;
}
div.inhalt4 {
background-color:white;
color:black;
width:884px;
}
.left {
float:left;
}
.right {
float:right;
}
.clear {
clear:both;
}
<div class="inhalt1">
<div class="inhalt2">Header</div>
<div class="inhalt3 left">Navi</div>
<div class="inhalt4 left">Inhalt</div>
</div>
Jetzt habe ich oben einen Header, links eine Spalte für die Navigation und rechts die Spalte für den Inhalt.
Wie bekomme ich jetzt die Navigation und den Inhalt dazu, sich bis unten an den Browserrand zu schieben, ohne dabei einen Scrollleiste zu erzeugen?
Grtz Chrille
PPS: Du hast nirgends die Höhe angegeben, warum zieht er sie dennoch auf immer 100% an?
Ich habe dem body-Element eine Hintergrundgrafik gesetzt („Faux Columns“-Technik, siehe Wiki). Das Data-URI-Base64-Zeugs. Das habe ich allerdings nur deshalb „inline“ gesetzt, weil ich keine Lust hatte, die Grafik irgendwo hochzuladen, damit mein Beispiel funktioniert. Du kannst (solltest) in den orangenen Bereich unter dem Menü einen Rechtsklick machen, dann „View Background Image“ auswählen und die Grafik irgendwo speichern und den Data-URI im CSS durch einen normalen Link ersetzen.
„Faux Columns“ ist auch die (beziehungsweise eine einfache) Antwort auf dein aktuelles Problem, denke ich. Da muss man bei CSS ein wenig mogeln.
Verwende übrigens unbedingt einen DOCTYPE.
Vielen dank für die Information und für den Link.
Dieses sogenannte „Mogeln“ ist also ein validiertes umgehen des CSS, oder wie? GG
Da ich gerade auf Arbeit bin und die Daten nicht parat habe hier auf dem System, werde ich es Zuhause noch einmal Probieren und diesen Trick anwenden. Dann werde ich mal schauen ob das funktioniert und mich gegebenfalls noch einmal melden.
Einen Doctype verwende ich immer, jedoch nicht bei html’s, wenn ich eben was ausprobieren mag, also da keine Angst.
Habe mir auch nochmal die Definition für id und class durchgelesen und den Grund warum man lieber DIVs nehmen sollte als TD usw.
Ich danke schon mal für alle Informationen und euch weiterhin viel Spaß beim helfen 
Grtz Chrille
Na ja, es ist in dem Sinne kein wirkliches Mogeln, es ist an der Stelle eben nicht das, was man vermutlich spontan erwarten würde. Naheliegend wäre es wohl, ein Element mit einer Höhe von 100 % auszustatten. Das funktioniert aber aus verschiedenen Gründen nicht besonders gut, weshalb oft die „Faux Columns“ eingesetzt werden. Syntaktisch und semantisch ist das völlig legitim.
Einen Doctype verwende ich immer, jedoch nicht bei html’s, wenn ich eben was ausprobieren mag, also da keine Angst.
Auch da solltest du ihn aber verwenden, denn Browser stellen HTML/CSS anders da, wenn kein DOCTYPE gesetzt wird (Quirksmode vs. Standardmode).
http://www.larrystanzhaus.de/temp/index.html
So… alles selbst gebaut!
Jetzt habe ich nur noch 3 Fragen:
Grtz Chrille
PS: Hab die Foux Colums Methode angewandt
Zu 1: Welches Problem genau?
Zu 2: Ein einführender Artikel zu Floats ist dazu vielleicht ganz hilfreich. Siehe in der Quellensammlung.
Zu 3: Setze am besten ausreichend padding, sodass .inhalt immer größer ist als das Hintergrundbild. Und siehe mein Beispiel: Es ist nicht unbedingt notwendig, .inhalt auch zu floaten.