Website mit Dremweaver

luke_maus

Cadet 3rd Year
Registriert
Dez. 2007
Beiträge
36
Noch eine kleine Frage an die Profis.
Habe eine Website mit Dreamweaver erstellt. Auf meinem Rechner habe ich die Darstellung 1024x768. Sieht super aus, aber z.B. beim kumpel sieht die Seite sch... aus, da er eine andere Darstellung hat und dann auf der Seite rechts und unten Schwarzes zu sehen ist (habe als Hintergrund die Farbe Schwarz gewählt). Kann man im Dreamweaver irgendwie einstellen, dass sich die Website automatisch der Darstellung anpasst????
Über jeden Tip wäre ich dankbar.
 
Verwende relative Größenangaben statt fester Werte. Ohne den Quellcode zu sehen kann man schlecht etwas sagen, aber das sollte schon einmal weiterhelfen. Falls du nicht weißt wie du das abändern kannst, dann lege ich dir Selfhtml ans Herz. Einfach mal danach googeln.
 
Stewi schrieb:
Verwende relative Größenangaben statt fester Werte. Ohne den Quellcode zu sehen kann man schlecht etwas sagen, aber das sollte schon einmal weiterhelfen. Falls du nicht weißt wie du das abändern kannst, dann lege ich dir Selfhtml ans Herz. Einfach mal danach googeln.

Wie meinst Du das mit den größenangaben????
Hier ist der Quellcode der Startseite:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body {
background-color: #000000;
}
#Flagge {
position:absolute;
left:0px;
top:0px;
width:1024px;
height:768px;
z-index:1;
}
#Layer2 {
position:absolute;
left:222px;
top:157px;
width:600px;
height:450px;
z-index:2;
}
#Stiefel {
position:absolute;
left:0px;
top:0;
width:1024;
height:768;
z-index:2;
}
#Schrift {
position:absolute;
left:525px;
top:92px;
width:428px;
height:130px;
z-index:3;
}
.Stil5 {
font-size: xx-large;
font-style: italic;
}
#Logo {
position:absolute;
left:353px;
top:458px;
width:280px;
height:80;
z-index:4;
}
#Layer1 {
position:absolute;
left:24px;
top:15px;
width:52px;
height:37px;
z-index:5;
}
#Layer3 {
position:absolute;
left:21px;
top:16px;
width:72px;
height:63px;
z-index:5;
}
#Layer4 {
position:absolute;
left:31px;
top:16px;
width:52px;
height:69px;
z-index:5;
}
-->
</style>
</head>

<body>
<div id="Flagge"><img src="italienflagge.gif" width="1024" height="768" /></div>
<embed src="la donnaemobile.mp3" width="32" height="32"></embed>
<div id="Stiefel"><img src="Landkarte-Schwarz.gif" width="1024" height="768" border="0" /></div>
<div id="Schrift">
<h1 align="center" class="Stil5">Herzlich willkommen im Ristorante - Pizzeria Bel Paese&nbsp;<br />
in Aidlingen-Dachtel</h1>
</div>
<div id="Logo"><a href="Willkommen Seite.html"><img src="Logo Bel Paese.jpg" width="280" height="80" border="0" /></a></div>
</body>
</html>
 
#Flagge {
position:absolute;
left:0px;
top:0px;
width:1024px;
height:768px;
z-index:1;
}

probier mal: "width:100%;
height:100%;"
 
Zum Beispiel hier:
#Flagge {
position:absolute;
left:0px;
top:0px;
width:1024px;
height:768px;

z-index:1;
Da kannst du mit Prozentangaben arbeiten. Es ist doch klar, wenn du feste Grössen vorgibst, dann sieht das bei unterschiedlichen Bildschirmauflösungen auch total anders aus. Wenn du aber sagst, dass das Objekt immer eine Breite von 100% haben soll und Höhe auch 100%, dann wird bei jeder Auflösung der Bildschirm zu 100% damit gefüllt, egal ob 640x480, 1024x768 oder 1280x1024. Also
#Flagge {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;

z-index:1;

Auch wenn Dreamweaver ein nettes SPielzeug ist, Grundkenntnisse müssen vorhanden sein wenn man einigermaßen ansprechende Seiten gestalten will.
 
