Antworten auf deine Fragen:
Neues Thema erstellen

Homepage an Bildschirme anpassen

R

rubymasta

Noch nicht viel geschrieben

Hallo liebes Forum,

ich habe per Photoshop eine geslicete Homepage gebastelt... Die Bilder zerreißen nicht, das ganze funktioniert und sieht doll aus.. Das Problem ist Folgendes:

Auf meinem Bildschirm ist die Homepage zentriert und optimal Groß, auf dem kleinen Laptop meiner Mutter sieht man nur ein Virtel der Seite und man muss nach rechts und unten scrollen um zu zentrieren... Wie kann ich die Homepage so programmieren, dass sie auf jedem Bildschirm mittig ganz drauf ist? Ohne zu scrollen!

Hoffe es gibt ne Möglichkeit,
mfg
Ruby
 

S

skydivematy

Nicht mehr ganz neu hier

AW: Homepage an Bildschirme anpassen

Hi ,
hast du mal ein Link zu deiner seit. Ich schau mir mal an was du falsch gemacht hast. Dann kann ich dir evtl. ein paar Tipps geben.
Gruß
skydivematy
 
D

Damb

Trial & Error

AW: Homepage an Bildschirme anpassen

Ohne irgendwie den Quelltext zu sehen kann man nur vermuten das du die Angaben (Größe/Abstand) alle "fest" gemacht hast. Wenn das so sein sollte dann probiers mal mit Gemütlichkeit ... eh ne mit % oder em - Angaben mein ich natürlich.

Grüße
Damb
 
R

rubymasta

Noch nicht viel geschrieben

AW: Homepage an Bildschirme anpassen

skydivematy schrieb:
Hi ,
hast du mal ein Link zu deiner seit. Ich schau mir mal an was du falsch gemacht hast. Dann kann ich dir evtl. ein paar Tipps geben.
Gruß
skydivematy
Zum Vergrößern anklicken....


Das sind jetz erstmal nur 3 seiten, mehr speicher ich noch nich fürs web, falls es ein fehler in ps ist... ich hoffe es is ein einfacher html code ;D
 
C

claude72

Noch nicht viel geschrieben

AW: Homepage an Bildschirme anpassen

Befasse dich mit ,
in dem Bereich hast gepostet, aber deine Seite besteht aus einem Tabellenlayout :hmpf:
 
sokie

sokie

Mod | Web

AW: Homepage an Bildschirme anpassen

eigentlich hast du da schon genau das gamacht, was man mit photoshop machen kann, wenn es um Webseiten geht. Eine erste Ansicht, wie die Webseite aussehen kann.
Das was da zu sehen ist, ist ja keine webseite, sondern grafikschnippsel teilweise mit links drauf. ein Entwurf.
Der mittlere Teil, also das wesentlich mit den Informationen ist ja schon nur um die 700px breit, sodass das eigentlich bei jeder Auflösung dargestellt werden könnte.
Also musst du nur den Mittelteil von dem Aussenrum lösen. Das grosse Hintergrundbild kannst du auch dem body also Hintergrundbild zuweisen und mittig ausrichten, sodass eben bei kleineren Auflösungen eben nur ein mehr oder weniger grosser Teil davon rechts und links abgeschnitten wird.
Die 700-800 px breiten Inhalte stellst du vor diesen Hintertgrund, ebenfalls mittig ausgerichtet.
 
D

Damb

Trial & Error

AW: Homepage an Bildschirme anpassen

Also ich hätte ne Lösung die ich aber nur im FF3 testen konnte da ich im moment Schwierigkeiten mit dem IE habe.
Meine Befürchtung ist aber das der IE mal wieder alles anders anzeigt als der FF.
Wenn irgendwas falsch sein sollte - bitte nicht steinigen - ich bin offen für Kritik und lerne bereitwillig.


Code: 
<html><head>

<title>hp_home</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head><body leftmargin="0" topmargin="0" bgcolor="#000000" marginheight="0" marginwidth="0"><center>

