Diese Testversionen sollte man nicht nutzen um eine Webseite zu testen. Sie dienen dazu das Programm Firefox selbst zu testen. Daher solltest Du dir das natürlich mal in einer stabilen Version anschauen, wie sie auch von Millionen anderen Firefox-Nutzern verwendet wird.
Kleinere Probleme mit meiner Website
- Ersteller ldb
- Erstellt am
Danke für den Hinweis. Ich habe mir die "normale" Version mal heruntergeladen UND die Website in Opera, Safari und Chrome angeschaut. Ergebnis: Das Hintergrundbild wird überall skaliert, wenn man wegzoomt. Ich habe den aktuellsten Stand mal hochgeladen, findet man hier:
Workbook Lukas Bieri
Ich hoffe, ihr könnt mir helfen, irgendwie blick ich nicht mehr durch... :(
Workbook Lukas Bieri
Ich hoffe, ihr könnt mir helfen, irgendwie blick ich nicht mehr durch... :(
Hallo threadi,
Tut mir leid, dass ich erst jetzt antworte, ich hatte heute leider keine Zeit...
Das vorher war die Datei ohne aktuellen Quellcode. Dein Tipp mit
background-size: cover;
funktionierte aber reibungslos! Vielen, vielen Dank!
Ich habe noch ein letztes, kleines Problem: Wenn ich die Website in Safari & Chrome öffne, wird das Suchfeld blau umrahmt. Ich habe es mit onfocus="blur()" versucht, aber das scheint nicht valide zu sein...
Gibt es da einen Trick?
Vielen Dank für die bisher immer so hilfreichen Kommentare und allen einen schönen Abend!
LDB
Tut mir leid, dass ich erst jetzt antworte, ich hatte heute leider keine Zeit...
Das vorher war die Datei ohne aktuellen Quellcode. Dein Tipp mit
background-size: cover;
funktionierte aber reibungslos! Vielen, vielen Dank!
Ich habe noch ein letztes, kleines Problem: Wenn ich die Website in Safari & Chrome öffne, wird das Suchfeld blau umrahmt. Ich habe es mit onfocus="blur()" versucht, aber das scheint nicht valide zu sein...
Gibt es da einen Trick?
Vielen Dank für die bisher immer so hilfreichen Kommentare und allen einen schönen Abend!
LDB
Zuletzt bearbeitet:
Hat sich erledigt, ich habe Google mal wieder unterschätzt... Ich muss wirklich aufpassen, dass ich nicht Dinge frage, die ich auch selber finden kann!
Ich habe dafür - oh Wunder noch ein kleines Problem:
Ich möchte die Scrollbalken auf meiner Seite ersetzen durch eine mit dem Text mitwachsende div. Ich habe es zwar geschafft, dass die div mit dem Inhalt mitwächst.
Ich möchte aber, dass der Rahmen, in meiner CSS-Datei "Alles" genannt, mitwächst. Der Rahmen sollte immer 10 Pixel unterhalb der Inhalt-div aufhören. Ich habe der div "Alles" bereits eine min-height gegeben, das hat aber nichts bewirkt...
Wenn ich das dann geschaft habe, habe ich noch ein zweites, kleines Problem: Da sich mein "Copyright"-Text mit einem margin-bottom an der "Alles"-div orientiert, rutscht er herunter, wenn die "Alles"-div höher wird. Gibt es eine Möglichkeit, die "Copyright"-div am unteren Rand der "Infobox"-div auszurichten?
Meine Seite findet ihr hier:
http://ricardo-services.netne.net/Workbook_Homepage/index.html
Ich danke schon im Vorraus!
Liebe Grüsse,
LDB
Ich habe dafür - oh Wunder noch ein kleines Problem:
Ich möchte die Scrollbalken auf meiner Seite ersetzen durch eine mit dem Text mitwachsende div. Ich habe es zwar geschafft, dass die div mit dem Inhalt mitwächst.
Ich möchte aber, dass der Rahmen, in meiner CSS-Datei "Alles" genannt, mitwächst. Der Rahmen sollte immer 10 Pixel unterhalb der Inhalt-div aufhören. Ich habe der div "Alles" bereits eine min-height gegeben, das hat aber nichts bewirkt...
Wenn ich das dann geschaft habe, habe ich noch ein zweites, kleines Problem: Da sich mein "Copyright"-Text mit einem margin-bottom an der "Alles"-div orientiert, rutscht er herunter, wenn die "Alles"-div höher wird. Gibt es eine Möglichkeit, die "Copyright"-div am unteren Rand der "Infobox"-div auszurichten?
Meine Seite findet ihr hier:
http://ricardo-services.netne.net/Workbook_Homepage/index.html
Ich danke schon im Vorraus!
Liebe Grüsse,
LDB
Hi Lukas,
dein Div #inhalt hat aus Sicht des umgebenden Divs keine Höhe, da es ja floatet. Du solltest in dein #alles noch ein weiteres Div einfügen und dem über css noch ein clear:left; geben. Das clear sorgt dafür, dass allem Floaten zum Trotz eine neue Zeile begonnen wird und die beginnt eben erst dort, wo floatende Divs zuende sind. Damit bekommt dein #alles wieder einen Bezugspunkt, der sich an der Höhe von #inhalt orientiert.
Nach dem Copyright schauen wir dann mal, was?
dein Div #inhalt hat aus Sicht des umgebenden Divs keine Höhe, da es ja floatet. Du solltest in dein #alles noch ein weiteres Div einfügen und dem über css noch ein clear:left; geben. Das clear sorgt dafür, dass allem Floaten zum Trotz eine neue Zeile begonnen wird und die beginnt eben erst dort, wo floatende Divs zuende sind. Damit bekommt dein #alles wieder einen Bezugspunkt, der sich an der Höhe von #inhalt orientiert.
Nach dem Copyright schauen wir dann mal, was?
Das wäre mal ein kreativer Ansatz, aber du meintest wohl clear: both, oder? ;)
Hallo bodil,
Danke für deine Ausführungen, jetzt ist mir zumindest das Problem klar. Ich habe nach deiner Anleitung ein div namens "rahmenformatierung" erstellt. Es beginnt innerhalb der "Alles"-div und endet nach der Inhalt-h2-div.
Ich habe dem div in CSS clear:both (das meintest du glaube ich
) zugewiesen.
Allerdings bewegt sich bei dem Balken überhaupt nichts... Ich bin etwas ratlos, was habe ich falsch gemacht?
Ich habe den akuellen Stand mal hochgeladen.
Dank und Gruss,
Lukas (LDB)
Danke für deine Ausführungen, jetzt ist mir zumindest das Problem klar. Ich habe nach deiner Anleitung ein div namens "rahmenformatierung" erstellt. Es beginnt innerhalb der "Alles"-div und endet nach der Inhalt-h2-div.
Ich habe dem div in CSS clear:both (das meintest du glaube ich
) zugewiesen.Allerdings bewegt sich bei dem Balken überhaupt nichts... Ich bin etwas ratlos, was habe ich falsch gemacht?
Ich habe den akuellen Stand mal hochgeladen.
Dank und Gruss,
Lukas (LDB)
Nebenbei bemerkt gibt es noch eine Möglichkeit, mit dem leidigen clear umzugehen. Man definiert im CSS eine entsprechende Klasse:
CSS clearfix - CSSGURU.DE
Im HTML wiederum schreibt man hinter das letzte zu floatende Element ein leeres Blockelement (z.B. ein Div) und weist diesem die Klasse .clearfix zu.
CSS clearfix - CSSGURU.DE
Im HTML wiederum schreibt man hinter das letzte zu floatende Element ein leeres Blockelement (z.B. ein Div) und weist diesem die Klasse .clearfix zu.
Hallo zusammen,
Ich habe die Ratschläge von bodil und Tronjer ausprobiert, aber irgendwie will CSS nicht so, wie ich gerne möchte...
Ich habe jetzt ein gleichberechtigtes div namens "rahmenformatierung" im div "alles" erstellt. Im CSS habe ich dem div dann ein
clear:both;
gegeben. Beim Rahmen tut sich aber leider nichts. Kann es daran liegen, dass der Rahmen eigentlich von div "Inhalt" stammt? Oder mache ich wieder einen Denkfehler? Ich habe das Problem mit den gefloateten divs verstanden, aber leider happerts halt bei der Umsetzung.
Die Website ist wie immer hier zu finden:
http://ricardo-services.netne.net/Workbook_Homepage/
Hat einer von euch wieder einen wertvollen Tipp?
Liebe Grüsse,
Lukas
Ich habe die Ratschläge von bodil und Tronjer ausprobiert, aber irgendwie will CSS nicht so, wie ich gerne möchte...
Ich habe jetzt ein gleichberechtigtes div namens "rahmenformatierung" im div "alles" erstellt. Im CSS habe ich dem div dann ein
clear:both;
gegeben. Beim Rahmen tut sich aber leider nichts. Kann es daran liegen, dass der Rahmen eigentlich von div "Inhalt" stammt? Oder mache ich wieder einen Denkfehler? Ich habe das Problem mit den gefloateten divs verstanden, aber leider happerts halt bei der Umsetzung.
Die Website ist wie immer hier zu finden:
http://ricardo-services.netne.net/Workbook_Homepage/
Hat einer von euch wieder einen wertvollen Tipp?
Liebe Grüsse,
Lukas
Hi Lukas!
Pack das »vierte« Div mit dem clear an Position vier. Das Div mit dem clear:both zieht quasi den Schlussstrich, und fängt eine neue Zeile an: über die komplette Breite, dort wo alle anderen Divs »fertig« sind und gibt damit dem umgebenden Div einen Anhaltspunkt dafür, wo sich die Unterkante seines Inhalts befindet.
Und: eigentlich ist es sinnvoller, ihm eine Klasse zuzuweisen, die auf seine eigentliche Funktion (clear, clearfix) hinweist. Denn nach jedem Bereich, in dem irgendwas floatet sollte es ein solches Div geben um für den Rest klare Verhltnisse zu schaffen und sicher zu stellen, dass nicht irgendwo ein floatendes Bild (oder was auch immer) raushängt.
Grüße!
Bodil
Pack das »vierte« Div mit dem clear an Position vier. Das Div mit dem clear:both zieht quasi den Schlussstrich, und fängt eine neue Zeile an: über die komplette Breite, dort wo alle anderen Divs »fertig« sind und gibt damit dem umgebenden Div einen Anhaltspunkt dafür, wo sich die Unterkante seines Inhalts befindet.
Und: eigentlich ist es sinnvoller, ihm eine Klasse zuzuweisen, die auf seine eigentliche Funktion (clear, clearfix) hinweist. Denn nach jedem Bereich, in dem irgendwas floatet sollte es ein solches Div geben um für den Rest klare Verhltnisse zu schaffen und sicher zu stellen, dass nicht irgendwo ein floatendes Bild (oder was auch immer) raushängt.
Grüße!
Bodil
djheke
Aktives Mitglied
Obwohl es viel in puncto CSS l zu bereinigen gäbe, hier die Änderungen.
1. rahmenformatierung weg damit
2. #webseite {.... overflow:hidden; padding-bottom:10px;}
3. #infobox {.... position:relative; min-height:495px; }
4. #infobox h2 {.... margin-bottom:40px; }
5. OPTIONAL #infobox h3 {... bottom:-5px; border-top:1px solid #999; padding-top:10px; }
Ich hoffe, dass es dir um den Rahmen ging, der sich dynamisch am Inhalt anpassen soll.
1. rahmenformatierung weg damit
2. #webseite {.... overflow:hidden; padding-bottom:10px;}
3. #infobox {.... position:relative; min-height:495px; }
4. #infobox h2 {.... margin-bottom:40px; }
5. OPTIONAL #infobox h3 {... bottom:-5px; border-top:1px solid #999; padding-top:10px; }
Ich hoffe, dass es dir um den Rahmen ging, der sich dynamisch am Inhalt anpassen soll.
Zuletzt bearbeitet:
Hallo bodil,
Deine Lösung hat super funktioniert! Ich danke herzlichst :)
@djheke
Vielen Dank für deine Ausführungen, leider hat es aber nicht so ganz funktioniert. Was ist an meinem CSS nicht gut? Ich bin immer froh, wenn mich jemand korrigiert oder verbessert :)
Gruss und schönen Tag,
Lukas
Deine Lösung hat super funktioniert! Ich danke herzlichst :)
@djheke
Vielen Dank für deine Ausführungen, leider hat es aber nicht so ganz funktioniert. Was ist an meinem CSS nicht gut? Ich bin immer froh, wenn mich jemand korrigiert oder verbessert :)
Gruss und schönen Tag,
Lukas
Kommen wir also zu meinem allerletzten Problem :lol:
Ich habe in der div "Infobox" einen Titel mit h1, dann ein Bild mit einem Trennbalken, dann noch einen Text mit h2 und DANN kommt in der HTML-Datei mein Copyright-text. Er hat das h3-Attribut.
Momentan hat mein Copyright-text im CSS ein
position:absolute;
margin-left:0.65em;
bottom:18px;
bekommen, weil ich den Infotext nicht von oben her ausrichten lassen will. (Wenn ich den Text in der Infobox verändere, müsste ich ja dann den margin des Copyrights jedes Mal anpassen). Da sich aber die div unterhalb des Copyright-texts ja jetzt je nach Grösse der Inhalt-div vergrössert, wird auch der Abstand gegen unten grösser.
Was ich irgendwie schaffen möchte, wäre die Ausrichtung an der Unterseite der Infobox-div. Ich habe mal versucht, mich schlau zu machen, aber irgendwie finde ich zu meinem Problem einfach nichts...
Die Seite findet ihr hier:
http://ricardo-services.netne.net/Workbook_Homepage/
Ich hoffe, ihr könnt mich da erleuchten ;)
Dank und Gruss,
Lukas
Ich habe in der div "Infobox" einen Titel mit h1, dann ein Bild mit einem Trennbalken, dann noch einen Text mit h2 und DANN kommt in der HTML-Datei mein Copyright-text. Er hat das h3-Attribut.
Momentan hat mein Copyright-text im CSS ein
position:absolute;
margin-left:0.65em;
bottom:18px;
bekommen, weil ich den Infotext nicht von oben her ausrichten lassen will. (Wenn ich den Text in der Infobox verändere, müsste ich ja dann den margin des Copyrights jedes Mal anpassen). Da sich aber die div unterhalb des Copyright-texts ja jetzt je nach Grösse der Inhalt-div vergrössert, wird auch der Abstand gegen unten grösser.
Was ich irgendwie schaffen möchte, wäre die Ausrichtung an der Unterseite der Infobox-div. Ich habe mal versucht, mich schlau zu machen, aber irgendwie finde ich zu meinem Problem einfach nichts...
Die Seite findet ihr hier:
http://ricardo-services.netne.net/Workbook_Homepage/
Ich hoffe, ihr könnt mich da erleuchten ;)
Dank und Gruss,
Lukas
Hi Lukas!
Du willst, dass dein h3 innerhalb des rechten Bereichs steht? Richtig?
Die absolute Positionierung orientiert sich am nächsten übergeordneten Div, das relativ positioniert ist, also dem #website. (Gäbe es das nicht, würde es sich am Body orientieren.) Die Lösung wäre demzufolge: positioniere (stattdessen) #infobox relativ.
Btw: Vom Gefühl her ist ein h3 nicht das richtige an der Stelle. Überschrift 3. Ordnung für einen Copyright-Hinweis? Das geht natürlich, trifft aber m.E. die Bedeutung des h3 nicht so ganz. Ein <p> mit entsprechender id wäre passender. Aber es gibt vielleicht sogar ein Tag, das extra dafür erschaffen wurde. (so wie <address> oder <nav> für Adressen und Navigationen.)
Grüße!
Bodil
Du willst, dass dein h3 innerhalb des rechten Bereichs steht? Richtig?
Die absolute Positionierung orientiert sich am nächsten übergeordneten Div, das relativ positioniert ist, also dem #website. (Gäbe es das nicht, würde es sich am Body orientieren.) Die Lösung wäre demzufolge: positioniere (stattdessen) #infobox relativ.
Btw: Vom Gefühl her ist ein h3 nicht das richtige an der Stelle. Überschrift 3. Ordnung für einen Copyright-Hinweis? Das geht natürlich, trifft aber m.E. die Bedeutung des h3 nicht so ganz. Ein <p> mit entsprechender id wäre passender. Aber es gibt vielleicht sogar ein Tag, das extra dafür erschaffen wurde. (so wie <address> oder <nav> für Adressen und Navigationen.)
Grüße!
Bodil