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

Totaler HTML & CSS Anfänger, und gleich Probleme :)

Streifenkarl

Streifenkarl

Neues Mitglied
Hallo zusammen,

ich heiße Alex, bin 32 Jahre alt, arbeite in einem Job wo ich nix mit Webseitenerstellung zu tun habe und eigentlich begab ich mich erst am Freitag überhaupt in die Welt des HTML. Habe auch erstmal nur eine ganze einfache "Homepage" zusammengebastelt. Ich weiß, Homepage darf ich das Konstrukt eigentlich noch gar nicht nennen, verzeiht mir. 8-)

Jedoch habe ich ein, zwei Problemchen, die ich nicht lösen kann.

1. Zum einen ist es komisch dass in meinem HTML Editor (Scriptly) alles so aussieht wie ich es haben will, aber im IE9 passt dann nix mehr. Obwohl ich alle Dateien genau in der Struktur hochgeladen habe, wie ich sie auf meiner Platte zusammengesteckt hab.

2. Zum anderen gibt es ein Bild (oase1.jpg) was eigentlich normal angezeigt wird, wenn ich die HTML Datei von meiner Platte aus öffne, aber wenn ich sie dann vom FTP Server lade wird es nicht mehr angezeigt.

3. Und zum dritten bekomme ich den vermaledeiten Hintergrund (stein02) nicht bis zum rechten Rand der Seite.

Was mache ich alles falsch?



Hier mal zuerst die index.htm Datei:

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

<html>
<head>
<title>Mesopotamco - We bring the Middle East closer to Europe</title>
<meta charset="ISO-8859-1">
<link href="design.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="alles">
<div id="kopfbereich">
<h2>Mesopotamco Ltd.</h2>
</div>
<div id="steuerung">
<table>
<tr>
<td class="tab1"><a href="aboutus.html" class="links"> About Us </a></td>
<td class="tab1"><a href="mailto:[email protected]" class="links"> Write us an E-Mail </a></td>
</tr>
</table>
</div>
<div id="schatten">

</div>
<div id="inhalt">
<h1 id="head2">Welcome to Mesopotamco Ltd.</h1><br />
<h3>Your logistics partner for shipments between Germany and the Middle East</h3><br />
<p>This site is still under construction. Soon you will find here</p>
<ul>
<li>Offers for shipments</li>
<li>Other logistics partners in the region</li>
<li>Links to our customers in the Middle East</li>
</ul>
<div id="oase">
<img src="bilder/oase1.jpg" alt="Oase" height="400" width="731" />
</div>

</div>
</div>
</body>
</html>


Und hier die CSS Datei

#alles {
margin: 0 auto;
width: 1280px;
background: url(Bilder/stein02.jpg) repeat-x;
height: auto;
}
#alles2 {
margin: 0 auto;
width: 1280px;
background: url(Bilder/stein02.jpg);
height: 900px;
}
#kopfbereich {
background:url(Bilder/saeulen.jpg) no-repeat left top;
height:150px;
}
#kopfbereich h2 {
font-family: copperplate gothic bold;
font-size: xx-large;
text-align: center;
padding: 0;
}
#steuerung {
background: url(Bilder/sand1.png) no-repeat;
height: 32px;
padding-left: 1em;
}
#schatten {
background: url(Bilder/schatten.png) repeat; width: 1280px;
height: 12px;
}
#head2 {
padding-top: 70px;
font-family: copperplate gothic bold;
}
#inhalt {
background: url(Bilder/stein02.jpg) repeat;
font-family: copperplate gothic bold;
padding-left: 2em;
font-size: medium;
float: left;
}
td.tab1 {
border: outset;
border-color: blue;
background-color: #ACD0FD;
padding-right: 10px;
}
a.links {
color: blue;
font-weight: bold;
}
a.visited {
color: #808080;
}
#oase {
float: right;
margin-right: 100px;
padding: 50px;
border: outset;
max-height: 400px;
max-width: 731px;
}
#texts2 {
padding-top: 100px;
padding-left: 50px;
}
#link2 {
border-style: outset;
border-color: #B05809;
padding: 10px;
margin-right: 67em;
}
 
Zuletzt bearbeitet:
Hallo Alex und Wilkommen hier,

zu 1.: Versuche mal einen anderen Doctype. (z.B.: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> )

zu 2.: Kann es sein, das das Bild oase1.JPG heißt. Manche Webserver unterscheiden zwischen Groß- und Kleinschreibung...

zu 3.: änder die Breite von #alles in 100%. (width: 100%;). Dann passt sich die Breite an die Bildschirmgröße an. Evtl. kannst du auch noch "position: absolute;" hinzufügen.
 
Hallo,

vielen Dank erstmal für Deine Antwort.

Also das mit dem Bild bekomme ich nicht hin, keine Ahnung warum. Habe wirklich genau darauf geachtet wie die Datei geschrieben wird.

