• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bilder und text

H

HTML- Verwirrter

Neues Mitglied
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.




<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#4E72A6">
<colgroup>
<col width="200">
<col>
</colgroup>
<tr>
<td colspan="2">
<table border="0" cellpadding="10" cellspacing="0">
<tr>
<td><h1 style="color:#FFFFFF">Liebe Kollegen</h1></h1></td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" width="200">
<table border="0" cellpadding="10" cellspacing="0">
<tr>
<td>
<h3 style="color:#FFFFFF">Navigation</h3>
<p><a href="table_tr_th_td.htm">Tabelle</a><br>
<a href="bgcolor.htm">Hintergrund</a><br>
<a href="colspan.htm">Zellen verbinden</a><br>
<a href="width_height.htm">Breite und Höhe</a></p>
<h3 style="color:#FFFFFF">News</h3>
<p style="color:#FFFFFF">Die Neuigkeiten stehen stets an dieser Stelle.
Viel Neues gibt es nicht. Nur so viel: diese Seite ist neu.</p>
</td>
</tr>
</table>
</td>
<td valign="top" bgcolor="#FFFFFF">
<table border="0" cellpadding="190" cellspacing="30">
<tr>
<td>
<div style="position:absolute; left:350px"
<a href="images/egon.jpg">
<img style="height: 100px; float:left; vertical-align:text-top; margin-right:10px;" alt=Egon src="images/egon.jpg"/></a>
<h4 style="color:blue">Name Vorname</h4>
<p><h4 style="color:blue">Straße</h4></p>
<p><h4 style="color:blue">Ort</h4></p>
<img style="height: 100px; float:left; vertical-align:text-top; margin-left:280px;" alt=Aigner src="images/Aigner.jpg"/></a>

</div>


</td>
</tr>
</table>
</td>
</tr>
</table>
 
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
 
Zuletzt bearbeitet:
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 :

<link rel="stylesheet" href="format.css" type="text/css">
<style type="text/css">



/*-- 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"}


</style>


<body>


<h1>Liebe Kollegen,</h1>




<div id="a"></div>

<div id="b"><img width="120" height="120"style="float:left;"
src="images/bild1.jpg" style="float:left;"><br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Text zu img 1
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Text zu img 1<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Text zu img 1
</div>

<div id="c"><img width="120" height="120"style="float:left;"
src="images/bild2.jpg" style="float:left;"><br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Text zu img 2
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Text zu img 2
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Text zu img 2
</div>
<div id="d"><br>text textetetetettetetettetet<br>faihfashfhasfh<br>hfhasdfasfhashf<br></div>

</body>
</html>
 
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: 
<div id="c"><img width="120" height="120"style="float:left;"
src="http://www.html.de/images/bild2.jpg" style="float:left;"><br><br>&nbsp;&nbsp;&nbsp;&nbs p;&nbsp;&nbsp;Text zu img 2
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Text zu img 2
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Text zu img 2
</div>
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).
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben