Website an die entsprechenden user anpassen

bling2 · 11.10.2011

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 · 11.10.2011

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.

pascal.k · 11.10.2011

AW: Website an die entsprechenden user anpassen

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.

bling2 · 11.10.2011

Myhar schrieb:
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

so jetzt aber.

BreeshiO schrieb:
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?

fakerer · 11.10.2011

AW: Website an die entsprechenden user anpassen

du willst ja die weissen Flächen weg
dann musst du mit
background-repeat: repeat;
arbeiten und dir das Mustern entsprchend vorberieten.
repeat wiederholt das bild dann in x und y Richtung.

und background-position:top center; kannst du dann weglassen

bling2 · 11.10.2011

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

fakerer · 11.10.2011

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 · 11.10.2011

AW: Website an die entsprechenden user anpassen

bling2 schrieb:
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!

bling2 schrieb:
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 · 11.10.2011

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 · 11.10.2011

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 · 11.10.2011

AW: Website an die entsprechenden user anpassen

fakerer schrieb:
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 · 11.10.2011

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 · 11.10.2011

AW: Website an die entsprechenden user anpassen

SineTempore schrieb:
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 · 12.10.2011

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 · 12.10.2011

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 · 12.10.2011

AW: Website an die entsprechenden user anpassen

bling2 schrieb:
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 · 12.10.2011

AW: Website an die entsprechenden user anpassen

SineTempore schrieb:
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

bling2 · 16.10.2011

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 · 16.10.2011

AW: Website an die entsprechenden user anpassen

Du kannst auch mit Tabellen Webseiten erstellen. Es ist einfach nich die eleganteste Art. Das ist alles.

bling2 · 16.10.2011

AW: Website an die entsprechenden user anpassen

BreeshiO schrieb:
Du kannst auch mit Tabellen Webseiten erstellen. Es ist einfach nich die eleganteste Art. Das ist alles.

die webseite soll ja auch schnell aufgebaut werden und bedienerfreundlich sein. Ist das denn auch mit Tabellen form möglich?