nicht angemeldet
Bild in einer Tabelle einfügen
Hi,
unser Lehrer in der Schule hat gesagt, dass wir eine Webseite erstellen müssen. Das Thema ist unsere Klassenfahrt. Leider mache ich das alleine, weil mein Partner noch weniger kann als ich. Und zwar möchte ich gerne, oben im header ein Bild einfügen. Was eigentlich so lauten sollte:
<div align=center>
<table width=613>
<tr>
<td><img src="marius html/Header" alt="" border="0" width="620" height="200" width="50%"></td>
</tr>
</table>
div ist hier noch nicht zu ende.
Der ganze Code meiner Seite sieht so aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta name="author" content="fos">
<meta name="editor" content="html-editor phase 5">
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" media="screen" />
<style type="text/css">a#vlb{display:none}</style>
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
</head>
<body bgcolor="#E2E2E2" text="#000000" link="#FF0000" alink="#FF0000" vlink="#FF0000"></body>
<!--Kommentar: Das ist der Header -->
<!-- Start WOWSlider.com BODY section id=wowslider-container1 -->
<div id="wowslider-container1">
<div class="ws_images">
<a href="#"><img src="data1/images/3.jpg.jpg" alt="3.jpg" title="3.jpg" id="wows0"/></a>
<a href="#"><img src="data1/images/4.jpg.jpg" alt="4.jpg" title="4.jpg" id="wows1"/></a>
<a href="#"><img src="data1/images/5.jpg.jpg" alt="5.jpg" title="5.jpg" id="wows2"/></a>
<a href="#"><img src="data1/images/bild1.jpg.jpg" alt="bild1.jpg" title="bild1.jpg" id="wows3"/></a>
<a href="#"><img src="data1/images/bild2.jpg.jpg" alt="bild2.jpg" title="bild2.jpg" id="wows4"/></a>
<a href="#"><img src="data1/images/p1030876.jpg" alt="P1030876" title="P1030876" id="wows5"/></a>
<a href="#"><img src="data1/images/p1030872.jpg" alt="P1030872" title="P1030872" id="wows6"/></a>
</div>
<a style="display:none" href="http://wowslider.com">Joomla Image Carousel by WOWSlider.com v1.7</a>
</div>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->
<!--Kommentar: Das ist die Zeile mit den verschiedenen Tagen -->
<div align=center>
<a href="index.html"><img src="home.png" onmouseover="this.src='home2.png'" onmouseout="this.src='home.png'" /></a>
<a href="Tag1.html"><img src="Tag1.png" onmouseover="this.src='Tag11.png'" onmouseout="this.src='Tag1.png'" /></a>
<a href="Tag2.html"><img src="Tag2.png" onmouseover="this.src='Tag22.png'" onmouseout="this.src='Tag2.png'" /></a>
<a href="Tag3.html"><img src="Tag3.png" onmouseover="this.src='Tag33.png'" onmouseout="this.src='Tag3.png'" /></a>
<a href="Tag4.html"><img src="Tag4.png" onmouseover="this.src='Tag44.png'" onmouseout="this.src='Tag4.png'" /></a>
<a href="Tag5.html"><img src="Tag5.png" onmouseover="this.src='Tag55.png'" onmouseout="this.src='Tag5.png'" /></a>
<a href="Bilder.html"><img src="Bilder.png" onmouseover="this.src='Bilder2.png'" onmouseout="this.src='Bilder.png'" /></a>
<!--Kommentar: Das ist der Body -->
<table width="50%" border="0" cellpadding="0" cellspacing="2" border bgcolor="#EEEEEE">
<tr>
<td><br>
<!--Kommentar: Das ist das Quadrat in dem Body, wo der Text eingef�gt wird. -->
<table width="50%" border="0" cellpadding="0" cellspacing="0" style="margin-left:0.5cm" border bgcolor="#E2E2E2">
<tr>
<td><h2>Hallo und Herzlich Willkommen auf unserer kleinen Webseite</h2>
<h3>Die Webseite dreht sich ausschließlich um unsere Klassenfahrt vom 19.01.2013 - 25.01.2013. Ihr könnt Euch durch die verschiedenen Tage klicken, die wir dort verbracht haben und die Bilder anschauen, die wir dort geschossen haben.</h3><br>
<h4><u>Die Anfahrt:</u></h4>
Schon morgens um 06:00 Uhr haben wir uns an der Paul-Julius-von-Reuter-Schule getroffen um von dort aus loszufahren.
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--Kommentar: Das ist der footer -->
<table width="50%" border="0" cellpadding="0" cellspacing="2" border bgcolor="#090055">
<tr>
<td>
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
<p> <center> <font color="#FFFFFF">Content Copyright© 2013 by Marius Mann and Maik Mikus. <a style="text-decoration: none;" href="impressum.html"><font color="#FFFFFF">Impressum</font></a></font>.</center> </p>
</div>
</td>
</tr>
</table>
</body>
</html>
Der erste Code ist für die Bild-Seite wo sich die Leute die Bilder anschauen können, die auf Klassenfahrt gemacht wurden. Dafür hab ich ne diashow genommen. Keine selber erstellt, weil ich es irgendwie nicht hinbekommen habe. Nur im header möchte ich nun ein festes Bild einfügen und keine diashow, weil ich es total verwirrend finde, wenn sich mehrere Bilder gleichzeitig auf einer Seite ändern. Was ist denn im 1. Code verkehrt?
-
Was ist denn im 1. Code verkehrt?
Wahrscheinlich der Pfad zum Bild. Leerzeichen solltest Du kodieren (%20) und außerdem hat der Pfad keine Datei oder keine Dateiendung.
Versuche mal marius%20html/Header.jpg oder wie das Bild eben heisst. Ich persönlich verzichte auf Leerzeichen generell.<div align=center>
<table width=613>
<tr>
<td><img src="marius html/Header" alt="" border="0" width="620" height="200" width="50%"></td>
</tr>
</table>Du brauchst doch keine Tabelle zu nehmen, wenn Du keinerlei tabellarischen Inhalt hast. Du hast doppelte CSS-Angaben (width). Außerdem CSS-Angaben stehts auslagern. Statt `<img src="marius html/Header" alt="" border="0" width="620" height="200" width="50%">`{:.language-html} `<img class="header" src="pfad/bild.jpg">`{:.language-html} `<!--im Head-->`{:.language-html} ~~~css <style type="text/css"> img.header{ border:0; width:620px; height:200px; } </style>Der ganze Code meiner Seite sieht so aus:
Dazu:
<body bgcolor="#E2E2E2" text="#000000" link="#FF0000" alink="#FF0000" vlink="#FF0000"></body>
Der body geht gleich wieder zu.
CSS-Angaben wieder auslagern.weil ich es total verwirrend finde, wenn sich mehrere Bilder gleichzeitig auf einer Seite ändern.
True. Ich kann generell keine Slideshows leiden, die automatisch starten.
Cheers,
Baba-
Geht irgendwie immernoch nicht. Wenn ich das mit den Leerzeichen gewusst hätte, hätte ich sie weggelassen. Zu Anfang an wollte ich ja eigentlich mit divs arbeiten, aber da der Lehrer zu faul mich ein wenig zu unterstützen hat er gesagt, dass ich alles in spalten aufteilen kann.
Das Bild befindet sich in folgendem Ordner:
Aufm desktop gibts den Ordner marius html, da drinn befindet sich der ordner bilder und da ist das bild...funkt aber nicht -.--
jetzt gehts :)
<td><img src="P5.JPG" alt="" border="0" width="620" height="200"></td>
links an der seite waren alle dateien im ordner aufgelistet. dann hab ich das bild darein gezocken und es hat geklappt
-
-
Außerdem CSS-Angaben stehts auslagern.
Statt<img src="marius html/Header" alt="" border="0" width="620" height="200" width="50%">
<img class="header" src="pfad/bild.jpg"><!--im Head--><style type="text/css">
img.header{
border:0;
width:620px;
height:200px;
}
</style>In jedem anderen Fall würde ich dir vermutlich recht geben, aber bei img-Elementen und einer Reihe anderen embed-Content-Elementen bist du in eine Fallgrube gefallen. Die Höhen- und Breitenangaben sind in diesem Fall nützlich, weil sie Hilfestellung beim Rendern bieten, das vermeidet ein unschönes Rumspringen beim Laden der Seite. [W3C](http://www.w3.org/TR/html51/embedded-content-0.html#attr-dim-width): "User agent requirements: User agents are expected to use these attributes as hints for the rendering."
-
-
Joomla hab ich noch nicht benutzt, da kenn ich mich nicht aus. Was mir auffiel:
1. DerValidator gibt für Deinen Code 15 Fehler und 18 Warnungen an.
2. Die Tabellen sind überflüssig.
3. Warum benutzt Du nicht HTML 5:
<!DOCTYPE HTML>Vielleicht hilft's ja schon. die Fehler auszumerzen.
Gruß H.-
Joomla hab ich noch nicht benutzt, da kenn ich mich nicht aus. Was mir auffiel:
- DerValidator gibt für Deinen Code 15 Fehler und 18 Warnungen an.
- Die Tabellen sind überflüssig.
- Warum benutzt Du nicht HTML 5:
<!DOCTYPE HTML>
Vielleicht hilft's ja schon. die Fehler auszumerzen.
Gruß H.Öhm, daran hab ich garnicht gedacht. Der Unterschied ist mir auch nicht so ganz klar. Benutze den editor phase 5.6.
Aber die Anzahl der Warnungen und Fehler macht einen doch nachdenklich. Wo sind denn bitte die Fehler in dem quellcode, wenn doch alles funktioniert?-
Aber die Anzahl der Warnungen und Fehler macht einen doch nachdenklich. Wo sind denn bitte die Fehler in dem quellcode, wenn doch alles funktioniert?
Ruf den Validator von diesem Link aus auf und gib ihm Deinen Code zur Überprüfung. Er schreibt Dir einen ausführlichen Fehlerbericht.
Gruß H.
-
Aber die Anzahl der Warnungen und Fehler macht einen doch nachdenklich. Wo sind denn bitte die Fehler in dem quellcode, wenn doch alles funktioniert?
Ruf den Validator von diesem Link aus auf und gib ihm Deinen Code zur Überprüfung. Er schreibt Dir einen ausführlichen Fehlerbericht.
Gruß H.
Jo, hab den auch schon gefunden. Danke trotzdem. Die meisten Fehler liegen bei der Diashow. Das macht mir persönlich aber nichts, da ich es nicht war, der den Fehler verursacht hat. :P
-
-