Verknüpfung CSS, Imageordner und HTML Seite geht nicht

annonym93 · 29. Oktober 2009

Hallo an alle,

ich habe eine eigene HTML-Seite angefangen zu basteln. Habe dies mit Hilfe von Webocton gemacht. Für das Layout meiner HTML-Seite habe ich ein externes CSS-Stylesheet genommen. In der Vorschau von Webocton hat auch alles prima geklappt. Es sah so aus, wie es sollte.

Nun habe ich es zur Probe auf einen Free-Webspace Server hochgeladen (mit filezilla). Leider funktioniert jetzt weder das Layout, was in der design.css Datei steht noch die Bilder zeigt er mir an.

http://annonym93.an.funpic.de/

Dazu zeigt er mir alle Seiten und Ordner an, wenn ich die URL eingebe. Ich möchte aber, sobald ich auf dieser Seite landen, die Index.html Seite als Startseite haben.

Wäre über schnelle Antworten sehr dankbar

sejuma · 29. Oktober 2009

Wie hast du denn die Dateien hochgeladen? Befinden die sich alle in Ordnern?

Zumindest die index-Datei muss direkt ins Rootverzeichnis. Ggf. musst du dann noch die Pfade anpassen bzw. die anderen Dateien auch direkt ins Rootverzeichnis hochladen.

annonym93 · 29. Oktober 2009

Ich bin noch Anfänger... Was meinst du mit Rootverzeichnis?^^

Ich habe nur die Bilder in einem Ordner (Image heißt er). Der Rest ist so hochgeladen. Muss die CSS-Datei auch in einen Ordner gepackt werden?

sejuma · 29. Oktober 2009

Wenn ich deinen angegebenen Link anklicke und dieser stimmt, dann bekomme ich immer nur eine Funpic-Seite angezeigt. Das deutet darauf hin, dass sich deine Index-Datei nicht im Rootverzeichnis befindet.
Es handelt sich um das Verzeichnis, das sich dir zeigt, wenn du mit deinem FTP-Programm mit dem Funpic-Server verbunden bist. Darein musst du die Index-Datei direkt laden.
Sie muss auch unbedingt als
index.html
index.htm oder
index.php

benannt sein.

annonym93 · 29. Oktober 2009

Sry, der Link war falsch angegeben. Habe ihn nun korrigiert.

Hier nochmal der neue Link: http://annonym93.an.funpic.de/

Ich habe die Index Datei Index.html genannt.

maulepan · 29. Oktober 2009

schreibs mal klein am anfang

HTML_Neuling · 29. Oktober 2009

du hast die design.css im html code klein geschrieben die css datei jedoch am anfang groß änder das mal....

Design.css ---in---> design.css

bis dann und viel glück carsten

annonym93 · 29. Oktober 2009

Oh man, so ein simpler Fehler und ich sitzt Stunden am PC und find den nicht....

Danke für die schnelle Hilfe!

Hab aber noch eine Frage: Wie schalte ich meine Index-Datei, wenn ich annonym93.an.funpic.de eingebe und direkt bei ihr lande und nicht die Übersicht über alle Ordner und Dateien habe?

sejuma · 30. Oktober 2009

Versuch's mal mit Kleinschreibweise:
"Index.html" umbenennen in "index.html" und dann nochmal hochladen.
Wenn das klappt, bei den anderen Dateien ebenso verfahren und die Links entsprechend anpassen.

NeoAramis · 30. Oktober 2009

Ich würde sowieso alle Dateien klein schreiben. Also auch die Bilder etc.

annonym93 · 30. Oktober 2009

Das hat auch geklappt. Danke

Hab aber noch ein Problem (hoffentlich das letzte....):
Die JPG-Bilder zeigt er mir nicht an. Weder die Bilder, die ich im CSS-Stylesheet verknüpft habe, noch das unter Paidmailer/Questler. GIF-Bilder zeigt er mir ohne Probleme an, nur bei den JPG-Bildern will er es nicht....

NeoAramis · 31. Oktober 2009

Zitat von "annonym93"

Das hat auch geklappt. Danke

