Anzeige: united-domains - Die ganze Welt der Domains
Einfache & schnelle Domain-Registrierung zu fairen Preisen ohne Einrichtungsgebühren. Mehr als 250 Domain-Endungen aus einer Hand inklusive E-Mail- & Web-Weiterleitung. Einzigartiges Domain-Portfolio zur bequemen & sicheren Verwaltung Ihrer Domain-Namen.
Jetzt Domain-Check bei united-domains!
Mit CSS Spalten und Fusszeile formatieren
Autor: willi0513
Datum: 01.01.2012 13:24:20
Erstmal allen ein frohes neues Jahr!
Ich habe eine Seite mit 3 Spalten. Alle werden mit CSS formatiert.
Die beiden äußeren Randspalten haben die gleiche class.
Der Unterschied besteht lediglich in dem Zusatz:
Bei der linken Spalte style="float:left" und
ber der rechten Spalte style="float:right".
Hier einmal die class:
.randspalte {
width: 15%;
height: 90%;
background-color: #00c000;
background-image: url('/grafiken/hg_links-waag.jpg');
background-repeat: repeat-y;
border-right: solid 1pt #666;
border-left: solid 1pt #666;
border-bottom: solid 1pt #666;
}
Das Problem ist: Die Angabe "height: 90%" wird nur von der linken Spalte berücksichtigt.
Bei der rechten Spalte endet die Formatierung der Höhe sobald der Text aufhört.
<!-- rechte Spalte -->
<div class="randspalte" style="float:right">
<div class="spaltentop">
Tipps
</div>
<div class="spaltentext">
<p>
Du bist noch nicht angemeldet?<br>Hier geht es zur kostenlosen Registrierung.<br><br>
<a class="menu" href="/../newuser.php"> Registrieren</a><br><br>
</p>
</div>
</div>
<!-- Ende rechte Spalte -->
Die linke Spalte beinhaltet mein Hauptmenü und ist in einer separaten Datei ausgelagert, die ich mit
include in jede Seite einbinde.
Die mittlere Spalte ist meine Hauptausgabe.
Die rechte Spalte soll Tipps und Erklärungen zur Hauptausgabe enthalten und befindet sich in jeder Datei.
Ich habe schon jeder Spalte eine eigene class gegeben, bekomme aber immer dasgleiche Ergebnis. Woran kann es liegen?
In meiner Fusszeile möchte ich einen Text links- und den anderen rechtsbündig haben,
kriege es aber nicht hin.
Meine Angaben werden ignoriert. Was muss ich schreiben, damit es funktioniert?
<div id="fusszeile">
<span style="text-align:left">Erstellt: Nov 2011</span>
<span style="text-align:right">Letztes Update: 26.12.2011</span>
</div>
Grüße
Willi
Re: Mit CSS Spalten und Fusszeile formatieren
Autor: gaby
Datum: 02.01.2012 22:06:04
Hallo,
Dir ebenfalls ein Frohes Neues Jahr! :-)
Bitte poste einen Link zur Problemdatei.
Grüße
gaby
Re: Mit CSS Spalten und Fusszeile formatieren
Autor: willi0513
Datum: 03.01.2012 19:15:40
Hallo,
ich habe mal die Testdatei hochgeladen. Da kann man es schön sehen.
Gruß
Willi
>
> Hallo,
>
> Dir ebenfalls ein Frohes Neues Jahr! :-)
>
> Bitte poste einen Link zur Problemdatei.
>
>
> Grüße
> gaby
Re: Mit CSS Spalten und Fusszeile formatieren
Autor: Matthias
Datum: 04.01.2012 08:15:13
> Hallo,
> ich habe mal die Testdatei hochgeladen. Da kann
> man es schön sehen.
An der Testdatei sieht man, warum es wichtig ist, das Original zu sehen und keine zusammengestellten Auszüge.
Schau Dir selbst nochmal den Quelltext an und versetz Dich in den armen Browser! Millionen von Browserentwicklern haben Dir in Deiner Kindheit beigebracht, eine HTML-Datei beginnt immer mit *einem* Doctype. Und jetzt kommt das hier, nicht am Anfang, sondern in Zeile 44:
<div id="content_main"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
...
Mal ehrlich, alks Browser wärst Du dann auch höchst verwirrt und würdest alles durcheinanderwurschteln.
:-))
Spass beiseite: es scheint mir manchmal der größte Mangel an HTML zu sein, dass der Browser nicht sofort abstürzt, wenn ein Synthaxfehler vom Autor eingebaut wird. Nur so wäre er gezwungen, ihn zu beseitigen.
Statt dessen benimmt sich der Browser wie ein Mensch. Für Kopfschmerzen muss nicht unbedingt die Beule an der Stirn schuld sein, sondern Ursache kann das Loch im Zahn sein, das der Zahnarzt stopfen müsste.
Deshalb beseitige alle HTML-Fehler bevor Du weitermachst, vorher ist Fehlersuche reine Glückssache. (siehe Fehlerliste)
Wenn Du Dich um Fehlerfreiheit während der Erstellung Deiner Seite bemühst, wirst Du letztlich auch viel schneller das Verhalten Deines Browsers verstehen.
Dabei helfen wir Dir natürlich gerne!
Grüße
Matthias
Re: Mit CSS Spalten und Fusszeile formatieren
Autor: willi0513
Datum: 04.01.2012 14:20:21
Hallo Matthias,
du hast mir wieder ein Stück weiter geholfen.
Ich habe jetzt alle Fehler beseitigt.
In der Datei login.php binde ich die Datei first.inc.php ein. Diese Datei enthält das Menü in der linken Spalte. Es ist kompletter HTML-Code, nur die Endung lautet php, damit ich die überall einbinden kann. Hier steht auch ein kompletter 'head' Bereich, inklusive dem Verweis auf die css-Datei, die ja das Menü formatiert.
Die vielen Validierungsfehler kamen dadurch, dass nun in der Datei login.php auch nochmal ein 'head' Bereich stand. Dadurch auch das !DOCTYPE in Zeile 44. Ich habe in der Datei login.php den 'head' Bereich entfernt und jetzt gibt es auch keine Validierungsfehler mehr.
Jetzt habe ich aber das Problem, dass ich überhaupt keine Formatierung mehr habe. Ich habe herausgefunden , dass das es daran liegt, dass ich in der Datei login.php jetzt keinen Verweis mehr auf die css-Datei habe, weil ich ja den head Bereich gelöscht habe.
Wenn ich jetzt einen Link auf die css-Datei mit @import einbinde funktioniert die Formatierung wieder, aber ich bekomme wieder einen Validierungsfehler. Was nun?
Mache ich vielleicht einen grundsätzlichen Fehler?
Müßte nicht wenigstens das Menü richtig angezeigt werden? Da ist ja die css-Datei korrekt eingebunden.
Im Link unten habe ich @import die css-Datei einmal eingebunden.
Ich hoffe, es gibt noch Hoffnung und ich muss nich alles umwerfen und von vorne beginnen.
Viele Grüße
Willi
> > Hallo,
> > ich habe mal die Testdatei hochgeladen. Da
> kann
> > man es schön sehen.
>
> An der Testdatei sieht man, warum es wichtig ist,
> das Original zu sehen und keine
> zusammengestellten Auszüge.
>
> Schau Dir selbst nochmal den Quelltext an und
> versetz Dich in den armen Browser! Millionen von
> Browserentwicklern haben Dir in Deiner Kindheit
> beigebracht, eine HTML-Datei beginnt immer mit
> *einem* Doctype. Und jetzt kommt das hier, nicht
> am Anfang, sondern in Zeile 44:
>
> <div id="content_main"><!DOCTYPE HTML
> PUBLIC "-//W3C//DTD HTML 4.01
> Transitional//EN">
> <html>
> <head>
> ...
>
> Mal ehrlich, alks Browser wärst Du dann auch
> höchst verwirrt und würdest alles
> durcheinanderwurschteln.
>
> :-))
>
> Spass beiseite: es scheint mir manchmal der
> größte Mangel an HTML zu sein, dass der Browser
> nicht sofort abstürzt, wenn ein Synthaxfehler vom
> Autor eingebaut wird. Nur so wäre er gezwungen,
> ihn zu beseitigen.
>
> Statt dessen benimmt sich der Browser wie ein
> Mensch. Für Kopfschmerzen muss nicht unbedingt
> die Beule an der Stirn schuld sein, sondern
> Ursache kann das Loch im Zahn sein, das der
> Zahnarzt stopfen müsste.
>
> Deshalb beseitige alle HTML-Fehler bevor Du
> weitermachst, vorher ist Fehlersuche reine
> Glückssache. (siehe Fehlerliste)
> Wenn Du Dich um Fehlerfreiheit während der
> Erstellung Deiner Seite bemühst, wirst Du
> letztlich auch viel schneller das Verhalten
> Deines Browsers verstehen.
>
> Dabei helfen wir Dir natürlich gerne!
>
>
> Grüße
>
> Matthias
Schrifteinheiten (/was: Mit CSS Spalten und Fusszeile formatieren)
Autor: gaby
Datum: 04.01.2012 23:43:26
> Ich hoffe, es gibt noch Hoffnung und ich muss
> nich alles umwerfen und von vorne beginnen.
Hallo,
- Hast du auch mit anderen Browsern außer den IE getestet?
Im Chrome zb hüpft die rechte Spalte munter hoch und runter, wenn du das Browserfenster in der Breite verkleinerst. (Bild, s.o.)
In anderen Browsern ist es wieder anders falsch.
- Du möchtest doch sicher, daß deine Besucher auch _lesen_, was auf deiner Website steht?
Warum gestaltest du dann Text- und Hintergrundfarbe deines Formulars Ton-in-Ton?
Eine Website ist doch kein Gemälde.
Weiß auf hellgrün - der Kontrast ist viel zu gering!
- 'pt' ist als Schrifteinheit für das Web ungeeignet.
Auf einem Mac wird Text deiner Schriftgröße 10pt nur noch als Fliegensch... zu erkennen sein.
- Bei Prozentbreiten, wie du sie verwendest, werden bei schmalem viewport auch gleichzeitig die Randspalten schmäler, da ihre Breiten sich prozentual von der viewport-Breite ableiten.
Irgendwann sind die Randboxen so schmal, daß ihr Inhalt abgeschnitten bzw überlagert wird.
Demo-Bild (Boxen mit Prozentgröße bei großem und schmalem Anzeigebereich):
http://gaby77.ga.funpic.de/web/floats/float_mit_prozent.png
'px' als Einheit für Schrift und Boxbreite ist ebenfalls ungünstig, vor allem dann, wenn man so winzige Schriften wie du verwendet.
Das Layout sollte einer Vergrößerung bis mindestens 16px (!=16pt) standhalten, denn dies haben die Browserhersteller als Defaultgröße, also als die für die meisten User bestlesbare Schriftgröße festgelegt. Wenn du die Schriftgröße herunterskalierst, heißt das nicht automatisch, daß alle deine Besucher deine Seite ebenfalls mit dieser Mikro-Schrift sehen werden.
Sie werden sich also die Anzeige der Schrift in ihrem Browser vergrößern (müssen).
Dann wird es ebenfalls zu unlesbaren Textüberlagerungen kommen, da die vergrößerte Schrift nun nicht mehr in die Box passt und aus ihr herausläuft.
Demo-Bild (Schrift und Boxen mit px-Breite bei kleiner und großer Schrift):
http://gaby77.ga.funpic.de/web/floats/float_mit_px.png
Nimm 'em' als Einheit für Schrift und Box-Breite.
Dann wird sich, wenn dein Besucher die Schrift vergrößert, automatisch auch die Breite der Box vergrößern, sodaß der Text immer hineinpasst.
Demo-Bild (Boxen mit em-Breite bei kleiner und großer Schrift):
http://gaby77.ga.funpic.de/web/floats/float_mit_em.png
- "Infos" schreibt man ohne Apostroph. ;-)
Ich würde an deiner Stelle nochmal von vorne anfangen, und erstmal die Positionierungen in Ordnung bringen.
Dazu gehört:
- Testen in verschiedenen Browsern
- mit unterschiedlich großen Browserfenstern
- und unterschiedlichen Schriftgrößen
Grüße
Gaby
Re: Mit CSS Spalten und Fusszeile formatieren
Autor: Matthias
Datum: 05.01.2012 00:16:24
> Hallo Matthias,
>
> du hast mir wieder ein Stück weiter geholfen.
> Ich habe jetzt alle Fehler beseitigt.
Freut mich!
> Die vielen Validierungsfehler kamen dadurch, dass
> nun in der Datei login.php auch nochmal ein
> 'head' Bereich stand. Dadurch auch das !DOCTYPE
> in Zeile 44. Ich habe in der Datei login.php den
> 'head' Bereich entfernt und jetzt gibt es auch
> keine Validierungsfehler mehr.
Soetwas in der Art habe ich mir schon gedacht.
> Jetzt habe ich aber das Problem, dass ich
> überhaupt keine Formatierung mehr habe. Ich habe
> herausgefunden , dass das es daran liegt, dass
> ich in der Datei login.php jetzt keinen Verweis
> mehr auf die css-Datei habe, weil ich ja den head
> Bereich gelöscht habe.
> Wenn ich jetzt einen Link auf die css-Datei mit
> @import einbinde funktioniert die Formatierung
> wieder, aber ich bekomme wieder einen
> Validierungsfehler. Was nun?
Tja, nun musst Du Dir nocheinmal den Unterschied zwischen PHP und HTML deutlich machen und verstehen. Das ist für viele ein gewaltiges Problem, obwohl der Unterschied sehr simpel ist. Ich versuche es Dir deshalb mal etwas bildlich zu beschreiben, aber auch wenns teilweise lustig klingen wird, meine ich es ziemlich wörtlich!
PHP ist eine Programmiersprache, die DICH den Autor der HTML-Datei vertritt! Das heisst PHP ist PHP und PHP ist *kein* HTML. Es ist nur sehr gut geeignet HTML in Vertretung des Autors zu erzeugen.
Nur weil Du keine Lust hast, in alle Deine HTML-Inhalte den Menüblock einzuklimpern, beauftragst Du PHP jedesmal zwischen HTML-Zeile 734 und 735 insgesamt 244 Zeilen HTML zu schreiben, die Dein Menü sein werden. Und das ist doch eine kuhle Sache richtig?
Du könntest PHP auch beauftragen, die HTML-Zeilen 3285 bis 7933 aus einer Datei zu löschen. Würde klappen falls Du Bedarf hast, hast Du aber nie! PHP würde auch ganz ohne HHTML für Dich Brötchen holen, würdest Du den Befehl dafür kennen, kennst Du aber nicht (den kenn ich leider auch nicht). :-)
PHP macht nur das, was *DU* sonst manuell machen müsstest.
PHP und HTML sind also erstmal zwei völlig verschiedene Dinge, genauso, wie Du und Deine Tastatur zwei verschiedene Dinge seid.
Zuerst denkst Du Dir im KOPF den HTML-Code aus und danach überlegst Du, mit welchen Fingern Du wie auf die Tastatur klöppelst, damit der HTML-Code aus dem Kopf auf den Bildschirm kommnt. Genauso gehts mit HTML und PHP. Zuerst also denkst Du im Kopf HTML aus und danach überlegst Du, wie Du es mit PHP-Befehlen auf den Bildschirm bekommst.
Also:
- Eine HTML-Datei beginnt laut Erfinder in der ersten Zeile mit dem Doctype-Element. Du hast aber offenbar gedacht, Du müsstest Deine PHP-Datei mit der Ausgabe eines HTML-Doctype-Elements beginnen lassen. Da sind zwei verschiedene Sprachen durcheinandergeraten. Also raus aus der menü.php!
Weiter die CSS-Angaben:
Dein Menüblock wird unter Garantie niemals im Head-Block Deiner HTML-Datei stehen, denn das ergibt in HTML keinen Sinn. Wenn Du also eine PHP-Datei "menü.inc" beauftragst, statt Deiner das Menü in HTML zu tippen, dann kannst Du diese Datei nicht beauftragen, etwas zu tippen, was in den Head-Bereich gehört. In dieser Datei darfst Du also keinen Doctype von PHP tippen lassen und Du kannst keine CSS-Datei verlinken lassen, denn die gehört in den Head-Bereich und der ist ja von einem anderen Deiner PHP-Dateien längst fertig getippt und an den Browser gesendet.
Da aber das Menü sehr wahrscheinlich in jeder HTML-Datei Deiner Homepage enthalten sein dürfte, kannst Du doch einfach die andere PHP-Datei, die Du beauftragst, den Head-Block zu generieren auch gleich dazu verdonnern, in jeden Head-Block die CSS-Datei reinzutippen, die Dein Menü später formatieren wird.
> Mache ich vielleicht einen grundsätzlichen
> Fehler?
Siehe oben, Du hast den Unterschied zwischen HTML und PHP noch nicht verinnerlicht und vermischst Regeln beider Sprachen unzulässig!
> Müßte nicht wenigstens das Menü richtig angezeigt
> werden? Da ist ja die css-Datei korrekt
> eingebunden.
Nein, das ist nicht korrekt eingebunden. Das Style-Element darf per Definition nur im Head-Block vorkommen. Ausserdem umschließt es CSS-Eigenschaften, kann aber CSS-Dateien nicht verlinken. Das geschieht mit dem Link-Element und auch nur im Head-Bereich. Wie immer Du also die CSS-Datei einbindest, in menü.php bekommst Du das nicht hin.
> Im Link unten habe ich @import die css-Datei
> einmal eingebunden.
> Ich hoffe, es gibt noch Hoffnung und ich muss
> nich alles umwerfen und von vorne beginnen.
Es gibt immer Hoffnung für einen Lernenden! :-)
Ob Du von vorn beginnen musst, kann ich Dir noch nicht sagen, Gaby hat Dir ja auch ein paar gewichtige Probleme geschildert, aber versuch erstmal eins nach dem andren.
Lerne PHP und HTML zu unterscheiden und dann gehts ans nächste Problem. Für Schriftgrößen und andre Skalierungsprobleme steht Gaby als Spezialistin schon bereit! :-)
Ich hoffe, meine Beschreibung ist verständlich und bringt Dich nicht nochmehr durcheinander. Frag, wenn etwas unverständlich ist!
Grüße
Matthias
Mit CSS Spalten und Fusszeile formatieren
Autor: willi0513
Datum: 05.01.2012 20:40:22
@Gaby, kannst du dir die Seite bitte noch einmal
ansehen.
Ich habe im IE8 unter Ansicht-> Textgröße einmal alle
Einstellungen ausprobiert. Dabei haben sich die
Formatierungen gut angepasst. Ich bin mit dem
Ergebnis zufrieden. Vielleicht fällt dir ja etwas auf,
was ich noch ändern sollte. Vielleicht kannst du mir
jetzt auch meine ursprüngliche Frage beantworten:
"Warum hört die Formatierung in der rechten Spalte
sofort nach dem Text auf, obwohl ich eine Höhe von 90%
angegeben habe." Leider ist es im Moment so, dass auch
die linke Spalte die Höhenangabe ignoriert.
Hier nochmal der Code:
.randspalte {
width: 15%;
height: 90%;
background-color: #00c000;
background-image: url('/grafiken/hg_links-waag.jpg');
background-repeat: repeat-y;
border-right: solid 1px #666;
border-left: solid 1px #666;
border-bottom: solid 1px #666;
}
Re: Mit CSS Spalten und Fusszeile formatieren
Autor: willi0513
Datum: 05.01.2012 20:40:41
Hallo zusammen,
ich habe jetzt als erstes mein Menü in Ordnung gebracht.
Ich schreibe das Menü wieder in jede einzelne Datei. Da macht die Pflege vielleicht ein wenig mehr Arbeit, aber es funktioniert eindeutig besser.
Dabei fand ich die Idee, das Menü auszulagern, gar nicht so schlecht, da es ja in jeder Seite benötigt wird. Ich habe es irgendwo im Internet gesehen und dann umgesetzt.
Als zweites habe ich die Positionierungen und Formatierungen geändert.
@ Gaby, kannst du dir die Seite bitte noch einmal
ansehen.
Ich habe im IE8 unter Ansicht-> Textgröße einmal alle
Einstellungen ausprobiert. Dabei haben sich die
Formatierungen gut angepasst. Ich bin mit dem
Ergebnis zufrieden. Vielleicht fällt dir ja etwas auf,
was ich noch ändern sollte. Vielleicht kannst du mir
jetzt auch meine ursprüngliche Frage beantworten:
"Warum hört die Formatierung in der rechten Spalte
sofort nach dem Text auf, obwohl ich eine Höhe von 90%
angegeben habe." Leider ist es im Moment so, dass auch
die linke Spalte die Höhenangabe ignoriert.
Hier nochmal der Code:
.randspalte {
width: 15%;
height: 90%;
background-color: #00c000;
background-image: url('/grafiken/hg_links-waag.jpg');
background-repeat: repeat-y;
border-right: solid 1px #666;
border-left: solid 1px #666;
border-bottom: solid 1px #666;
}
@ Mathias, ich denke, den Unterschied zw. PHP und HTML
kenne ich, aber ich habe mich etwas unkar bei der
Menüdatei ausgedrückt. Das Menü ist komplett HTML, da
wurde nichts in PHP geschrieben. Wie ich oben erwähnte
habe ich es so im Internet gefunden. Da stand eben der
Hinweis, die Datei in .php umzunennen, damit man sie
mit include einbinden kann. So habe ich es gemacht,
aber in der Folgedatei habe ich nicht daran gedacht,
den von meinem Editor vorgegebenen Head-Bereich zu
löschen. Hätte ich daran gedacht, wäre u.U. dieser
Fehler nie aufgetaucht, und ich hätte die Bedeutung
der !DOCTYPE Deklaration nie erfahren. Wenn ich eine
neue Datei erstelle zeigt mir mein Editor ein schönes
HTML-Grundgerüst und dadurch habe ich mir nie Gedanken
darüber gemacht.
PHP benutze ich eigentlich nur, wenn es um meine
Datenbank geht. Daten hineinbringen und zur Anzeige
wieder herausholen.
Schonmal vielen Dank für eure hilfreichen Antworten.
Viele Grüße aus dem stürmischen Norden.
Willi
Re: Mit CSS Spalten und Fusszeile formatieren
Autor: gaby
Datum: 06.01.2012 11:14:27
> @Gaby, kannst du dir die Seite bitte noch einmal
> ansehen.
> Ich habe im IE8 unter Ansicht-> Textgröße einmal
> alle Einstellungen ausprobiert.
Hast du auch in anderen Browsern getestet, und bei verschieden großen Browserfenstern?
Jeder Besucher kommt mit unterschiedlich groß gezogenem Browserfenster auf deine Seite.
Hier mal eine Demo, die ich vor Jahren gemacht habe:
(Deaktiviere vorher am besten JavaScript im Browser, - Screenshots hier:
http://gaby77.ga.funpic.de/browser/javascript_deaktivieren.png
denn diese Demo liegt auf meinem Testserver, bei dem leider bei jeder Seite ein nerviger Werbelayer eingeblendet wird)
http://gaby77.ga.funpic.de/FAQ/anzeigebereich/index-neu.html
Bei großem und kleinem Anzeigebereich geht dein Design total aus dem Leim.
http://gaby77.ga.funpic.de/forum/screens/willi0513/breiter_viewport.png
http://gaby77.ga.funpic.de/forum/screens/willi0513/schmaler_viewport.png
Lediglich bei einer Breite um die 1280px herum ist wohl alles, wie gewünscht.
Du hast für deine Randspalten eine Hintergrundgrafik von 200px Breite festgelegt, aber gleichzeitig eine Prozentbreite für diese Spalten vergeben. Wie bereits im Vorposting gesagt, ist dies sehr unvorteilhaft, wenn die Randspalte, - abhängig von der Browserfenstergröße deiner Besucher, - variabel breit ist.
In Kombination mit einer Hintergrundgrafik fester Breite führt das zwangsläufig dazu, daß die Grafik meistens nicht 100%ig in die Außenspalte hineinpasst, wie du an den beiden obigen Screenshots erkennen kannst.
Bei schmalem viewport (und damit auch schmalen Randspalten) wird sie abgeschnitten, und bei breitem viewport ist sie zu schmal, um die Außenspalte vollkommen auszufüllen.
--> Die Hintergrundfarbe der Randspalte wird sichtbar.
> Vielleicht kannst du mir jetzt auch meine
> ursprüngliche Frage beantworten:
> "Warum hört die
> Formatierung in der rechten Spalte
> sofort nach dem Text auf,
> obwohl ich eine Höhe von 90%
> angegeben habe."
... weil der Bezug fehlt.
90% von was?
Prozenthöhen beziehen sich immer auf die Höhe ihres Eltern-Elements (=übergeordnete Box), d.h., dieses sollte auch eine Höhenangabe bekommen, - und dessen Elternelement ebenfalls, bis hoch zum obersten, dem HTML-Element.
Grüße
gaby
Re: Mit CSS Spalten und Fusszeile formatieren
Autor: willi0513
Datum: 06.01.2012 22:01:22
Hallo Gaby,
vielen Dank, dass du dir soviel Mühe machst. Mir bringt es aber auch sehr viel.
Ich habe jetzt für die Randspalten die Breite auf 200px, entsprechend der Hintergrundgrafik für die Randspalten, gesetzt.
Für die mittelspalte habe ich das width entfernt. Bei der Hintergrundgrafik habe ich das repeat-y entfernt.
Wenn ich jetzt den Viewport breiter mache, sieht man rechts den weißen Rand auch nicht mehr. Aber meine Eingabe ist nach links gewandert. Margin-left und right auf 'auto' für die mittelspalte setzen hat nicht geholfen. Was mache ich da falsch? Liegt es evtl. daran, dass die Eingaben noch mit einer Tabelle formatiert sind und diese das margin nicht annimmt?
Wenn ich jetzt den Viewport verkleinere, wandert die rechte Spalte bei ca. 80% der Bildschirmgröße wieder nach unten. Und bei ca. 60% der Breite ist die rechte Spalte und das Eingabefeld komplett verschwunden. Kann ich dagegen noch etwas machen?
Ach ja, die Höhe von 90% funktionierte jetzt auch.
Schon mal ein schönes Wochenende
Willi
> > @Gaby, kannst du dir die Seite bitte noch
> einmal
> > ansehen.
> > Ich habe im IE8 unter Ansicht-> Textgröße
> einmal
> > alle Einstellungen ausprobiert.
>
> Hast du auch in anderen Browsern getestet, und
> bei verschieden großen Browserfenstern?
> Jeder Besucher kommt mit unterschiedlich groß
> gezogenem Browserfenster auf deine Seite.
> Hier mal eine Demo, die ich vor Jahren gemacht
> habe:
>
> (Deaktiviere vorher am besten JavaScript im
> Browser, - Screenshots hier:
>
> http://gaby77.ga.funpic.de/browser/javascript_deaktivieren.png
> denn diese Demo liegt auf meinem Testserver, bei
> dem leider bei jeder Seite ein nerviger
> Werbelayer eingeblendet wird)
>
>
> http://gaby77.ga.funpic.de/FAQ/anzeigebereich/index-neu.html
>
>
>
> Bei großem und kleinem Anzeigebereich geht dein
> Design total aus dem Leim.
>
>
> http://gaby77.ga.funpic.de/forum/screens/willi0513/breiter_viewport.png
>
>
> http://gaby77.ga.funpic.de/forum/screens/willi0513/schmaler_viewport.png
>
> Lediglich bei einer Breite um die 1280px herum
> ist wohl alles, wie gewünscht.
>
> Du hast für deine Randspalten eine
> Hintergrundgrafik von 200px Breite festgelegt,
> aber gleichzeitig eine Prozentbreite für diese
> Spalten vergeben. Wie bereits im Vorposting
> gesagt, ist dies sehr unvorteilhaft, wenn die
> Randspalte, - abhängig von der
> Browserfenstergröße deiner Besucher, - variabel
> breit ist.
> In Kombination mit einer Hintergrundgrafik fester
> Breite führt das zwangsläufig dazu, daß die
> Grafik meistens nicht 100%ig in die Außenspalte
> hineinpasst, wie du an den beiden obigen
> Screenshots erkennen kannst.
> Bei schmalem viewport (und damit auch schmalen
> Randspalten) wird sie abgeschnitten, und bei
> breitem viewport ist sie zu schmal, um die
> Außenspalte vollkommen auszufüllen.
> --> Die Hintergrundfarbe der Randspalte wird
> sichtbar.
>
>
> > Vielleicht kannst du mir jetzt auch meine
> > ursprüngliche Frage beantworten:
> > "Warum hört die
> > Formatierung in der rechten Spalte
> > sofort nach dem Text auf,
> > obwohl ich eine Höhe von 90%
> > angegeben habe."
>
>
> ... weil der Bezug fehlt.
> 90% <b>von was</b>?
> Prozenthöhen beziehen sich immer auf die Höhe
> ihres Eltern-Elements (=übergeordnete Box), d.h.,
> dieses sollte auch eine Höhenangabe bekommen, -
> und dessen Elternelement ebenfalls, bis hoch zum
> obersten, dem HTML-Element.
>
> Grüße
> gaby
Re: Mit CSS Spalten und Fusszeile formatieren
Autor: Matthias
Datum: 07.01.2012 11:04:29
> Hallo zusammen,
> ich habe jetzt als erstes mein Menü in Ordnung
> gebracht.
> Ich schreibe das Menü wieder in jede einzelne
> Datei. Da macht die Pflege vielleicht ein wenig
> mehr Arbeit, aber es funktioniert eindeutig
> besser.
Alle Mühe umsonst? Warum gibst Du so schnell auf, eines der leichtesten Probleme zu lösen?
> Dabei fand ich die Idee, das Menü auszulagern,
> gar nicht so schlecht, da es ja in jeder Seite
> benötigt wird. Ich habe es irgendwo im Internet
> gesehen und dann umgesetzt.
Sie ist auch eine ausgezeichnete Lösung, wenn man versteht, wie HTML und PHP zusammenhängen. Es gibt auch kaum etwas simpleres in PHP.
> @ Mathias, ich denke, den Unterschied zw. PHP und
> HTML kenne ich, aber ich habe mich etwas unkar
> bei der Menüdatei ausgedrückt. Das Menü ist komplett
> HTML, da wurde nichts in PHP geschrieben. Wie ich
> oben erwähnte habe ich es so im Internet gefunden.
Das klingt noch nicht nach Verstehen! ;-)
> Da
> stand eben der Hinweis, die Datei in .php umzunennen,
> damit man sie mit include einbinden kann. So habe ich es
> gemacht, aber in der Folgedatei habe ich nicht daran
> gedacht, den von meinem Editor vorgegebenen
> Head-Bereich zu löschen. Hätte ich daran gedacht, wäre
> u.U. dieser Fehler nie aufgetaucht, und ich hätte die
> Bedeutung der !DOCTYPE Deklaration nie erfahren.
Okay, Du hast die Bedeutung des Doctypes jetzt erfahren. Das ist positiv. Aber was Du jetzt gerade machst, ist eine Expedition zum Nordpol genau 1 km vor dem Ziel aufzugeben, weil Dir die Füsse weh tun und deswegen willst Du 1000 km zurücklaufen?
Wenn
> ich eine neue Datei erstelle zeigt mir mein Editor
> ein schönes HTML-Grundgerüst und dadurch habe ich mir
> nie Gedanken darüber gemacht. PHP benutze ich eigentlich
> nur, wenn es um meine Datenbank geht. Daten hineinbringen > und zur Anzeige wieder herausholen.
Und warum entfernst Du mit Deinem neuen Wissen nicht einfach den Head-Bereich den Dir Dein Editor untergejubelt hat zu entfernen und das Problem ist beseitigt.
Nutzt Du den Include-Befehl in HTML, heißt das für den PHP-Interpreter, schreibe an diese Stelle das, was Du in der Datei findest, egal ob es HTML, PHP, Programmcode oder Goethes Faust ist.
Eine valide HTML Datei kann zum Beispiel so entstehen:
include "Textdatei mit zwei Zeilen Doctype"
include "Textdatei mit zb. 5 Zeilen eines Head-Bereichs"
include "Textdatei mit ein paar Zeilen aus einem HTML-Menü"
Das Ergebnis wird an den Browser geschickt und wird dort eine valide HTM-Datei sein. Das ist genau das, was Du jetzt mit Copy&Paste machen willst.
Willst Du also ein HTML-Menü an der Stelle einfügen, dann füge an der Stelle das Menü ein und nicht eine ganze HTML-Datei mit Menü, wie es Dir nun unterlaufen ist.
Genau das was Du mit dem include-Befehl machen könntest, willst Du jetzt mühsam in jeder Datei einzeln machen?
Wieso das, wenn Du das Verhältnis zwischen PHP und HTML verstanden hast?
Irgendwie verstehe ich Dich gerade nicht! Ich glaube immernoch, Du denkst zu kompliziert.
Grüße
Matthias
Re: Mit CSS Spalten und Fusszeile formatieren
Autor: Netinja
Datum: 07.01.2012 11:12:53
Hallo
> Wenn ich jetzt den Viewport verkleinere, wandert
> die rechte Spalte bei ca. 80% der Bildschirmgröße
> wieder nach unten. Und bei ca. 60% der Breite ist
> die rechte Spalte und das Eingabefeld komplett
> verschwunden. Kann ich dagegen noch etwas
> machen?
Die rechte Randspalte rutscht dann herunter, wenn deine 3 Divs nicht mehr alle nebeneinander Platz haben. Du könntest body eine Mindestbreite von 800px geben.
Wenn du dein Registrierungsfeld kleiner machen würdest, wäre für body sogar eine Mindestbreite von 700px möglich. ;-)
Eine andere Möglichkeit wäre 20%-Breite für die Randspalten, und gleichzeitig max-width: 200px, damit die Spalten nicht breiter werden als das Hintergrundbild.
Und für die mittlere Spalte eine Mindestbreite von ungefähr 50%.
Das musst du mal ausprobieren, wie es auch bei kleinem Browserfenster gut passt.
Ich würde auch das Hintergrundbild im body in die Mitte setzen, dann ist der Verlauf bei kleinem und großen Fenster immer gleichmässig.
Ein Problem sehe ich aber noch bei den Höhen.
Du hast für die Kopfzeile 100px und für den Rest 90%.
Das ergibt nur bei DEINEM Fenster 100% Höhe.
Man kann Höhen, die verschiedene Schrifteinheiten haben, nicht addieren.
Bei mir gibt es auch ständig einen waagrechten Scrollbalken, obwohl er eigentlich unnötig wäre.
LG
Netinja
Re: Mit CSS Spalten und Fusszeile formatieren
Autor: willi0513
Datum: 07.01.2012 17:59:24
Hallo,
danke für deine Vorschläge.
Ich habe sie auch umgesetzt. So gefällt es mir. Wenn ich jetzt das Fenster schmaler mache wandert die rechte Spalte nicht mehr nach unten, sondern nach rechts aus dem Fenster. So, wie ich mir das vorstelle. Ich habe für den 'body' das min-width:980px gestzt. Bei allen kleineren Angaben ist die Spalte wieder nach unten gewandert.
Ich habe aber noch nicht verstanden, wie sich das mit den Breiten verhält, warum mal die Spalte nach unten wandert und mal rechts aus dem Fenster.
Deshalb kann ich es auch nicht so umsetzen, dass die Fusszeile beim Verringern der Höhe nicht durch den Text wandert. Hast du da noch mal einen Tipp?
Was kann ich denn machen, um mein Registrierungsfeld wieder in die Mitte zu bekommen?
Gruß
Willi
> Hallo
>
> > Wenn ich jetzt den Viewport verkleinere,
> wandert
> > die rechte Spalte bei ca. 80% der
> Bildschirmgröße
> > wieder nach unten. Und bei ca. 60% der Breite
> ist
> > die rechte Spalte und das Eingabefeld komplett
> > verschwunden. Kann ich dagegen noch etwas
> > machen?
>
> Die rechte Randspalte rutscht dann herunter, wenn
> deine 3 Divs nicht mehr alle nebeneinander Platz
> haben. Du könntest body eine Mindestbreite von
> 800px geben.
> Wenn du dein Registrierungsfeld kleiner machen
> würdest, wäre für body sogar eine Mindestbreite
> von 700px möglich. ;-)
>
> Eine andere Möglichkeit wäre 20%-Breite für die
> Randspalten, und gleichzeitig max-width: 200px,
> damit die Spalten nicht breiter werden als das
> Hintergrundbild.
> Und für die mittlere Spalte eine Mindestbreite
> von ungefähr 50%.
> Das musst du mal ausprobieren, wie es auch bei
> kleinem Browserfenster gut passt.
> Ich würde auch das Hintergrundbild im body in die
> Mitte setzen, dann ist der Verlauf bei kleinem
> und großen Fenster immer gleichmässig.
>
> Ein Problem sehe ich aber noch bei den Höhen.
> Du hast für die Kopfzeile 100px und für den Rest
> 90%.
> Das ergibt nur bei DEINEM Fenster 100% Höhe.
> Man kann Höhen, die verschiedene Schrifteinheiten
> haben, nicht addieren.
>
> Bei mir gibt es auch ständig einen waagrechten
> Scrollbalken, obwohl er eigentlich unnötig wäre.
>
> LG
> Netinja
Re: Mit CSS Spalten und Fusszeile formatieren
Autor: willi0513
Datum: 07.01.2012 19:53:24
Hallo,
manchmal denke ich wohl wirklich zu kompliziert.
Ich habe nicht gedacht, dass es so einfach ist, ein Menü auszulagern. Aber mit deinen Erklärungen habe ich es jetzt hinbekommen, Matthias.
Danke.
Gruß
Willi
> > Hallo zusammen,
> > ich habe jetzt als erstes mein Menü in
> Ordnung
> > gebracht.
> > Ich schreibe das Menü wieder in jede
> einzelne
> > Datei. Da macht die Pflege vielleicht ein
> wenig
> > mehr Arbeit, aber es funktioniert eindeutig
> > besser.
>
> Alle Mühe umsonst? Warum gibst Du so schnell auf,
> eines der leichtesten Probleme zu lösen?
>
> > Dabei fand ich die Idee, das Menü
> auszulagern,
> > gar nicht so schlecht, da es ja in jeder
> Seite
> > benötigt wird. Ich habe es irgendwo im
> Internet
> > gesehen und dann umgesetzt.
>
> Sie ist auch eine ausgezeichnete Lösung, wenn man
> versteht, wie HTML und PHP zusammenhängen. Es
> gibt auch kaum etwas simpleres in PHP.
>
>
>
> > @ Mathias, ich denke, den Unterschied
> zw. PHP und
> > HTML kenne ich, aber ich habe mich
> etwas unkar
> > bei der Menüdatei ausgedrückt. Das Menü ist
> komplett
> > HTML, da wurde nichts in PHP geschrieben.
> Wie ich
> > oben erwähnte habe ich es so im Internet
> gefunden.
>
> Das klingt noch nicht nach
> Verstehen! ;-)
>
>
> > Da
> > stand eben der Hinweis, die Datei in .php
> umzunennen,
> > damit man sie mit include einbinden kann. So
> habe ich es
> > gemacht, aber in der Folgedatei habe ich
> nicht daran
> > gedacht, den von meinem Editor vorgegebenen
> > Head-Bereich zu löschen. Hätte ich daran
> gedacht, wäre
> > u.U. dieser Fehler nie aufgetaucht, und ich
> hätte die
> > Bedeutung der !DOCTYPE Deklaration nie
> erfahren.
>
> Okay, Du hast die Bedeutung des Doctypes jetzt
> erfahren. Das ist positiv. Aber was Du jetzt
> gerade machst, ist eine Expedition zum Nordpol
> genau 1 km vor dem Ziel aufzugeben, weil Dir die
> Füsse weh tun und deswegen willst Du 1000 km
> zurücklaufen?
>
>
> Wenn
> > ich eine neue Datei erstelle zeigt mir mein
> Editor
> > ein schönes HTML-Grundgerüst und dadurch
> habe ich mir
> > nie Gedanken darüber gemacht. PHP benutze
> ich eigentlich
> > nur, wenn es um meine Datenbank geht. Daten
> hineinbringen > und zur Anzeige wieder
> herausholen.
>
> Und warum entfernst Du mit Deinem neuen Wissen
> nicht einfach den Head-Bereich den Dir Dein
> Editor untergejubelt hat zu entfernen und das
> Problem ist beseitigt.
>
> Nutzt Du den Include-Befehl in HTML, heißt das
> für den PHP-Interpreter, schreibe an diese Stelle
> das, was Du in der Datei findest, egal ob es
> HTML, PHP, Programmcode oder Goethes Faust ist.
>
> Eine valide HTML Datei kann zum Beispiel so
> entstehen:
>
> include "Textdatei mit zwei Zeilen Doctype"
> include "Textdatei mit zb. 5 Zeilen
> eines Head-Bereichs"
> include "Textdatei mit ein paar Zeilen aus einem
> HTML-Menü"
>
> Das Ergebnis wird an den Browser geschickt und
> wird dort eine valide HTM-Datei sein. Das ist
> genau das, was Du jetzt mit Copy&Paste machen
> willst.
>
> Willst Du also ein HTML-Menü an der Stelle
> einfügen, dann füge an der Stelle das Menü ein
> und nicht eine ganze HTML-Datei mit Menü, wie es
> Dir nun unterlaufen ist.
> Genau das was Du mit dem include-Befehl machen
> könntest, willst Du jetzt mühsam in jeder Datei
> einzeln machen?
>
> Wieso das, wenn Du das Verhältnis zwischen PHP
> und HTML verstanden hast?
>
> Irgendwie verstehe ich Dich gerade nicht! Ich
> glaube immernoch, Du denkst zu kompliziert.
>
> Grüße
>
> Matthias
>
Re: Mit CSS Spalten und Fusszeile formatieren
Autor: Netinja
Datum: 07.01.2012 20:29:33
> Ich habe für den 'body' das min-width:980px gestzt.
In meinen Browsern ensteht aber schon ab 1015px ein waagrechter Scrollbalken. Man sollte versuchen, so weit es geht ohne waagrechtes Scrollen auszukommen.
> Eine andere Möglichkeit wäre 20%-Breite für
> die Randspalten, und gleichzeitig max-width: 200px,
> damit die Spalten nicht breiter werden als das Hintergrundbild.
> Und für die mittlere Spalte eine Mindestbreite von ungefähr 50%.
Sorry, ich habe mich da vertan, ich meinte eine MAXIMALbreite für die mittlere Spalte, also max-width: 50%.
Danach passt auch min-width: 800px für body, ohne dass ein Div herunterrutscht.
> Ich habe aber noch nicht verstanden, wie sich das
> mit den Breiten verhält, warum mal die Spalte
> nach unten wandert ...
Stell dir vor, dass du einen Tisch hast, der 2,80m x 2m breit ist. Auf ihn sollst du jetzt 3 Kisten stellen, die 1m x 1m gross sind. Die Kisten dürfen aber nicht über die Tischkante überstehen.
Du bekommst also in die erste Reihe nur 2 Kisten, und musst die 3. Kiste in die nächste Reihe stellen.
Jetzt setze body für den Tisch und deine float-divs für die Kisten. ;-)
Das letzte div rutscht also herunter, wenn im Browserfenster nicht mehr genug Platz ist.
> und mal rechts aus dem Fenster.
Wenn ein Bild breiter als dein Browserfenster ist, musst du doch auch scrollen, um auch noch die rechte Seite des Bildes sehen zu können. Genauso verhält es sich mit einem div, das grösser als das Browserfenster ist, oder eben mit body, wenn der zu breit ist, dass er nicht mehr ins Fenster passt. Mach dir doch mal Rahmen drum, dann siehst du die Grösse der Elemente.
> Deshalb kann ich es auch nicht so umsetzen, dass
> die Fusszeile beim Verringern der Höhe nicht
> durch den Text wandert. Hast du da noch mal einen
> Tipp?
> Was kann ich denn machen, um mein
> Registrierungsfeld wieder in die Mitte zu
> bekommen?
Das müsste jetzt jemand anderes beantworten.
LG
Netinja
Re: Mit CSS Spalten und Fusszeile formatieren
Autor: willi0513
Datum: 08.01.2012 17:18:34
Ich habe im body einmal mit min-width experimentiert. Aber den waagerechten Scollbalken habe ich nicht wegbekommen.
Das mit dem Tisch und den Bierkästen habe ich verstanden.
Ich habe jetzt für die mittlere Spalte max-width auf 50% gesetzt. Beim Verkleinern des Fensters wandert die rechte Spalte nach rechts aus dem Fenster. Gut so. Wenn ich jetzt max-width auf 60% setze, wandert die Spalte wieder nach unten, bei gleichbleibendem min-width von 800px für body. Warum wandert sie nicht auch nach rechts aus dem Fenster? Das ist es was ich nicht verstehe.
Gruß
Willi
> > Ich habe für den 'body' das min-width:980px
> gestzt.
>
> In meinen Browsern ensteht aber schon ab 1015px
> ein waagrechter Scrollbalken. Man sollte
> versuchen, so weit es geht ohne waagrechtes
> Scrollen auszukommen.
>
> > Eine andere Möglichkeit wäre 20%-Breite für
> > die Randspalten, und gleichzeitig max-width:
> 200px,
> > damit die Spalten nicht breiter werden als
> das Hintergrundbild.
> > Und für die mittlere Spalte eine
> Mindestbreite von ungefähr 50%.
>
> Sorry, ich habe mich da vertan, ich meinte eine
> MAXIMALbreite für die mittlere Spalte, also
> max-width: 50%.
> Danach passt auch min-width: 800px für body, ohne
> dass ein Div herunterrutscht.
>
> > Ich habe aber noch nicht verstanden, wie
> sich das
> > mit den Breiten verhält, warum mal die
> Spalte
> > nach unten wandert ...
>
> Stell dir vor, dass du einen Tisch hast, der
> 2,80m x 2m breit ist. Auf ihn sollst du jetzt 3
> Kisten stellen, die 1m x 1m gross sind. Die
> Kisten dürfen aber nicht über die Tischkante
> überstehen.
> Du bekommst also in die erste Reihe nur 2 Kisten,
> und musst die 3. Kiste in die nächste Reihe
> stellen.
> Jetzt setze body für den Tisch und deine
> float-divs für die Kisten. ;-)
> Das letzte div rutscht also herunter, wenn im
> Browserfenster nicht mehr genug Platz
> ist.
>
> > und mal rechts aus dem Fenster.
>
> Wenn ein Bild breiter als dein Browserfenster
> ist, musst du doch auch scrollen, um auch noch
> die rechte Seite des Bildes sehen zu können.
> Genauso verhält es sich mit einem div, das
> grösser als das Browserfenster ist, oder eben mit
> body, wenn der zu breit ist, dass er nicht mehr
> ins Fenster passt. Mach dir doch mal Rahmen drum,
> dann siehst du die Grösse der Elemente.
>
> > Deshalb kann ich es auch nicht so umsetzen,
> dass
> > die Fusszeile beim Verringern der Höhe
> nicht
> > durch den Text wandert. Hast du da noch mal
> einen
> > Tipp?
> > Was kann ich denn machen, um mein
> > Registrierungsfeld wieder in die Mitte zu
> > bekommen?
>
> Das müsste jetzt jemand anderes beantworten.
>
> LG
> Netinja
Re: Mit CSS Spalten und Fusszeile formatieren
Autor: Netinja
Datum: 08.01.2012 19:38:21
> Ich habe im body einmal mit min-width
> experimentiert. Aber den waagerechten Scollbalken
> habe ich nicht wegbekommen.
Ich habe jetzt nur eine Teilantwort für dich.
In der Kopfzeile und der Fusszeile hast du width: 100% und border: 1px solid #666666;
Das ist 1px mehr als 100%. Deshalb gibt es waagrechte Scrollbalken.
http://de.selfhtml.org/css/formate/box_modell.htm
> Das mit dem Tisch und den Bierkästen habe ich verstanden.
Schön. Aber von Bier war nie die Rede. ;-)
LG
Netinja
Re: Mit CSS Spalten und Fusszeile formatieren
Autor: gaby
Datum: 09.01.2012 09:21:21
> Ich habe jetzt für die mittlere Spalte max-width
> auf 50% gesetzt. Beim Verkleinern des Fensters
> wandert die rechte Spalte nach rechts aus dem
> Fenster. Gut so. Wenn ich jetzt max-width auf 60%
> setze, wandert die Spalte wieder nach unten, bei
> gleichbleibendem min-width von 800px für body.
> Warum wandert sie nicht auch nach rechts aus dem
> Fenster? Das ist es was ich nicht verstehe.
Normalerweise ist BODY so breit wie der Anzeigebereich deines Browserfenster. BODY hat also eine variable Breite, je nachdem, wie groß dein viewport ist.
Wenn du BODY eine feste Breite gibst, zb 'width: 800px', dann ist BODY immer genau 800px breit, egal ob der Anzeigebereich deines Browserfensters nun 600px oder 1000px breit ist.
Anhand folgender einfacher Testdatei kannst du das erkennen, wenn du die Dimensionen deines Browserfensters veränderst:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
height: 111px;
width: 800px;
border: 5px solid red;
}
</style>
</head>
<body>
</body>
</html>
Nun ändere 'width: 800px' in 'min-width: 800px' für BODY.
Bei einem großen Browserfenster vom zb 1000px verbreitert sich BODY bis maximal zur viewport-Breite, also 1000px in diesem Beispiel. Dann darf die Summe der divs in BODY bis zu 1000px breit werden.
Bei einem kleinen Browserfenster von zb 600px ragt BODY noch 200px nach rechts heraus und man muß horizontal scrollen.
Jetzt darf die Summe der divs in BODY nur noch maximal 800px betragen.
'Min-width' heißt bei BODY nicht, daß BODY immer unendlich breit werden kann, wie es der Begriff "Mindestbreite" suggeriert, sondern daß BODY sich maximal bis zur Breite des Anzeigebereichs ausdehnen kann, wenn dieser größer ist als die Mindestbreite von BODY.
Ist das Browserfenster bzw der viewport kleiner als BODY, also kleiner als 800px in diesem Beispiel, läßt sich BODY nicht weiter vergrößern, auch dann nicht, wenn die 3 divs in ihm eigentlich mehr Platz bräuchten. Sind die Float-Boxen in ihrer Summe nun zu groß für BODY, so rutscht die rechte Box in die nächste Reihe.
Grüße
gaby
Bitte laß doch nicht immer Komplettzitate unter deinem Text stehen, sondern zitiere das, worauf du dich beziehst, über deinem neuen Text.
Re: Mit CSS Spalten und Fusszeile formatieren
Autor: willi0513
Datum: 09.01.2012 20:59:32
Danke, das wars. Jetzt ist der Scrollbalken weg.
Es gibt doch viele Dinge, an die man nicht denkt.
Gruß
Willi
> > Ich habe im body einmal mit min-width
> > experimentiert. Aber den waagerechten
> Scollbalken
> > habe ich nicht wegbekommen.
>
> Ich habe jetzt nur eine Teilantwort für dich.
> In der Kopfzeile und der Fusszeile hast du width:
> 100% und border: 1px solid #666666;
> Das ist 1px mehr als 100%. Deshalb gibt es
> waagrechte Scrollbalken.
>
>
> http://de.selfhtml.org/css/formate/box_modell.htm
>
> > Das mit dem Tisch und den Bierkästen habe
> ich verstanden.
>
> Schön. Aber von Bier war nie die Rede. ;-)
>
> LG
> Netinja
>
Re: Mit CSS Spalten und Fusszeile formatieren
Autor: willi0513
Datum: 10.01.2012 12:25:00
Vielen Dank an euch alle für die hilfreichen Erklärungen.
Ich werde bestimmt bald weitere Fragen haben. Ich hoffe, ich kann mich dann wieder an euch wenden.
Viele Grüße
Willi
|
