Antworten auf deine Fragen:
Neues Thema erstellen

Website an die entsprechenden user anpassen

bling2

Noch nicht viel geschrieben

Hallo Leute,

ich habe meine erste eigene webseite mit Photoshop designed und möchte die weiterhin mit Dreamweaver weiter bearbeiten. Allerdings habe ich beim ersten aufrufen der Webseite in meinem Browser, gesehen das die Seite Links ist und das Feld rechts weiß ist.Dann habe ich die Webseite in die Mitte gesetzt. Nun ist die Seite zwar in der Mitte (Screenshot angehängt) aber rechts und links ist es weiß.

Nun kommt meine Frage: wie kann ich die Webseite so bearbeiten, dass egal wer die Webseite mit egal welchem Rechner aufruft, die weißen stellen nicht vorhanden sind, sondern der Karbon hintergrund die seite ausfüllt.

Ich hoffe ich habs so erklärt, dass Ihr mich versteht.

Vielen Dank
Gruß
b2
 

Myhar

Hat es drauf

AW: Website an die entsprechenden user anpassen

Screenshot ist keiner angehängt.
Prinzipiell löst man dein Problem in CSS mit dem background Property
Genauer kann ich dir aufgrund der vagen Informationen leider nicht helfen.

L. G.
 

bling2

Noch nicht viel geschrieben

Screenshot ist keiner angehängt.
Prinzipiell löst man dein Problem in CSS mit dem background Property
Genauer kann ich dir aufgrund der vagen Informationen leider nicht helfen.

L. G.

sorry screenshot vergessen :D

so jetzt aber.


Einfach im Quellcode im <head>-Bereich das hier einfügen:

<style type="text/css">
body {
background-image: url(pfad_zum_bild/bg.gif);
background-repeat:no-repeat;
background-position:top center;
}
</style>

Links für genauere Infos sind hinterlegt.


Das funzed bei mir irgendwie nicht..was mach ich falsch?
 
Zuletzt bearbeitet von einem Moderator:

bling2

Noch nicht viel geschrieben

AW: Website an die entsprechenden user anpassen

alles klar, ich hab es hinbekommen.
Leider ist jetzt ein anderes problem aufgetaucht. Ich hatte dann einen übergang zwischen dem carbon. Um dieses zu beseitigen habe ich im Design bei photoshop, carbon hintergrund gelöscht und die anderen sachen wie header, textfeld usw. auf einen transparenten hintergrund gelegt. Alles schön und gut. Wenn ich nun den carbon hintergrund mit dem html code rein machen, habe ich auch keinen übergang. Leider sieht der rest jetzt so blöd aus. (screenshot)
Seht ihr die ganzen weißen umrandungen der anderen sachen. Das mein ich mit sieht blöd aus

Außerdem kann ich das Textfeld jetzt nicht transparent machen, was ich eigentlich gemacht habe.Aber nicht zu sehen ist
 
Zuletzt bearbeitet:

fakerer

Aktives Mitglied

AW: Website an die entsprechenden user anpassen

kannst du das mal online stellen denn so weis zumindest ich nicht genau was du meinst?

wenn du dem body den hintergrund mit dem carbon gibst wirk sich das auf keine andren Elemente aus ausser auf den background vom body.
 

cebito

undefined

AW: Website an die entsprechenden user anpassen

Seht ihr die ganzen weißen umrandungen der anderen sachen. Das mein ich mit sieht blöd aus
Welche? Bitte zeige mit einem roten Pfeil drauf!
Außerdem kann ich das Textfeld jetzt nicht transparent machen, was ich eigentlich gemacht habe.Aber nicht zu sehen ist
Was genau hast du denn gemacht? Benutze .png's als Hintergrund und du hast deine Transparenz.
Und, um dir wirklich hilfreiche Tipps zu geben, lad das Ding bei nem Freehoster hoch und poste hier die URL.
 

bling2

Noch nicht viel geschrieben

AW: Website an die entsprechenden user anpassen

so leute, habe mir jetzt einen freehoster geholt und alles hochgeladen um es euch ausführlich zu zeigen, damit ihr mir helfen könnt.

Als erstes habe ich die Webseite mit Photoshop so gemacht wie sie hier zu sehen ist und keinen extra hintergrund. Das hat mir auch alles wunderbar gefallen, außer das ich dann links und rechts den weißen rand habe.
hier zu sehen: http://bling2.bl.ohost.de/Webseite/web.html