<!-- ImageReady Slices (hp_home.psd) -->
<table id="Tabelle_01" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
    <tbody><tr>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="1" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="1" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="1" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="1" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="1" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="1" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="1" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="1" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="1" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="1" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="1" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="1" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="1" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="1" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="1" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="1" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="1" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="1" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="1" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="1" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="1" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="1" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="1" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="1" width="100%"></td>
        <td></td>
    </tr>
    <tr>
        <td colspan="24">
            <img src="images/Home_01.gif" alt="" height="101" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="101" width="100%"></td>
    </tr>
    <tr>
        <td colspan="5" rowspan="2">
            <img src="images/Home_02.gif" alt="" height="35" width="100%"></td>
        <td>
            <a href="http://home.arcor.de/bujinkan-marl/Home">
                <img src="images/hp_home_03.gif" alt="" border="0" height="29" width="100%"></a></td>
        <td colspan="18" rowspan="2">
            <img src="images/Home_04.gif" alt="" height="35" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="29" width="100%"></td>
    </tr>
    <tr>
        <td>
            <img src="images/Home_05.gif" alt="" height="6" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="6" width="100%"></td>
    </tr>
    <tr>
        <td rowspan="24">
            <img src="images/Home_06.gif" alt="" height="602" width="100%"></td>
        <td colspan="16">
            <a href="http://home.arcor.de/bujinkan-marl/Aktuelles">
                <img src="images/hp_home_07.gif" alt="" border="0" height="25" width="100%"></a></td>
        <td colspan="7" rowspan="21">
            <img src="images/Home_08.gif" alt="" height="487" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="25" width="100%"></td>
    </tr>
    <tr>
        <td colspan="16">
            <img src="images/Home_09.gif" alt="" height="12" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="12" width="100%"></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">
            <img src="images/Home_10.gif" alt="" height="47" width="100%"></td>
        <td colspan="12">
            <a href="http://home.arcor.de/bujinkan-marl/Unser">
                <img src="images/hp_home_11.gif" alt="" border="0" height="38" width="100%"></a></td>
        <td colspan="2" rowspan="7">
            <img src="images/Home_12.gif" alt="" height="160" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="38" width="100%"></td>
    </tr>
    <tr>
        <td colspan="12">
            <img src="images/Home_13.gif" alt="" height="9" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="9" width="100%"></td>
    </tr>
    <tr>
        <td colspan="11">
            <a href="http://home.arcor.de/bujinkan-marl/Bujinkan">
                <img src="images/hp_home_14.gif" alt="" border="0" height="27" width="100%"></a></td>
        <td colspan="3" rowspan="5">
            <img src="images/Home_15.gif" alt="" height="113" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="27" width="100%"></td>
    </tr>
    <tr>
        <td colspan="3" rowspan="4">
            <img src="images/Home_16.gif" alt="" height="86" width="100%"></td>
        <td colspan="5">
            <a href="http://home.arcor.de/bujinkan-marl/Tai">
                <img src="images/hp_home_17.gif" alt="" border="0" height="33" width="100%"></a></td>
        <td colspan="3" rowspan="4">
            <img src="images/Home_18.gif" alt="" height="86" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="33" width="100%"></td>
    </tr>
    <tr>
        <td colspan="5">
            <img src="images/Home_19.gif" alt="" height="9" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="9" width="100%"></td>
    </tr>
    <tr>
        <td colspan="3">
            <a href="http://home.arcor.de/bujinkan-marl/Kids">
                <img src="images/hp_home_20.gif" alt="" border="0" height="40" width="100%"></a></td>
        <td colspan="2" rowspan="2">
            <img src="images/Home_21.gif" alt="" height="44" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="40" width="100%"></td>
    </tr>
    <tr>
        <td colspan="3">
            <img src="images/Home_22.gif" alt="" height="4" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="4" width="100%"></td>
    </tr>
    <tr>
        <td colspan="15">
            <a href="http://home.arcor.de/bujinkan-marl/Muay">
                <img src="images/hp_home_23.gif" alt="" border="0" height="28" width="100%"></a></td>
        <td rowspan="15">
            <img src="images/Home_24.gif" alt="" height="405" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="28" width="100%"></td>
    </tr>
    <tr>
        <td colspan="15">
            <img src="images/Home_25.gif" alt="" height="9" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="9" width="100%"></td>
    </tr>
    <tr>
        <td colspan="3" rowspan="5">
            <img src="images/Home_26.gif" alt="" height="101" width="100%"></td>
        <td colspan="6">
            <a href="http://home.arcor.de/bujinkan-marl/MMA">
                <img src="images/hp_home_27.gif" alt="" border="0" height="26" width="100%"></a></td>
        <td colspan="6" rowspan="2">
            <img src="images/Home_28.gif" alt="" height="36" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="26" width="100%"></td>
    </tr>
    <tr>
        <td colspan="6">
            <img src="images/Home_29.gif" alt="" height="10" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="10" width="100%"></td>
    </tr>
    <tr>
        <td colspan="7">
            <a href="http://home.arcor.de/bujinkan-marl/Fotos">
                <img src="images/hp_home_30.gif" alt="" border="0" height="30" width="100%"></a></td>
        <td colspan="5" rowspan="3">
            <img src="images/Home_31.gif" alt="" height="65" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="30" width="100%"></td>
    </tr>
    <tr>
        <td colspan="4">
            <a href="http://home.arcor.de/bujinkan-marl/Videos">
                <img src="images/hp_home_32.gif" alt="" border="0" height="31" width="100%"></a></td>
        <td colspan="3" rowspan="2">
            <img src="images/Home_33.gif" alt="" height="35" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="31" width="100%"></td>
    </tr>
    <tr>
        <td colspan="4">
            <img src="images/Home_34.gif" alt="" height="4" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="4" width="100%"></td>
    </tr>
    <tr>
        <td colspan="13">
            <a href="http://home.arcor.de/bujinkan-marl/Training">
                <img src="images/hp_home_35.gif" alt="" border="0" height="29" width="100%"></a></td>
        <td colspan="2" rowspan="8">
            <img src="images/Home_36.gif" alt="" height="267" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="29" width="100%"></td>
    </tr>
    <tr>
        <td colspan="13">
            <img src="images/Home_37.gif" alt="" height="8" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="8" width="100%"></td>
    </tr>
    <tr>
        <td colspan="12">
            <a href="http://home.arcor.de/bujinkan-marl/Freunde">
                <img src="images/hp_home_38.gif" alt="" border="0" height="30" width="100%"></a></td>
        <td rowspan="6">
            <img src="images/Home_39.gif" alt="" height="230" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="30" width="100%"></td>
    </tr>
    <tr>
        <td rowspan="5">
            <img src="images/Home_40.gif" alt="" height="200" width="100%"></td>
        <td colspan="10">
            <a href="http://home.arcor.de/bujinkan-marl/Buch">
                <img src="images/hp_home_41.gif" alt="" border="0" height="46" width="100%"></a></td>
        <td rowspan="5">
            <img src="images/Home_42.gif" alt="" height="200" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="46" width="100%"></td>
    </tr>
    <tr>
        <td colspan="10" rowspan="4">
            <img src="images/Home_43.gif" alt="" height="154" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="39" width="100%"></td>
    </tr>
    <tr>
        <td rowspan="3">
            <img src="images/Home_44.gif" alt="" height="115" width="100%"></td>
        <td>
            <a href="http://home.arcor.de/bujinkan-marl/Kontakt">
                <img src="images/hp_home_45.gif" alt="" border="0" height="26" width="100%"></a></td>
        <td rowspan="3">
            <img src="images/Home_46.gif" alt="" height="115" width="100%"></td>
        <td rowspan="2">
            <a href="http://myspace.com/wortan">
                <img src="images/Home_47.gif" alt="" border="0" height="32" width="100%"></a></td>
        <td rowspan="3">
            <img src="images/Home_48.gif" alt="" height="115" width="100%"></td>
        <td>
            <a href="http://home.arcor.de/bujinkan-marl/Impressum">
                <img src="images/hp_home_49.gif" alt="" border="0" height="26" width="100%"></a></td>
        <td rowspan="3">
            <img src="images/Home_50.gif" alt="" height="115" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="26" width="100%"></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="images/Home_51.gif" alt="" height="89" width="100%"></td>
        <td rowspan="2">
            <img src="images/Home_52.gif" alt="" height="89" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="6" width="100%"></td>
    </tr>
    <tr>
        <td>
            <img src="images/Home_53.gif" alt="" height="83" width="100%"></td>
        <td>
            <img src="images/Abstandhalter.gif" alt="" height="83" width="100%"></td>
    </tr>