Zuletzt bearbeitet:
Stewi schrieb:
Zum Beispiel hier:
Da kannst du mit Prozentangaben arbeiten. Es ist doch klar, wenn du feste Grössen vorgibst, dann sieht das bei unterschiedlichen Bildschirmauflösungen auch total anders aus. Wenn du aber sagst, dass das Objekt immer eine Breite von 100% haben soll und Höhe auch 100%, dann wird bei jeder Auflösung der Bildschirm zu 100% damit gefüllt, egal ob 640x480, 1024x768 oder 1280x1024. Also

Auch wenn Dreamweaver ein nettes SPielzeug ist, Grundkenntnisse müssen vorhanden sein wenn man einigermaßen ansprechende Seiten gestalten will.

Dank Dir. Ist schon ne ewigkeit her das ich das mal gemacht habe, da war es noch der erste Teil von Dreamweaver.
Ich wusste das es ne kleinigkeit ist, aber erstmal darauf kommen.

DANKE
 
Stewi schrieb:
Zum Beispiel hier:
Da kannst du mit Prozentangaben arbeiten. Es ist doch klar, wenn du feste Grössen vorgibst, dann sieht das bei unterschiedlichen Bildschirmauflösungen auch total anders aus. Wenn du aber sagst, dass das Objekt immer eine Breite von 100% haben soll und Höhe auch 100%, dann wird bei jeder Auflösung der Bildschirm zu 100% damit gefüllt, egal ob 640x480, 1024x768 oder 1280x1024. Also

Auch wenn Dreamweaver ein nettes SPielzeug ist, Grundkenntnisse müssen vorhanden sein wenn man einigermaßen ansprechende Seiten gestalten will.

Hi, soory wenn ich dich noch mal belästigen muss.
Habe deinen Rat befolgt und die 100 % eingetragen, sieht auch gut aus, leider passt er mir das Logo nicht an und den Schriftzug. Wie bekomm ich das denn hin? Wäre super wenn Du mir helfen könntest. Vielen Dank im Voraus.

Hier der Quell Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body {
background-color: #000000;
}
#Flagge {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
z-index:1;
}
#Layer2 {
position:absolute;
left:222px;
top:157px;
width:600px;
height:450px;
z-index:2;
}
#Stiefel {
position:absolute;
left:0px;
top:0;
width:100%;
height:100%;
z-index:2;
}
#Schrift {
position:absolute;
left:525px;
top:92px;
width:428px;
height:130px;
z-index:3;
}
.Stil5 {
font-size: xx-large;
font-style: italic;
}
#Logo {
position:absolute;
left:353px;
top:458px;
width:280px;
height:80;
z-index:4;
}
#Layer1 {
position:absolute;
left:24px;
top:15px;
width:52px;
height:37px;
z-index:5;
}
#Layer3 {
position:absolute;
left:21px;
top:16px;
width:72px;
height:63px;
z-index:5;
}
#Layer4 {
position:absolute;
left:31px;
top:16px;
width:52px;
height:69px;
z-index:5;
}
-->
</style>
</head>

<body>
<div id="Flagge"><img src="italienflagge.gif" width="100%" height="100%" /></div>
<embed src="la donnaemobile.mp3" width="32" height="32"></embed>
<div id="Stiefel"><img src="Landkarte-Schwarz.gif" width="100%" height="100%" border="0" /></div>
<div id="Schrift">
<h1 align="center" class="Stil5">Herzlich willkommen im Ristorante - Pizzeria Bel Paese&nbsp;<br />

in Aidlingen-Dachtel</h1>
</div>
<div id="Logo"><a href="Willkommen Seite.html"><img src="Logo Bel Paese.jpg" width="280" height="80" border="0" /></a></div>
</body>
</html>
 
Du hast für das Logo ja auch eine absolute Position angegeben.
Ich weiss jetzt nicht genau was du meinst. Wie soll es am dem Schriftzug angepasst werden?
 
Wollte das das Logo immer auf dem weißen Teil der Flagge bleibt und zwishen Festland und Sizilien. Und der Schreiftzug oben Rechtes neben dem Festland.
Am einfachsten Wäre es wenn ich es in meiner Auflösung erstellen könnte (1024x768) Und es ein Script geben würde wo er es automatisch an alle anderen Bildschirmauflösungen anpasst.
 
Machs doch nicht unnötig kompliziert.. o0
Erstell deine Webseite einfach auf 1024*768 oder etwas in die Richtung, mach nen annehmbaren Hintergrund und gut ist.. so würde ichs zumindest machen.
 
[o.0] schrieb:
Machs doch nicht unnötig kompliziert.. o0
Erstell deine Webseite einfach auf 1024*768 oder etwas in die Richtung, mach nen annehmbaren Hintergrund und gut ist.. so würde ichs zumindest machen.

