Dreamweaver CS3 Seite Zentrieren. @ tutorials.de: Tutorials, Forum & Hilfe

eisbaerle6 · 25.06.07 13:18

Hallo Leute,

ich bin absoluter Nobie was Dreamweaver angeht.
Hab ab und zu mal mit Dreamweaver 8 rumgebastelt und hab mir jetzt das neue besorgt, weil ich mich Selbständig machen will und Webseiten auch anbieten will.

Meine Frage.
Ich habe eine Seite erstellt. damit es in der mitte ist, habe ich links, rechts, oben und unten eine Frameseite gemacht. wenn ich es bei mir im Explorer ansehe passt alles wunderbar aber bei meinem Kumpel nicht der muss hoch und rüber scrollen. das liegt bestimmt an der Auflösung. was mach ich jetzt

2. Frage:
Ich möchte zwei verschiedene Linkfarben haben. für die Links weiß und die Emailadresse blau. Ist ja eigentlich ganz einfach möchte aber das die eine rollover mit schwarz ist und das andere mit hellgrau. bei mir kann ich immer nur eins machen. die links haben immer die gleichen farben.

3. Frage:
Wenn ich meine Seite im Opera öffne, dann passt alles bis auf meine überschrift, die is wo anderst. was kann ich da machen

Hier meine Codes

HTML-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>Gasthof Kreuz Rainau-Buch</title>
<style type="text/css">
<!--
body {
	background-image: url(../Images/Hintergrund-neu.jpg);
	background-repeat: no-repeat;
}
#apDiv1 {
	position:absolute;
	left:18px;
	top:153px;
	width:327px;
	height:150px;
	z-index:1;
}
.Stil1 {
	font-size: 80px;
	color: #FFFFFF;
}
.Stil2 {
	font-size: 30px
}
.Stil3 {
	font-size: 50px
}
#apDiv2 {
	position:absolute;
	left:16px;
	top:330px;
	width:155px;
	height:176px;
	z-index:2;
}
.Stil4 {
	font-size: 18px;
	color: #FFFFFF;
}
#apDiv3 {
	position:absolute;
	left:16px;
	top:565px;
	width:265px;
	height:88px;
	z-index:3;
}
#apDiv4 {
	position:absolute;
	left:592px;
	top:185px;
	width:376px;
	height:130px;
	z-index:4;
}
#apDiv5 {
	position:absolute;
	left:514px;
	top:79px;
	width:226px;
	height:149px;
	z-index:5;
}
#apDiv6 {
	position:absolute;
	left:590px;
	top:344px;
	width:281px;
	height:261px;
	z-index:5;
}
#apDiv7 {
	position:absolute;
	left:232px;
	top:342px;
	width:332px;
	height:228px;
	z-index:6;
}
.Stil5 {
	font-size: 24px
}
#apDiv8 {
	position:absolute;
	left:18px;
	top:14px;
	width:793px;
	height:122px;
	z-index:7;
}
#apDiv9 {
	position:absolute;
	left:846px;
	top:14px;
	width:122px;
	height:173px;
	z-index:8;
}
a:link {
	color: #FFFFFF;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #FFFFFF;
}
a:hover {
	text-decoration: none;
	color: #CCCCCC;
}
a:active {
	text-decoration: none;
	color: #CCCCCC;
}
a {
	font-size: 18px;
}
-->
</style></head>

<body>
<div class="Stil1" id="apDiv1">
  <p class="Stil3">Willkommen</p>
  <p class="Stil2">in Rainau Buch</p>
</div>
<div class="Stil4" id="apDiv2">
  <p><a href="HomeFrame.html">Home</a></p>
  <p><a href="&Uuml;bernachtungen.html">&Uuml;bernachtung</a></p>
  <p><a href="Anreiseplan.html">Anreiseplan</a><a href="Anreiseplan.html"></a></p>
  <p><a href="Impressum.html">Impressum</a></p>
</div>
<div id="apDiv3"><img src="../Images/Image-Tasse.jpg" alt="Tasse" width="80" height="80" /> <img src="../Images/Image-Teller.jpg" alt="Teller" width="80" height="80" /> <img src="../Images/Image-Bett.jpg" alt="Bett" width="80" height="80" /></div>
<div id="apDiv4"><a href="HomeFrame.html"><img src="../Images/Gasthof-Kreuz-Logo-Neu.jpg" alt="Gasthof Kreuz" width="375" height="143" border="0" /></a></div>
<div id="apDiv6"><img src="../Images/Kreuz-Buch-Gasthof.jpg" alt="Gasthof" width="378" height="280" border="1" /></div>
<div id="apDiv7">
  <p align="right" class="Stil5">Gutb&uuml;rgerliche K&uuml;che Nebenzimmer<br />
    Super Hausmacher Vesper<br />
    Ideale Rastst&auml;tte f&uuml;r Ausfl&uuml;gler<br />
  (600 m vom Stausee)</p>
  <p align="right" class="Stil5">am Limes-Rundwanderweg</p>