Hab aber noch ein Problem (hoffentlich das letzte....):
Die JPG-Bilder zeigt er mir nicht an. Weder die Bilder, die ich im CSS-Stylesheet verknüpft habe, noch das unter Paidmailer/Questler. GIF-Bilder zeigt er mir ohne Probleme an, nur bei den JPG-Bildern will er es nicht....

Du musst unterscheiden zwischen .jpg und .jpeg

Ich habe einmal deinen Code überarbeitet, er hatte ziemlich viele Fehler. Den Kommentar schreibe ich morgen, gehe erst einmal schlafen.

(Der Code kann natürlich noch perfektioniert werden und weitergeführt werden)

Datei: index.html

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Tigers Trickkiste - Die Infoseite zum Geld verdienen</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="content-language" content="de" />
    <meta name="description" content="Zum Thema Geld verdienen im Internet. Paidmailer, Surfbars, Gewinnspiele, Umfragen oder auch Onlinegames. Hilfreiche Tipps und Tricks, sowie Erkl&auml;rungen. " />
    <meta name="author" content="Matthias St&ouml;ck" />
    <meta name="page-topic" content="Startseite Geld verdienen" />
    <meta name="keywords" content="Paidmailer,Geld verdienen, verdienen, zu Hause, Surfbar, Gewinnspiel, Umfrage, Meinung, Spiel, Paidmails" />
    <meta name="language" content="Deutsch" />
    <meta name="robots" content="INDEX,FOLLOW" />
    <link href="design.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="seitenbereich">
	<div id="kopfbereich">
		<h1>TigersTrickkiste.de</h1>
		<h2>Die Infoseite zum Geld verdienen</h2>
	</div>
	<div id="steuerung">
 		<p><a id="here">Startseite</a> | <a href="partner.html">Partner</a> | <a href="kontakt.html">Kontakt</a> | <a href="impressum.html">Impressum</a></p>
	</div>
	<div id="inhalte">
   		<h1>Herzlich Willkommen!</h1>
    	<p>Das Internet bietet seinen Besuchern eine Menge M&ouml;glichkeiten an. So auch zum Geld verdienen. Sie sind nicht der Erste, der sich auf diese Suche begeben hat. Wenn Sie einmal in Google "Geld 					verdienen" eingeben, dann werden Sie mehr als 7 Millionen Treffer finden. Das bedeutet, dass sich auch viele Menschen f&uuml;r dieses Thema interessieren, was leider auch viele Betr&uuml;ger anlockt. </p>
		<p>Versprechungen, dass Sie sofort mindestens 100 &euro; oder mehr verdienen, sind leider keine Seltenheit, doch selten werden diese Versprechen eingehalten. Vielmehr wird versucht dem Besucher zu 					animieren Geld auszugeben, meist f&uuml;r nutzlose E-Books. Wir haben diese Erfahrung zum Gl&uuml;ck &uuml;bersprungen und uns gleich nach seri&ouml;sen Angeboten umgeschaut. Ja, auch diese gibt es, man 				muss nur lang genug suchen.</p>
    	<p>Auf diesem Weg m&ouml;chten wir Ihnen unsere Erfahrungen mit den Programmen, die Sie u.a. in der linken Navigation finden, vorstellen. F&uuml;r uns haben sich alle Programme gelohnt und wir haben 					schnell Geld verdient. Zwar keine 100 &euro; sofort, dennoch steigt der Verdienst von Tag zu Tag.</p>
    	<hr />
		<h3>Paidmailer:</h3>
    	<p>Eine unserer vielen M&ouml;glichkeiten, die wir Ihnen vorstellen. Mit dem Lesen von E-Mails k&ouml;nnen Sie sich ein kleines Nebeneinkommen aufbauen. Vor allem durch das Werben neuer Mitglieder 					k&ouml;nnen Sie passiv Geld verdienen. Aber auch mit den angebotenen Bonusaktionen verdient man sich einige Euros im Monat dazu. Je nachdem, wieviel Zeit Sie investieren, k&ouml;nnen Sie auch mehr als 100 			&euro; monatlich verdienen. Lesen Sie dazu aber mehr in unserer Rubrik: <a href="paidmailer.html">Paidmailer</a>.</p>
    	<h4>Unsere aktuellen Empfehlungen: (Stand: 30.10.2009)</h4>
    	<a href="http://www.questler.de/?rid=122847&amp;site=home" target="_blank"><img src="http://www.questler.de/gfx/banner/questler_01_234x60_ani.gif" border="0" alt="Jetzt bei Questler anmelden!"/></a>
    	<a href="http://www.mtpaid.de/mt_14925/uw" target="_blank"><img src="http://www.mtpaid.de/banner/mitglieder/mtpaid_234x60.gif" width="234" height="60" border="0" alt="Jetzt bei mtpaid.de anmelden"/></a> 
  	</div>
  	  	<div id="navigation">
		<h3>Geld verdienen mit...</h3>
		<ol>
			<li><a href="../paidmailer.html"><strong>Paidmailer</strong></a></li>
			<ul>
				<li><a href="../paidmailer/paidmailanbieter.html">Anbieter</a></li>
            	<li><a href="../paidmailer/glossar.html">Glossar</a></li>
           		<li><a href="../paidmailer/blacklist.html">Blacklist</a></li>
				<li><a href="../paidmailer/bonusaktionen.html">Bonusaktionen</a></li>
			</ul>
      		<li><a href="../surfbars.html"><strong>Surfbars</strong></a></li>
      		<li><a href="../umfragen.html"><strong>Umfragen</strong></a></li>
      		<ul>
      			<li><a href="../gewinnspiele.html">Gewinnspiele</a></li>
            	<li><a href="../gewinnspiele/geld.html">Geld</a></li>
            	<li><a href="../gewinnspiele/reisen.html">Reisen</a></li>
            	<li><a href="../gewinnspiele/auto.html">Auto</a></li>
            	<li><a href="../gewinnspiele/multimedia.html">Multimedia</a></li>
            	<li><a href="../gewinnspiele/sport.html">Sport</a></li>
      		</ul>
      		<li><a href="../onlinegames.html"><strong>Onlinegames</strong></a></li>
      		<li><a href="../partnerprogramme.html"><strong>Partnerprogramme</strong></a></li>
    	</ol>
    	<h3>Werben mit...</h3>
     	<ul>
      		<li><a href="../tauschsysteme.html">Tauschsysteme</a></li>
			<li><a href="../eintragdienste.html">Eintragdienste</a></li>
      		<li><a href="../werbekampagnen.html">Werbekampagnen</a></li>
      		<li><a href="../newsletter.html">Newsletter</a></li>
      		<li><a href="../webkataloge.html">Webkataloge</a></li>
      		<li><a href="../toplisten.html">Toplisten</a></li>
      	</ul>   
  	</div>
	<div id="fusszeile">
    	<p>© 2009 Tigers Trickkiste - Die Infoseite zum Geld verdienen</p>
  	</div>
