Hallo
nach langem Pröbeln habe ich es geschafft dass der navi-div immer so hoch ist wie der body. Nun ist aber der body nicht so hoch wie der html-container, und dies zu ändern ist mir bisher nicht gelungen. Kann mir jemand sagen was ich anders machen muss?
http://kulturkoller.ch/prep_460/
Hallo,
Wir haben in letzter Zeit festgestellt, dass die Kommunikation via Slack viel schneller und zielführender ist als ein Beitrag im Forum. Aufgrund der neuen und besseren Möglichkeiten der Kommunikation haben wir uns entschlossen das Forum nur noch als Archiv zur Verfügung zu stellen. Somit bleibt es weiterhin möglich hier nach Lösungen zu suchen. Neue Beiträge können nicht mehr erstellt werden.
Wir empfehlen, für deine Fragen/Probleme Slack zu nutzen. Dort sind viele kompetente Benutzer aktiv und beantworten jegliche Fragen, gerne auch von REDAXO-Anfängern! Slack wird von uns sehr intensiv und meistens "rund um die Uhr" benutzt
Selbst einladen kannst Du dich hier: https://redaxo.org/slack/
Wir haben in letzter Zeit festgestellt, dass die Kommunikation via Slack viel schneller und zielführender ist als ein Beitrag im Forum. Aufgrund der neuen und besseren Möglichkeiten der Kommunikation haben wir uns entschlossen das Forum nur noch als Archiv zur Verfügung zu stellen. Somit bleibt es weiterhin möglich hier nach Lösungen zu suchen. Neue Beiträge können nicht mehr erstellt werden.
Wir empfehlen, für deine Fragen/Probleme Slack zu nutzen. Dort sind viele kompetente Benutzer aktiv und beantworten jegliche Fragen, gerne auch von REDAXO-Anfängern! Slack wird von uns sehr intensiv und meistens "rund um die Uhr" benutzt
Selbst einladen kannst Du dich hier: https://redaxo.org/slack/
Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>
hallo,
Du hast einen Fehler im Quelltext, das letzte div: </dic>
Du hast einen Fehler im Quelltext, das letzte div: </dic>
Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>
Ohweh, danke für den Hinweis!anita hat geschrieben:hallo,
Du hast einen Fehler im Quelltext, das letzte div: </dic>
Ich habe das nun korrigiert, das hat das Problem aber nicht kuriert.
Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>
hm,
was meinst Du mit html-container
was meinst Du mit html-container
Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>
Anders gesagt: Ich möchte dass <body> den ganzen Bildschirm ausfüllt. Zur Zeit hat es unten einen Bereich welcher vom body nicht ausgefüllt wird.anita hat geschrieben:hm,
was meinst Du mit html-container
Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>
achso,
da frag ich jetzt aber warum, was ist Sinn und Zweck der Übung?
Soll es nur in der Höhe sein? Aber wenn die Seite unten weiss ist, macht das doch gar keinen Sinn.
da frag ich jetzt aber warum, was ist Sinn und Zweck der Übung?
Soll es nur in der Höhe sein? Aber wenn die Seite unten weiss ist, macht das doch gar keinen Sinn.
Zuletzt geändert von anita am 3. Jul 2014, 12:25, insgesamt 1-mal geändert.
- runstop64
- Beiträge: 369
- Registriert: 23. Okt 2012, 21:34
- Wohnort: Hamburg
- Kontaktdaten: Website Facebook Twitter
Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>
Hi,
Ist dein Inhalt länger als das Browserfenster, kannst du statt height min-height verwenden.
Nebenbei bemerkt hast du Tabellenelemente ohne umschließende Tabelle im Quelltext und solltest nochmal die korrekte Auszeichnung der Attribute prüfen (http://webdesign.about.com/od/html5tags ... ibutes.htm), um Fehlerquellen zu verringern.
Code: Alles auswählen
html, body {
height:100%;
margin:0;
padding:0;
}
Nebenbei bemerkt hast du Tabellenelemente ohne umschließende Tabelle im Quelltext und solltest nochmal die korrekte Auszeichnung der Attribute prüfen (http://webdesign.about.com/od/html5tags ... ibutes.htm), um Fehlerquellen zu verringern.
Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>
@Anita: Es geht darum dass der blaue nav-div immer bis ganz unten gehen soll.
@Daniel: Super, mit dieser einfachen Lösung hat es geklappt, herzlichen Dank! Offenbar habe ich das trotz allem Pröbeln nie so gemacht.
Zu Deinen Hinweisen: Was ist denn drin das nach Tabelle klingt?
Ich habe dieses Redaxo-Paket von einem Kollegen, und während es toll ist dass da schon so viel vorbereitet ist kann es manchmal auch schwierig sein nachzuvollziehen warum er was gemacht hat.
Danke für den link bezüglich XHTML und """!
@Daniel: Super, mit dieser einfachen Lösung hat es geklappt, herzlichen Dank! Offenbar habe ich das trotz allem Pröbeln nie so gemacht.
Zu Deinen Hinweisen: Was ist denn drin das nach Tabelle klingt?
Ich habe dieses Redaxo-Paket von einem Kollegen, und während es toll ist dass da schon so viel vorbereitet ist kann es manchmal auch schwierig sein nachzuvollziehen warum er was gemacht hat.
Danke für den link bezüglich XHTML und """!
Zuletzt geändert von Rumi am 3. Jul 2014, 12:51, insgesamt 1-mal geändert.
Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>
Sorry, hab erst jetzt den Quelltext der verlinkten Seite richtig angeschaut, und natürlich die tr's und td's gefunden. Ja, das ist eine Vorlage meines Kollegen. Davon bleibt nichts in der Endfassung der Webseite.
Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>
Nun hab ich aber das Problem dass die Seite mit height=100% nicht scrollt wenn der Inhalt grösser ist als das Browserfenster, und mit min-heigh=100% wird der blaue nav-div doch wieder kürzer als das ganze Fenster. Hmmm.
http://kulturkoller.ch/prep_460/agentur
http://kulturkoller.ch/prep_460/
http://kulturkoller.ch/prep_460/agentur
http://kulturkoller.ch/prep_460/
- runstop64
- Beiträge: 369
- Registriert: 23. Okt 2012, 21:34
- Wohnort: Hamburg
- Kontaktdaten: Website Facebook Twitter
Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>
In welchem Browser testest du? Ich nehme an, IE9.
Der unterstützt das Flexbox-Modell (display:flex) noch nicht. Hier müsstest Du also entweder selbst was per JS bauen, wie Anita vorschlug, oder einen Polyfill benutzen: https://github.com/doctyper/flexie
Damit sollte es auch in älteren Browsern funktionieren.
Der unterstützt das Flexbox-Modell (display:flex) noch nicht. Hier müsstest Du also entweder selbst was per JS bauen, wie Anita vorschlug, oder einen Polyfill benutzen: https://github.com/doctyper/flexie
Damit sollte es auch in älteren Browsern funktionieren.
Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>
Ich benutze Firefox 30.0 für Mac, aber in Safari sieht es noch schlimmer aus.runstop64 hat geschrieben:In welchem Browser testest du? Ich nehme an, IE9.
Der unterstützt das Flexbox-Modell (display:flex) noch nicht. Hier müsstest Du also entweder selbst was per JS bauen, wie Anita vorschlug, oder einen Polyfill benutzen: https://github.com/doctyper/flexie
Damit sollte es auch in älteren Browsern funktionieren.
Ich versuchs mal mit diesem Polyfill, danke!
Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>
Ja, diese Idee hatte ich auch, aber das scheint mir etwas zu unsicher.runstop64 hat geschrieben:Alternativ kannst du natürlich auch einfach dafür sorgen, dass die Inhalte eine bestimmte Länge nicht unterschreiten...
- runstop64
- Beiträge: 369
- Registriert: 23. Okt 2012, 21:34
- Wohnort: Hamburg
- Kontaktdaten: Website Facebook Twitter
Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>
Der Polyfill ist eigentlich nur für ältere Browser nötig.
Für Safari benötigst du noch ein Prefix.
Schau dir dies hier mal an:
http://www.smashingmagazine.com/2013/05 ... h-flexbox/
http://www.sketchingwithcss.com/samplec ... sheet.html
Wenn Dein Navigationsbereich kurz bleibt, gäbe es auch noch die Möglichkeit den Bereich links zu fixieren und nicht mitscrollen zu lassen.
Edit: Link angepasst
Für Safari benötigst du noch ein Prefix.
Schau dir dies hier mal an:
http://www.smashingmagazine.com/2013/05 ... h-flexbox/
http://www.sketchingwithcss.com/samplec ... sheet.html
Wenn Dein Navigationsbereich kurz bleibt, gäbe es auch noch die Möglichkeit den Bereich links zu fixieren und nicht mitscrollen zu lassen.
Edit: Link angepasst
Zuletzt geändert von runstop64 am 3. Jul 2014, 15:14, insgesamt 1-mal geändert.
Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>
Hallo Danielrunstop64 hat geschrieben:Der Polyfill ist eigentlich nur für ältere Browser nötig.
Für Safari benötigst du noch ein Prefix.
Schau dir dies hier mal an:
http://www.smashingmagazine.com/2013/05 ... h-flexbox/
http://www.sketchingwithcss.com/samplec ... tml#center
Wenn Dein Navigationsbereich kurz bleibt, gäbe es auch noch die Möglichkeit den Bereich links zu fixieren und nicht mitscrollen zu lassen.
herzlichen Dank, mit dem ersten link (flexbox) und etwas Pröbeln hab ichs nun hingekriegt dass der linke blaue div immer ganz nach unten geht. Dafür hat er jetzt je nach Browser eine andere Breite und ein anderes layout. Jetzt kommt mir allenfalls das float in die Quere?
Ich pröble mal weiter. Das ist nicht das erste Mal dass ich Mühe habe mit divs die dynamisch die ganze Länge ausfüllen sollen. Ich hoffe ich habe nach dieser Odyssee dann mal ein Konzept das funktioniert!
Das mit dem Fixieren ist auch ein guter Ansatz, danke! Ich finde es aber trotzdem am besten wenn die Webseite allen Bildschirmgrössen standhält, und der Bereich rechts in keinem Fall eine unnötige leere Fläche aufweist.
Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>
Hmm, funktioniert doch noch nicht. Ich habe unbeabsichtigt von dieser flexbox-Webseite ein height:100% reinkopiert, das machte wieder den Zustand dass der linke div immer nach unten geht, aber nicht gescrollt werden kann.
Das ist ja mal wieder ein lustiger Tag.
Das ist ja mal wieder ein lustiger Tag.
Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>
vielleicht versuchst Du es doch mal mit Javascript, geht mit JQuery ganz einfach
JQuery einbinden nicht vergessen
Code: Alles auswählen
$(function(){
$(window).resize(function(){
$("div.classname").text("inner Height = " + $(window).height());
});
});
Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>
Ja, herzlichen Dank, ist wohl doch vernünftiger. Wäre schön gewesen endlich ein CSS zu haben das einfach funktioniert für diesen doch sehr häufigen Fall.anita hat geschrieben:vielleicht versuchst Du es doch mal mit Javascript, geht mit JQuery ganz einfach
JQuery einbinden nicht vergessenCode: Alles auswählen
$(function(){ $(window).resize(function(){ $("div.classname").text("inner Height = " + $(window).height()); }); });
- runstop64
- Beiträge: 369
- Registriert: 23. Okt 2012, 21:34
- Wohnort: Hamburg
- Kontaktdaten: Website Facebook Twitter
Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>
Das Problem ist allerdings, dass es mit CSS erst mit dem Flexbox-Modell möglich ist, Elemente einfach auf gleiche Höhe aufzuziehen. Sobald Du Browser unterstützen musst/willst, die das nicht können, kommst Du ums Tricksen nicht nicht herum.
Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>
Liebe Anitaanita hat geschrieben:vielleicht versuchst Du es doch mal mit Javascript, geht mit JQuery ganz einfach
JQuery einbinden nicht vergessenCode: Alles auswählen
$(function(){ $(window).resize(function(){ $("div.classname").text("inner Height = " + $(window).height()); }); });
tut mir leid dass ich jetzt so eine Anfängerfrage stellen muss: Wo füge ich diesen Code ein (im CSS oder im header), und muss ich noch der Funktion oder Variablen einen Namen geben?
Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>
Ja, diese Situation finde ich erstaunlich nach all den Jahren.runstop64 hat geschrieben:Das Problem ist allerdings, dass es mit CSS erst mit dem Flexbox-Modell möglich ist, Elemente einfach auf gleiche Höhe aufzuziehen. Sobald Du Browser unterstützen musst/willst, die das nicht können, kommst Du ums Tricksen nicht nicht herum.
Danke für Eure Hilfe!
Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>
gib dem <html> ein blaues, vertikal kachelndes hintergrundbild und gut ist. google: "faux columns"
Re: Probelm mit CSS: <body> ist nicht gleich hoch wie <html>
Ja, herzlichen Dank! Ich erinnere mich dass ich sogar bereits mit faux columns gearbeitet habe, in der Zwischenzeit hatte ichs aber wieder vergessen.
Noch einfacher gings nun mit der hier empfohlenen Methode:
http://www.vanseodesign.com/css/equal-height-columns/
Einfach den body mit der Hintergrundfarbe der kürzeren column füllen! Da bei der Webseite an der ich dran bin die Navi immer kürzer ist als der content funktioniert das prima.
Davor hatte ich was halbwegs Brauchbares mit Responsive Design und absoluter Positionierung hingekriegt. Aber das hier ist natürlich viel eleganter, simpler, und wohl auch Browser-kompatibler.
Ganz herzlichen Dank an alle!
Noch einfacher gings nun mit der hier empfohlenen Methode:
http://www.vanseodesign.com/css/equal-height-columns/
Einfach den body mit der Hintergrundfarbe der kürzeren column füllen! Da bei der Webseite an der ich dran bin die Navi immer kürzer ist als der content funktioniert das prima.
Davor hatte ich was halbwegs Brauchbares mit Responsive Design und absoluter Positionierung hingekriegt. Aber das hier ist natürlich viel eleganter, simpler, und wohl auch Browser-kompatibler.
Ganz herzlichen Dank an alle!