Positionierung einer geslicten Website

Derfeinemo · 29.10.2015

Hallo.
Ich bastel mir gerade eine Seite mit Dreamweaver zusammen, das Layout habe ich via Photoshop gebastelt, gesliced und für Web und Geräte in eine HTML Datei exportieren lassen, welche ich in Dreamweaver geöffnet habe. Ich weiß nicht ob dieser Weg besonders klug oder dumm ist, um eine Seite aufzubauen. Doch funktioniert bis jetzt alles wie es soll, ich kann texten, verlinken, Videos einbinden etc., einziger Haken bislang: die Seite erscheint stets linksbündig im Browser.
Ich bin mir bewusst, dass viele Leute sich nun vermutlich an den Kopf fassen werden und auf die zahlreichen Einträge im Forum verweisen. Nach ewig langer Suche, sowohl hier als auch mit Google, habe ich immer noch nichts gefunden, was mir wirklich hilft (außer vielen Nutzern, denen es ähnlich geht).
Es wäre schön wenn jemand kurz Zeit hätte mir weiterzuhelfen, da dies bestimmt auch für andere Anfänger von Nutzen sein wird, zudem sieht es nach nicht so viel Aufwand aus (sofern man kein Noob ist

)
Quellcode:

HTML:

<html>
<head>
<title>Skiffle-Train</title>
<link rel="shortcut icon" href="favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#Tabelle_01 tr td {
    text-align: justify;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    background-image: url(Bilder/main_04.jpg);
}
#Tabelle_01 tr td p {
    font-family: Verdana, Geneva, sans-serif;
}
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (main.jpg) -->
<table id="Tabelle_01" width="1024" height="769" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="16">
            <img src="Bilder/main_01.jpg" width="1024" height="237" alt=""></td>
    </tr>
    <tr>
        <td colspan="16">
            <img src="Bilder/main_02.jpg" width="1024" height="15" alt=""></td>
    </tr>
    <tr>
        <td rowspan="6">
            <img src="Bilder/main_03.jpg" width="23" height="516" alt=""></td>
        <td colspan="7" rowspan="3"><p>Herzlich Willkommen auf unser Homepage. Hier finden Sie viele n&uuml;tzliche Informationen rund um den Skiffle. Die Geschichte des Skiffles ist schnell erz&auml;hlt: Skiffle setzt sich ganz klassisch aus Instrumenten wie der Gitarre, dem Waschbrett, der Teekiste, dem Kontrabass und vielem mehr zusammen. Wichtig ist nat&uuml;rlich der Gesang, welcher auf der Basis der Folk-, Country-, Blues und Jazzmusik f&uuml;r gute Laune sorgt!</p>
          <p>Bekannt geworden ist diese Musikrichtung w&auml;hrend der 50er Jahre in England und viele heute bekannte Bands und K&uuml;nstler wie etwa die Beatles, die Rolling Stones, Eric Clapton, Rod Steward, Led Zeppelin uvm. starteten ihre Karrieren mit Skiffle Musik. In den 70ern gab es in Deutschland ein gro&szlig;es Revival und noch heute ist der Skiffle ein Begriff, beispielsweise beim j&auml;hrlich stattfindenden Hamburger Skiffle Festival, wo auch diese Gruppe vertreten ist.</p>
          <p>Unsere Gruppe besteht bereits seit &uuml;ber 30 Jahren. Was Uns ausmacht, ist eine Menge Spa&szlig;, Leidenschaft und ein guter Sound! H&ouml;ren Sie einfach mal rein! Sollten wir bereits ihr Interesse geweckt haben, finden sie hier au&szlig;erdem die M&ouml;glichkeit unsere CDs zu erwerben oder uns direkt f&uuml;r Feste oder zu besonderen Anl&auml;ssen zu buchen. </p>
      <p>Viel Spa&szlig; w&uuml;nscht der Skiffle Train!</p></td>
        <td colspan="8">
            <img src="Bilder/main_05.jpg" width="410" height="136" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/main_06.jpg" width="43" height="201" alt=""></td>
        <td colspan="5">
            <iframe width="268" height="201" src="https://www.youtube-nocookie.com/embed/fDPz5fif3IA?rel=0" frameborder="0" allowfullscreen></iframe></td>
        <td colspan="2">
            <img src="Bilder/main_08.jpg" width="99" height="201" alt=""></td>
    </tr>
    <tr>
        <td colspan="8">
            <img src="Bilder/main_09.jpg" width="410" height="84" alt=""></td>
    </tr>
    <tr>
        <td colspan="15">
            <img src="Bilder/main_10.jpg" width="1001" height="14" alt=""></td>
    </tr>
    <tr>
        <td><a href="about.html"><img src="Bilder/main_11.jpg" width="154" height="63" alt=""></a></td>
        <td>
            <img src="Bilder/main_12.jpg" width="11" height="63" alt=""></td>
        <td><a href="live.html"><img src="Bilder/main_13.jpg" width="154" height="63" alt=""></a></td>
        <td>
            <img src="Bilder/main_14.jpg" width="11" height="63" alt=""></td>
        <td><a href="albums.html"><img src="Bilder/main_15.jpg" width="154" height="63" alt=""></a></td>
        <td>
            <img src="Bilder/main_16.jpg" width="11" height="63" alt=""></td>
        <td colspan="3"><a href="contactformular.html"><img src="Bilder/main_17.jpg" width="154" height="63" alt=""></a></td>
        <td>
            <img src="Bilder/main_18.jpg" width="11" height="63" alt=""></td>
        <td><a href="links.html"><img src="Bilder/main_19.jpg" width="154" height="63" alt=""></a></td>
        <td>
            <img src="Bilder/main_20.jpg" width="11" height="63" alt=""></td>
        <td colspan="2"><a href="impressum.html"><img src="Bilder/main_21.jpg" width="154" height="63" alt=""></a></td>
        <td>
            <img src="Bilder/main_22.jpg" width="22" height="63" alt=""></td>
    </tr>
    <tr>
        <td colspan="15">
            <img src="Bilder/main_23.jpg" width="1001" height="18" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="23" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="154" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="11" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="154" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="11" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="154" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="11" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="96" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="43" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="15" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="11" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="154" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="11" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="77" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="77" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="22" height="1" alt=""></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