Das hatte ich ja zuvor. Genau auf der Darstellung 1024x768. Aber dann habe ich von vielen Leuten gehört, die eine größere Auflösung haben, dass es scheixxe aussieht.

Wollte es daher so einstellen, das es bei jeder Bildschirmauflösung sich automatisch anpasst. Also nichts vershiebt oder ähnliches, einfach das es sich automatisch anpasst.
 
luke_maus schrieb:
Das hatte ich ja zuvor. Genau auf der Darstellung 1024x768. Aber dann habe ich von vielen Leuten gehört, die eine größere Auflösung haben, dass es scheixxe aussieht.

Hm ich glaub du du verstehst das falsch..

Schau dir zb mal shortnews an. (Hatte den Tab grade offen und die Seite ist so wie ich das meine)

Der Inhalt hat ne bestimmte Breite und ausenrum ist Hintergrund. Und wenn jemand ne höhere Auflösung hat hat er eben auch mehr Hintergrund, die Seite ansich bleibt völlig gleich.
 
[o.0] schrieb:
Hm ich glaub du du verstehst das falsch..

Schau dir zb mal shortnews an. (Hatte den Tab grade offen und die Seite ist so wie ich das meine)

Der Inhalt hat ne bestimmte Breite und ausenrum ist Hintergrund. Und wenn jemand ne höhere Auflösung hat hat er eben auch mehr Hintergrund, die Seite ansich bleibt völlig gleich.

Ok hab es jetzt verstanden. Sieht echt gut aus. Aber wie bekomm ich es hin das es auch in der Mitte bleibt???
Denn bei mir ist immer nur ein Rand unten und rechts, daher sieht es auch scheixxe aus.
 
luke_maus schrieb:
Ok hab es jetzt verstanden. Sieht echt gut aus. Aber wie bekomm ich es hin das es auch in der Mitte bleibt???
Denn bei mir ist immer nur ein Rand unten und rechts, daher sieht es auch scheixxe aus.

Hier mal ne kleine Anleitung wie du deinen Inhalt in die Mitte des Browsers bekommst (Mitte horizontal gesehen):

Mach den kompletten Inhalt in einen Container:

PHP:
<html>

<head>
...
</head>

  <body class="Inhalt">

    <div id="container">

        Hier kommt der Inhalt rein

    </div>

  </body>

</html>

Und dann in das Stylesheet das du hoffentlich verwendest ;):

PHP:
.Inhalt #container {
margin: 0 auto;
}

Hat zwar 10min gedauert bis ich das hinbekommen habe, aber so funktionierts =P
Getestet mit Firefox und Opera :)

mfg
 
[o.0] schrieb:
Hier mal ne kleine Anleitung wie du deinen Inhalt in die Mitte des Browsers bekommst (Mitte horizontal gesehen):

Mach den kompletten Inhalt in einen Container:

PHP:
<html>

<head>
...
</head>

  <body class="Inhalt">

    <div id="container">

        Hier kommt der Inhalt rein

    </div>

  </body>

</html>

Und dann in das Stylesheet das du hoffentlich verwendest ;):

PHP:
.Inhalt #container {
margin: 0 auto;
}

Hat zwar 10min gedauert bis ich das hinbekommen habe, aber so funktionierts =P
Getestet mit Firefox und Opera :)

mfg

Ich danke Dir für deine Hilfe. Aber leider ist das Thema zu lange her bei mir, kann dir nicht mehr folgen. Habe versucht mich bei self html durch zu lesen, kann aber nichts passendes finden.
Es wäre schöne wenn Du mir das mal anhand meines Quelltextes zeigen könntest, und die änderung am besten Rot gefärbt. Das wäre wunderbar. Danke schon mal. Zur Info die Website ist in einer Auflösung von 1024x768 erstellt worden und so sieht sie aus in 1280x800
http://www.bilder-hochladen.net/files/6rtt-1-jpg.html

Wie Du siehst ist der Hintergrund (schwarz) nur auf der rechten Seite, möchte es aber so wie du haben, links und rechts.