</div>
</body>
</html>

Alles anzeigen

Datei: design.css

Code

* { padding: 0;	margin: 0; }




h1, h2, h3, h4, h5, h6 { color: #333; font-size: 25px; font-family: Arial, sans-serif; padding: 5px; }




h3 { font-size: 12px; }




h4 { font-size: 14px; }




p { color: #333; font-size: 12px; font-family: Arial, sans-serif; padding: 5px; }




a:link { color: #333; text-decoration: underline; font-size: 12px; font-family: Arial, sans-serif; }




a:visited { color: #333; text-decoration: underline; font-size: 12px; font-family: Arial, sans-serif; }




a:activ { color: #333; text-decoration: underline; font-size: 12px; font-family: Arial, sans-serif; }




a:hover { color: #888; text-decoration: none; font-size: 12px; font-family: Arial, sans-serif; }




a#here { color: #888; text-decoration: none; font-size: 12px; font-family: Arial, sans-serif; cursor: default; }




ul { list-style-type: none; padding: 5px; }




hr { margin: 5px; }




body { text-align: center; }




#seitenbereich { width: 900px; margin: 0 auto; text-align: left; border: 1px solid #777; margin-top: 30px; }




#kopfbereich { height: auto; background-color: #ddd; }




#kopfbereich h1 {
	color: #000;
  	text-align: right;
  	font-family: Arial, sans-serif;
  	font-size: 20px;
  	padding: 10px;
}




#kopfbereich h2 {
	color: #000;
  	text-align: right;
  	font-family: Arial, sans-serif;
  	font-size: 16px;
  	padding: 10px;
}

#steuerung {
	background-color: #bbb;
  	text-align: right;
}




#steuerung ul li {
	display: inline;
}




#navigation {
 	float: left;
  	width: 199px;
}




#navigation ol {
	font-family: Arial, sans-serif;
	font-size: 12px;
	list-style-type: none;
	padding-left: 5px;
}




