Danke für die Links!
Das mit dem Zentrieren des Sliders kriege ich leider aber immer noch nicht hin...
Text zentrieren ist kein Problem, aber bei Grafiken sind die Code-Anweisungen die ich probiere, ständig falsch.
Fragen zu responsiven Templates
-
-
-
Du musst die Grafik in einen div-Container packen und sie dort zentrieren. Du kannst Objekte wie Grafiken ganz grundsätzlich nur inline zentrieren, das heißt nur "innerhalb von etwas anderem" zentrieren. Wenn du versuchst der Grafik selbst die Eigenschaft "center" zu geben, wird das nicht funktionieren. Gib einem div die Eigenschaft "text-align:center" und packe die Grafik dort hinein. Der div-Container muss dann natürlich breiter sein, als die Grafik, um auch einen Effekt zu haben, also etwa so:
Herzlichen Gruß,
Tunarus -
...kleine Anmerkung noch.
Gib nicht auf!
Du wirst sehen, dass nach und nach ein Knoten nach dem anderen platzen wird und du kommst Schritt für Schritt weiter. Dein Kampf mit dem Detail hat mich inspiriert mal auf meine eigenen Anfänge zurück zu blicken. Meine eigene Website, die Stöberbox, ist im Jahr 2000 online gegangen. Ich habe auch erst zehn Jahre später damit begonnen, den eigenen Code mit einem Editor zu schreiben und habe schnell gemerkt, welche Welt sich auftut, wenn man html nicht nur im WYSIWYG-Programm zusammenklickt, sondern tatsächlich versteht, was man da macht.
Zur Ermutigung also hier mal ein Blick zurück auf 15 Jahre Stöberbox:
-> Archiv der Stöberbox <-Herzlichen Gruß,
Tunarus -
Ist schon interesant zu sehen, wie sich die Stöberbox im Laufe der Zeit verändert hat. Sie war für die jeweiligen damaligen Zeiten aber immer aktuell.
Das mit dem Zentrieren von Bildern, Videos und anderen Dingen hat nun geklappt. Danke!
Ich hatte gedacht, dass dieses "text-align:center" nur allein für Texte sei, aber nicht für andere Dinge...Oh, aufgeben werde ich nicht, da bin ich schon hartnäckig. Allerdings ist es manchmal schon etwas frustrierend, wenn man stundenlang an etwas herumprobiert und einfach nicht zum gewünschten Ergebnis kommt. Aber es eilt bei mir ja nicht. Hab ja eine fertige Website online (von der auf Mobilgeräten zwar nicht alles perfekt angezeigt wird) und darum stört es mich nicht, wenn das Erstellen der neuen Website nun einige Wochen oder gar Monate dauern wird.
Den Slider habe ich aber immer noch nicht zentriert bekommen. Für den scheinen sich auf drei css- und js-Seiten Codes zu befinden, auf denen ich einfach die passenden Stellen zum ändern nicht finde.
Die neue Website soll ähnlich werden wie z.B. die von GMX (http://www.gmx.net). Diese ist geschätzt 1100 px breit, ist zentriert, und rechts und links davon ist hellblauer Hintergrund zu sehen. So möchte ich das bei mir auch gerne haben. Dass die Website 1070 px breit ist, sie auf großen Monitoren mittig angezeigt wird, und der Hintergrund seitlich davon eine andere Farbe oder irgendein Hintergrunddesign hat. Da werde ich meine ersten Änderungsversuche morgen mal starten.
Momentan sieht die Test-Indexseite so aus. Den Slider bekomme ich da nicht in die Mitte, weswegen auch auf allen anderen Seiten der dunkle Balken samt verkleinertem Sliderbild oben nicht in der Mitte landet. Die eingefügten Menülinks führen momentan übrigens alle noch ins Leere:Gestern habe ich versucht, mal einen anderen Slider auf einer Testseite einzufügen. Auf der alten Website läuft er perfekt, aber auf der Testseite wird er erst gar nicht angezeigt.
Ich habe verschiedene Änderungen am Einbaucode ausprobiert, aber der Slider will einfach nicht erscheinen.
Hier sind mal Links zu der Testseite und der Seite der alten Website, auf der der Foto-Slider funktioniert:Slider-Test / funktionierender Slider
Ähnliche Probleme habe ich gerade auch noch mit einer Shadowbox. So einem Tool, dass den Hintergrund um Bilder verdunkelt, wenn man z.B. ein kleines Vorschaubild anklickt und das große Original dann geöffnet wird. Der Einbau auf der alten Website war kein Problem, aber auf der neuen klappt's einfach nicht. Dabei habe ich die Testseite, so wie auch diese bei der ich den anderen Slider ausprobiere, auf dem Server jeweils im Root-Verzeichnis bzw. im selben Ordner liegen, wie die alten Seiten, auf denen alles perfekt flutscht.
Hier sind wieder Links zur Testseite und der alten Seite, auf der alles prima läuft. Die kleinen Thumbnail-Bilder muss ich auf der Testseite nur noch anders anordnen und einen Abstand zwischen den beiden Reihen einfügen. Momentan sieht das noch etwas komisch aus, aber bevor ich mich an dieses mache, will ich die Shadowbox überhaupt erst zum Laufen bekommen.Test-Shadowbox / funktionierende Shadowbox
Wenn du magst, kannst du dir ja mal die Quellcodes der Seiten anzeigen lassen und mal drüber gucken, ob du bei den Codes vielleicht etwas entdeckst, dass falsch sein könnte oder wo eventuell noch etwas fehlt.
LG,
Skippy -
Hi Skippy,
du verwendest zum Zentrieren des Sliders folgendes:
HTML: Slider<header id="head"> <div class="container"> <div class="banner-content"> --->Slider<--- </div> </div> </header>
Ich finde aber weder im Kopf der Seite noch in den verlinkten CSS-Stylesheets Angaben zu den Klasen "container" und "banner-content". Wohin hast du die denn geschrieben? Die Seite findet diese Angaben auch nicht.Zentrieren geht einfach - hier mal ein Beispiel:
Zentrierter SliderSo sieht der Code aus:
HTML: Zentrierter Slider
Alles anzeigen<!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <style> .container { width:100%; } .banner-content { width:50%; margin:0 auto; text-align:center; } </style> <title>Slider</title> </head> <body> <div class="container"> <div class="banner-content"> <img alt="Slider" src="slider.jpg" /> </div> </div> </body> </html>
Wie du siehst, brauchst du gerade mal zwei divs:
- Der "container" nutzt die Seitenbreite voll aus.
- Der "banner-content" bekommt nur die halbe Breite und wird mit den margin-Angaben im container zentriert. Das geht nicht mit "text-align:center"! Du zentriertst die Position des kleineren im größeren div mit den margin-Angaben!
- Innerhalb des zentrierten inneren divs zentrierst du dann wiederum seinen Inhalt mit "text-align:center".Der Tag <header> ist im Grunde genommen überflüssig und kann ersatzlos entfallen.
Lieben Gruß,
Tunarus -
Hi Skippy,
du verwendest zum Zentrieren des Sliders folgendes:
HTML: Slider<header id="head"> <div class="container"> <div class="banner-content"> --->Slider<--- </div> </div> </header>
Ich finde aber weder im Kopf der Seite noch in den verlinkten CSS-Stylesheets Angaben zu den Klasen "container" und "banner-content". Wohin hast du die denn geschrieben? Die Seite findet diese Angaben auch nicht.
Ähm, das stand schon alles so in der Template-Vorlage drin, ich habe einzig im nur im Ordner der "images" das Bild ausgetauscht.
Wo sich die Angaben zu "banner-content" befinden, konnte ich gerade nicht entdecken. Ich suche noch mal alle Ordner durch.
"container" findet sich dagegen mehrmals in der Datei "bootstrap.min.css" und die unterschiedlichen Werte dabei sind wohl auch für verschiedene Stellen auf der Website zuständig.Den Code für den zentrierten Slider werde ich gleich mal testen.
Von der Shadowbox, von der die bei mir verwendete den Namen "Colorbox" trägt, gibt es längst eine viel neuere Version, wie ich gesehen habe. In der Zwischenzeit wurden wohl einige Bugs behoben und Aktualisierungen vorgenommen. Ich habe die neuste Version eben mal runtergeladen und werde morgen mal schauen, wie ich das Update vornehmen muss. Vielleicht läuft die Shadowbox danach ja auch auf der Testseite normal.
-
Ähnliche Probleme habe ich gerade auch noch mit einer Shadowbox. So einem Tool, dass den Hintergrund um Bilder verdunkelt, wenn man z.B. ein kleines Vorschaubild anklickt und das große Original dann geöffnet wird. [...]Hier sind wieder Links zur Testseite und der alten Seite, auf der alles prima läuft. Die kleinen Thumbnail-Bilder muss ich auf der Testseite nur noch anders anordnen und einen Abstand zwischen den beiden Reihen einfügen. Momentan sieht das noch etwas komisch aus, aber bevor ich mich an dieses mache, will ich die Shadowbox überhaupt erst zum Laufen bekommen.
Die Shadowbox funktioniert nun schon mal. Nach einigem hin und her probieren tut sie jetzt das, was sie tun soll. -
...na da sag ich mal
-
Danke!
Jetzt versuche ich den "eigenen" Slider zum Laufen zu bringen, also nicht den, der schon in die Templatevorlage integriert war.
Es gibt für diesen "Banner Rotator", wie er sich nennt, eine fertige Codeseite, die man nur nach seinen eigenen Wünschen umgestalten muss, also z.B. Links zu anderen Bildern einfügen, verschiedene Einstellungen etwas abändern oder die Pfade ggf. anpassen.
Nehme ich diese Vorlagenseite und führe dort alle gewünschten Änderungen durch, gibt es keine Probleme und der Slider läuft perfekt, wenn ich diese Seite online stelle.
Kopiere ich dann aber alle Teile des Slidercodes auf die Testseite der responsiven Vorlage, dann tut sich dort mal wieder gar nichts. Von dem Slider ist auf der einfach nichts zu sehen.Beide html-Seiten liegen im selben Verzeichnis, so dass es nicht an falsch geschiebenen Pfaden oder Links liegen kann.
Ist es möglich, dass im Headbereich vielleicht irgendwelche anderen Zeilen die Anzeige des Sliders verhindern?
Oder kann etwas anderes auf der Seite das unterdrücken?Hier sind wieder Links zu beiden Seiten.
Die nun angepasste Originalseite des Sliders, auf der dieser läuft: Slider zu sehen
Die Testseite mit den identischen Codezeilen der Originalseite, auf der der Slider aber verschwunden bleibt: Slider erscheint nichtKann jemand den Fehler (im Quelltext) entdecken??
Kurze andere Frage.
Mir ist aufgefallen, dass auf Internetseiten, z.B. bei den Meta Tags oder bei Codezeilen im body-Bereich, manchmal doppelte Anführungszeichen verwendet werden und manchmal nur einfache.
Da ist so etwas wie das hier:
<link href="http://www.lars-mikkelsen.de/colorbox/colorbox.css">auch schon mal so geschrieben:
<link rel='stylesheet' href='http://www.lars-mikkelsen.de/colorbox/colorbox.css'>Ist es egal, ob man bei den Anführungszeichen zwei Striche oder nur einen macht? Oder ist das nur bei bestimmten HTML-Versionen egal?
Ich selber verwende eigentlich nur die doppelten Anführungszeichen und diese sieht man ja auch deutlich häufiger, als die "einstrichigen". -
Das liegt an Zeile 97. Nimm mal das "style="display:none;" raus, damit stellst du das gesamte div-Element mit seinem gesamten Inhalt unsichtbar und ohne Platzverbrauch.
Ganz nebenbei... das Semikolon brauchst du nur dann zu notieren, wenn noch eine weitere Anweisung folgt. Anders als im CSS braucht die letzte Anweisung im "style" kein Trennzeichen.Hochkomma und Anführungszeichen werden von allen Browsern gleich interpretiert. Welches du nimmst, ist prinzipiell egal.
Lieben Gruß,
Tunarus -
Ich hab das jetzt rausgenommen, aber der Slider erscheint trotzdem nicht.
Vielleicht hat es damit doch gar nichts zu tun, obwohl ich mich über das "display:none" auch schon gewundert hatte.
Aber dieses steht ebenfalls so im Code der Originalseite und auch auf meiner alten Website ist es so drin, wo der Slider ja läuft.
Hm, eine merkwürdige Sache ist das. *kopfkratz* -
...tja, stimmt, das ist aus der Ferne schwer zu beurteilen ohne die gesamte Struktur und die beteiligten CSS zu kennen, tut mir leid.
Lieben Gruß,
Tunarus -
Oh, kein Problem, das muss dir nicht leid tun.
Ich werde jetzt einfach mal nacheinander verschiedene Codeteile der restlichen Codezeilen, die nicht zu dem Slider gehören, von der Seite löschen und dann jedesmal testen, ob das zu einer Anzeige des Sliders führen wird. Sofern es nichts bewirkt, füge ich die Codezeilen natürlich wieder ein.
Mal sehen, ob ich dabei fündig werden werde. -
Hier bin ich mal wieder.
Die Website ist schon seit längerem fertig. Es ist nun auch alles auf ihr eingefügt, was sie beinhalten sollte, und es läuft oder funktioniert auch alles.
Sogar der Slider, der so lange nicht wollte. Der Fehler lag gar nicht in dessen eigenem Code, sondern auf allen Webseiten war ganz unten eine überflüssige Script-Codezeile, die gar nicht mehr benötigt wurde. Nachdem diese (so etwas wie das hier: <script src="scripts/blabla/jquery.blabla-2.18.js" type="text/javascript"></script> ) entfernt war, lief der Slider sofort.
Ich spiele jetzt nur noch immer mal an kleineren optischen Details herum, aber ansonsten ist alles okay.
Oh, und auch bei den Google Webmastertools wird seit die neue Website online ist angezeigt, dass es keine kritischen Fehler gibt. Vorher wurde da ja lange mit dem Satz "Fix mobile usability issues found on the domain" herumgenörgelt.
-
Ist wirklich sehr schön geworden, mit viel Liebe zum Detail - Hut ab, mein lieber!
Lieben Gruß,
Tunarus -
Jetzt mitmachen!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!