Hier der Quelltext:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body {
background-color: #000000;
}
#Flagge {
position:absolute;
left:0px;
top:0px;
width:1024px;
height:768px;
z-index:1;
}
#Layer2 {
position:absolute;
left:222px;
top:157px;
width:600px;
height:450px;
z-index:2;
}
#Stiefel {
position:absolute;
left:0px;
top:0;
width:1024px;
height:768px;
z-index:2;
}
#Schrift {
position:absolute;
left:525px;
top:92px;
width:428px;
height:130px;
z-index:3;
}
.Stil5 {
font-size: xx-large;
font-style: italic;
}
#Logo {
position:absolute;
left:353px;
top:458px;
width:280px;
height:80;
z-index:4;
}
#Layer1 {
position:absolute;
left:24px;
top:15px;
width:52px;
height:37px;
z-index:5;
}
#Layer3 {
position:absolute;
left:21px;
top:16px;
width:72px;
height:63px;
z-index:5;
}
#Layer4 {
position:absolute;
left:31px;
top:16px;
width:52px;
height:69px;
z-index:5;
}
-->
</style>
</head>

<body>
<div id="Flagge"><img src="italienflagge.gif" width="100%" height="100%" /></div>
<embed src="la donnaemobile.mp3" width="32" height="32"></embed>
<div id="Stiefel"><img src="Landkarte-Schwarz.gif" width="1024" height="768" border="0" /></div>
<div id="Schrift">
<h1 align="center" class="Stil5">Herzlich willkommen im Ristorante - Pizzeria Bel Paese&nbsp;<br />

in Aidlingen-Dachtel</h1>
</div>
<div id="Logo"><a href="Willkommen Seite.html"><img src="Logo Bel Paese.jpg" width="280" height="80" border="0" /></a></div>
</body>
</html>
 
Da du die Container absolut positioniert hast musste ich das alles ein bischen umbauen damit es so überhaupt geht.. aber so funktioniert es.

Hab mir einfach mal provisorische Bilder gebastelt um das zu testen, sieht ungefähr so dann aus:

http://666kb.com/i/ayvp2po68134b1ody.png

Ich hoff mal das ist so ok.

So Feinheiten wie Abstand Oben und die genaue positionierung der Elemente musst du eben noch selber machen (oder du gibst mir die Bilder =P^^).

So wie ich das jetzt gebastelt habe müsstest du eben noch aus der Karte von Italien und der Flagge ein Bild machen, das dann als Hintergrund wirkt.

Auserdem wärs vll ne gute Idee die Styles in nen externes Stylesheet zu packen, aber so funktionierts natürlich auch.

Die Seite ist jetzt wie gewünscht so das sich der Hintergrund an die Browserfläche anpasst.

Ich habe die Abmessungen des eingebetteten Soundfiles der Einfachheit halber auf 0px * 0px geändert, ich weiß allerdings nicht ob das dann noch geht weil ich noch nie Sound verwendet habe. Solltest du dir allerdings auch genau überlegen, ich persönlich hasse so Seiten einfach, ich höre beim Surfen eigene Musik da stört so was einfach nur gnadenlos.

Und sorry das ich die Änderungen nicht farbig markiere, aber so wäre irgendwie die hälfte rot o0^^

Naja hier der Code:

PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>

<style type="text/css">
<!--
body {
background-color: #000000;
}
#Layer2 {
position:absolute;
left:222px;
top:157px;
width:600px;
height:450px;
z-index:2;
}
#Schrift {
padding-left: 580px;
padding-top: 25px;
}
.Stil5 {
font-size: xx-large;
font-style: italic;
}
#Logo {
padding-left: 300px;
padding-top: 350px;
}
#Layer1 {
position:absolute;
left:24px;
top:15px;
width:52px;
height:37px;
z-index:5;
}
#Layer3 {
position:absolute;
left:21px;
top:16px;
width:72px;
height:63px;
z-index:5;
}
#Layer4 {
position:absolute;
left:31px;
top:16px;
width:52px;
height:69px;
z-index:5;
}
#Alles {
background-image:url(italienflagge.gif);
}
.Inhalt #Alles {
margin: 0 auto;
} 
-->
</style>

</head>

<body class="Inhalt">

<embed src="la donnaemobile.mp3" width="0" height="0"></embed>
    
	<div id="Alles" style="width: 1024px; height: 768px; margin-top: 15px;">
              
		<div id="Schrift">
			<h1 align="center" class="Stil5">Herzlich willkommen im<br />
            Ristorante - Pizzeria Bel Paese&nbsp;<br />
			in Aidlingen-Dachtel</h1>
		</div>
    
    	<div id="Logo">
        	<a href="Willkommen Seite.html"><img src="Logo Bel Paese.jpg" border="0" /></a>
        </div>
   
	</div>
    
</body>

</html>

Falls du fragen dazu hast, frag mich hier oder per PM.
 
Zuletzt bearbeitet:
Zurück
Oben