Grafik komplett von Text umfließen lassen

[hawa]

Hallo,

hab mal wieder ein wenig geübt und probiert und möchte folgendes machen:

text text text text text
text text graf text text graf steht für Grafik
text text text text text

sprich eine grafik komplett mit text umfließen lassen. Hab beim googeln nur als Antwort gefunden
'geht nicht'.
Geht es wirklich nicht???

Danke, für euer Interesse

HAWA

 

[vitus37]

Ich würde sagen, ja das geht.
Vielleicht etwa so:

<p>text text text text</p>
<p>text</p><img><p>text</p>
<p>text text text text</p>

(Müssten natürlich in CSS noch einige Attribute gesetzt werden)

Das ist eine sehr sehr unschöne Lösung und semantisch korrekt vermutlich auch nicht, aber evtl eine Möglichkeit, wenn es sein MUSS.

 

[spyrogira]

Habe dir eine Datei mit einem Auszug aus: Der CSS-Problemlöser fertig gemacht.
Wie kann ich Text um ein Bild fließen lassen.
Damit solltest du es hinbekommen.
Die css und html dazu kannst du hier laden: Codearchiv (Kapitel 9)

 

[prm]

"Geht nicht" ist vielleicht nicht ganz richtig, aber eine einfache Standardlösung dazu gibt es auch nicht.
Hier mal ein Beispiel wie es mit zwei Textspalten funktionieren kann: http://www.ohne-css.gehts-gar.net/0062.php
Aber das erfordert auch etwas Rechenarbeit hinsichtlich der Positionierugen.

 

[hawa]

Danke für eure Antworten

Sorry das ich mich erst jetzt melde . War die letzten drei Tage nicht wirklich fit, gets geht wieder.
Der Tip mit dem Absatz ist immer noch eleganter als meine angedachte Lösung mit ner Tabelle.
Apropos Tabelle geht es nur mir so das ich oft denke
'Mensch jetzt ne Tabelle 3 Spalten 4 Zeilen, oben verbinden fertig'
oder ähnlich. Besonders bei Rahmen wenn man mit %breite fürs div arbeitet, bin ich oft versuch ne Tabelle im div zu erstellen damit der Rahmen drinnen bleibt.
Der Tip von prm ist obersuper ich denke so und nur so geht erstmal.

Fang jetzt wieder an zu üben, wird wohl bald wieder ne Frage kommen bis dahin

Hawa

 

[Efchen]

Der Tip mit dem Absatz ist immer noch eleganter als meine angedachte Lösung mit ner Tabelle.

Eine Tabelle wäre hier ja auch einfach nur falsch.

Apropos Tabelle geht es nur mir so das ich oft denke
'Mensch jetzt ne Tabelle 3 Spalten 4 Zeilen, oben verbinden fertig'

Das musst Du abstellen. Tabellen werden nur verwendet, um tabellarische Daten auszuzeichnen.
Wenn Du begreifst, was Semantik ist, und wie man die mit HTML erzeugt, dann kommst Du gar nicht mehr auf solche Gedanken.

So alt seid Ihr, die Ihr ständig Tabellenlayouts macht, doch gar nicht, dass Euch diese (falschen) Arbeitsweisen so in den Kopf eingebrannt sind. Das macht man seit 10 Jahren nicht mehr so! Ich hab vor über 10 Jahren Tabellenlayouts gemacht, bei mir wäre das was anderes, aber ich mach das auch seit gut 8 Jahren nicht mehr.

 

[hawa]

Tabellen

Naja danke für deine Einschätzung, bin 49 Jahre alt und habe vor langer Zeit mich mal damit beschäftigt dann ist der Bezug kompl. weggebrochen.
Jetzt ist es einfach nur um nicht im Koppe einzurosten.
Kanst du mir Links oder Lektüre für die Sematik empfehlen.


Danke HAWA

 

[Efchen]

Na, da hab ich ja ausnahmsweise mal daneben gelegen :-)
Ich freue mich immer über Leute, die noch älter sind als ich ;-)

Klar kann ich Dir da einen anständigen Link geben, lies Dich mal hier ein. Das ist so ziemlich das einzige, was auf HTML richtig eingeht. Die meisten anderen Tutorials erklären doch immer noch "Layout mit Tabellen" oder "Layout mit div" (was natürlich beides völliger Quatsch ist) und zeigen Tags wie <b>, <i> oder <center>.
Einführung | Webdesign mit XHTML und CSS

 

[hawa]

wird sofort gemacht

Hey komm gerade von der Arbeit, danke für deine Antwort. Fange sofort an.
Hab aber schon was neues gestern probiert, habs nur heute früh nicht geschaft einzustellen also:

Ich versteh es einfach nicht.
1. Nur für eine Auflösung schreiben is heute nich gut, also ich hätte gern oben ein Grafik die immer zentriert sein soll. Sie soll in der Breite min 800px losgehen und bei max 1180px aufhören. Ich soll div's vermeiden als pack ich Sie in nen Absatz den zentrier ich, alles super. Auflösung 1024/768 gut Auflösung 1280/1024 gut.
Nu will ich gern ne Navigation links, weil oben wäre einfach. Diese soll immer in einer Flucht mit der Grafik sein bei 1024/768 kein Thema beides fängt ja links an.
Guckt nu einer mit ner Auflösung von 1280/1024 oder höher .......HM Grafik zentriert Navi links. Also MUß ich doch beides in einen DIV packen. Oder????

