Re: [TYPO3-german] Problem mit Template - Browser zeigt was Anderes an als die Code-Analyse (Firefox)
Hallo Jörg, das Ganze läuft mit Markern auf Basis eines professionellen Templates, das allerdings auf festen Einstellungen für Breite usw aufbaut. Einen Link gibt es nicht, das die Seite noch im Aufbau ist und nur auf einem (also meinem) privaten Rechner läuft. Diese Entscheidung ist für mich nicht beeinflussbar, sie wurde auf höherer Ebene getroffen. Cu, Steffen Am 24.04.2012 20:18, schrieb Jörg Paßmann: Hallo Steffen, ganz hilfreich wäre ein Link unter dem man sich das mal anschauen kann. Dann solltest Du noch kurz schreiben wie Du den in typo3 gearbeitet hast: Mit Markern oder z.B. mit Templa Voila? Gruß Jörg Am 23.04.2012 16:23, schrieb Steffen Liebig: Hallo zusammen, ich sitze derzeit daran, eine neue Webseite zu erstellen. Nachdem ein professionelles Template sich nicht so umgestalten ließ, wie ich das wollte, habe ich es selbst versucht. Folgendes Aussehen ist das Ziel: 1) Header, evtl Top-Navigation (wichtige Oberseiten), 3 Spalten (Navigation, Inhalt, Logos/Bannerwerbung), Fußzeile (z. B. Copyright-Hinweis) 2) flexible Positionierung der Spalten (div's, floating) 3) Orientierung zumindest der Mittelspalte an der Fenstergröße 4) linke und rechte Spalte am sinnvollsten mit fixer Breite bisherige Ideen zum Aufbau des Templates: - Gesamt-div (page-content) - enthalten sind Header, Topnavi, Inhalts-div und Footer - Inhalts-div - enthält 3 Spalten (Navigation = left: feste Breite, floating links; middle: floating rechts; right: feste Breite, floating rechts) - je Spalte ein separater div für den eigentlichen Inhalt (Ziel: separate Größendefinitionen und Vervielfältigungsmöglichkeit innerhalb der Spalte) - jeweils per CSS width=100%; - Footer: floating rechts, width: 100%; separater div für Inhalt (width: 100%) Im Wesentlichen funktioniert das bereits, allerdings haben sich einige Probleme ergeben: 1) die Fußzeile macht nicht, was sie soll - setze ich statt relativer eine absolute Positionierung (position: absolute), vagabundiert der Footer quer durchs Bild - je nachdem, was alles absolut steht, sitzt er mal oben und mal mittendrin - hält sich also nicht an seine Position nach dem Inhalts-div, sondern scheint sich eher an der letzten relativ positionierten Spalte zu orientieren 2) in der Analyse mit Firefox steht laut Code alles an der richtigen Stelle, aber der Bildschirm zeigt was Anderes an - die hellen Stellen in der Anzeige ergeben, dass weder der page-content noch der Inhalts-div all das beinhalten, was drin sein sollte...aber wieso stimmt dann im Code alles ?! *confused* 3) gebe ich Allem ein position: relative, passt es optisch, aber die Mittelspalte nutzt nicht den vollen Platz bzw tut dies nur bei 800*600er-Auflösung (zufällig die richtige Gesamtbreite dafür *lach*) - Prozentangaben für die Breite des Mittelspalten-div's: hat Auswirkungen auf den div eine Ebene höher und schiebt ab einem gewissen Punkt (ca. 60% der Gesamtbreite) bei Platzauffüllung von rechts her (ist das normal ?!) und kleiner Fensterbreite die Navigationsspalte aus dem Bild. Passe ich in dieser Richtung an, ist in einem größeren Fenster viel Platz zwischen den Spalten. Sinnvolle automatische Platznutzung sieht m. E. anders aus. Mir ist klar, dass die Problempunkte 1 und 2 zusammen einen Erklärungsansatz zu liefern scheinen (wenn in den div's nicht alles drin ist, was drin sein soll, hält sich der Footer an Gott weiß was, z. B. an den letzten relativ positionerten div ?!). Wäre logisch, ich kapiere aber den Grund nicht - der Code stimmt ja laut Analyse und trotzdem macht die Bildschirmanzeige was komplett Anderes. Hat jemand eine Ahnung, was da los sein könnte ? Ich bin für jede Hilfe dankbar. Code-Dateien etc kann ich bei Bedarf aber erst heute nachmittag schicken - ich sitze am Arbeitsplatz, meine Typo3-Installation liegt daheim auf meinem Privatrechner. Bis bald, Steffen ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Problem mit Template - Browser zeigt was Anderes an als die Code-Analyse (Firefox)
Hallo zusammen, das Thema hat sich vorerst erledigt - nach der Umsetzung von Peter's Tipps macht die Seite, was ich will. Bei problemen melde ich mich nochmal. Besten Dank für alle Tipps und Anregungen Steffen Am 23.04.2012 16:23, schrieb Steffen Liebig: Hallo zusammen, ich sitze derzeit daran, eine neue Webseite zu erstellen. Nachdem ein professionelles Template sich nicht so umgestalten ließ, wie ich das wollte, habe ich es selbst versucht. Folgendes Aussehen ist das Ziel: 1) Header, evtl Top-Navigation (wichtige Oberseiten), 3 Spalten (Navigation, Inhalt, Logos/Bannerwerbung), Fußzeile (z. B. Copyright-Hinweis) 2) flexible Positionierung der Spalten (div's, floating) 3) Orientierung zumindest der Mittelspalte an der Fenstergröße 4) linke und rechte Spalte am sinnvollsten mit fixer Breite bisherige Ideen zum Aufbau des Templates: - Gesamt-div (page-content) - enthalten sind Header, Topnavi, Inhalts-div und Footer - Inhalts-div - enthält 3 Spalten (Navigation = left: feste Breite, floating links; middle: floating rechts; right: feste Breite, floating rechts) - je Spalte ein separater div für den eigentlichen Inhalt (Ziel: separate Größendefinitionen und Vervielfältigungsmöglichkeit innerhalb der Spalte) - jeweils per CSS width=100%; - Footer: floating rechts, width: 100%; separater div für Inhalt (width: 100%) Im Wesentlichen funktioniert das bereits, allerdings haben sich einige Probleme ergeben: 1) die Fußzeile macht nicht, was sie soll - setze ich statt relativer eine absolute Positionierung (position: absolute), vagabundiert der Footer quer durchs Bild - je nachdem, was alles absolut steht, sitzt er mal oben und mal mittendrin - hält sich also nicht an seine Position nach dem Inhalts-div, sondern scheint sich eher an der letzten relativ positionierten Spalte zu orientieren 2) in der Analyse mit Firefox steht laut Code alles an der richtigen Stelle, aber der Bildschirm zeigt was Anderes an - die hellen Stellen in der Anzeige ergeben, dass weder der page-content noch der Inhalts-div all das beinhalten, was drin sein sollte...aber wieso stimmt dann im Code alles ?! *confused* 3) gebe ich Allem ein position: relative, passt es optisch, aber die Mittelspalte nutzt nicht den vollen Platz bzw tut dies nur bei 800*600er-Auflösung (zufällig die richtige Gesamtbreite dafür *lach*) - Prozentangaben für die Breite des Mittelspalten-div's: hat Auswirkungen auf den div eine Ebene höher und schiebt ab einem gewissen Punkt (ca. 60% der Gesamtbreite) bei Platzauffüllung von rechts her (ist das normal ?!) und kleiner Fensterbreite die Navigationsspalte aus dem Bild. Passe ich in dieser Richtung an, ist in einem größeren Fenster viel Platz zwischen den Spalten. Sinnvolle automatische Platznutzung sieht m. E. anders aus. Mir ist klar, dass die Problempunkte 1 und 2 zusammen einen Erklärungsansatz zu liefern scheinen (wenn in den div's nicht alles drin ist, was drin sein soll, hält sich der Footer an Gott weiß was, z. B. an den letzten relativ positionerten div ?!). Wäre logisch, ich kapiere aber den Grund nicht - der Code stimmt ja laut Analyse und trotzdem macht die Bildschirmanzeige was komplett Anderes. Hat jemand eine Ahnung, was da los sein könnte ? Ich bin für jede Hilfe dankbar. Code-Dateien etc kann ich bei Bedarf aber erst heute nachmittag schicken - ich sitze am Arbeitsplatz, meine Typo3-Installation liegt daheim auf meinem Privatrechner. Bis bald, Steffen ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Problem mit Template - Browser zeigt was Anderes an als die Code-Analyse (Firefox)
Hi, du kannst dir auch mal templavoila_framework und die skins unter http://themes.kay-strobach.de ansehen, die meisten, auch die ohne Downloadlink kann ich nach Rücksprache zur Verfügung stellen ;) Grüße Kay Am 23.04.2012 16:23, schrieb Steffen Liebig: Hallo zusammen, ich sitze derzeit daran, eine neue Webseite zu erstellen. Nachdem ein professionelles Template sich nicht so umgestalten ließ, wie ich das wollte, habe ich es selbst versucht. Folgendes Aussehen ist das Ziel: 1) Header, evtl Top-Navigation (wichtige Oberseiten), 3 Spalten (Navigation, Inhalt, Logos/Bannerwerbung), Fußzeile (z. B. Copyright-Hinweis) 2) flexible Positionierung der Spalten (div's, floating) 3) Orientierung zumindest der Mittelspalte an der Fenstergröße 4) linke und rechte Spalte am sinnvollsten mit fixer Breite bisherige Ideen zum Aufbau des Templates: - Gesamt-div (page-content) - enthalten sind Header, Topnavi, Inhalts-div und Footer - Inhalts-div - enthält 3 Spalten (Navigation = left: feste Breite, floating links; middle: floating rechts; right: feste Breite, floating rechts) - je Spalte ein separater div für den eigentlichen Inhalt (Ziel: separate Größendefinitionen und Vervielfältigungsmöglichkeit innerhalb der Spalte) - jeweils per CSS width=100%; - Footer: floating rechts, width: 100%; separater div für Inhalt (width: 100%) Im Wesentlichen funktioniert das bereits, allerdings haben sich einige Probleme ergeben: 1) die Fußzeile macht nicht, was sie soll - setze ich statt relativer eine absolute Positionierung (position: absolute), vagabundiert der Footer quer durchs Bild - je nachdem, was alles absolut steht, sitzt er mal oben und mal mittendrin - hält sich also nicht an seine Position nach dem Inhalts-div, sondern scheint sich eher an der letzten relativ positionierten Spalte zu orientieren 2) in der Analyse mit Firefox steht laut Code alles an der richtigen Stelle, aber der Bildschirm zeigt was Anderes an - die hellen Stellen in der Anzeige ergeben, dass weder der page-content noch der Inhalts-div all das beinhalten, was drin sein sollte...aber wieso stimmt dann im Code alles ?! *confused* 3) gebe ich Allem ein position: relative, passt es optisch, aber die Mittelspalte nutzt nicht den vollen Platz bzw tut dies nur bei 800*600er-Auflösung (zufällig die richtige Gesamtbreite dafür *lach*) - Prozentangaben für die Breite des Mittelspalten-div's: hat Auswirkungen auf den div eine Ebene höher und schiebt ab einem gewissen Punkt (ca. 60% der Gesamtbreite) bei Platzauffüllung von rechts her (ist das normal ?!) und kleiner Fensterbreite die Navigationsspalte aus dem Bild. Passe ich in dieser Richtung an, ist in einem größeren Fenster viel Platz zwischen den Spalten. Sinnvolle automatische Platznutzung sieht m. E. anders aus. Mir ist klar, dass die Problempunkte 1 und 2 zusammen einen Erklärungsansatz zu liefern scheinen (wenn in den div's nicht alles drin ist, was drin sein soll, hält sich der Footer an Gott weiß was, z. B. an den letzten relativ positionerten div ?!). Wäre logisch, ich kapiere aber den Grund nicht - der Code stimmt ja laut Analyse und trotzdem macht die Bildschirmanzeige was komplett Anderes. Hat jemand eine Ahnung, was da los sein könnte ? Ich bin für jede Hilfe dankbar. Code-Dateien etc kann ich bei Bedarf aber erst heute nachmittag schicken - ich sitze am Arbeitsplatz, meine Typo3-Installation liegt daheim auf meinem Privatrechner. Bis bald, Steffen -- http://www.kay-strobach.de - Open Source Rocks TYPO3 inspiring people to share! Get involved: http://typo3.org Answer was useful: https://flattr.com/profile/kaystrobach ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Problem mit Template - Browser zeigt was Anderes an als die Code-Analyse (Firefox)
Tach Steffen,
wenn's eben geht, würde ich auf position: absolute und position:
relative bei DIVs verzichten. Meist ist es gar nicht notwendig, vor
allem bei variabler Länge des Inhalts.
Deinem dreispaltigen Aufbau der Seiten mit Breite der mittleren Spalte,
die von der Fenstergröße abhängt, kommt vielleicht das folgende Gerüst
nahe. Sowas nehme ich als Trockenübung, um zu gucken, ob das sichtbare
Ergebnis meinen Vorstellungen nahe kommt.
Viele Grüße, Geoch
html
head
style type=text/css
body {
margin: 0;
padding: 0;
background: white;
color: black;
font: 13px/1.3 Verdana, Arial, sans-serif;
}
#links {
float: left;
width: 200px;
border: 1px solid red;
}
#rechts {
float: right;
width: 200px;
border: 1px solid red;
}
#mitte {
margin: 0 210px;
border: 1px solid green;
}
#inlinks {
float: left;
width: 100px;
margin-left: 50px;
border: 1px solid magenta;
}
#inrechts {
float: right;
width: 100px;
margin-right: 50px;
border: 1px solid magenta;
}
#inmitte {
margin: 0 160px;
border: 1px solid blue;
}
#fusszeile {
clear: both;
margin: 20px 20px 50px;
border: 1px solid black;
}
/style
/head
body
div id=links
pLorem/p
/div
div id=rechts
pLorem ipsum./p
/div
div id=mitte
pLorem ipsum dolor sit amet, consetetur sadipscing elitr, /p
div id=inlinks
pLorem/p
/div
div id=inrechts
pLorem ipsum./p
/div
div id=inmitte
pLorem ipsum dolor sit amet, consetetur sadipscing elitr, /p
pnbsp;/p
/div
/div
div id=fusszeile
Hier ist die Fuszlig;zeile.
/div
/body
/html
Am 23.04.2012 16:23, schrieb Steffen Liebig:
Hallo zusammen,
ich sitze derzeit daran, eine neue Webseite zu erstellen. Nachdem ein
professionelles Template sich nicht so umgestalten ließ, wie ich das
wollte, habe ich es selbst versucht.
Folgendes Aussehen ist das Ziel:
1) Header, evtl Top-Navigation (wichtige Oberseiten), 3 Spalten
(Navigation, Inhalt, Logos/Bannerwerbung), Fußzeile (z. B.
Copyright-Hinweis)
2) flexible Positionierung der Spalten (div's, floating)
3) Orientierung zumindest der Mittelspalte an der Fenstergröße
4) linke und rechte Spalte am sinnvollsten mit fixer Breite
bisherige Ideen zum Aufbau des Templates:
- Gesamt-div (page-content)
- enthalten sind Header, Topnavi, Inhalts-div und Footer
- Inhalts-div
- enthält 3 Spalten (Navigation = left: feste Breite, floating links;
middle: floating rechts; right: feste Breite, floating rechts)
- je Spalte ein separater div für den eigentlichen Inhalt (Ziel:
separate Größendefinitionen und Vervielfältigungsmöglichkeit innerhalb
der Spalte)
- jeweils per CSS width=100%;
- Footer: floating rechts, width: 100%; separater div für Inhalt
(width: 100%)
Im Wesentlichen funktioniert das bereits, allerdings haben sich einige
Probleme ergeben:
1) die Fußzeile macht nicht, was sie soll
- setze ich statt relativer eine absolute Positionierung (position:
absolute), vagabundiert der Footer quer durchs Bild - je nachdem, was
alles absolut steht, sitzt er mal oben und mal mittendrin - hält sich
also nicht an seine Position nach dem Inhalts-div, sondern scheint
sich eher an der letzten relativ positionierten Spalte zu orientieren
2) in der Analyse mit Firefox steht laut Code alles an der richtigen
Stelle, aber der Bildschirm zeigt was Anderes an
- die hellen Stellen in der Anzeige ergeben, dass weder der
page-content noch der Inhalts-div all das beinhalten, was drin sein
sollte...aber wieso stimmt dann im Code alles ?! *confused*
3) gebe ich Allem ein position: relative, passt es optisch, aber die
Mittelspalte nutzt nicht den vollen Platz bzw tut dies nur bei
800*600er-Auflösung (zufällig die richtige Gesamtbreite dafür *lach*)
- Prozentangaben für die Breite des Mittelspalten-div's: hat
Auswirkungen auf den div eine Ebene höher und schiebt ab einem
gewissen Punkt (ca. 60% der Gesamtbreite) bei Platzauffüllung von
rechts her (ist das normal ?!) und kleiner Fensterbreite die
Navigationsspalte aus dem Bild. Passe ich in dieser Richtung an, ist
in einem größeren Fenster viel Platz zwischen den Spalten.
Sinnvolle automatische Platznutzung sieht m. E. anders aus.
Mir ist klar, dass die Problempunkte 1 und 2 zusammen einen
Erklärungsansatz zu liefern scheinen (wenn in den div's nicht alles
drin ist, was drin sein soll, hält sich der Footer an Gott weiß was,
z. B. an den letzten relativ positionerten div ?!). Wäre logisch, ich
kapiere aber den Grund nicht - der Code stimmt ja laut Analyse und
trotzdem macht die Bildschirmanzeige was komplett Anderes.
Hat jemand eine Ahnung, was da los sein könnte ? Ich bin für jede
Hilfe dankbar. Code-Dateien etc kann ich bei Bedarf aber erst heute
nachmittag schicken - ich sitze am Arbeitsplatz, meine
Typo3-Installation liegt daheim auf meinem Privatrechner.
Bis bald, Steffen
___
TYPO3-german mailing list
TYPO3-german@lists.typo3.org
Re: [TYPO3-german] Problem mit Template - Browser zeigt was Anderes an als die Code-Analyse (Firefox)
Jup kann man mal ausprobieren.
Firma dankt :-).
Am 24.04.2012 10:07, schrieb Geoch Clasbrummel:
Tach Steffen,
wenn's eben geht, würde ich auf position: absolute und position:
relative bei DIVs verzichten. Meist ist es gar nicht notwendig, vor
allem bei variabler Länge des Inhalts.
Deinem dreispaltigen Aufbau der Seiten mit Breite der mittleren Spalte,
die von der Fenstergröße abhängt, kommt vielleicht das folgende Gerüst
nahe. Sowas nehme ich als Trockenübung, um zu gucken, ob das sichtbare
Ergebnis meinen Vorstellungen nahe kommt.
Viele Grüße, Geoch
html
head
style type=text/css
body {
margin: 0;
padding: 0;
background: white;
color: black;
font: 13px/1.3 Verdana, Arial, sans-serif;
}
#links {
float: left;
width: 200px;
border: 1px solid red;
}
#rechts {
float: right;
width: 200px;
border: 1px solid red;
}
#mitte {
margin: 0 210px;
border: 1px solid green;
}
#inlinks {
float: left;
width: 100px;
margin-left: 50px;
border: 1px solid magenta;
}
#inrechts {
float: right;
width: 100px;
margin-right: 50px;
border: 1px solid magenta;
}
#inmitte {
margin: 0 160px;
border: 1px solid blue;
}
#fusszeile {
clear: both;
margin: 20px 20px 50px;
border: 1px solid black;
}
/style
/head
body
div id=links
pLorem/p
/div
div id=rechts
pLorem ipsum./p
/div
div id=mitte
pLorem ipsum dolor sit amet, consetetur sadipscing elitr, /p
div id=inlinks
pLorem/p
/div
div id=inrechts
pLorem ipsum./p
/div
div id=inmitte
pLorem ipsum dolor sit amet, consetetur sadipscing elitr, /p
pnbsp;/p
/div
/div
div id=fusszeile
Hier ist die Fuszlig;zeile.
/div
/body
/html
Am 23.04.2012 16:23, schrieb Steffen Liebig:
Hallo zusammen,
ich sitze derzeit daran, eine neue Webseite zu erstellen. Nachdem ein
professionelles Template sich nicht so umgestalten ließ, wie ich das
wollte, habe ich es selbst versucht.
Folgendes Aussehen ist das Ziel:
1) Header, evtl Top-Navigation (wichtige Oberseiten), 3 Spalten
(Navigation, Inhalt, Logos/Bannerwerbung), Fußzeile (z. B.
Copyright-Hinweis)
2) flexible Positionierung der Spalten (div's, floating)
3) Orientierung zumindest der Mittelspalte an der Fenstergröße
4) linke und rechte Spalte am sinnvollsten mit fixer Breite
bisherige Ideen zum Aufbau des Templates:
- Gesamt-div (page-content)
- enthalten sind Header, Topnavi, Inhalts-div und Footer
- Inhalts-div
- enthält 3 Spalten (Navigation = left: feste Breite, floating links;
middle: floating rechts; right: feste Breite, floating rechts)
- je Spalte ein separater div für den eigentlichen Inhalt (Ziel:
separate Größendefinitionen und Vervielfältigungsmöglichkeit innerhalb
der Spalte)
- jeweils per CSS width=100%;
- Footer: floating rechts, width: 100%; separater div für Inhalt
(width: 100%)
Im Wesentlichen funktioniert das bereits, allerdings haben sich einige
Probleme ergeben:
1) die Fußzeile macht nicht, was sie soll
- setze ich statt relativer eine absolute Positionierung (position:
absolute), vagabundiert der Footer quer durchs Bild - je nachdem, was
alles absolut steht, sitzt er mal oben und mal mittendrin - hält sich
also nicht an seine Position nach dem Inhalts-div, sondern scheint
sich eher an der letzten relativ positionierten Spalte zu orientieren
2) in der Analyse mit Firefox steht laut Code alles an der richtigen
Stelle, aber der Bildschirm zeigt was Anderes an
- die hellen Stellen in der Anzeige ergeben, dass weder der
page-content noch der Inhalts-div all das beinhalten, was drin sein
sollte...aber wieso stimmt dann im Code alles ?! *confused*
3) gebe ich Allem ein position: relative, passt es optisch, aber die
Mittelspalte nutzt nicht den vollen Platz bzw tut dies nur bei
800*600er-Auflösung (zufällig die richtige Gesamtbreite dafür *lach*)
- Prozentangaben für die Breite des Mittelspalten-div's: hat
Auswirkungen auf den div eine Ebene höher und schiebt ab einem
gewissen Punkt (ca. 60% der Gesamtbreite) bei Platzauffüllung von
rechts her (ist das normal ?!) und kleiner Fensterbreite die
Navigationsspalte aus dem Bild. Passe ich in dieser Richtung an, ist
in einem größeren Fenster viel Platz zwischen den Spalten.
Sinnvolle automatische Platznutzung sieht m. E. anders aus.
Mir ist klar, dass die Problempunkte 1 und 2 zusammen einen
Erklärungsansatz zu liefern scheinen (wenn in den div's nicht alles
drin ist, was drin sein soll, hält sich der Footer an Gott weiß was,
z. B. an den letzten relativ positionerten div ?!). Wäre logisch, ich
kapiere aber den Grund nicht - der Code stimmt ja laut Analyse und
trotzdem macht die Bildschirmanzeige was komplett Anderes.
Hat jemand eine Ahnung, was da los sein könnte ? Ich bin für jede
Hilfe dankbar. Code-Dateien etc kann ich bei Bedarf aber erst heute
nachmittag schicken - ich sitze am Arbeitsplatz, meine
Typo3-Installation liegt daheim auf meinem Privatrechner.
Bis bald, Steffen
___
TYPO3-german mailing list
TYPO3-german@lists.typo3.org
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Problem mit Template - Browser zeigt was Anderes an als die Code-Analyse (Firefox)
Hallo Steffen, ganz hilfreich wäre ein Link unter dem man sich das mal anschauen kann. Dann solltest Du noch kurz schreiben wie Du den in typo3 gearbeitet hast: Mit Markern oder z.B. mit Templa Voila? Gruß Jörg Am 23.04.2012 16:23, schrieb Steffen Liebig: Hallo zusammen, ich sitze derzeit daran, eine neue Webseite zu erstellen. Nachdem ein professionelles Template sich nicht so umgestalten ließ, wie ich das wollte, habe ich es selbst versucht. Folgendes Aussehen ist das Ziel: 1) Header, evtl Top-Navigation (wichtige Oberseiten), 3 Spalten (Navigation, Inhalt, Logos/Bannerwerbung), Fußzeile (z. B. Copyright-Hinweis) 2) flexible Positionierung der Spalten (div's, floating) 3) Orientierung zumindest der Mittelspalte an der Fenstergröße 4) linke und rechte Spalte am sinnvollsten mit fixer Breite bisherige Ideen zum Aufbau des Templates: - Gesamt-div (page-content) - enthalten sind Header, Topnavi, Inhalts-div und Footer - Inhalts-div - enthält 3 Spalten (Navigation = left: feste Breite, floating links; middle: floating rechts; right: feste Breite, floating rechts) - je Spalte ein separater div für den eigentlichen Inhalt (Ziel: separate Größendefinitionen und Vervielfältigungsmöglichkeit innerhalb der Spalte) - jeweils per CSS width=100%; - Footer: floating rechts, width: 100%; separater div für Inhalt (width: 100%) Im Wesentlichen funktioniert das bereits, allerdings haben sich einige Probleme ergeben: 1) die Fußzeile macht nicht, was sie soll - setze ich statt relativer eine absolute Positionierung (position: absolute), vagabundiert der Footer quer durchs Bild - je nachdem, was alles absolut steht, sitzt er mal oben und mal mittendrin - hält sich also nicht an seine Position nach dem Inhalts-div, sondern scheint sich eher an der letzten relativ positionierten Spalte zu orientieren 2) in der Analyse mit Firefox steht laut Code alles an der richtigen Stelle, aber der Bildschirm zeigt was Anderes an - die hellen Stellen in der Anzeige ergeben, dass weder der page-content noch der Inhalts-div all das beinhalten, was drin sein sollte...aber wieso stimmt dann im Code alles ?! *confused* 3) gebe ich Allem ein position: relative, passt es optisch, aber die Mittelspalte nutzt nicht den vollen Platz bzw tut dies nur bei 800*600er-Auflösung (zufällig die richtige Gesamtbreite dafür *lach*) - Prozentangaben für die Breite des Mittelspalten-div's: hat Auswirkungen auf den div eine Ebene höher und schiebt ab einem gewissen Punkt (ca. 60% der Gesamtbreite) bei Platzauffüllung von rechts her (ist das normal ?!) und kleiner Fensterbreite die Navigationsspalte aus dem Bild. Passe ich in dieser Richtung an, ist in einem größeren Fenster viel Platz zwischen den Spalten. Sinnvolle automatische Platznutzung sieht m. E. anders aus. Mir ist klar, dass die Problempunkte 1 und 2 zusammen einen Erklärungsansatz zu liefern scheinen (wenn in den div's nicht alles drin ist, was drin sein soll, hält sich der Footer an Gott weiß was, z. B. an den letzten relativ positionerten div ?!). Wäre logisch, ich kapiere aber den Grund nicht - der Code stimmt ja laut Analyse und trotzdem macht die Bildschirmanzeige was komplett Anderes. Hat jemand eine Ahnung, was da los sein könnte ? Ich bin für jede Hilfe dankbar. Code-Dateien etc kann ich bei Bedarf aber erst heute nachmittag schicken - ich sitze am Arbeitsplatz, meine Typo3-Installation liegt daheim auf meinem Privatrechner. Bis bald, Steffen ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Problem mit Template - Browser zeigt was Anderes an als die Code-Analyse (Firefox)
Hallo Steffen,
mein Tipp um dir die Quälerei mit floats, position, overflow, etc zu ersparen:
http://foundation.zurb.com/docs/grid.php
Das ist ein Top CSS Framwork das auch noch eine ganze Reihe anderer
Elemente als nur ein Grid mitbringt.
Damit kannst du dein Layout in ca. 5 Sekunden umsetzen.
Hoffe das hilft
Ulrich
Am 24. April 2012 15:00 schrieb Steffen Liebig steffen.lie...@gmx.de:
Jup kann man mal ausprobieren.
Firma dankt :-).
Am 24.04.2012 10:07, schrieb Geoch Clasbrummel:
Tach Steffen,
wenn's eben geht, würde ich auf position: absolute und position:
relative bei DIVs verzichten. Meist ist es gar nicht notwendig, vor
allem bei variabler Länge des Inhalts.
Deinem dreispaltigen Aufbau der Seiten mit Breite der mittleren Spalte,
die von der Fenstergröße abhängt, kommt vielleicht das folgende Gerüst
nahe. Sowas nehme ich als Trockenübung, um zu gucken, ob das sichtbare
Ergebnis meinen Vorstellungen nahe kommt.
Viele Grüße, Geoch
html
head
style type=text/css
body {
margin: 0;
padding: 0;
background: white;
color: black;
font: 13px/1.3 Verdana, Arial, sans-serif;
}
#links {
float: left;
width: 200px;
border: 1px solid red;
}
#rechts {
float: right;
width: 200px;
border: 1px solid red;
}
#mitte {
margin: 0 210px;
border: 1px solid green;
}
#inlinks {
float: left;
width: 100px;
margin-left: 50px;
border: 1px solid magenta;
}
#inrechts {
float: right;
width: 100px;
margin-right: 50px;
border: 1px solid magenta;
}
#inmitte {
margin: 0 160px;
border: 1px solid blue;
}
#fusszeile {
clear: both;
margin: 20px 20px 50px;
border: 1px solid black;
}
/style
/head
body
div id=links
pLorem/p
/div
div id=rechts
pLorem ipsum./p
/div
div id=mitte
pLorem ipsum dolor sit amet, consetetur sadipscing elitr, /p
div id=inlinks
pLorem/p
/div
div id=inrechts
pLorem ipsum./p
/div
div id=inmitte
pLorem ipsum dolor sit amet, consetetur sadipscing elitr, /p
pnbsp;/p
/div
/div
div id=fusszeile
Hier ist die Fuszlig;zeile.
/div
/body
/html
Am 23.04.2012 16:23, schrieb Steffen Liebig:
Hallo zusammen,
ich sitze derzeit daran, eine neue Webseite zu erstellen. Nachdem ein
professionelles Template sich nicht so umgestalten ließ, wie ich das
wollte, habe ich es selbst versucht.
Folgendes Aussehen ist das Ziel:
1) Header, evtl Top-Navigation (wichtige Oberseiten), 3 Spalten
(Navigation, Inhalt, Logos/Bannerwerbung), Fußzeile (z. B.
Copyright-Hinweis)
2) flexible Positionierung der Spalten (div's, floating)
3) Orientierung zumindest der Mittelspalte an der Fenstergröße
4) linke und rechte Spalte am sinnvollsten mit fixer Breite
bisherige Ideen zum Aufbau des Templates:
- Gesamt-div (page-content)
- enthalten sind Header, Topnavi, Inhalts-div und Footer
- Inhalts-div
- enthält 3 Spalten (Navigation = left: feste Breite, floating links;
middle: floating rechts; right: feste Breite, floating rechts)
- je Spalte ein separater div für den eigentlichen Inhalt (Ziel:
separate Größendefinitionen und Vervielfältigungsmöglichkeit innerhalb
der Spalte)
- jeweils per CSS width=100%;
- Footer: floating rechts, width: 100%; separater div für Inhalt
(width: 100%)
Im Wesentlichen funktioniert das bereits, allerdings haben sich einige
Probleme ergeben:
1) die Fußzeile macht nicht, was sie soll
- setze ich statt relativer eine absolute Positionierung (position:
absolute), vagabundiert der Footer quer durchs Bild - je nachdem, was
alles absolut steht, sitzt er mal oben und mal mittendrin - hält sich
also nicht an seine Position nach dem Inhalts-div, sondern scheint
sich eher an der letzten relativ positionierten Spalte zu orientieren
2) in der Analyse mit Firefox steht laut Code alles an der richtigen
Stelle, aber der Bildschirm zeigt was Anderes an
- die hellen Stellen in der Anzeige ergeben, dass weder der
page-content noch der Inhalts-div all das beinhalten, was drin sein
sollte...aber wieso stimmt dann im Code alles ?! *confused*
3) gebe ich Allem ein position: relative, passt es optisch, aber die
Mittelspalte nutzt nicht den vollen Platz bzw tut dies nur bei
800*600er-Auflösung (zufällig die richtige Gesamtbreite dafür *lach*)
- Prozentangaben für die Breite des Mittelspalten-div's: hat
Auswirkungen auf den div eine Ebene höher und schiebt ab einem
gewissen Punkt (ca. 60% der Gesamtbreite) bei Platzauffüllung von
rechts her (ist das normal ?!) und kleiner Fensterbreite die
Navigationsspalte aus dem Bild. Passe ich in dieser Richtung an, ist
in einem größeren Fenster viel Platz zwischen den Spalten.
Sinnvolle automatische Platznutzung sieht m. E. anders aus.
Mir ist klar, dass die Problempunkte 1 und 2 zusammen einen
Erklärungsansatz zu liefern scheinen (wenn in den div's nicht alles
drin ist, was drin sein soll, hält sich der Footer an Gott weiß was,
z. B. an den letzten relativ positionerten div ?!). Wäre logisch, ich
kapiere aber den Grund nicht - der Code stimmt ja laut Analyse und
[TYPO3-german] Problem mit Template - Browser zeigt was Anderes an als die Code-Analyse (Firefox)
Hallo zusammen, ich sitze derzeit daran, eine neue Webseite zu erstellen. Nachdem ein professionelles Template sich nicht so umgestalten ließ, wie ich das wollte, habe ich es selbst versucht. Folgendes Aussehen ist das Ziel: 1) Header, evtl Top-Navigation (wichtige Oberseiten), 3 Spalten (Navigation, Inhalt, Logos/Bannerwerbung), Fußzeile (z. B. Copyright-Hinweis) 2) flexible Positionierung der Spalten (div's, floating) 3) Orientierung zumindest der Mittelspalte an der Fenstergröße 4) linke und rechte Spalte am sinnvollsten mit fixer Breite bisherige Ideen zum Aufbau des Templates: - Gesamt-div (page-content) - enthalten sind Header, Topnavi, Inhalts-div und Footer - Inhalts-div - enthält 3 Spalten (Navigation = left: feste Breite, floating links; middle: floating rechts; right: feste Breite, floating rechts) - je Spalte ein separater div für den eigentlichen Inhalt (Ziel: separate Größendefinitionen und Vervielfältigungsmöglichkeit innerhalb der Spalte) - jeweils per CSS width=100%; - Footer: floating rechts, width: 100%; separater div für Inhalt (width: 100%) Im Wesentlichen funktioniert das bereits, allerdings haben sich einige Probleme ergeben: 1) die Fußzeile macht nicht, was sie soll - setze ich statt relativer eine absolute Positionierung (position: absolute), vagabundiert der Footer quer durchs Bild - je nachdem, was alles absolut steht, sitzt er mal oben und mal mittendrin - hält sich also nicht an seine Position nach dem Inhalts-div, sondern scheint sich eher an der letzten relativ positionierten Spalte zu orientieren 2) in der Analyse mit Firefox steht laut Code alles an der richtigen Stelle, aber der Bildschirm zeigt was Anderes an - die hellen Stellen in der Anzeige ergeben, dass weder der page-content noch der Inhalts-div all das beinhalten, was drin sein sollte...aber wieso stimmt dann im Code alles ?! *confused* 3) gebe ich Allem ein position: relative, passt es optisch, aber die Mittelspalte nutzt nicht den vollen Platz bzw tut dies nur bei 800*600er-Auflösung (zufällig die richtige Gesamtbreite dafür *lach*) - Prozentangaben für die Breite des Mittelspalten-div's: hat Auswirkungen auf den div eine Ebene höher und schiebt ab einem gewissen Punkt (ca. 60% der Gesamtbreite) bei Platzauffüllung von rechts her (ist das normal ?!) und kleiner Fensterbreite die Navigationsspalte aus dem Bild. Passe ich in dieser Richtung an, ist in einem größeren Fenster viel Platz zwischen den Spalten. Sinnvolle automatische Platznutzung sieht m. E. anders aus. Mir ist klar, dass die Problempunkte 1 und 2 zusammen einen Erklärungsansatz zu liefern scheinen (wenn in den div's nicht alles drin ist, was drin sein soll, hält sich der Footer an Gott weiß was, z. B. an den letzten relativ positionerten div ?!). Wäre logisch, ich kapiere aber den Grund nicht - der Code stimmt ja laut Analyse und trotzdem macht die Bildschirmanzeige was komplett Anderes. Hat jemand eine Ahnung, was da los sein könnte ? Ich bin für jede Hilfe dankbar. Code-Dateien etc kann ich bei Bedarf aber erst heute nachmittag schicken - ich sitze am Arbeitsplatz, meine Typo3-Installation liegt daheim auf meinem Privatrechner. Bis bald, Steffen ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Problem mit Template - Browser zeigt was Anderes an als die Code-Analyse (Firefox)
Hallo Steffen ich denke, dass dies ein Entwicklungsauftrag wäre, Dir das richtige Template (HTML+CSS) zu liefern. Das kostet so normalerweise ein oder zwei Tage! Aber, damit Du selber etwas machen kannst, empfehle ich Dir entweder YAML als Basis zu verwenden (www.yaml.de) oder das HTML5-Bolierplate (http://html5boilerplate.com/). Beide geben Dir eine browserstabile Umgebung, welche Du mit ein paar wenigen Änderungen und Ergänzungen für Dein Design brauchen kannst. Ein Template von Grunde auf selber zu erstellen ist vor allem wegen den IE-Abnormalitäten sehr aufwendig! Liebe Grüsse Renzo _ Renzo Bauen +41 79 330 10 11 conPassione gmbh Am Montag, den 23.04.2012, 16:23 +0200 schrieb Steffen Liebig: Hallo zusammen, ich sitze derzeit daran, eine neue Webseite zu erstellen. Nachdem ein professionelles Template sich nicht so umgestalten ließ, wie ich das wollte, habe ich es selbst versucht. Folgendes Aussehen ist das Ziel: 1) Header, evtl Top-Navigation (wichtige Oberseiten), 3 Spalten (Navigation, Inhalt, Logos/Bannerwerbung), Fußzeile (z. B. Copyright-Hinweis) 2) flexible Positionierung der Spalten (div's, floating) 3) Orientierung zumindest der Mittelspalte an der Fenstergröße 4) linke und rechte Spalte am sinnvollsten mit fixer Breite bisherige Ideen zum Aufbau des Templates: - Gesamt-div (page-content) - enthalten sind Header, Topnavi, Inhalts-div und Footer - Inhalts-div - enthält 3 Spalten (Navigation = left: feste Breite, floating links; middle: floating rechts; right: feste Breite, floating rechts) - je Spalte ein separater div für den eigentlichen Inhalt (Ziel: separate Größendefinitionen und Vervielfältigungsmöglichkeit innerhalb der Spalte) - jeweils per CSS width=100%; - Footer: floating rechts, width: 100%; separater div für Inhalt (width: 100%) Im Wesentlichen funktioniert das bereits, allerdings haben sich einige Probleme ergeben: 1) die Fußzeile macht nicht, was sie soll - setze ich statt relativer eine absolute Positionierung (position: absolute), vagabundiert der Footer quer durchs Bild - je nachdem, was alles absolut steht, sitzt er mal oben und mal mittendrin - hält sich also nicht an seine Position nach dem Inhalts-div, sondern scheint sich eher an der letzten relativ positionierten Spalte zu orientieren 2) in der Analyse mit Firefox steht laut Code alles an der richtigen Stelle, aber der Bildschirm zeigt was Anderes an - die hellen Stellen in der Anzeige ergeben, dass weder der page-content noch der Inhalts-div all das beinhalten, was drin sein sollte...aber wieso stimmt dann im Code alles ?! *confused* 3) gebe ich Allem ein position: relative, passt es optisch, aber die Mittelspalte nutzt nicht den vollen Platz bzw tut dies nur bei 800*600er-Auflösung (zufällig die richtige Gesamtbreite dafür *lach*) - Prozentangaben für die Breite des Mittelspalten-div's: hat Auswirkungen auf den div eine Ebene höher und schiebt ab einem gewissen Punkt (ca. 60% der Gesamtbreite) bei Platzauffüllung von rechts her (ist das normal ?!) und kleiner Fensterbreite die Navigationsspalte aus dem Bild. Passe ich in dieser Richtung an, ist in einem größeren Fenster viel Platz zwischen den Spalten. Sinnvolle automatische Platznutzung sieht m. E. anders aus. Mir ist klar, dass die Problempunkte 1 und 2 zusammen einen Erklärungsansatz zu liefern scheinen (wenn in den div's nicht alles drin ist, was drin sein soll, hält sich der Footer an Gott weiß was, z. B. an den letzten relativ positionerten div ?!). Wäre logisch, ich kapiere aber den Grund nicht - der Code stimmt ja laut Analyse und trotzdem macht die Bildschirmanzeige was komplett Anderes. Hat jemand eine Ahnung, was da los sein könnte ? Ich bin für jede Hilfe dankbar. Code-Dateien etc kann ich bei Bedarf aber erst heute nachmittag schicken - ich sitze am Arbeitsplatz, meine Typo3-Installation liegt daheim auf meinem Privatrechner. Bis bald, Steffen ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Problem mit Template - Browser zeigt was Anderes an als die Code-Analyse (Firefox)
Hallo Steffen ohne die Installation zu sehen, kann man da allenfalls raten. Allerdings kann man aus dem Text schon ein paar Fehler ableiten. - Inhalts-div - enthält 3 Spalten (Navigation = left: feste Breite, floating links; middle: floating rechts; right: feste Breite, floating rechts) das riecht nach einem Problem. Wenn du alle drei floaten lässt, brauchen auch alle drei feste Breiten. Wenn die mittlere Spalte eine flexible Breite haben soll, darf sie nicht floaten. - je Spalte ein separater div für den eigentlichen Inhalt (Ziel: separate Größendefinitionen und Vervielfältigungsmöglichkeit innerhalb der Spalte) - jeweils per CSS width=100%; - Footer: floating rechts, width: 100%; separater div für Inhalt (width: 100%) Spätestens jetzt muss es auseinanderbrechen. Der Footer darf nicht floaten und muss ausserdem die Floats der Inhaltsspalten beenden. Er braucht also entweder ein clear:both oder du musst auf andere Art clearen. Schau dir mal das Clearing von floats genauer an. Im Wesentlichen funktioniert das bereits, allerdings haben sich einige Probleme ergeben: Klar ... Diese Probleme sind aber grundlegender Art. 1) die Fußzeile macht nicht, was sie soll - setze ich statt relativer eine absolute Positionierung (position: absolute), das position:absolute nimmt den Container komplett aus dem Seitenfluss - das Ergebnis kann ich mir vostellen ... vagabundieren passt wahrscheinlich ganz gut. Das geht nicht. vagabundiert der Footer quer durchs Bild - je nachdem, was alles absolut steht, sitzt er mal oben und mal mittendrin - hält sich also nicht an seine Position nach dem Inhalts-div, sondern scheint sich eher an der letzten relativ positionierten Spalte zu orientieren 2) in der Analyse mit Firefox steht laut Code alles an der richtigen Stelle, aber der Bildschirm zeigt was Anderes an Logisch, weil das CSS die Position bestimmt und nicht das HTML. - die hellen Stellen in der Anzeige ergeben, dass weder der page-content noch der Inhalts-div all das beinhalten, was drin sein sollte...aber wieso stimmt dann im Code alles ?! *confused* 3) gebe ich Allem ein position: relative, Das ist wieder für was anderes gedacht, man kann damit Container innerhalb des Seitenflusses relativ verschieben und es dazu benutzen, enthaltende Container mit position:absolute relativ zum übergeordneten Container und nicht reltiv zum Fenster zu positionieren. Es ist damit nicht möglich, kaputte floats zu korrigieren. - Floats müssen Breiten bekommen sonst fallen sie auf die Breite des Inhalts zusammen. Oder auf 0, wenn nichts drin ist. - Floats müssen beendet werden sonst wirken sie ad infinitum. Das passiert über das sog. Clearing. - nicht floatende Container breiten sich immer auf 100% aus, brauchen also nur eine Breite, wenn sie kleiner sein sollen. - Container, die Floats enthalten, fallen auf eine Höhe von 0 zusammen und die Floats ragen unten raus. Man kann das umgehen, indem man dem Container z. B. ein overflow:hidden geben (nicht ganz optimal, leider) oder ihn anders clearen. passt es optisch, aber die Mittelspalte nutzt nicht den vollen Platz bzw tut dies nur bei 800*600er-Auflösung (zufällig die richtige Gesamtbreite dafür *lach*) - Prozentangaben für die Breite des Mittelspalten-div's: kann nicht gehen. Entweder alle drei Spalten haben Prozentwerte, die sich insgesamt zu 100% ergänzen, oder die flexible Spalte darf nicht floaten. äusserer Container: feste Breite in Pixel, margin: 0 auto; - innerer container für die Floats: overflow:hidden (= einfachstes Clearing der Floats) - - linke Spalte: float left; feste Breite - - rechte Spalte: float: right, feste Breite - - mittlere Spalte: kein float; keine Breite: margin-left: Breite der linken Spalte; margin-right: Breite der rechten Spalte (mittlere Spalte = letzte Spalte im HTML, sonst gehts nicht) - ende innerer Container - Footer: kein Float. Damit auch keine Breitenangabe. Ende äusserer Container. = das ist keine optimale Anordnung, aber eine, die erst mal funktioniert. Mehr und eleganter: siehe YAML und vor allem die Doku dazu. Oder andere Quellen zu CSS und Floats. Gruß Peter -- Xing: http://www.xing.com/profile/Peter_Linzenkirchner Web: http://www.typo3-lisardo.de Facebook: http://tinyurl.com/lisardo-multimedia ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Problem mit Template - Browser zeigt was Anderes an als die Code-Analyse (Firefox)
Hallo Renzo, danke für Deine Antwort. Im Grunde pflichte ich Dir bei, wollte es aber erstmal ohne Module o. Ä. versuchen. Ist auch gut für den Lerneffekt. Sagen wir mal so: ich habe die Setup und Constants des zugrunde liegenden pofessionellen Templates beibehalten, aber mein eigenes HTML-Grundgerüst erstellt und experimentiere jetzt mit der Positionierung, den floats etc. Das Problem/Ergebnis ist bislang in allen Browsern (IE 9, Firefox, Dragon) dasselbe, insofern wars noch nicht so aufwändig...und so lang das Ganze nur als Testlauf auf meinem Rechner stattfindet, ist es kein Problem - aber bei dem Durcheinander, das sich ergeben hat, inzwischen recht nervig *g*. Cu, Steffen Am 23.04.2012 16:55, schrieb conPassione gmbh: Hallo Steffen ich denke, dass dies ein Entwicklungsauftrag wäre, Dir das richtige Template (HTML+CSS) zu liefern. Das kostet so normalerweise ein oder zwei Tage! Aber, damit Du selber etwas machen kannst, empfehle ich Dir entweder YAML als Basis zu verwenden (www.yaml.de) oder das HTML5-Bolierplate (http://html5boilerplate.com/). Beide geben Dir eine browserstabile Umgebung, welche Du mit ein paar wenigen Änderungen und Ergänzungen für Dein Design brauchen kannst. Ein Template von Grunde auf selber zu erstellen ist vor allem wegen den IE-Abnormalitäten sehr aufwendig! Liebe Grüsse Renzo _ Renzo Bauen +41 79 330 10 11 conPassione gmbh Am Montag, den 23.04.2012, 16:23 +0200 schrieb Steffen Liebig: Hallo zusammen, ich sitze derzeit daran, eine neue Webseite zu erstellen. Nachdem ein professionelles Template sich nicht so umgestalten ließ, wie ich das wollte, habe ich es selbst versucht. Folgendes Aussehen ist das Ziel: 1) Header, evtl Top-Navigation (wichtige Oberseiten), 3 Spalten (Navigation, Inhalt, Logos/Bannerwerbung), Fußzeile (z. B. Copyright-Hinweis) 2) flexible Positionierung der Spalten (div's, floating) 3) Orientierung zumindest der Mittelspalte an der Fenstergröße 4) linke und rechte Spalte am sinnvollsten mit fixer Breite bisherige Ideen zum Aufbau des Templates: - Gesamt-div (page-content) - enthalten sind Header, Topnavi, Inhalts-div und Footer - Inhalts-div - enthält 3 Spalten (Navigation = left: feste Breite, floating links; middle: floating rechts; right: feste Breite, floating rechts) - je Spalte ein separater div für den eigentlichen Inhalt (Ziel: separate Größendefinitionen und Vervielfältigungsmöglichkeit innerhalb der Spalte) - jeweils per CSS width=100%; - Footer: floating rechts, width: 100%; separater div für Inhalt (width: 100%) Im Wesentlichen funktioniert das bereits, allerdings haben sich einige Probleme ergeben: 1) die Fußzeile macht nicht, was sie soll - setze ich statt relativer eine absolute Positionierung (position: absolute), vagabundiert der Footer quer durchs Bild - je nachdem, was alles absolut steht, sitzt er mal oben und mal mittendrin - hält sich also nicht an seine Position nach dem Inhalts-div, sondern scheint sich eher an der letzten relativ positionierten Spalte zu orientieren 2) in der Analyse mit Firefox steht laut Code alles an der richtigen Stelle, aber der Bildschirm zeigt was Anderes an - die hellen Stellen in der Anzeige ergeben, dass weder der page-content noch der Inhalts-div all das beinhalten, was drin sein sollte...aber wieso stimmt dann im Code alles ?! *confused* 3) gebe ich Allem ein position: relative, passt es optisch, aber die Mittelspalte nutzt nicht den vollen Platz bzw tut dies nur bei 800*600er-Auflösung (zufällig die richtige Gesamtbreite dafür *lach*) - Prozentangaben für die Breite des Mittelspalten-div's: hat Auswirkungen auf den div eine Ebene höher und schiebt ab einem gewissen Punkt (ca. 60% der Gesamtbreite) bei Platzauffüllung von rechts her (ist das normal ?!) und kleiner Fensterbreite die Navigationsspalte aus dem Bild. Passe ich in dieser Richtung an, ist in einem größeren Fenster viel Platz zwischen den Spalten. Sinnvolle automatische Platznutzung sieht m. E. anders aus. Mir ist klar, dass die Problempunkte 1 und 2 zusammen einen Erklärungsansatz zu liefern scheinen (wenn in den div's nicht alles drin ist, was drin sein soll, hält sich der Footer an Gott weiß was, z. B. an den letzten relativ positionerten div ?!). Wäre logisch, ich kapiere aber den Grund nicht - der Code stimmt ja laut Analyse und trotzdem macht die Bildschirmanzeige was komplett Anderes. Hat jemand eine Ahnung, was da los sein könnte ? Ich bin für jede Hilfe dankbar. Code-Dateien etc kann ich bei Bedarf aber erst heute nachmittag schicken - ich sitze am Arbeitsplatz, meine Typo3-Installation liegt daheim auf meinem Privatrechner. Bis bald, Steffen ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org
Re: [TYPO3-german] Problem mit Template - Browser zeigt was Anderes an als die Code-Analyse (Firefox)
Hi Peter, hey das ist genau das, was ich gesucht habe. Deine Posts habe ich schon vor einigen Jahren als Praktikant gelesen, das war mehr als einmal erhellend. Heute bin ich Ehrenamtler, arbeite aber immer noch gern mit Typo3. Nur selbst erstellt habe ich noch keine Seite, ich komme eher aus der Redaktionsecke (Weiterbearbeitung bestehender Seiten) mit ausbildungsbedingtem Wissen zu HTML/CSS. Die Installation läuft nur auf meinem Rechner, das wäre also allenfalls per Teamviewer oder so anschaubar. Für mich kein Problem, sag mir einfach Bescheid wenn da Bereitschaft besteht. Ich bin Di/Mi so ab 15 Uhr daheim, Do Vorstellungsgespräch und Fr noch unklar. Grundsätzlicher Stichtag für die Seitenstruktur ist Monatsende, wobei ich mein Problem berichtet habe. ElCheffe wartet also erstmal, Ahnung vom Thema hat er selber keine (dafür gibts nen Arbeitskreis Internet mit mir als Webmaster, nur dass bei meiner Einsetzung von ner neuen Seite noch keine Rede war) ;-). Einige Deiner Tipps kann ich schon beantworten bzw muss mich präziser ausdrücken: Das mit dem margin habe ich irgendwo gelesen und ausprobiert...es hatte keine Wirkung (mit left: xy und right: xy gings schon eher). Könnte das an anderen inkorrekten Details gelegen haben ? Bei dem Kram zur Fußzeile meinte ich mit der absoluten Positionierung nicht diese selbst, sondern die anderen Container. Wenn ich DIE absolut setze, vagabundiert der Footer durchs Bild. Zuletzt hat er ganz oben gesessen, als spaßeshalber alles auf absolut stand. Im Ergebnis kann ich die Mittelspalte eigentlich gar nicht absolut setzen, denn dann orientiert sich der Footer nicht mehr an deren Länge (sie ist derzeit auf der Testseite die längste). Am Inhaltscontainer hat er sich eh noch nie orientiert. Verrückt, gell ? Aber wenn ich Deine Zusammenfassung richtig verstehe, soll ich mir die absoluten/relativen Positionierungen eh komplett verkneifen ?! [Mich deucht, ich hatte schon überall relativ stehen, wonach sich die Mittelspalte nicht mehr flexibel ausdehnte *grübel*]. Hmmm...der äußere Container soll sich eigentlich ans Fenster anpassen. Es wird eine flexible Seite mit Orientierung an der Fensterbreite gewünscht - dazu kam der Vorschlag Fensterbreite = 100%, das geht glaub nur mit width im äußersten div. Insofern d'accord, aber mit fester Breite ist es doch in jedem Fenster gleich groß ? Body und HTML stehen schon bei 100%, werden aber von Typo3 außen rum gesetzt. Wobei ich an außen rum mit Blick auf die Analyse im Browser so meine Zweifel habe. Vermutlich hab ich da nen Denkfehler drin... Ein Clearer war von Anfang an dabei - sass vorm Footer. Denke, ich hab ihn auch übernommen und wenn nicht, kommt er gleich wieder rein. Sehr interessant finde ich, dass eine absolute Position dazu da ist, etwas doch wieder relativ (nur zu etwas Anderem) auszurichten. Klingt verwirrend *g*, macht auf eine gewisse Art aber wieder Sinn. Am 23.04.2012 17:22, schrieb Peter Linzenkirchner: Hallo Steffen ohne die Installation zu sehen, kann man da allenfalls raten. Allerdings kann man aus dem Text schon ein paar Fehler ableiten. - Inhalts-div - enthält 3 Spalten (Navigation = left: feste Breite, floating links; middle: floating rechts; right: feste Breite, floating rechts) das riecht nach einem Problem. Wenn du alle drei floaten lässt, brauchen auch alle drei feste Breiten. Wenn die mittlere Spalte eine flexible Breite haben soll, darf sie nicht floaten. - je Spalte ein separater div für den eigentlichen Inhalt (Ziel: separate Größendefinitionen und Vervielfältigungsmöglichkeit innerhalb der Spalte) - jeweils per CSS width=100%; - Footer: floating rechts, width: 100%; separater div für Inhalt (width: 100%) Spätestens jetzt muss es auseinanderbrechen. Der Footer darf nicht floaten und muss ausserdem die Floats der Inhaltsspalten beenden. Er braucht also entweder ein clear:both oder du musst auf andere Art clearen. Schau dir mal das Clearing von floats genauer an. Im Wesentlichen funktioniert das bereits, allerdings haben sich einige Probleme ergeben: Klar ... Diese Probleme sind aber grundlegender Art. 1) die Fußzeile macht nicht, was sie soll - setze ich statt relativer eine absolute Positionierung (position: absolute), das position:absolute nimmt den Container komplett aus dem Seitenfluss - das Ergebnis kann ich mir vostellen ... vagabundieren passt wahrscheinlich ganz gut. Das geht nicht. vagabundiert der Footer quer durchs Bild - je nachdem, was alles absolut steht, sitzt er mal oben und mal mittendrin - hält sich also nicht an seine Position nach dem Inhalts-div, sondern scheint sich eher an der letzten relativ positionierten Spalte zu orientieren 2) in der Analyse mit Firefox steht laut Code alles an der richtigen Stelle, aber der Bildschirm zeigt was Anderes an Logisch, weil das CSS die Position bestimmt und nicht das HTML. - die hellen Stellen in der Anzeige ergeben, dass weder der page-content
Re: [TYPO3-german] Problem mit Template - Browser zeigt was Anderes an als die Code-Analyse (Firefox)
Hallo Steffen,
ich bin leider ab morgen für den Rest der Woche selber in Seminaren und
tagsüber nicht im Büro.
Das mit dem margin habe ich irgendwo gelesen und ausprobiert...es hatte keine
Wirkung (mit left: xy und right: xy gings schon eher).
Das sind keine Randangaben sondern Postionsangaben, die nur Wirkung haben in
Kombination mit position:relative oder position:absolute. Die Randangaben in
der Mittelspalte funktionieren nur, wenn die Spalte NICHT floatet und keine
position-Angabe hat. Nochmal:
linke Spalte: float links
rechte Spalte: float rechts
mittlere Spalte: KEIN Float.
und _keine_ hat ein position:absolute, top, left, bottom oder right.
Könnte das an anderen inkorrekten Details gelegen haben ?
Bei dem Kram zur Fußzeile meinte ich mit der absoluten Positionierung nicht
diese selbst, sondern die anderen Container. Wenn ich DIE absolut setze,
vagabundiert der Footer durchs Bild. Zuletzt hat er ganz oben gesessen, als
spaßeshalber alles auf absolut stand.
Egal: position:absolute ist in diesem Zusammenhang immer falsch. Es löst den
Container aus dem Zusammenhang, alle folgenden Container rutschen so zusammen,
als wäre der absolut positionierte Container nicht da. Ergo muss der Footer
dann nach oben rutschen, das soll so sein. position:absolute wird benutzt, um
einen Container über den Rest zu legen, das ist sein Sinn.
Im Ergebnis kann ich die Mittelspalte eigentlich gar nicht absolut setzen,
Nein, kannst du nie.
denn dann orientiert sich der Footer nicht mehr an deren Länge (sie ist
derzeit auf der Testseite die längste). Am Inhaltscontainer hat er sich eh
noch nie orientiert.
Eine Höhe von 100% ist im CSS-Modell nicht vorgesehen und nur über Tricks zu
erreichen. Versuchs nicht, bekommst du vermutlich nicht hin.
Verrückt, gell ?
Nein, gar nicht. Es ist blos alles anders als du denkst ... :-)
Aber wenn ich Deine Zusammenfassung richtig verstehe, soll ich mir die
absoluten/relativen Positionierungen eh komplett verkneifen ?! [
Ja, absolut. Das Seitenlayout wird mit Floats gemacht, und Floats funktionieren
nur ohne position:absolute. Das schließt sich aus.
Mich deucht, ich hatte schon überall relativ stehen, wonach sich die
Mittelspalte nicht mehr flexibel ausdehnte *grübel*].
postion:relative tut auch ganz was anderes: es verschiebt den Container relativ
zu seiner eigentlichen Position im Fluss der Container. So kann man ihn z. B.
über einen anderen Container drüber schieben. Aber: der Platz, der durch das
Verschieben dann auf der anderen Seite frei wird, bleibt unbesetzt. Die anderen
Container rutschen _nicht_ nach. Es entstehen also Lücken. Das macht schon
Sinn, aber nur in wenigen Fällen. Vergiss position einfach.
Hmmm...der äußere Container soll sich eigentlich ans Fenster anpassen. Es
wird eine flexible Seite mit Orientierung an der Fensterbreite gewünscht -
dazu kam der Vorschlag Fensterbreite = 100%, das geht glaub nur mit width
im äußersten div. Insofern d'accord, aber mit fester Breite ist es doch in
jedem Fenster gleich groß ?
Ja, aber es geht auch mit width:100%.
DasGrundgerüst in einfachster Form:
http://www.typo3-lisardo.de/fileadmin/test/index.html
In der Datei steht alles drin (8 Zeilen CSS, mehr brauchts nicht).
Nachteil dieser Konstruktion: die Seitenleisten mit eingefärbten Hintergrund
sind unterschiedlich lang und es ist mit dieser Technik nicht möglich, die
Seitenspalten einzufärben. Das geht z. B. mit dem Ansatz von YAML, der aber
erheblich komplizierter ist (Stichwort bei Google: css holy grail - die beiden
ersten Treffer. Du kannst dir dort auch das Layout runterladen. Ist aber
wirklich erheblich komplizierter).
Mein Ansatz funktioniert sogar ohne Änderungen im Internet Explorer 6 und
höher.
Body und HTML stehen schon bei 100%, werden aber von Typo3 außen rum gesetzt.
Wobei ich an außen rum mit Blick auf die Analyse im Browser so meine
Zweifel habe.
body und html sind belanglos. Du brauchst nur body {margin:0; padding:0} damit
keine Ränder entstehen.
Vermutlich hab ich da nen Denkfehler drin...
:-)
Ein Clearer war von Anfang an dabei - sass vorm Footer. Denke, ich hab ihn
auch übernommen und wenn nicht, kommt er gleich wieder rein.
ist in meiner Datei nicht nötig, das übernimmt overflow:hidden.
(overflow:hidden hat Nachteile: es wird alles abgeschnitten, was über die
Container ragt. Ist aber in deinem Fall momentan eher ein Vorteil. )
Sehr interessant finde ich, dass eine absolute Position dazu da ist, etwas
doch wieder relativ (nur zu etwas Anderem) auszurichten.
Umgekehrt.
Ein Container mit position:absolute wird grundsätzlich am Fenster ausgerichtet
- ausser er befindet sich in einem Container, der selbsgt position:relative
trägt. Dann wird position:absolute an eben diesem Container ausgerichtet, der
position:relative trägt.
Das benutzt man z. B. für alle Arten von Floatern oder Overlay-Fenstern - eben
für alles, was sich ausserhalb des
Re: [TYPO3-german] Problem mit Template - Browser zeigt was Anderes an als die Code-Analyse (Firefox)
Hi Peter, Peter Linzenkirchner wrote: Hallo Steffen, ... Ansonsten empfehle ich dir, ein Buch zu kaufen. Die Investition von ein paar Euro kommt auf jeden Fall wieder raus, du sparst dir unendlich Zeit. Little Boxes soll ganz gut sein, habe ich gehört. Hat auch gute Bewertungen auf Amazon. Ohne solche Quellen gehts nicht. ich habe mir bestimmt fünf oder sechs Bücher besorgt; sind halt alle mittlerweile veraltet. Schau mal hier vorbei ... hier gibt es alles was man zu CSS wissen sollte: http://www.cssplay.co.uk/layouts/ Ansonsten einfach mal zu CSS box model googeln, u.a. http://www.w3.org/TR/CSS2/box.html http://de.selfhtml.org/css/formate/box_modell.htm http://de.selfhtml.org/css/layouts/index.htm Viel Spaß -- Philipp Gampe – PGP-Key 0AD96065 – TYPO3 UG Bonn/Köln Documentation – linkvalidator TYPO3 inspiring people to share! ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
