Positionierung mit CSS

Computer: Software & Programmierung HTML & CSS
#1

Hallo,

ich tätige gerade meine ersten Schritte mit CSS und stehe vor folgendem Problem: Ich möchte, dass die Klasse „Hintergrund“ als Container für den gesamten Inhalt automatisch nach unten mitwächst. Im IE 6.0 funktioniert das auch, Firefox 3.0 schneidet sie allerdings nach „Header“ ab. Es befindet sich also nur „Header“ in „Hintergrund“, „Haupttext“ und „Tipps“ liegen außerhalb.

Die CSS-Datei:
body {
margin: 0;
padding: 0;
width:100%;
height:100%;
background-color: #000000;
}
.hintergrund {
background-color: #CC3300;
width: 900px;
position: relative;
margin: auto;
height: auto;
}
.header {
background-color: #FFCC00;
width: 800px;
height: 150px;
position: relative;
margin: 20px;
}
.haupttext {
background-color: #99CCFF;
width: 60%;
height: 150px;
position: relative;
margin: 20px;
float: left;
}
.tipps {
background-color: #00FF99;
width: 20%;
height: 150px;
position: relative;
margin: 20px;
float: right;
}

Und die Index-Datei:

Unbenanntes Dokument Raum für den Inhalt von class „hintergrund“
Raum für den Inhalt von class „header“
Raum für den Inhalt von class „haupttext“
Raum für den Inhalt von class „tipps“

Ich bin mit meinem Latein am Ende.

Gruß und Danke vorab
Müller

#2

Hallo Müller,

.hintergrund {
background-color: #CC3300;
width: 900px;
position: relative;
margin: auto;
height: auto;

overflow: auto;

}

Gruß
Klaus

#3

Perfekt - Danke und Sternchen!
.

#4

.

#5

Moin,

ich tätige gerade meine ersten Schritte mit CSS

Dann solltest Du aber nicht sofort mit relativer Positionierung ankommen. Anfänger brauchen „position“ gar nicht, das ist nämlich auch nicht ganz trivial. Die Eigenschaft ist ja nicht nur zum Positionieren da, sie nimmt die Elemente auch noch aus dem Textfluss. Außerdem kann sich so nichts nach der Größe des Viewports richten (wenn z.B. keine zwei Elemente mehr nebeneinander passen).

Anfänger machen oft den Fehler, dass sie denken, mit position könnten sie endlich alle Elemente einer Seite fest positionieren, dass das das NonPlusUltra beim Webdesign wäre. Aber das ist es nicht.

Einfacher lassen sich Elemente mit „float“ und „margin“ positionieren. Da übernimmt die größte Aufgabe dann der Browser, der das auch viel besser kann als der Webmaster.

Ich möchte, dass die Klasse „Hintergrund“

Ganz wichtig: Es gibt bei Dir keine Klasse mit dem Namen!

Ich bin mit meinem Latein am Ende.

Was ich an Deinem Code außerdem sehe: Du scheinst HTML noch nicht zu können. Dein Code ist semantsich falsch. CSS funktioniert nur sinnvoll und logisch und ist einfach, wenn die Basis aus HTML stimmt. Da scheinst Du aber noch Nachholbedarf zu haben.

Ich empfehle Dir für den Einstieg folgende Seite, da wird HTML ausnahmsweise mal wirklich richtig erklärt. Bei den meisten Menschen hapert es nämlich am Verständnis für HTML!
http://fwpf-webdesign.de/einfuehrung

Liebe Grüße,
-Efchen

#6

Hallo,

okay, ich habe position rausgenommen, die Blöcke mit margin ausgerichtet und unten noch einen Block angefügt.

Ich möchte, dass die Klasse „Hintergrund“

Ganz wichtig: Es gibt bei Dir keine Klasse mit dem Namen!

Sondern?

Was ich an Deinem Code außerdem sehe: Du scheinst HTML noch
nicht zu können. Dein Code ist semantsich falsch. CSS
funktioniert nur sinnvoll und logisch und ist einfach, wenn
die Basis aus HTML stimmt. Da scheinst Du aber noch
Nachholbedarf zu haben.