</div>
<div id="apDiv9">
  <div align="right"><img src="../Images/Holzbogen-klein.jpg" alt="Holzbogen" width="112" height="161" border="1" /></div>
</div>
<div id="apDiv8">
  <div align="left"><img src="../Images/Biergarten.jpg" alt="Biergarten" width="150" height="111" border="1" /> <img src="../Images/Schwein-klein.jpg" alt="Schwein" width="150" height="113" border="1" /> <img src="../Images/Biergarten-2-klein.jpg" alt="Biergarten" width="150" height="113" border="1" /> <img src="../Images/Betten.jpg" alt="Betten" width="162" height="113" border="1" /> <img src="../Images/Biergarten-3-klein.jpg" alt="Biergarten2" width="150" height="113" border="1" /></div>
</div>
</body>
</html>

Danke schon im voraus.

Maik · 25.06.07 13:33

Hi!

1.) Ein Frameset kann ich hier nirgends entdecken, aber die horizontale Zentrierung nimmst du in deinem Fall folgendermaßen vor:

Code :

#wrapper {
position: absolute;
left: 50%;
width: 970px;
margin-left: -485px; /* negative Hälfte von width:970px */
top: 0;
}

Code :

<body>
        <div id="wrapper">
                <!-- Hier folgt der Bestand -->
        </div>
</body>

2.) Unterschiedliche Linkfarben innerhalb einer Seite lassen sich mit Hilfe der CSS-Klassen einrichten:

Code :

a.lnk:link, a.lnk:visited {
        color: #FFFFFF;
        text-decoration: none;
}
a.lnk:hover {
        text-decoration: none;
        color: #CCCCCC;
}
a.lnk:active {
        text-decoration: none;
        color: #CCCCCC;
}
 
a.email:link, a.email:visited {
        color: blue;
        text-decoration: none;
}
a.email:hover {
        text-decoration: none;
        color: black;
}
a.email:active {
        text-decoration: none;
        color: black;
}

Code :

1 2	<a href="#" class="lnk">...</a> <a href="#" class="email">...</a>

3.) Die Überschrift (Willkommen in Rainau Buch) kann ich derzeit in keinem Browser entdecken. Überprüfe daher mal die Positionsangaben und Schichtpositionierungen (z-index), denn vermutlich wird sie von einer anderen DIV-Ebene überdeckt.

eisbaerle6 · 25.06.07 20:26

Hey, danke für deine Schnelle Antwort!

Ich hab bischen rumprobiert, weiß aber nicht genau wo ich das einfügen muss.
Bin Designer und mit code eingaben muss ich mich noch sehr üben.
Wäre echt super wenn du mir da vielleicht nochmal helfen könntest.

Bin aber lernfähig

Maik · 25.06.07 20:31

Ich poste dir mal den vollständigen Quellcode und markiere die relevanten Stellen fett

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>Gasthof Kreuz Rainau-Buch</title>
<style type="text/css">
<!--
body {
        background-image: url(../Images/Hintergrund-neu.jpg);
        background-repeat: no-repeat;
}
 
[b]#wrapper {
position: absolute;
left: 50%;
width: 970px;
margin-left: -485px;
top: 0;
}[/b]
 
#apDiv1 {
        position:absolute;
        left:18px;
        top:153px;
        width:327px;
        height:150px;
        z-index:10;
}
.Stil1 {
        font-size: 80px;
        color: #FFFFFF;
}
.Stil2 {
        font-size: 30px
}
.Stil3 {
        font-size: 50px
}
#apDiv2 {
        position:absolute;
        left:16px;
        top:330px;
        width:155px;
        height:176px;
        z-index:2;
}
.Stil4 {
        font-size: 18px;
        color: #FFFFFF;
}
#apDiv3 {
        position:absolute;
        left:16px;
        top:565px;
        width:265px;
        height:88px;
        z-index:3;
}
#apDiv4 {
        position:absolute;
        left:592px;
        top:185px;
        width:376px;
        height:130px;
        z-index:4;
}
#apDiv5 {
        position:absolute;
        left:514px;
        top:79px;
        width:226px;
        height:149px;
        z-index:5;
}
#apDiv6 {
        position:absolute;
        left:590px;
        top:344px;
        width:281px;
        height:261px;
        z-index:5;
}
#apDiv7 {
        position:absolute;
        left:232px;
        top:342px;
        width:332px;
        height:228px;
        z-index:6;
}
.Stil5 {
        font-size: 24px
}
#apDiv8 {
        position:absolute;
        left:18px;
        top:14px;
        width:793px;
        height:122px;
        z-index:7;
}
#apDiv9 {
        position:absolute;
        left:846px;
        top:14px;
        width:122px;
        height:173px;
        z-index:8;
}
[b]a.lnk:link,a.lnk:visited {
        color: #FFFFFF;
        text-decoration: none;
}
a.lnk:hover {
        text-decoration: none;
        color: #CCCCCC;
}
a.lnk:active {
        text-decoration: none;
        color: #CCCCCC;
}
 
