zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bilder versetzt übereinander und Text um die Bilder fließen lassen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.05.2016, 19:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.05.2016
Beiträge: 3
bahnski befindet sich auf einem aufstrebenden Ast
Standard Bilder versetzt übereinander und Text um die Bilder fließen lassen

Hallo,
ich versuche gerade diese Seite nachzubauen scheitere aber gerade daran, den Text um die Bilder fließen zu lassen.
So soll es aussehen:Ferienhäuser: Teutoburger Wald, Land des Hermann
Alle Lösungen die ich bis jetzt gefunden habe ergeben leider nicht das gleiche Ergebnis.
Eine Teillösung wäre dieses hier: https://jsfiddle.net/0gwta3um/
Aber leider würde das nicht das gleiche Ergebnis bringen! Denn der Text würde
um das DIV fließen und nicht um die Bilder!

Über jede Anregung, Hilfestellung würde ich mich sehr freuen
Christian
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.05.2016, 22:46
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.005
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Für das Problem gibt es noch keine Lösung.

Die CSS Shapes sind zwar in Entwicklung, werden aber für den praktischen Einsatz noch zu wenig unterstüzt, siehe

Can I use... Support tables for HTML5, CSS3, etc

Ob die überhaupt bei verschachtelten Bildern funktionieren weiß ich nicht.

Ich kenne dafür auch keine Basteleien. Das muss aber nichts heißen, da ich eher für schlichte, gradlinige Layouts bin.

Die von dir verlinkte Seite bietet die schlechteste aller Lösungen. Alle Bilder und Texte sind absolut positioniert. Damit gibt es keine Flexibilität und schon gar keine Resposivität. Du kannst du Seite ja mal spaßenshalber auf einem Smartphone oder Tablet anschauen.

Auch die Ansicht bei blockiertem JavaScript ist eher eine Katastrophe. Von der Seite her ist die von dir verlinkte Seite aus Desktop-Bildschirmen zwar nett anzuschauen, in der Praxis aber eher ein schlechtes Vorbild.

Gruss

MrMurphy
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.05.2016, 09:45
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.745
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von MrMurphy Beitrag anzeigen
Die von dir verlinkte Seite bietet die schlechteste aller Lösungen. Alle Bilder und Texte sind absolut positioniert. Damit gibt es keine Flexibilität und schon gar keine Resposivität. Du kannst du Seite ja mal spaßenshalber auf einem Smartphone oder Tablet anschauen.

Auch die Ansicht bei blockiertem JavaScript ist eher eine Katastrophe.
Siehst du dann was? (oder wurde die Seite geändert)
Ich sehe nur eine weisse Seite. Das ist der komplette HTML Code:
HTML-Code:
<body>
        <div id="SITE_CONTAINER"></div>

    
        
    
<div comp="wysiwyg.viewer.components.WixAds" skin="wysiwyg.viewer.skins.wixadsskins.WixAdsWebSkin" id="wixFooter"></div>
    
    
        
    

    </body>
Mit Zitat antworten
  #4 (permalink)  
Alt 04.05.2016, 13:32
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.005
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Siehst du dann was?
Ja. Aber JavaScript darf nicht mal ansatzweise blockiert sein.

Je nachdem, wie ich JavaScript blockiere wird die Seite dann entweder unformatiert oder wie in deinem Fall gar nicht angezeigt.

Gruss

MrMurphy
Mit Zitat antworten
  #5 (permalink)  
Alt 04.05.2016, 15:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.05.2016
Beiträge: 3
bahnski befindet sich auf einem aufstrebenden Ast
Standard

Darum will ich ja weg von dem Anbieter!
Mit Zitat antworten
  #6 (permalink)  
Alt 08.05.2016, 13:50
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 5.003
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Grundsätzlich ist es möglich so etwas zu bauen macht aber nur wenig Sinn. Wie meine MrMurphy schon geschrieben hat ist absolute Positionierung Gift für ein responsive Design. Allerdings kannst du auch in einem responsive Design auf verschiedene Bildschirmgrößen optimieren und so zum Beispiel bei einem Tablet oder Smartphone auch die absolute Positionierung lösen. Die Seite sieht ja auf einem Desktop ganz nett aus.

Text um Bilder fließen zu lassen ist auch möglich und eigentlich gar nicht so schwer. Du musst nur das Bild richtig positionieren und den Kontext anders setzen. Das kannst du über CSS steuern. Über JS kannst du dann noch den letzten Touch geben, bedenke aber: Die Seite sollte ohne JS nutzbar sein.

Beispielsweise könnte ich mir vorstellen, dass ohne JS die Bilder einfach übereinander gezeigt werden, wenn JS aktiv ist die Überlappung erzeugt wird. Auf Tablets und vor allem Smartphones sollten dann einfach Bilder und Text untereinander sein. Hier hast du ein paar Gestaltungsmöglichkeiten.

Wobei brauchst du denn genau Hilfe, was willst du erreichen?
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #7 (permalink)  
Alt 11.05.2016, 23:13
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.05.2016
Beiträge: 3
bahnski befindet sich auf einem aufstrebenden Ast
Standard

Ich versuche diese Seite hier 1:1 auf ein Wordpress zu migrieren! Als reines HTML würde mir auch erst mal reichen um zu verstehen wie es gemacht wird!
Hier der Link zu der Seite die ihc gerne migrieren möchte:
Ferienhäuser: Teutoburger Wald, Land des Hermann
Hier meine Testseite (HTML ohne Wordpress):Nah drann | iutspann
Mit Zitat antworten
  #8 (permalink)  
Alt 12.05.2016, 13:48
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.671
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

Ja, und was ist da jetzt dein Problem?
Mit Zitat antworten
Antwort

Stichwörter
bilder, div, padding, text, umfließen

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Navigations-Leiste wird nicht richtig angezeig. vaporizzle CSS 5 05.02.2014 17:29
Hover effekt auf ganze TD zelle gandalf_hh CSS 27 13.07.2011 20:06
gibt es eine andere Lösung ohne Tabelle? online CSS 16 24.04.2009 09:41
3 dynam. Spalten mit Inhaltsüberlauf spacegaier CSS 6 12.10.2007 01:24
layout ohne tabellen rw597678 CSS 3 23.04.2005 13:31


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:53 Uhr.