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

Max19899

[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

MrMurphy

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

Max19899

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

MrMurphy

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

Max19899

Also an sich müsste ich doch ausschließlich an der Datei hier etwas ändern: http://seo-union.de/test2/css/creative.css

Aber wie ich den Code genau umschreiben muss, weiß ich auch nicht :-/

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

Gastl

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.

Der Inhalt kann nicht angezeigt werden, da er nicht mehr verfügbar ist.

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

Max19899

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.

Gastl

Zitat von Max19899

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

Dann ist es eine Frage des Wissens über CSS. Muss man sich damit beschäftigen. -> https://www.google.de/search?q=css+r…MOIKNsgHok4rgDw

Max19899

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!

Tags