Layout auf mobile Geräte anpassen

    Servus an alle,

    ich habe eine Problem mit der Darstellung meiner Ressourcen.

    auf http://www.lbnswerk.de könnt ihr mein Layout begutachten.

    Auf dem Ipad sieht der Spaß leider so aus::roll:


    Kurz zu meiner Struktur:

    <div class=productLineStandart> div über eine Gesamte Zeile. Wird genutzt um Inhalte mit margin-left margin-right zu zentrieren
    <div class=rightProduct> rechtes Bild und Bildtext
    <img />
    <div class=productText>
    <div class=text>

    </div>
    </div>
    </div>


    <div class=leftProduct> linkes Bild und Bildtext
    <img />
    <div class=productText>
    <div class=text>

    </div>
    </div>
    </div>
    </div>

    Ich habe ein Problem mit der prozentualen Festlegung meiner Höhen und Breiten Parameter.
    Mein Bild soll Quadratisch sein, daher dachte ich ich kann die Breite meines Bilder prozentual festlegen, dadurch wird die höhe "auto" matisch festgelegt ( Bild liegt auch quadratisch vor).

    Diese Höhe soll nun auch mein Div Element erhalten welches die Ressourcen enthält ( hier also leftProduct und rightProduct) und natürlich auch mein komplettes Div Element ( hier productlineStandart ).

    Und wie funktioniert das mit der Breite? Je nachdem wie groß mein Bild ausfällt möchte ich den Produkttext in Höhe und Breite anpassen, zudem soll er in dem div ( hier also leftProduct und rightProduct) rechts anliegen und wie auf lbnswerk.de zu sehen einen kleinen Spalt aufweisen.

    Hoffe das ist einigermaßen verständlich.:-)

    Danke schonmal!

    Hallo,

    mit ein paar Änderungen ist es leider nicht getan.

    Der HTML-Quellcode ist (um erst gar keine Unklarheiten aufkommen zu lassen) Schrott. Und zwar nicht nur, weil das bereits seit über 8 Jahren veraltete und begrabene XHTML benutzt wird, sondern die Struktur. Sowas war zu keinem Zeitpunkt sinnvolles oder zulässiges HTML.

    Der HTML-Quellcode muss komplett neu und nach den Vorgaben von HTML5 und CSS3 aufgebaut werden, alles andere führt nur von einem Problem zu nächsten. Dann kann die Seite auch problemlos responsive gestaltet werden, so dass sie sich sinnvoll den unterschiedlichen Fensterbreiten anpasst.

    Das zerschossene Layout entsteht ja nicht nur auf Smartphones, sondern bereits wenn auf einem großen Bildschirm das Fenster schmaler gezogen wird - ist das nie aufgefallen? Oder mit der faulen Standardausrede abgetan worden, das die Besucher in der Mehrzahl große Bildschirme benutzen und ihren Browser im Vollbild betreiben?

    Der Text muss in geeignete Elemente gepackt werden um darauf zugreifen zu können. Dafür sollten ungefähr 2/3 der div-Container ersatzlos entsorgt werden, sowie die meisten anderen durch geeignetere ersetzt werden.

    Danach kann mit CSS den Besuchern ein Angebot gemacht werden, wie die Seite angenehm zu nutzen ist.

    Gruss

    MrMurphy

    Zitat


    Der HTML-Quellcode muss komplett neu und nach den Vorgaben von HTML5 und CSS3 aufgebaut werden, alles andere führt nur von einem Problem zu nächsten.

    sorry, aber so einen unnsinn hab ich selten gesehen.
    ich kann sebst mit html 4 noch gute ergebnisse erzielen und sogar responsive coden. das hat nix mit html zu tun, da css fürs layouten zuständig ist und html den container liefert.
    und man MUSS überhaupt nicht mit html5 und css3 werken. win7 wird mit dem ie8 ausgeleifert und solange der noch im rennen ist, kann man nicht von "müssen" reden.

    html5 und css3 sind vom w3c noch nichtmal verabschiedet worden als offziell gültige standards. dass der scheiss schon funktioniert hat man allein den browser-herstellern zu verdanken, die sich frühzeitig auf ein frisches pferd gesetzt haben.

    klar is der code hier nicht das optimum, sonst würd er ja passable ergebnisse erzielen. aber liquid layouts gabs schon vor responsive design und media queries.