HTML , Inhalte auf Apple-Geräten und Co verschoben

    [h=3]Hallo Leute,[/h]

    vorab muss ich mal kurz sagen, dass ich mehr oder weniger kaum Ahnung von HTML/Dreamweaver habe. Nun habe ich mir aber mit kostenlosen Web-Templates und ein paar Google Kenntnissen eine Website zusammengebastelt, was mir meiner Meinung nach auch recht gelungen ist [Blockierte Grafik: https://lila.ppdl.de/wcf/images/smilies/lol.gif] 


    Auf meinem Android-Handy und meinem Chrome-Browser sieht das auch alles top aus. Nur wenn ich mir das ganze übers Ipad anschaue, dann sieht das etwas komisch aus.


    Hier mal die entsprechende Webseite: http://redir.ppdl.de/goto.php?http://seo-union.de/test2/
    (Alles noch im Aufbau, fehlen noch etliche Sachen ^^)


    Beim Ipad verschwindet jetzt beispielsweise der Schriftzug "content in motion" samt button zur Hälfte links über den Bildschirmrand.
    [Blockierte Grafik: http://seo-union.de/test2/apple.jpg]


    Die css-datei findet hier hier: http://redir.ppdl.de/goto.php?http:…test2/style.css


    Bei dem Thema bin ich leider etwas überfordert. Wäre cool, wenn ihr mir da weiterhelfen könntet!


    Gruß, Max

    Hallo

    Die Seite funktioniert in keinem Browser richtig.

    Der Container "header .header-content" hat die CSS-Anweisungen "position: absolute", top und left erhalten. Die sind an dieser Stelle schlicht falsch und sollten gelöscht und durch geeignetere wie margin und padding ersetzt werden.

    Wenn du ein Framework wie Bootstrap benutzen willst solltest du am CSS nur Änderungen vornehmen, über deren Auswirkungen du dir auch bewußt bist. Es ist in jedem Fall besser die von Bootstrap direkt angebotenen Lösungen zu verwenden.

    Gruss

    MrMurphy

    Einmal editiert, zuletzt von MrMurphy (11. September 2015 um 10:24)

    Puh, schon mal danke für die schnelle Antwort! Betrifft das mit dem Fehler denn nur die Überschrift? Oder muss ich sonst noch etwas ändern?
    Und es würde mich wirklich helfen, wenn du mir sagen könntest wie genau ich was umschreiben muss. Kenne mich damit wirklich nicht aus :(

    Hallo

    Zitat

    Betrifft das mit dem Fehler denn nur die Überschrift?

    Kein Ahnung. Da erwartest du mehr als ein bißchen zuviel. Niemand kann die CSS-Dateien durchgehen und Fehler suchen und finden.

    Zitat

    Und es würde mich wirklich helfen, wenn du mir sagen könntest wie genau ich was umschreiben muss.

    Ohne ein Mindestmaß an Grundwissen wird dir das nicht weiterhelfen. Ich kann dir nicht jeden Tastenanschlag erklären.

    Wenn du Webseiten erstellen oder auch nur anpassen / pflegen willst ist im Vorfeld ein gewisses Maß an Grundwissen einfach erforderlich. Wenn du ein Framework wie Bootstrap musst du zu diesem Grundlagenwissen (nicht anstatt) noch die Grundlagen von Bootstrap lernen. Und wenn du zusätzlich noch ein Template für Bootstrap verwenden und anpassen willst musst du dieses auch noch zusätzlich verstehen.

    Wenn du dir die Seite erstellen lassen willst musst du dir professionelle Hilfe suchen und zahlen.

    Gruss

    MrMurphy

    Hallo

    du kannst in der style.css den gesamten Block

    Code
    header .header-content {
	position: absolute;
	top: 288px;
	padding: 0 50px;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	left: -525px;
    }

    löschen.

    Ob und was du eintragen kannst hängt davon ab, was du erreichen willst. Dazu hast du noch gar nichts mitgeteilt.

    Gruss

    MrMurphy

    Sieh dir deine Seite mit Firefox an. Mit diesem kannst du mit einem Rechtsklick auf ein Element, dieses untersuchen. Im rechten Teil des aufgehenden Fensters, kannst mit CSS-Elementen rumspielen und live sehen was damit passiert.

    forum-hilfe.de/attachment/4065/

    Aber gerade was CSS angeht, ist es für Außenstehende eine Zumutung da was zu finden.

    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.

    Also mit dem Firefox komme ich leider nicht weit, da wird mir zwar alles angezeigt aber ich haben leider null Ahnung was ich wo ändern muss ^^

    Das Problem wird ersichtlich wenn man das Browserfenster nicht auf dem gesamten Bildschirm öffnet und dann ein bisschen herum skaliert.
    Bei genügender Breite ist es ok, dazwischen nicht und wenn man schmal genug wird, wechselt es auf einmal in den zentrierten Modus.
    Die Linksausrichtung vom header-content klemmt im mittleren Bereich.

    @MrMurphy: Letztendlich will ich erreichen, dass der Header (sprich die Überschrift samt dem "Über uns" Button) überall richtig angezeigt wird. Also wenn ich das Browserfenster verkleinere, dann soll der Header immer noch passend links neben dem Mann angezeigt werden und nicht in die Mitte rutschen oder links über den Rand.

    Hab den Fehler gefunden Leute =) Der tipp von MrMurphy war fast richtig. Musste lediglich von der style.css in die creative.css wechseln. dort gabs einen fast identischen Eintrag. Als ich den abgeändert habe, hats dann auch geklappt. Dickes Dankeschön an alle!