Die Seite ist 1024px breit und 768px hoch. Ich hoffe sehr jemand kann helfen und mir vor allem sagen, an welcher Stelle man was einfügen muss.

Vielen Dank!

lachender_engel · 29.10.2015

Die Seite ist linksbündig, weil Du im Body ein

CSS:

leftmargin="0"

angibst.
Daher ändere Deine Body-Zeile wie folgt ab:

HTML:

<body>

und im style fügst Du wie folgt ein:

CSS:

body{
  bgcolor="#FFFFFF";
  margin-top: 0;
  margin-right: auto;
  margin-left: auto;
}

Das sollte es gewesen sein.

Ilse_Schnick · 29.10.2015

Hammer Code

das css vom engel wird nicht funzen, denn

Code:

bgcolor="#FFFFFF";

ist veraltetes html

Code:

body{
  margin: 0 auto;
  background: #fff;
}

sollte reichen...

wenn du aber eh den geslicten code nehmen willst, setz einfach über

<table>
ein <center>

und unter </table>
ein </center>

Ist dann auch egal

Derfeinemo · 29.10.2015

Vielen, vielen Dank Ilse. So einfach und soooo hilfreich! <center> funzt super! Ka, wie veraltet das ist, hab mit CS5 gesliced und weiter nichts am Quelltext verändert ...
¯\_(ツ)_/¯

Ilse_Schnick · 29.10.2015

luckynumbermo schrieb:
Vielen, vielen Dank Ilse. So einfach und soooo hilfreich! <center> funzt super! Ka, wie veraltet das ist, hab mit CS5 gesliced und weiter nichts am Quelltext verändert ...
¯\_(ツ)_/¯

ja warte mal ab, bis die TabellensindsoböseNerds auftauchen...

Wenn du langfristig was richtig gutes machen willst, lern html & css... ist besser

Derfeinemo · 29.10.2015

Schnickschnack

sollen se kommen, das juckt mich nicht. Vllt werde ich mir das tatsächlich irgendwann nochmal antun, doch erstmal habe ich nicht vor, regelmäßig Websites zu basteln. Btw. deine Seite ist ja auch der Hammer

Ilse_Schnick · 29.10.2015

luckynumbermo schrieb:
Schnickschnack sollen se kommen, das juckt mich nicht. Vllt werde ich mir das tatsächlich irgendwann nochmal antun, doch erstmal habe ich nicht vor, regelmäßig Websites zu basteln. Btw. deine Seite ist ja auch der Hammer

Hi hi... ich war jung... und hab die Zugangsdaten vergessen

Wir schreiben das Jahr 2006 ...

seit dem hab ich nüscht mehr daran gemacht... Spielkram damals...

patrick_l · 29.10.2015

luckynumbermo schrieb:
Ich bastel mir gerade eine Seite mit Dreamweaver zusammen, das Layout habe ich via Photoshop gebastelt, gesliced und für Web und Geräte in eine HTML Datei exportieren lassen, welche ich in Dreamweaver geöffnet habe.