Richtig, für HTML muss, von der einen oder anderen Ausnahme abgesehen, das reichen, was Dreamweaver produziert. Als ich hier vor einiger Zeit eine Seite zur Begutachtung einstellte, habe ich von dir für das Tabellenlayout herbe Kritik geerntet. Nicht ganz unberechtigt, wie ich inzwischen weiß, und die Fummelei mit der CSS-Datei macht ja auch irgendwie Spaß, aber irgendwann steht der Aufwand in keinem Verhältnis mehr zum Ergebnis. Ich kaufe mir ja auch keinen Bauernhof, nur weil ich mal ein Glas Milch trinken will. Möglicherweise sehe ich das in einem Jahr anders, aber momentan möchte ich halt nur ein einigermaßen flexibles Layout für eine relativ kleine Seite.

Um wieder konkret zu werden: Beim unteren Block „footer“ erkennt der Firefox das margin-top nicht, der IE macht keine Probleme. Ich könnte das zwar durch Vergrößerung des margin-bottom vom oberen Block ausgleichen, aber das scheint mir nicht richtig.

Die aktualisierte CSS-Datei:
body {
margin: 0;
padding: 0;
width:100%;
height:100%;
background-color: #000000;
}
.hintergrund {
background-color: #CC3300;
width: 900px;
margin: auto;
height: auto;
overflow: auto; /*lässt den Container mit dem Inhalt wachsen*/
}
.header {
background-color: #FFCC00;
width: 100%;
height: 150px;
margin-top: 20px;
margin-bottom: 20px;
}
.haupttext {
background-color: #99CCFF;
width: 60%;
height: 150px;
margin-top: 20px;
margin-bottom: 20px;
margin-right: 20px;
float: left;
}
.tipps {
background-color: #00FF99;
width: 35%;
height: 150px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
float: right;
}
.footer {
clear: both; /*macht das float rückgängig*/
background-color: #FFCC00;
width: 100%;
height: 150px;
margin-top: 20px;
margin-bottom: 20px;
}

Viele Grüße
Müller

#7

Moin Müller(Milch),

lustiger Vergleich:

Ich kaufe mir ja auch keinen Bauernhof, nur weil ich
mal ein Glas Milch trinken will.

Das Problem ist: Mit der Website hast Du einen Bauernhof, aber Du weißt nicht, wie Du die Milch herausholst. :smile:

Manfred

#8

Ganz wichtig: Es gibt bei Dir keine Klasse mit dem Namen!

Sondern?

Sie heißt „hintergrund“, nicht „Hintergrund“. Bitte nicht den bekannten Fehler von Windows nachmachen, das keinen Unterschied zwischen Klein- und Großbuchstaben erkennt. Alle anderen Betriebssysteme und die meisten Programmiersprachen machen da einen Unterschied.

Richtig, für HTML muss, von der einen oder anderen Ausnahme
abgesehen, das reichen, was Dreamweaver produziert.

Völlig unmöglich. Die Aufgabe von HTML ist, dem Inhalt eine logische Bedeutung zu geben. Das kann ein Programm nicht. Das musst allein Du machen. Möglich, dass Dreamweaver Dir die Optionen dafür gibt, aber Du musst sie dann auch anwenden.

Als ich
hier vor einiger Zeit eine Seite zur Begutachtung einstellte,
habe ich von dir für das Tabellenlayout herbe Kritik geerntet.

Was ja auch logishc ist, denn das ist einfach nur falsch.

Nicht ganz unberechtigt

Nicht ganz?

irgendwann steht der Aufwand in keinem Verhältnis mehr zum
Ergebnis.

Dann ist der Zeitpunkt gekommen, an dem man das Projekt entweder einstampft oder es einen Profi machen lässt. Natürlich bezogen auf eine öffentlich zugängliche Website.

Ich kaufe mir ja auch keinen Bauernhof, nur weil ich
mal ein Glas Milch trinken will.

Klar, aber Du solltest Deine Milch ordentlich „herstellen“, wenn Du sie anderen Menschen geben willst, und das ist ja der Sinn einer öffentlichen Website im WWW. Wenn Du die Site nur auf Deinem PC zuhause hast und sonst niemand drauf kommt, dann passt der Vergleich mit der Milch, die Du alleine trinken willst.

Um wieder konkret zu werden: Beim unteren Block „footer“
erkennt der Firefox das margin-top nicht, der IE macht keine
Probleme.

Ohne jetzt nachgesehen zu haben, solltest Du immer davon ausgehen, dass der Firefox alles richtig macht und der IE die Fehler hat. In den meisten Fällen ist das so.

Wenn Du einen Link einstellen würdest, statt nur Code, dann würde ich vielleicht drafschauen. Firebug kann noch keine Forenbeiträge analysieren.

Liebe Grüße,
-Efchen

#9

Das ewige Gemecker und was (ggf) dahintersteckt
Hallo Müller,