2.Die Navi soll flexibel wachsen je noch Auflösung (z. B. 80% von der Bildschirmhöhe ), sprich die Zwischräume zwischen den li sollen größer werden je größer die Auflösung. Krieg ich auch hin, in einem DIV ist das Falsch?????? ( Klar wenn einer fragt warum kann ich leider nur Antworten weil ich's einfach mal so probieren will )

3. Rechts neben der Navi soll Inhalt stehen Text, Grafik wurscht, und nu krieg ich meine Schelte. Einen Div rechts gefloatet, Höhenmäßig an die Navi angepasst klappt. Nur der Text soll vertical mittig sein, und was mach ich.... ne Tabellenzelle in den DIV vertical-align:middle und alles ist gut. Eben nicht weil eine Tabelle kein Layoutmittel ist, aber wie geht es denn?????????? Ich hab doch keine feste Höhe. margin und padding beide haben bei % keinen Bezug sprich sie machen nix.

G r a f i k z.B. 120px
----------- Abstand z.B. 5% (Ich hab's mit nem leeren DIV gemacht wahrscheinlich auch falsch??)
N
A Text z.B. 80% des restlichen Bildschirms
V
i
---------------------------------------
LEERE FLÄCHE
Leider hab ich keinen Webspace, weil ich machs halt nur aus Spaß und damit meine eingerosteten grauen Zellen was zu tun haben.
Kann mir vielleicht jemand nen Tipp geben wo ich für solche Testzwecke welchen herbekomme.

Wenn ihr bis hierhin gelesen habt
Vielen herzlichen Dank


HAWA

 

[Elroy]

Hallo.

Es gibt zahllose kostenlose Webspace Anbieter. Ich habe zum Beispiel einen Account bei bplaced den ich dir empfehlen kann.
Bei deinem Problem ist es wirklich besser wenn du das hochlädst damit man sich das ansehen kann.

Gruss
Elroy

 

[prm]

Für deine erste Vorgabe empfiehlt sich ein horizontal zentrierter Div, in den du alles reinpackst.
Dabei kannst du es mal so versuchen:

#wrapper {
width: 100%;
min-width: 800px;
max-width: 1180px;
margin: 0 auto;
}

Dabei solltest du wissen, dass die min/max-Angaben nicht von allen Browsern (z.B. IE 6) unterstützt werden.

Wenn der #wrapper dann das Elternelement ist, dann kannst du bei #navi und #content mit prozentualen Breiten arbeiten, z.B. 30/70%.

Vertikal mittiger mehrzeiliger Text geht m.W. ohne

display: table-cell;

nicht.
Auch das wird von älteren IE-Versionen nicht unterstützt.

Flexible Layouts haben den Nachteil, dass sich das Verhältnis von Text zu fixen Grafiken verändert und es somit zu uneinheitlichen Darstellungen führt.

Mein persönlicher Tipp: Mach ein fixes Layout und nimm einen Mittelwert deiner Vorgaben als Breite.

 

[hawa]

Vielen Dank

Hallo und vielen Dank,

werd gleich mal bei bplaced reischauen vielleicht klappts dann ja nachher schon.

Hallo prm mir fällt ein Stein vom Herzen weil genauso hab ich gelöst, hab nur gedacht es wäre vom Grundsatz her falsch, weil es halt ne Menge div's werden nämlich

Haupt
Kopf
Navi
Körper
Körper_innen_links
Körper_innen_rechts

und im Körper hab ich halt die Tabelle als Tabelle.
display table cell kannte ich noch nicht das ist natürlich viel kürzer als meine Tabelle.
Die Grafiken haben px als width und height geht mir halt ums zentrierte Layout, die sollen sich nicht größentechnisch verändern ( eben weil sieht nich aus )
Hab nen zweites CSS für IE6 mit festen breiten und höhen, da muß ich dann wohl die Tabelle drinlassen wenn ich dich richtig verstanden hab.

Jedenfalls bin ich nen gutes Stück schlauer.

Nachmals danke dafür.

HAWA

 

[Efchen]

1. Nur für eine Auflösung schreiben is heute nich gut

Das war noch nie gut. Denn seit es das WWW gibt, kann man Fenster in einer grafischen Benutzeroberfläche verkleinern. Und auch jeder Browser, den es bisher gab, besaß verschiedene Toolbars, die den Platz, den eine Website zur Darstellung hat, verkleinerten.

ich hätte gern oben ein Grafik die immer zentriert sein soll. Sie soll in der Breite min 800px losgehen und bei max 1180px aufhören. Auflösung 1024/768 gut Auflösung 1280/1024 gut.

Browserfenster verkleinert auf 772x981, Auflösung 1280/1024 schlecht.

Guckt nu einer mit ner Auflösung von 1280/1024 oder höher .......HM Grafik zentriert Navi links. Also MUß ich doch beides in einen DIV packen. Oder????

Klar. Dazu sind divs ja auch da. Du gruppierst zwei Elemente: Die Überschrift mit dem Bild und die Liste mit dem Menü.

2.Die Navi soll flexibel wachsen je noch Auflösung (z. B. 80% von der Bildschirmhöhe )

Vergiss doch mal die Auflösung/Bildschirmgröße. Die ist CSS nicht bekannt.

margin und padding beide haben bei % keinen Bezug sprich sie machen nix.

Haben sie immer. Sie beziehen sich auf die Größe des Elternelements.