a.email:link,a.email:visited {
        color: blue;
        text-decoration: none;
}
a.email:hover {
        text-decoration: none;
        color: black;
}
a.email:active {
        text-decoration: none;
        color: black;
}[/b]
a {
        font-size: 18px;
}
-->
</style></head>
 
<body>
[b]<div id="wrapper">[/b]
<div class="Stil1" id="apDiv1">
  <p class="Stil3">Willkommen</p>
  <p class="Stil2">in Rainau Buch</p>
</div>
<div class="Stil4" id="apDiv2">
  <p><a href="HomeFrame.html" [b]class="lnk"[/b]>Home</a></p>
  <p><a href="Übernachtungen.html" [b]class="lnk"[/b]>Übernachtung</a></p>
  <p><a href="Anreiseplan.html" [b]class="lnk"[/b]>Anreiseplan</a><a href="Anreiseplan.html"></a></p>
  <p><a href="Impressum.html" [b]class="lnk"[/b]>Impressum</a></p>
</div>
<div id="apDiv3"><img src="../Images/Image-Tasse.jpg" alt="Tasse" width="80" height="80" /> <img src="../Images/Image-Teller.jpg" alt="Teller" width="80" height="80" /> <img src="../Images/Image-Bett.jpg" alt="Bett" width="80" height="80" /></div>
<div id="apDiv4"><a href="HomeFrame.html"><img src="../Images/Gasthof-Kreuz-Logo-Neu.jpg" alt="Gasthof Kreuz" width="375" height="143" border="0" /></a></div>
<div id="apDiv6"><img src="../Images/Kreuz-Buch-Gasthof.jpg" alt="Gasthof" width="378" height="280" border="1" /></div>
<div id="apDiv7">
  <p align="right" class="Stil5">Gutbürgerliche Küche Nebenzimmer<br />
    Super Hausmacher Vesper<br />
    Ideale Raststätte für Ausflügler<br />
  (600 m vom Stausee)</p>
  <p align="right" class="Stil5">am Limes-Rundwanderweg</p>
</div>
<div id="apDiv9">
  <div align="right"><img src="../Images/Holzbogen-klein.jpg" alt="Holzbogen" width="112" height="161" border="1" /></div>
</div>
<div id="apDiv8">
  <div align="left"><img src="../Images/Biergarten.jpg" alt="Biergarten" width="150" height="111" border="1" /> <img src="../Images/Schwein-klein.jpg" alt="Schwein" width="150" height="113" border="1" /> <img src="../Images/Biergarten-2-klein.jpg" alt="Biergarten" width="150" height="113" border="1" /> <img src="../Images/Betten.jpg" alt="Betten" width="162" height="113" border="1" /> <img src="../Images/Biergarten-3-klein.jpg" alt="Biergarten2" width="150" height="113" border="1" /></div>
</div>
[b]</div><!-- END #wrapper -->[/b]
</body>
</html>

eisbaerle6 · 25.06.07 22:09

Hey, das klappt ja super.

hab das jetzt auch um einiges besser verstanden.

Es ist jetzt alles exakt in der mitte aber mein hintergrundbild ist immer noch an der gleichen stelle. was mach ich blos Falsch?

Maik · 25.06.07 22:13

Positionier das Hintergrundbild mit Hilfe der CSS-Eigenschaft background-position im Anzeigebereich des Elements:

Code :

body {
        background-image: url(../Images/Hintergrund-neu.jpg);
        background-repeat: no-repeat;
        [b]background-position: center top;[/b]
}

eisbaerle6 · 25.06.07 22:46

Hammer, das klapt ja.

Jetz müsste ich nurnoch die seite in der Höhe in der mitte sein.
hab jetzt die seite links rechts in der Mitte aber oben unten nicht.

// EDIT

habs schon muss ja nur
background-position:center;
eingeben, aber jetzt sind meine anderen dinge nicht in der mitte

Maik · 25.06.07 22:54

Code :

body {
        background-image: url(../Images/Hintergrund-neu.jpg);
        background-repeat: no-repeat;
        [b]background-position: center;[/b]
}
 
#wrapper {
position: absolute;
left: 50%;
width: 970px;
margin-left: -485px; /* negative Hälfte von width:970px */
[b]top: 50%;
height: 660px;
margin-top: -330px;[/b] /* negative Hälfte von height:660px */
}

eisbaerle6 · 25.06.07 23:18

Danke, ich weiß nicht wie ich das wieder gut machen kann.

das hätte ich nie hinbekommen. Vielen lieben Dank.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Dreamweaver mainframe zentrieren

Seite zentrieren

Seite zentrieren

Seite im Browser zentrieren

Seite zentrieren

E-Mail:

Abonnieren Abbestellen