Was ich an Deinem Code außerdem sehe: Du scheinst HTML noch
nicht zu können. Dein Code ist semantsich falsch. CSS
funktioniert nur sinnvoll und logisch und ist einfach, wenn
die Basis aus HTML stimmt. Da scheinst Du aber noch
Nachholbedarf zu haben.

(…)
Ich kaufe mir ja auch keinen Bauernhof, nur weil ich
mal ein Glas Milch trinken will. Möglicherweise sehe ich das
in einem Jahr anders, aber momentan möchte ich halt nur ein
einigermaßen flexibles Layout für eine relativ kleine Seite.

mach dir nix draus,
manche Kritik kommt hier immer etwas scharf rüber. Dabei hat so mancher selbsternannte Held des wer-weiss-was seinen eigenen semantischen „Dreck“ am Stecken. Deren Vorteil ist aber der, dass sie natürlich ihren eigenen fehlerhaften Code keinesfalls hier posten, denn sie wüssten ja, wie man ihn korrigiert. Sie haben wahrscheinlich nur zu viel zu tun, um ihn (wieder?) valide zu machen. Stattdessen wird lieber in ausschweifenden Beiträgen an den Anfängern rumgenörgelt.

Schau z.B. mal die Seite
http://www.volkers-fahrschulen.de/vcf/news.php?id=15

Da wird von einem „Spezialisten“ im Impressum gar behauptet, die Seite validiere gegen die Vorgaben des W3C. Wer’s probiert, sieht, dass schon der Doctype (der gesamten Site) nicht ganz korrekt ist - von den Fehlern in einfachsten HTML-Auszeichungen ganz zu schweigen. Auf einer anderen Seite desselben Webangebots sind HTML-Konstrukte verkürzt und dabei so verstümmelt worden, dass sie nur durch die Gnade des Browsers noch ordentlich dargestellt werden:
http://www.volkers-fahrschulen.de/vcf/news.html

Wenn also die „Profiwebdesigner“, die hier posten, schon Projekte, die sie begleiten/unterstützen/erstellen, nicht sauber halten können, braucht man sich deren Gemecker auch nicht unbedingt zu Herzen zu nehmen.

Nichtsdestotrotz ist es natürlich gut, sich möglichst viel Mühe zu geben, eigene Fehler auszumerzen.

Viele Grüße
und weiterhin viel Erfolg beim Tüfteln!
Anja

3 Like
#10

Hallo Anja,

da hast du doch gerade ein dickes Grinsen auf meine Lippen gezaubert. Ich werde mir also auch weiterhin das Recht herausnehmen, den Level meines Wissens selbst zu bestimmen und dann bei Bedarf tiefer einzusteigen, wobei mir durchaus klar ist, dass ein echter Spezi(oder jemand, der sich dafür hält) nichts unter 100% akzeptiert.

Schöne Woche wünscht
Müller

#11

Moin,

mach dir nix draus,

Naja, draus machen soll er sich schon was. Was nicht passt, muss passend gemacht werden.

manche Kritik kommt hier immer etwas scharf rüber.

Das stimmt allerdings. In einem geschriebenen Medium ist das nur verständlich, weil man nicht die Mimik und den Tonfall des Gesprächspartners sieht bzw. hört.

Dabei hat
so mancher selbsternannte Held des wer-weiss-was seinen
eigenen semantischen „Dreck“ am Stecken.

Was aber kein Grund ist, seinen eigenen Dreck gut zu finden. Es war noch nie ein Argument, wenn man sagt „ein anderer macht den Fehler auch, also darf ich das auch“.

Wenn also die „Profiwebdesigner“, die hier posten, schon
Projekte, die sie begleiten/unterstützen/erstellen, nicht
sauber halten können, braucht man sich deren Gemecker auch
nicht unbedingt zu Herzen zu nehmen.

Sehe ich nicht so. Das eine hat mit dem anderen nichts zu tun. Das Ziel ist ein valider und semantisch sauberer Code. Zu sagen, ein Code ist falsch heißt ja nicht, dass man ab dem Moment nur drei Sekunden Zeit hat, bevor sich der Code selbst vernichtet.

Außerdem muss man unterscheiden zwischen Weitergabe von Wissen und Gemecker.

Nichtsdestotrotz ist es natürlich gut, sich möglichst viel
Mühe zu geben, eigene Fehler auszumerzen.

Eben.
Nur darum gehts ja.
Nicht darum, besser zu sein, als jemand anders, sondern seinen eigenen Horizont zu erweitern und das Optimum anzustreben.

-Efchen