Antworten zum Thema „Beim Einfügen der Links wird das Layout verschoben“

frizzi · 01.07.2010

Hallo zusammen,

gleich zu Anfang: ich weiß, dass ich keine Ahnung habe und die Sache auch vielleicht eine Nummer zu groß ist für meine (derzeitigen) Kenntnisse: ich bin gerade dabei eine neue Website für einen Bekannten zu machen und ich dachte mir, schlimmer als die jetzige kann es nicht werden.

Das Layout ist eigentlich nicht so schlecht geworden (das Logo war schon vorgegeben...), im Firefox.
Im IE war es schon gleich nimmer so schön.
Aber dann ging der Stress los. Ich war der Meinung, wenn PS und DW angeblich miteinander harmonieren, kann es doch nicht so schwer sein. Also habe ich das Layout abgespeichert (>für Web und Geräte speichern) und dann im DW bearbeitet.

Das war gleich ziemlich ernüchternd: in dem Moment, wo ich die Links eingefügt habe, hat es das Außerdem ist um den Link "Service" ein hässlicher blauer Rand.

Nachdem ich hier verschiedenes gelesen und TUTs durchgearbeitet habe, werde ich wohl nicht ums Programmieren herumkommen. Meine Frage aber vorab: weiß jemand, warum das Layout auseinander bricht? Ist das mit (für mich) einfachen Mitteln zu beheben?

Lieben Dank schon mal für Eure Hilfe!

LG
frizzi

wex_stallion · 01.07.2010

AW: Beim Einfügen der Links wird das Layout verschoben

Zeig mal den Quelltext, da kann man dann eher sehen ob man vielleicht mit einem kleinen Eingriff diese Hommage an die Anfänge des Webdesigns in die Reihe bekommt.

frizzi · 01.07.2010

AW: Beim Einfügen der Links wird das Layout verschoben

Ich glaub, es sieht ziemlich unordentlich aus

HTML:

<html>
<head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#ffb35c" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (index.jpg) -->
<table id="Tabelle_01" width="1201" height="801" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="23">
            <img src="Bilder/index_01.gif" width="1200" height="84" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="84" alt=""></td>
    </tr>
    <tr>
        <td colspan="3" rowspan="4">
            <img src="Bilder/index_02.gif" width="190" height="163" alt=""></td>
        <td colspan="11">
            <img src="Bilder/index_03.gif" width="670" height="76" alt=""></td>
        <td colspan="9" rowspan="2">
            <img src="Bilder/index_04.gif" width="340" height="100" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="76" alt=""></td>
    </tr>
    <tr>
        <td colspan="11">
            <img src="Bilder/index_05.gif" width="670" height="24" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="24" alt=""></td>
    </tr>
    <tr>
        <td colspan="10" rowspan="2">
            <img src="Bilder/index_06.gif" width="616" height="63" alt=""></td>
        <td colspan="2">
            <img src="Bilder/index_07.gif" width="60" height="16" alt=""></td>
        <td rowspan="10">
            <img src="Bilder/index_08.gif" width="6" height="410" alt=""></td>
        <td colspan="2">
            <img src="Bilder/index_09.gif" width="53" height="16" alt=""></td>
        <td rowspan="13">
            <img src="Bilder/index_10.gif" width="7" height="616" alt=""></td>
        <td>
            <img src="Bilder/index_11.gif" width="51" height="16" alt=""></td>
        <td rowspan="13">
            <img src="Bilder/index_12.gif" width="5" height="616" alt=""></td>
        <td>
            <img src="Bilder/index_13.gif" width="73" height="16" alt=""></td>
        <td rowspan="13">
            <img src="Bilder/index_14.gif" width="139" height="616" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="16" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="9">
            <img src="Bilder/index_15.gif" width="60" height="394" alt=""></td>
        <td colspan="2" rowspan="9">
            <img src="Bilder/index_16.gif" width="53" height="394" alt=""></td>
        <td rowspan="12">
            <img src="Bilder/index_17.gif" width="51" height="600" alt=""></td>
        <td rowspan="12">
            <img src="Bilder/index_18.gif" width="73" height="600" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="47" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">
            <img src="Bilder/index_19.gif" width="184" height="73" alt=""></td>
        <td colspan="4">          <a href="produkte.html"><img src="Bilder/index_20.gif" width="132" height="60" alt=""></a></td>