Bitte nicht falsch verstehen, aber das sieht man. Ich arbeite auch schon ein paar Tage mit Photoshop. Kann dir aber nicht sagen, wann ich das letzte mal das Slice-Werkzeug angerührt geschweige denn eingesetzt habe.

luckynumbermo schrieb:
Ich weiß nicht ob dieser Weg besonders klug oder dumm ist, um eine Seite aufzubauen.

Dumm sicher nicht, da dir »lediglich« das Wissen fehlt. Klug ist aber es auf keinen Fall. Sei denn, dich juckt es nicht, wenn Google deine Website abstraft. Wenn deine Website kommerzielle Interessen verfolgt (Firmenauftritt, Portfolio etc.), solltest du lieber jemanden vom Fach ins Boot holen. Wenn es eine rein private Seite für »Family and Friends«, halb so wild. Trotzdem wie @Ilse_Schnick dazu rate, HTML und CSS Grundlagenwissen anzueignen.

luckynumbermo schrieb:
Die Seite ist 1024px breit und 768px hoch.

»Martin McFly Style«, fehlt eigentlich nur noch ein plakatives »Für den Imperator äh InternetExplorer optimiert«

Da scheinbar das nötige Grundlagenwissen nicht vorhanden ist, es nicht viel bringt, wenn ich dir Tipps und Tricks an die Hand gebe, wie du deine Seite zeitgemäß und vor allem responsive umsetzten kannst.

Ilse_Schnick schrieb:
das css vom engel wird nicht funzen, denn
Code (Text):

bgcolor="#FFFFFF";

ist veraltetes html

Stimmt nur so halb. Du vergisst die Fehlertoleranz der Browser. Funktionen kann es also. Jedoch alles andere als ratsam.

Ilse_Schnick schrieb:
ja warte mal ab, bis die TabellensindsoböseNerds auftauchen...

Hier

luckynumbermo schrieb:
Schnickschnack sollen se kommen, das juckt mich nicht.

Wie schon gesagt, wenn dich das Ranking deiner Website nicht interessiert, deine Seite sich in den Untiefen des Google Indexes wohl fühlt, ok. Wenn deine Website jedoch kommerzielle Interesse verfolgt, es nicht dabei belassen solltest.

Liebe Grüße, Patrick

cebito · 29.10.2015

Ilse_Schnick schrieb:
ja warte mal ab, bis die TabellensindsoböseNerds auftauchen...

Wer hat mich gerufen? ^^

Ilse_Schnick · 01.11.2015

patrick_l schrieb:
Stimmt nur so halb. Du vergisst die Fehlertoleranz der Browser. Funktionen kann es also. Jedoch alles andere als ratsam.
Liebe Grüße, Patrick

Bei aller Fehlertoleranz der Browser

Im CSS hat das dennoch noch nie gefunzt... (siehe weiter oben)

lachender_engel schrieb:
und im style fügst Du wie folgt ein:

CSS:

body{ bgcolor="#FFFFFF"; margin-top: 0; margin-right: auto; margin-left: auto; }

Das sollte es gewesen sein.

afr0kalypse · 04.11.2015

ich würde die Seite gerne mal sehen. Vielleicht können wir dir auch Tipps geben, wie man das Slicen umgehen und das Tabellenlayout durch cooles, neues und semantisches html5 austauschen kann

Derfeinemo · 05.11.2015

afr0kalypse schrieb:
ich würde die Seite gerne mal sehen. Vielleicht können wir dir auch Tipps geben, wie man das Slicen umgehen und das Tabellenlayout durch cooles, neues und semantisches html5 austauschen kann

Okay, da sind die Motzer also

die Tipps werde ich versuchen zu berücksichtigen! Eine Vorschau kann ich euch auch geben, allerdings habe ich bisherigen Text, Bilder etc. unleserlich gemacht, einfach aus dem Grund, dass die Seite noch nicht online ist und ich so wohl den Urhebern nicht auf die Füße trete.

Im Grunde ist das erste Bild die Mainpage, der Rest dann über die Band, einzelne Mitglieder, Kontakt usw. wollte nicht zwingend alles in die Vorschau klatschen, damit es nicht zu lang wird.

Falls allerdings jemand weiß wie man bspw. ein Kontaktformular in ein solch bestehendes Layout einfügen kann, wäre ich ganz Ohr

dass ist bislang nämlich der zweitgrößte Mist, mit dem ich mich, neben der Zentrierung, herumgeärgert habe.

Dudlhofer · 06.11.2015

Es gibt ∞+1 verschiedene Lösungen für Kontaktformulare und genausoviele Methoden diese in Webseiten einzubinden. Um zu helfen muss man schon konkreter erfahren, wo Deine Probleme liegen.