So dann habe ich einfach noch den Hintergrund hinzugefügt damit der weiße Hintergrund verschwindet.
Das hat auch funktioniert, allerdings ist dann am hintergrund so ein schnitt zu sehen.
Siehe hier:

Dann habe ich wiederrum bei photoshop den hintergrund rausgenommen, damit die page quasi auf einem transparenten hintergrund liegt. Dann habe ich den hintergrund wie hier im forum schon besprochen einzeln im Code eingefügt. Alles prima, der schnitt ist weg und der hintergrund sieht sauber ist. ABER jetzt ist um dem Logo und allem andern so ein weißer rand und es sieht nicht so flüssig aus.
Siehe hier:

Wie kriege ich das hin das der Hintergrund wie beim letzten ist, nur um die schrift und allem nicht dieser hässlige weiße rand.

Danke schonma
 

fakerer

Aktives Mitglied

AW: Website an die entsprechenden user anpassen

das sind ja alles irgendwie seltsam zusammengestöpselte Bilder in einer Tabelle.
So kann das meiner Meinung nach nix werden, aber ich kann mich ja auch täuschen.

HTML:
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            body {
                background: url('hintergrund') repeat; }
            .bodyverlauf{
                background: url('hintergrundmitdemverlauffueroben') repeat-x;
            }
            .content{
                width: 80%;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <div class="bodyverlauf">
            <div class="content">content</div>
        </div>
    </body>
</html>

du könntest so in der Richtung anfangen.

Dann habe ich wiederrum bei photoshop den hintergrund rausgenommen,
in PS bearbeitet man die Seite nicht, aber vielleicht meintest du eh nur das du dir das Image generiert hast.
 

bling2

Noch nicht viel geschrieben

AW: Website an die entsprechenden user anpassen

das sind ja alles irgendwie seltsam zusammengestöpselte Bilder in einer Tabelle.
So kann das meiner Meinung nach nix werden, aber ich kann mich ja auch täuschen.

HTML:
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            body {
                background: url('hintergrund') repeat; }
            .bodyverlauf{
                background: url('hintergrundmitdemverlauffueroben') repeat-x;
            }
            .content{
                width: 80%;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <div class="bodyverlauf">
            <div class="content">content</div>
        </div>
    </body>
</html>

du könntest so in der Richtung anfangen.


in PS bearbeitet man die Seite nicht, aber vielleicht meintest du eh nur das du dir das Image generiert hast.

Ähm. ich versteh das nicht ganz. ich hab das komplette design mit photoshop gemacht und dann als web gespeichert, das macht man doch so oda irre ich mich
 

SineTempore

Nicht mehr ganz neu hier

AW: Website an die entsprechenden user anpassen

imho irrst du dich da tatsächlich. Photoshop wird eigentlich nur genutzt um die entsprechenden Grafiken zu erstellen. HTML und vor allem CSS brauchst du um das Design dann umzusetzen. Das funktioniert normalerweise nicht mit Photoshop. Das ist höchstens dafür geeignet um eine kurze Vorschau zu zeigen.

Aktuell läuft im HTML/CSS Bereich gerade eine Diskussion, wie man Homepages erstellt. Kannst dir das ja mal durchlesen:
Das hier könnte auch hilfreich sein:
 

bling2

Noch nicht viel geschrieben

AW: Website an die entsprechenden user anpassen

imho irrst du dich da tatsächlich. Photoshop wird eigentlich nur genutzt um die entsprechenden Grafiken zu erstellen. HTML und vor allem CSS brauchst du um das Design dann umzusetzen. Das funktioniert normalerweise nicht mit Photoshop. Das ist höchstens dafür geeignet um eine kurze Vorschau zu zeigen.

Aktuell läuft im HTML/CSS Bereich gerade eine Diskussion, wie man Homepages erstellt. Kannst dir das ja mal durchlesen:
Das hier könnte auch hilfreich sein:

Danke für die links, aber ich glaube ihr versteht nicht ganz oder ich versteh immer noch nicht ganz. ich habe ja die grafiken mit photoshop erstellt und habe im moment ja auch ein grafisches problem mit dem hintergrund. Der inhalt usw wird nachher natürlich mit dreamweav gemacht.
 

SineTempore

Nicht mehr ganz neu hier

AW: Website an die entsprechenden user anpassen

Die konkrete Lösung für dein Problem mit den weißen Rändern lautet:
Speichere die Grafiken nicht als gif sondern als png ab. (Sehe gerade, dass Cebito das weiter oben auch schon gesagt hat)

Irgendwann wirst du allerdings höchstwahrscheinlich merken, dass das markup das Photoshop erzeugt, nicht für den praktischen Einsatz geeignet ist.
 

Jagutaba

Nicht mehr ganz neu hier

AW: Website an die entsprechenden user anpassen

Du kannst die Grafik auch mit Fireworks von Adobe segmentieren und dann mit CSS wieder zusammenfügen. Das geht über div-container mit background-image.
 

Myhar

Hat es drauf

AW: Website an die entsprechenden user anpassen

Danke für die links, aber ich glaube ihr versteht nicht ganz oder ich versteh immer noch nicht ganz. ich habe ja die grafiken mit photoshop erstellt und habe im moment ja auch ein grafisches problem mit dem hintergrund. Der inhalt usw wird nachher natürlich mit dreamweav gemacht.

Du hast eigentlich ein Problem mit semantisch komplett inkorrektem Code. Man verwendet keine Tabellen, um das Design einer Seite umzusetzen. Genauso wenig lässt man sich von Photoshop oder Dreamweaver den Code der Seite automatisch generieren. Ich kann hier nur wieder den Rat geben, die Seite ordentlich umzusetzen.
Ansonsten wurde dir schon gezeigt, wie du einen Hintergrund für Elemente definierst. Dies musst du nun nur in dein CSS eintragen, damit der für dich gewünschte Effekt entsteht.

L. G.
 

pascal.k

Basinga

AW: Website an die entsprechenden user anpassen

Speichere die Grafiken nicht als gif sondern als png ab.

Die schnellste Lösung für dein Problem mit dem weißem Rand ist das Bild als PNG-24 über die Funktion "Datei"->"Für Web speichern" mit aktivierter Transparenz zu speichern. PNG-24 unterstützt halbtranzparenzen, GIF nicht. Dadurch kommen die weißen Ränder bei den GIFs zu stande und beim PNG eben nicht.

Zum Thema Webseiten mit Tabellen zu gestalten. Das ist veraltet. Schau dir lieber HTML und CSS mal genauer an, dann wirst du merken, es lässt sich vieles auch anders lösen. Speziel die Positionierung eben nicht mit Tabellen sondern mit CSS gesteuerten <div>-Elementen. Ein großer Vorteil an der "Gestaltung" mit HTML und CSS statt mit großen Bildern ist schlicht und einfach die Ladezeitoptimierung beim Aufruf deiner Seite.

Greez
 
Zuletzt bearbeitet:

bling2

Noch nicht viel geschrieben

AW: Website an die entsprechenden user anpassen

hi,

ich habe mich mal in das Buch " Little Boxes" eingelesen. Das werden sicher die meisten von uns kennen. Dann habe ich mich noch versucht in einem Tutorial hier auf der Seite einzulesen. Ich habe aber gemerkt das diese CSS und Xhtml geschichte nicht gerade einfach zu erlernen ist und ich leider zu lange dafür brauchen würde. Im moment gibt es noch einige sachen die ich für mein vorhaben erledigen muss.
Jetzt meine Frage. Ihr habt ja schon alle mein Design gesehen welches ich mit Photoshop gemacht habe..eigentlich möchte ich das die seite auch fast so aussieht. Nur leider sagtet ihr das diese html tabellen form die Photoshop erstellt veraltet ist.
Gibt es eine andere möglichkeit wie ich dieses design umsetzen kann ohne mich monatelang mit dem Thema zu beschäftigen. Wie gesagt fählt mir im moment die freie Zeit dafür und der freie Kopf.

Vielen Dank.
Gruß
b2
 

pascal.k

Basinga

AW: Website an die entsprechenden user anpassen

Du kannst auch mit Tabellen Webseiten erstellen. Es ist einfach nich die eleganteste Art. Das ist alles.
 
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

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.636
Beiträge
1.538.484
Mitglieder
67.559
Neuestes Mitglied
hanuta
Oben