<td colspan="7" rowspan="8">
            <img src="Bilder/index_21.gif" width="490" height="347" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="60" alt=""></td>
    </tr>
    <tr>
        <td colspan="4">
            <img src="Bilder/index_22.gif" width="132" height="13" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="13" alt=""></td>
    </tr>
    <tr>
        <td rowspan="9">
            <img src="Bilder/index_23.gif" width="183" height="480" alt=""></td>
        <td colspan="4">
            <img src="Bilder/index_24.gif" width="132" height="60" alt=""></td>
        <td rowspan="6">
            <img src="Bilder/index_25.gif" width="1" height="274" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="60" alt=""></td>
    </tr>
    <tr>
        <td colspan="4">
            <img src="Bilder/index_26.gif" width="132" height="14" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="14" alt=""></td>
    </tr>
    <tr>
        <td colspan="4">
            <img src="Bilder/index_27.gif" width="132" height="60" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="60" alt=""></td>
    </tr>
    <tr>
        <td colspan="4">
            <img src="Bilder/index_28.gif" width="132" height="14" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="14" alt=""></td>
    </tr>
    <tr>
        <td colspan="4">
            <img src="Bilder/index_29.gif" width="132" height="60" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="60" alt=""></td>
    </tr>
    <tr>
        <td colspan="4">
            <img src="Bilder/index_30.gif" width="132" height="66" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="66" alt=""></td>
    </tr>
    <tr>
        <td colspan="3" rowspan="3">
            <img src="Bilder/index_31.gif" width="118" height="206" alt=""></td>
        <td colspan="3" rowspan="2">
            <img src="Bilder/index_32.gif" width="132" height="61" alt=""></td>
        <td rowspan="3">
            <img src="Bilder/index_33.gif" width="15" height="206" alt=""></td>
        <td>
            <img src="Bilder/index_34.gif" width="132" height="60" alt=""></td>
        <td rowspan="3">
            <img src="Bilder/index_35.gif" width="14" height="206" alt=""></td>
        <td rowspan="2">
            <img src="Bilder/index_36.png" width="133" height="61" alt=""></td>
        <td rowspan="3">
            <img src="Bilder/index_37.gif" width="15" height="206" alt=""></td>
        <td colspan="5">
            <img src="Bilder/index_38.gif" width="132" height="60" alt=""></td>
        <td rowspan="3">
            <img src="Bilder/index_39.gif" width="51" height="206" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="60" alt=""></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="Bilder/index_40.gif" width="132" height="146" alt=""></td>
        <td colspan="5" rowspan="2">
            <img src="Bilder/index_41.gif" width="132" height="146" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
        <td colspan="3">
            <img src="Bilder/index_42.gif" width="132" height="145" alt=""></td>
        <td>
            <img src="Bilder/index_43.gif" width="133" height="145" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="145" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="183" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="6" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="111" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="14" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="117" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="15" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="132" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="14" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="133" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="15" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="64" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="54" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="6" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="6" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="2" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="51" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="7" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="51" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="5" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="73" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="139" height="1" alt=""></td>
        <td></td>
    </tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

Momo22m · 01.07.2010

AW: Beim Einfügen der Links wird das Layout verschoben

oh ps ist kein html Programm vergiss das mal ich Worte dir empfehlen arbeite mit css und html dann geht das kann dir gerne Hilfen wen du magst pm mich einfach

BLU3L30PARD · 01.07.2010

AW: Beim Einfügen der Links wird das Layout verschoben

oha! Tabellenlayout...
also zuerst mal: HTML codes immer zwischen

HTML:

- Tags einbetten

Außerdem reicht HTML alleine heutzutage garnicht! du MUSST CSS lernen! es ist einfach der neue Webstandard

Zu deinem Problem: Versuch das ganze mal in CSS umzusetzen, da kannst zu einfach viel mehr einstellen und bestimmen. Das wird zwar einige Zeit in Anspruch nehmen, aber du kannst dir ja genügend TUTs dazu ansehen und die Community steht dir ja auch zur Verfügung...

Ansonsten:

www.css4you.de

Sorc · 01.07.2010

AW: Beim Einfügen der Links wird das Layout verschoben

Hallo,
also den blöden blauen Rand bekommst du weg, indem im Image tag einfach border="0" hinzufügst. Also <img src="bild.jpg" border="0" />. Ansonsten kann ich auch nur empfehlen den Code per Hand zu schreiben. Einfach auf http://de.selfhtml.org schaun. dort findet man eigentlich alles was man baucht.

AlexanderBo · 01.07.2010

AW: Beim Einfügen der Links wird das Layout verschoben

BLU3L30PARD schrieb:
oha! Tabellenlayout...

ja... weia...
wen wunderts da...

@TE
zusätzlich noch hilfreich:

css-> SELFHTML: Stylesheets (CSS)

little boxes-> Startseite - Little Boxes - Webseiten gestalten mit HTML und CSS

lesen+ lernen...
lass auch lieber die finger vom DW denn damit lernst du es nie richtig...

BLU3L30PARD · 01.07.2010

AW: Beim Einfügen der Links wird das Layout verschoben

AlexanderBo schrieb:
lass auch lieber die finger vom DW denn damit lernst du es nie richtig...

Genau! für den Anfang Notepad++ (website hat auch n nettes design

) nutzen

cebito · 01.07.2010

AW: Beim Einfügen der Links wird das Layout verschoben