Zum Thema Hintergrund. Wenn ich bei "width" 100% eingebe, dann zieht sich der Hintergrund doch immer so weit mit auf, wie das Browserfenster breit ist, oder? Ich möchte jedoch dass die Homepage maximal 1280 Pixel breit wird, und immer zentriert ist. Gibt es da eine andere Lösung?

Wenn ich nun bei Inhalt die "width" mit 1280px angebe, dann zieht sich der Backgroud auf ca 1350 Pixel auf. Also totaler Quatsch.

Wo da wohl der Wurm drin ist? Hab ich da irgend einen Platzhalter drin, oder warum gestaltet sich der Hintergrund breiter als man tatsächlich angibt? Ich habe das Problem erstmal "gelöst" in dem ich als Breite 1248 Pixel angegeben habe. Das entspricht den 1280 Pixel des Kopfbereiches.

Verrückt!

Edit: Was seltsam ist, nachdem ich die Dateien hochgeladen habe verändern sich Kleinigkeiten. Die Seite hat nach oben hin (margin top) ein paar Pixel mehr Platz, der Hintergrund geht nicht mehr bis zur rechten Seite und die Überschrift ist zentriert, anstatt rechtsbündig.

Dabei handelt es sich jedoch um die exakt selben Dateien! Nur einmal auf meiner Platte, und einmal auf dem FTP Server. Wie kann das sein?
 
Zuletzt bearbeitet:
Herzlich willkommen und ein paar Tipps gleich zum Einstieg:

Es geht hier weniger um den Umgang mit Scriptly, oder einem anderen Editor, sondern um das Erlernen von Sprachen. Wenn du dir drei Wochen Urlaub nehmen und dabei jeden Tag 8h für Tutorials aufwenden würdest, hättest du anschließend solide Grundkenntnisse im Umgang mit HTML und CSS. Steht dir weniger Zeit zur Verfügung, dann dauert es natürlich entsprechend länger. Ich sage das nur im Hinblick auf deine Anmerkung, dass du dich erst seit Freitag mit der Materie beschäftigst. An ein oder zwei Wochenenden lässt sich so etwas nicht erlernen.

Neben den Tutorials solltest du dir als erstes ein paar unverzichtbare Tools installieren. Dazu gehören Firebug und die Web Developer Toolbar für den Firefox.

Selfhtml lässt sich zwar als Referenz, aber nicht mehr als Anleitung benutzen. Die dortigen Infos sind leider veraltet, und das betrifft auch deine Tabellenformatierung.

Beim Coden erstellt man ein einfaches Grundgerüst, validiert es auf Fehlerfreiheit und baut es Stück für Stück weiter aus. Komplexere Problemstellungen werden in Teilbereiche zerlegt und soweit heruntergebrochen bis sie kognitiv fassbar sind. Anstatt nun eine komplette HP samt Formatierungen zu schreiben, baue erst einmal eine minimale Seite mit dem verlinkten Bild.

Der HTML5 Doctype lässt sich übrigens ganz einfach merken:
HTML: 
<!Doctype HTML>

Um dein Hintergrundbild horizontal zu zentrieren, stelle es in einen DIV container und formatiere diesen anschließend mit CSS:
HTML: 
#mydiv {
    width: 1280px;
    margin: auto;
}

Eine gute CSS-Referenz findest du bei css4you.de

Last not least erhältst du mehr Resonanz, wenn du deine Seiten online stellst, anstatt hier nur Code zu posten. Das macht es für potentielle Hilfesteller nämlich wesentlich bequemer.
 
Hallo,

danke für Eure Antworten.

Also ich wollte nicht vermessen rüberkommen, im Gegenteil, meine Äußerung mit dem Freitag war eher dazu gedacht meine Unkenntnis deutlich zu machen. Ich wäre nicht so größtenwahnsinnig und hätte den Anspruch HTML und CSS an einem Wochenende zu lernen. ;)

Ich habe einfach halt dieses WE angefangen, und auch nicht mit Scriptly, sondern online zwei kostenlose HTML Seminar-seiten besucht und die Tutorials durchlaufen (HTML Tutorial - Inhaltsverzeichnis - HTML.net und www.html-seminar.de), und das mit dem Notepad nachgemacht. Scriptly benutze ich weil es empfohlen wurde. Und ein HTML Editor ist ja auch einfacher, als alles mit Notepad zu machen.

Die "Homepage" findet Ihr auf www.mesopotamco.com .

Seltsamer Weise stimmt die Formatierung mit dem IE8 (hier auf der Arbeit). Da wird alles so angezeigt wie ich es haben will. Aber mit dem IE9 nicht.

Ich werde Eure Tipps erstmal einbauen wenn ich nach Hause komme und schauen wie es läuft, vielen Dank.


Wie sollte ich eigentlich beim Lernen weiter vorgehen? Und wieso ist meine Tabellestruktur veraltet? Gibt es eine Homepage die einen sozusagen in die aktuelle HTML und CSS Formatierung einführt?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben