Text richtig um Grafik fließen lassen

Znrl · 17. Juli 2008

Hallo,
ich bin grad dabei eine Website zu erstellen und komm an einer Stelle nicht weiter.
Die Seite ist in 3 Frames aufgeteilt, links des Menü, oben übern ganzen Bildschirm so ne Art Titel Balken und dann unten rechts des Hauptfenster.
In den Frame oben habe ich links eine kleine Grafik eingebunden und wollte dann zentriert eine Überschrift neben die Grafik machen. Allerdings egal ob mit align oder float befehlen wird des in Opera und Firefox nicht richtig dargestellt... im Internet Explorer aber schon.
Das Problem scheint irgendwie zu sein dass, die grafik am text ausgerichtet wird und nicht umgekehrt, sodass die Grafik nach unten verschoben wird und der Frame oben scrollbar wird, wenn man mit dem Mausrad darauf klickt. Ohne Text stimmt alles.
Gibts da ne andere Möglichkeit oder irgendwas des ich falsch mach, damit der Text einfach egal wo neben der Grafik stehen kann?

Der Frame ist 150px hoch.
Hier die Bilder wie des aussieht an den Wörtern "Titel" kann man sehen dass ich zwischen den Bildern nur oben den Frame gescrollt hab.

So stimmt der Hintergrund, es is nicht scollbar und auch der test, der aber ohne <p> oder <h1> oder sonst was geschrieben wurde wird richtig angezeigt, den will ich aber größer und mittig haben. Sobald ich den Titel in h1 oder setzte tritt der Fehler auf.

Hier der Code für den Frame: hintergrundoben.png ist der Farbverlauf, hintergrundeck.png ist die ecke mit dem Logo, des hab ich nicht anders hinbekommen, ich weiß nicht wie man 2 verschiedene Hintergründe nebeneinander legen könnte.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<title>Oben</title>

<style type="text/css">

body { background-image:url(Bilder/HintergrundOben.png);
		background-repeat:repeat-x}
h1	 { color:#000000; }

</style>

</head>

<body>

<body bgcolor="#FFFFFF">

<img src="Bilder/Hintergrundeck.png" style="margintop:0px; margin-left:0px" align="left" height="150" width="200" name="Wappen" alt="Wappen" border="0">

 <h1 align="center">Titel <br> Titel</h1>

</body>

</html>

Kann mir jmd sagen woran des liegen könnte? oder muss ich da mit Tabellen anfangen?
Danke schonmal
Znrl

claW. · 17. Juli 2008

als erstes: trenne css-, html- und javascript-dateien soweit es geht -> es verschafft überblick und endet nicht in chaos in dem du evtl. nicht mehr durchsehen solltest.

Znrl schrieb:
Allerdings egal ob mit align oder float befehlen wird des in Opera und Firefox nicht richtig dargestellt... im Internet Explorer aber schon.

vergiss ganz schnell den internet explorer! entwickle auf firefox/opera/safari/konqueror/... und passe es danach auf dem ie über conditional comments an. sonst wirst du nie deine freude am webseiten erstellen haben, denn alles wird in frust enden.

Znrl schrieb:
oder muss ich da mit Tabellen anfangen?

und das vergisst du auch ganz schnell! tabellen sind nicht dazu da layouts von webseiten zu ersetzen. klar es mag einfach gehen, resultiert aber in massig overhead und mieserable portabilität und wartung deiner webseite. arbeite dich ein wenig in css ein und bau damit deine layouts, denn dazu ist css gedacht - um webseiten formatierungen, positionierungen und ähnliches beizubringen.

vielleicht mal ein tipp:

bastel dir ein mal den linken verlauf, sowie den oberen und speichere sie separat ab (vorzugsweise png). bedenke hier, dass du nicht den gesamten verlauf speichern musst. es reicht wenn du die maße breite*1 pixel nimmst und diese dann nach unten, respektive rechts wiederholst/auffüllst. im nachhinein erstellst du mit css eine klasse und in html einen div-container, welcher du die klasse zuweist. die css-datei sollte dabei irgend etwas in der art sein:

HTML:

body {
  /* ... */
  z-index: 50;
}

div#leftGradient {
  background: #F90 url(./images/left-gradient.png) repeat-y;
  width: 128px;
  height: 100%;
  z-index: 1;
  display: inline-block;
  position: absolute;
  left: 0px;
  top: 0px;
}

div#topGradient {
  background: #F90 url(./images/top-gradient.png) repeat-x;
  width: 100%;
  height: 128px;
  z-index: 1;
  display: inline-block;
  position: absolute;
  left: 0px;
  top: 0px;
}

div#logo {
  background: transparent url(./images/logo.png) no-repeat;
  width: 128px;
  height: 128px;
  z-index: 2;
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
}

(das display-attribut musst du evtl. abändern, aber es sollte vorerst den gewünschten effekt bringen).

somit sagst du dem browser, dass er das leftGradient (oberer verlauf) mit der gewählten farbe und entsprechendem hintergrund füllen soll. die positionierung dabei liegt absolut auf der seite, d.h. sie wird nicht mitgescrollt bzw. sie steht fest auf einer position, nämlich im aller ersten punkt (0;0). der z-index besagt hierbei nur die sichtbarkeit in richtung der z-achse, sprich was wird an welcher stelle vor etwas gelegt bzw. hinter etwas.

die html-seite könnte dann z.b. wiefolgt aussehen:

HTML:

