Bilder und text

Hallo Gemeinde,

ich hab heute den ganzen Tag damit verbracht, Foren zuwälzen. Leider habe ich nur einen Teil Erfolg gehabt.

Ich habe eine Seite mit ineinander verschachtelten Tabellen. In der inneren (weiß) sollen ein Bild, rechts daneben der Text, noch ein Bild und wieder rechts daneben der Text sein.

Also sozusagen alles in einer Reihe. Bis jetzt sieht das so aus. Kann mir jemand dabei bitte helfen. Ich dreh schon ganz hohl.

Liebe Kollegen

Navigation

Tabelle
Hintergrund
Zellen verbinden
Breite und Höhe

News

Die Neuigkeiten stehen stets an dieser Stelle. Viel Neues gibt es nicht. Nur so viel: diese Seite ist neu.

<div style="position:absolute; left:350px" Egon

Name Vorname

Straße

Ort

Aigner
      </td>
    </tr>
  </table>
</td>

Lass die Tabelle weg und fang von vorne an, wir sind im 21 Jahrhundert und nicht in den düsteren Anfängen des HTMLs.

Für Gestaltungszwecke nimmt man CSS, von Tabellen ist man längst weg,

nicht nur weil man damit den Sinn von HTML
(Auszeichnungssprache => Elemente sinnvoll auszeichnen)

mit Füßen tritt, sondern weil Tabellen für das Layout zu 99% Anfänger nutzen und die dann pfuschen pfuschen pfuschen bis es klappt…

Auch benutzt man keine HTML Attribute fürs Aussehen mehr wie widht=", das macht man heute alles mit CSS, auch wenn es dir vielleicht unsinnig erscheint,

ist es doch viel praktischer wenn du da und nur da das hast, was beschreibt wie es aussehen solllst und danach die eigentlichen Elemente, ansonsten musst du irgendwann wenn du die Seite mal nur vom Aussehen verändern willst in den Elementen rumwühlen und suchen suchen suchen…

CSS 4 You - The Finest in Stylesheets

Und Googlen, da findest du sehr viele gute Tutoriale.

MfG

NA, dann werd ich das mal tun.

Genauer solltest du es hier nachsehen können, was die Nachteile von Tabellen sind, und welche Alternativen es dazu gibt: CSS 4 You - The Finest in Stylesheets: Workshop: Layouten ohne Tabellen

Wie geil ist das denn. Hat etwas gedauert, ist aber wirklich ein deutlicher Fortschritt. Ich habs nun mit css gemacht. Kann mal jemand drüber schauen, ob ich zu kompliziert/einfach denke. Tipps von den Profis jederzeit willkommen. Hier mein Werk :

/– Position und Definition hellblauer Rahmen–/
#a
{position:absolute;top:100px; left:200px;width:930; height:600;background-color:#4E72A6;
border-style:solid #000000 1px}

/– Position Rahmen Bild 1–/
#b
{position:absolute;top:480px; left:330px;width:300px; height:120px;}

/– Position Rahmen Bild 2–/
#c
{position:absolute;top:480px; left:730px;width:300px; height:120px;}

/– Position Text im hellblauen Rahmen–/
#d
{position:absolute;top:100px; left:230px;width:300px; height:120px;}

/– †berschrift im dunkelblauen Rahmen–/
h1
{font-size:34px;color:white;font-family: „American Typewriter“}

Liebe Kollegen,



      Text zu img 1
      Text zu img 1
      Text zu img 1


      Text zu img 2
      Text zu img 2
      Text zu img 2

text textetetetettetetettetet
faihfashfhasfh
hfhasdfasfhashf

Zu kompliziert!

Also nochmal eine kleine Zusammenfassung wofür HTML zuständig ist und wofür nicht.

HTML hat nichts mit dem Layout zu tun. HTML gibt deinem Inhalt eine Bedeutung. Das Aussehen im Browser ist dabei völlig unwichtig, denn Layout ist nicht Aufgabe von HTML. Layout ist Aufgabe von CSS. Mit CSS erzeugt man Abstände, Rahmen, Hintergrundfarben, Schatten, Schriftfarben kurz alles, was mit dem Layout zu tun hat.

Sowas [html]

<img width=„120“ height="120"style=„float:left;“
src=„http://www.html.de/images/bild2.jpg“ style=„float:left;“>

   &nbs p;  Text zu img 2

      Text zu img 2

      Text zu img 2

[/html] ist das beste Beispiel um zu zeigen, wofür HTML nicht gedacht ist.

Du erzeugst Abstände und Zeilenumbrüche mit HTML, dafür ist es nicht zuständig. Das macht man mit CSS.

Im HTML steht wirklich nur dein Inhalt.

Die absoluten Positionierungen solltest du auch weglassen, eigentlich das ganze CSS, bis du die Grundlagen des HTML gelernt hast, denn semantisch korrektes HTML ist die Grundlage für anständiges CSS.

Vergiss fürs erste dein Layout und überleg dir nur, welche Bedeutung dein Inhalt haben soll, danach zeichnest du ihn dann entsprechend mit den dafür vorgesehenen Tags aus. Das Layout kommt, wenn der Inhalt ausgezeichnet ist, vorher nicht.

Hier ist eine Seite, auf der du die nötigen Grundlagen lernen kannst ( http://fwpf-webdesign.de/einfuehrung ).