</tbody></table>
<!-- End ImageReady Slices -->
</center></body></html>
Grüße
Damb
 
R

rubymasta

Noch nicht viel geschrieben

AW: Homepage an Bildschirme anpassen

Damb schrieb:
Also ich hätte ne Lösung die ich aber nur im FF3 testen konnte da ich im moment Schwierigkeiten mit dem IE habe.
Meine Befürchtung ist aber das der IE mal wieder alles anders anzeigt als der FF.
Wenn irgendwas falsch sein sollte - bitte nicht steinigen - ich bin offen für Kritik und lerne bereitwillig.
Zum Vergrößern anklicken....


Das Resultat siehst du hier:

Grundsetzlich ist das Teil jetzt mittig, der Laptop zieht die Grafik jetzt aber in die Länge und macht rechts einen kleinen schwarzen Balken, mein Bildschirm verzieht das Gesamte Layout so, dass man fifty fifty schwarze Balken sieht... beim alten gibts garkeine schwarzen Balken

@sokie:
Was meinst du mit "Also musst du nur den Mittelteil von dem Aussenrum lösen"?? Das mit dem Hintergrund als BG-Image is n guter Tipp, das sieht bei mir dann nur so:
aus... Das Die Tabellenbilder gerissen sind is nich schlimm, ich muss nur den image Ordner aktualisieren, dann sind die wieder da, aber ich bekomme das nich hin, das die tabelle auf dem Hintergrundbild erscheint... kannste mir n geeigneten Code geben?