Supi, 1000 hilfreiche Posts... :rolleyes:

@frizzi - ja, es stimmt, um die Beschäftigung mit html und css wirst du nicht drumrumkommen, stimmt auch, das Tabellenlayouts out sind und Tabellen NIE dazu gedacht waren Webseiten zu stylen, und nein, PS ist auch kein Webdesignprogramm...

Zu deinem jetzigen Problem, alle Bilder liegen bei dir als img-tag in der Seite, sind also im normalen Textfluss vorhanden. somit verschiebt zusätzlicher content (Links oder was auch immer) das "Design". Du müsstest deine Bilder als Hintergrund einbinden um zu verhindern, das sowas passiert.
Die blauen Ränder bekommst du weg, indem du (in deiner neu angelegten css-Datei

) a img{border:none;} notierst.
Außerdem besitzt dein html keinen Doctype, wodurch jeder Browser mit der Seite macht was er will, da du ihm nicht sagst nach welchen speziellen Regeln er deinen Quelltext interpretieren soll...

Wie du siehst gibts noch viiieeeel zu tun und zu lernen, ein Programm kann dir das nicht abnehmen. Wenn du die vollständige Kontrolle über etwas haben willst, musst du auch wissen, wie die Sache funktioniert.

Welche Frage mir aber Kopfzerbrechen bereitet: Wie kommst du darauf, eine Webseite für jemanden gestalten zu wollen ohne jegliche Kenntnisse der Materie zu besitzen? Möglicherweise könnte dein guter Bekannter dich bald nicht mehr mit dem A**** anschauen, wenn du ihm was versprichst/anbietest, wozu du nicht in der Lage bist.

AlexanderBo · 01.07.2010

AW: Beim Einfügen der Links wird das Layout verschoben

BLU3L30PARD schrieb:
Genau! für den Anfang Notepad++ nutzen

früher machte ich mal mit homesite rum

(gibts ja nich mehr+ nach aufkauf von adobe wurds eingestampft)
weil DW sollte ja ne wunderwaffe sein (wie früher mal frontpage)
und mit einem mal kamen so unheimlich viele "webspezialisten" ohne kenntnisse auf den markt (leider heute noch so).
mein "ausbilder" sagte vergiss den ganzen kram - lern neu...
und er hatte sooo recht

seit beginn des modernen web mit vollem xhtml und css (php)+ co
abeite ich ausschliesslich mit Notepad++ und möchte es nie mehr missen.
damit der programmierer weiss was er tut (!) und für die vorschau brauchts den browser

@cebito: (hab lang editiert) ;-) ansonten absolut rechtgeb!

frizzi · 01.07.2010

AW: Beim Einfügen der Links wird das Layout verschoben

Also... erst mal Danke für die vielen Antworten. Mittlerweile hab ich auch begriffen, das es der falsche Ansatz war. D. h. ich werd mich halt in Geduld üben müssen und lernen...

Nur - irgendwie fängt doch jeder mal an. Und es geht mir nicht darum, was in bzw. out ist oder nicht. Woher soll ich das überhaupt wissen, als Anfänger. Und wenn ich schon DW habe, warum soll ich etwas anderes nutzen? Ich will kein Profiwebdesigner werden.

Beim Weg zu dem bisherigen Ergebnis habe ich mich ausschließlich hieran - - orientiert und wenn das so falsch war, dann frage ich mich, was das hier zu suchen hat?

@cebito: ich habe niemand irgendetwas versprochen, ist bisher mein eigenes Vergnügen. Falls ich das aber irgendwann hinkriege, glaube ich, dass es Gefallen findet. Wenn nicht, hab ich viel gelernt dabei.

LG
frizzi

Charisse · 02.07.2010

AW: Beim Einfügen der Links wird das Layout verschoben

frizzi schrieb:
Beim Weg zu dem bisherigen Ergebnis habe ich mich ausschließlich hieran orientiert und wenn das so falsch war, dann frage ich mich, was das hier zu suchen hat?

Den Beitrag den Du erwähnst ist:
Freigeschaltet am 2005-04-08 08:16:29

Wie man daran sieht gibt es PSD schon ein bischen länger

Wenn man hier sucht (was lobenswert ist) -
nimmt man wohl eher das neueste denn einen über fünf Jahre "alten" Schinken

AlexanderBo · 02.07.2010

AW: Beim Einfügen der Links wird das Layout verschoben

frizzi schrieb:
...ich werd mich halt in Geduld üben müssen und lernen...

bis dahin wirds wohl nochn bissl dauern - aber der ansatz ist gut

...Und wenn ich schon DW habe, warum soll ich etwas anderes nutzen?

um es zu verstehen und zu lernen (s.o.)

Beim Weg zu dem bisherigen Ergebnis habe ich mich ausschließlich hieran orientiert...

so wie du das gepostet hast kostet es jeden der klickt 3 punkte!
rest hast Charisse dazu ja schon gesagt