<!-- ... -->
<body>
  <div id="leftGradient">
    <!-- hier die navigation und ähnliches -->
  </div>
  <div id="topGradient">
    <!-- hier alles was in den oberen container/verlauf soll -->
  </div>
  <div id="logo">
    <!-- hier nur das logo, evtl. kannst du hierbei auch mit <img> arbeiten, allerdings
    ist das nicht notwendig wenn du nur das logo selbst darstellen willst -->
    &nbsp;
  </div>
  <div id="content">
    <!-- durch eine weitere id in der css, kannst du hier die formatierungen für den
    inhalt der seite beschreiben. denke aber daran, wenn du mit css arbeitest und die
    elemente platzieren willst, mit position: und dessen abhängige variablen zu bearbeiten
    (u.a. left, top, right, bottom, width, height, display, ... weitere findest du schon
    heraus ;))
    -->
    
    <!-- eigentlicher seiteninhalt hier -->
  </div>
</body>
</html>

Znrl · 17. Juli 2008

Hallo,
das mit dem Verlauf hatte ich schon so: 1px hoch 200px lang bzw 1px lang und 150px hoch mit ner Datigröße von ca. 220 bytes. Ich hatte erst größere Stücke aber da hat man immer da wo der Verlauf neu angefangen hat einen nicht ganz guten Übergang gesehen also es waren dann immer 4-5 Kästchen nach rechts rüber, mit 1px sieht des ganze auch glatter aus.

html und css trennen, damit meinst du des style im <img>? naja des is auch so nen bisschen nen problem des ich die ganze Zeit hab es gibt einfach viele Sachen bei denen man html und css Befehle findet und ich bin mir meist nicht so ganz sicher was ich dann nehmen soll.

Versteh ich des richtig wenn ich mir damit dann die Frames spar?
Dann kann ich neue Unterseiten in der entsprechenden id öffnen lassen?
Aufjedenfall mal danke ich werd des erstmal ausprobieren.

znrl

Znrl · 24. Juli 2008

Des passt zwar nichtmehr ganz zum Topic... aber imprinzip hat mich des hier zu nem neuen Problem geführt... ich hab mich nen bissel mehr mit CSS beschäftig und denke die Seite is was des betrifft jetzt besser allerdings hab ich ziemlich gleich, weil des in dem Buch anhand dem ich mir des versuch beizubringen so gemacht wird, des ganze in xhtml strict geschrieben:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>

<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
...

die oberste Zeile <?xml version....> hab ich empfohlenerweise weggelassen.

Damit des nicht umsonst war natürlich als .xhtml Dokument abgespeichert um dann zu erfahren, dass der IE des nicht nur einfach bissel anders, sondern gar nicht darstellt
Gut man kann allles so lassen und als .html Dokument speichern (vlt noch den content="html/text" ändern, wies die meisten machen) aber davon hab ich gehört dass des dann imprinzip, da eigentlich xhtml, nur als schlechtes tolleriertes html behandelt wird (wie die vielen nichtangezeigten > nach den /).
Was mir auch aufgefallen ist, dass es des ganze auch als .php gibt und da auch richtig vom IE und Firefox dargestellt wird (z.b. lispeacs.com).

Meine frage(n) also:
Als was wird des xhtml behandelt wenn es als .php auf dem server liegt? Also wär des ne möglichkeit des IE Problem zu umgehen und xhtml ne Daseinsberechtigung zu geben?
Ist es überhaupt lohnend/praktisch des ganze als xhtml zu machen ums dann doch nur als html/text auszugeben oder soll ich da einfach html4 nehmen?

Naja da gibts mir grad zuviel Möglichkeiten und zu viel unterschiedliche Meinungen (wie z.b.: xhtml ist tot!, xhtml als .html geht garnicht!...) vlt könnt ihm mir da raus helfen.. oder is es am Ende nur wieder sowas wie Geschmacksache?

Znrl

Backslash · 25. Juli 2008

afaik bestimmt doch der DOCTYPE als was es interpretiert wird und es wird immer als .html gespeichert?!
PHP ist nur eine Datei, die vorher vom Server, genauer von PHP, interpretiert wird. Dabei kommt dann auch HTML raus, das hat hiermit eigentlich nichts zu tun.

Außerdem muss doch der content-type "text/html", nicht "html/text" sein?!

Znrl · 25. Juli 2008

Ja du hast recht "text/html" ist richtig hatte ich aber auch so schon drin nur hier falsch geschrieben.

Ganz egal, was die Verarbeitung angeht, hört sich der MIME-Typ und des drunter mit der Dateiendung aber nicht an:

http://de.selfhtml.org/html/xhtml/unterschiede.htm#mimetypen

Und der Internetexplorer zeigt mir auch unter Typ wenn ich als Doktype xhtml 1.0 strict nehm und als MIME-typ "application/xhtml+xml" bei der Dateiendung .html: text/html an bei der Dateiendung .xhtml: "application/xhtml+xml"

Des mit dem php meinte ich nur weil ich eben die im Post gestern genannte Seite gesehen hab bei des des alles so war wie bei mir, bis ben auf des .php und es hat auch der IE angezeigt deshalb dachte ich, dass der Server da vlt. auch xhtml erkennt und man vlt des umgehen kann dass der IE die Seite nur runterladen will, nicht anzeigt... naja....

Ich hab davon wenig Ahnung und bin dann halt auf sowas gestoßen: http://www.hixie.ch/advocacy/xhtml

Mittlerweile auch auf http://schneegans.de/web/xhtml/
Nur ohne Ahnung verwirrt einen des halt irgendwie mehr als es hilft.

Znrl

Suche

Text richtig um Grafik fließen lassen

Znrl

Lieutenant

claW.

Gast

Znrl

Lieutenant

Znrl

Lieutenant

Backslash

Captain

Znrl

Lieutenant

Ähnliche Themen