@ All
Hilfts euch was, wenn ich die Photoshop Datei zum download gebe?
 
Zuletzt bearbeitet:
D

Damb

Trial & Error

AW: Homepage an Bildschirme anpassen

Ok dachte ich mir das es ein Griff ins Klos war :lol:

Lösche:

Code: 
img src="http://home.arcor.de/bujinkan-marl/Background.jpg" width="100%" height="100%" border="0">

Und füge das hier in den Head bereich ein:

Code: 
<style type="text/css">
    <!--
    html body {
    background-color: #000000;
    background-image: url(hier die adresse für dein Hindergrundbild); height: 100%; widt: 100%; border: 0;
    
    }
    -->
</style>

Hoffe das hat geholfen :)
Grüße
Damb
 
S

skydivematy

Nicht mehr ganz neu hier

AW: Homepage an Bildschirme anpassen

Hier mal ein ausschnitt wie das bei mir rüber kommt.

Monitor 1680X1050

Dein erstes Beispiel sah dagegen noch gut aus...

skydivematy
 
S

skydivematy

Nicht mehr ganz neu hier

AW: Homepage an Bildschirme anpassen

Hier mal ein ausschnitt wie das bei mir rüber kommt.

Monitor 1680X1050

Dein erstes Beispiel sah dagegen noch gut aus...

skydivematy


wo ist der screen shot?
 
R

rubymasta

Noch nicht viel geschrieben

AW: Homepage an Bildschirme anpassen

Damb schrieb:
Ok dachte ich mir das es ein Griff ins Klos war :lol:

Lösche:

Code: 
img src="http://home.arcor.de/bujinkan-marl/Background.jpg" width="100%" height="100%" border="0">
Und füge das hier in den Head bereich ein:

Code: 
<style type="text/css">
    <!--
    html body {
    background-color: #000000;
    background-image: url(hier die adresse für dein Hindergrundbild); height: 100%; widt: 100%; border: 0;
    
    }
    -->
</style>
Hoffe das hat geholfen :)
Grüße
Damb
Zum Vergrößern anklicken....


hmm das sueht dann so aus

das heißt bei mir fängt unten die textur neu an, also unter dem schwarz kommt so n kleiner balken mit rotem hintergrund... und obwohl ich die seite mit transparenem hintergrund fürs web abgespeichert hab, macht der n weißen BG
 
S

skydivematy

Nicht mehr ganz neu hier

AW: Homepage an Bildschirme anpassen

background-image: url(hier die adresse für dein Hindergrundbild); height: 100%; widt: 100%; border: 0;

da ist ein Fehler drin...!

background-image: url(hier die adresse für dein Hindergrundbild); height: 100%; width: 100%; border: 0;


du hattest widt geschrieben
 
S

skydivematy

Nicht mehr ganz neu hier

AW: Homepage an Bildschirme anpassen

Kleines Beispiel:


body {background:#000000 url("../images/bg_blue.gif") repeat-x top left fixed; padding:10px 0;}


#page_margins {min-width:820px; max-width:80em; margin:0 auto; border:0px #889 solid;}
#page{background:#C8DDF3; border:10px #C8DDF3 solid;}


body {text-align:center;}
#page_margins {text-align:left;}

#header {height:120px; color:#fff; background:#232324 url("../../img/header-bg.gif") repeat-x;}
#header img.headImg1 {position:absolute; top:10px; left:10px; font-size:208%;}
#header h1 span {display:block; height:1px; width:1px; overflow:hidden; line-height:105px;}
 
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: 73 (Mitglieder: 2, Gäste: 71)
Robots: 883

Statistik des Forums

Themen
118.619
Beiträge
1.538.363
Mitglieder
67.540
Neuestes Mitglied
Alex Weidner
Oben