Antworten auf deine Fragen:
Neues Thema erstellen

Beim Einfügen der Links wird das Layout verschoben

frizzi

frizzi

Aktives Mitglied

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

wex_stallion

Motzerator

Teammitglied
PSD Beta Team
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

frizzi

Aktives Mitglied

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>
 
Zuletzt bearbeitet von einem Moderator:
Momo22m

Momo22m

Pixxel-Design / Lehrling

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

BLU3L30PARD

Noch nicht viel geschrieben

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

Sorc

Nicht mehr ganz neu hier

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.
 
cebito

cebito

undefined

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

AlexanderBo

Gesperrt

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

BLU3L30PARD schrieb:
Genau! für den Anfang Notepad++ nutzen
Zum Vergrößern anklicken....

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

frizzi

Aktives Mitglied

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
 
Zuletzt bearbeitet:
C

Charisse

Guest

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?
Zum Vergrößern anklicken....

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

AlexanderBo

Gesperrt

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

frizzi schrieb:
...ich werd mich halt in Geduld üben müssen und lernen...
Zum Vergrößern anklicken....

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

...Und wenn ich schon DW habe, warum soll ich etwas anderes nutzen?
Zum Vergrößern anklicken....
um es zu verstehen und zu lernen (s.o.)

Beim Weg zu dem bisherigen Ergebnis habe ich mich ausschließlich hieran orientiert...
Zum Vergrößern anklicken....
so wie du das gepostet hast kostet es jeden der klickt 3 punkte!
rest hast Charisse dazu ja schon gesagt;)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 132 (Mitglieder: 5, Gäste: 127)
Robots: 788

Statistik des Forums

Themen
118.635
Beiträge
1.538.474
Mitglieder
67.558
Neuestes Mitglied
StarsMan
Oben