#inhalte {
  	float: right;
  	width: 700px;
  	border-left: 1px solid #888;
}




#inhalte img {
  	padding: 5px;
}




#fusszeile {
  	clear: both;
  	background-color: #bbb;
  	text-align: center;
}

Alles anzeigen

NeoAramis · 31. Oktober 2009

So...

Also eigentlich Fehler hatte es nicht viele. Zuerst einmal zum Layout. Ich würde das Layout zentrieren, da du sowieso nicht die ganze Breite brauchst. Zum Beispiel auf meinem Bildschirm ist auf der rechten Seite viel zu viel Platz (grosses weisses Feld). Ich habe dies "korrigiert".

Zweitens, mit dem float hast du es nicht richtig hinbekommen. Jetzt sollte es stimmen. Ich habe einfach ein normales zweispaltiges Layout mit header und footer gemacht. Diese Infobox habe ich entfernt, es hatte ja gar keinen Inhalt.

Drittens, du solltest mehr mit padding und margin arbeiten. Alle Elemente sehen so miteinander verklebt aus. Das ganze Design braucht mehr "Luft". Dann hast du die Sache mit den Überschriften nicht ganz verstanden. Das h1 -h6 hat nichts mit der Schriftgrösse zu tun, sondern mit der Wichtigkeit der Titel. h1 ist der Hauptitel, h2 ist der nächste Untertitel und so weiter. Dann aus dem ersten Teil der Navigation musst du eine Mischung aus unsortierter und sortierter Liste machen.

Das wars dann, korrigiert mich bitte wenn ich etwas Falsches geschrieben habe oder der Code Fehler hat!

annonym93 · 31. Oktober 2009

Bin halt noch Anfänger^^ Aber danke, dass du dir so viel Zeit genommen hast. Ich finde deinen Vorschlag auch sehr gelungen. Habe ihn auch mal hochgeladen. Jetzt ist nur die Navi links unter dem Text. Ich versteh aber nicht warum....

Leider weiß ich aber immer noch nicht, wie ich jpg Bilder einfügen kann. Mit jpg und jpeg hatte ich es ja schon ausprobiert...

Im Infokasten war wirklich noch nichts drin, weil ich noch nichts eingetragen hatte. Eigentlich sollten da ein paar Infos rein, die kann ich aber woanders reinpacken.

NeoAramis · 31. Oktober 2009

Du hast aber als Anfänger sehr gut gestartet. Und ich wollte nicht, dass du genau meins nimmst, sondern nur vergleichst und siehst was ich gemacht habe. Das mit der Navi hat keinen Einfluss ob es unten oder oben steht.

Schaue einmal ob der Pfad zum Bild stimmt und ob die Datei richtig benannt ist!

lauras · 31. Oktober 2009

Zu den Bildern:

Du musst nicht nur zwischen *.jpg und *.jpeg unterscheiden, sondern z.B. auch zwischen *.jpg und *.JPG

Hatte das Problem oft, dass IrfanView mir die bearbeiteten Bilder automatisch als *.JPG abspeichert.

Musst du nochmal genau in die Beschreibung gucken, aber am besten die Bilder immer mit komplettem Namen eingeben, also z.B. "bild.jpg" in "", dann vermeidet man diese Fehler.

LG
Laura

annonym93 · 1. November 2009

Ich habe auch nicht alles von dir übernommen, nur ein paar Sachen, die mir recht gut gefallen haben. Danke für das Lob. Diese Seite ist aber für Einsteiger sehr gut aufgebaut und erklärt alles sehr gut. Ich muss aber gestehen, dass ich bei dem float Kapitel nicht aufgepasst habe^^

Jetzt klappt es auch mit den jpgs. Ich muss sie mal groß und mal klein schreiben.

Danke für eure Antworten

Verknüpfung CSS, Imageordner und HTML Seite geht nicht

Jetzt mitmachen!

Teilen