Webpage zentral einrichten (dreamweaver)

haifisch · 17.04.2008, 21:53

Hi zusammen,

Ich wuerde meine webpage (800px x 500px) gerne zentral auf dem bildschirm positionieren. Den gesamten Body horizontal zu positionieren ist ja recht einfach. Ich kann jedoch nicht herausfinden, wie ich das ganze auch vertikal zentral positionere!

Ueber Hilfe wuerde ich mich sehr freuen!

Dominik

koenixblau · 17.04.2008, 22:09

Beispielsweise mit folgendem:
http://www.intensivstation.ch/files/...es/temp11.html

haifisch · 17.04.2008, 22:47

funktioniert bei mir irgendwie nicht....arbeite mit einem mac

gibt es noch andere möglickeiten?

Singal · 17.04.2008, 23:11

Was funktioniert bei Dir bitte nicht?

Den Quelltext in Dreamweaver einzufügen oder die Darstellung im Browser?

Du musst natürlich ein paar Sachen an Deine Bedürfnisse anpassen, aber das sollte klar sein.

koenixblau · 17.04.2008, 23:17

Zitat:

Zitat von haifisch

funktioniert bei mir irgendwie nicht....arbeite mit einem mac

gibt es noch andere möglickeiten?

Hmm,
hatte es vor einiger Zeit im Safari erfolgreich getestet.

Nachteil das es als Betriebssystem das Fenster war und nicht die Dose.

Denke da kann ein Mac / Safari Benutzer mehr dazu sagen.

haifisch · 18.04.2008, 22:11

Also, ich würde gerne die folgenden Tabellen sowohl horizontal als auch vertikal zentrieren. Was muss ich dafür machen...???

<body>
<table width="800" height="30">
<tr>
<td> </td>
</tr>
</table>
<table width="800" height="400" border="2">
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<table width="800" height="20">
<tr>
<td> </td>
</tr>
</table>
</body>

Muss ich die Tabellen vorher verschmelzen? Wenn ja, wie mach ich das? Sorry, bin noch neu im webdesign....

Danke für eure Hilfe!
Dominik

P.S. Kann mir den Quelltext von dem Template nicht ansehen. Keine Ahnung warum.

Thomas · 18.04.2008, 22:30

Zitat:

Zitat von haifisch

P.S. Kann mir den Quelltext von dem Template nicht ansehen. Keine Ahnung warum.

dem kann man ganz leicht abhelfen

PHP-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>



<title>CSS TEMPLATE 11</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css"><!--

/* <![CDATA[ */    



/*



<rdf:RDF xmlns="http://web.resource.org/cc/"

    xmlns:dc="http://purl.org/dc/elements/1.1/"

    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">

<Work rdf:about="">

   <license rdf:resource="http://creativecommons.org/licenses/by/1.0/" />

</Work>



<License rdf:about="http://creativecommons.org/licenses/by/1.0/">

   <permits rdf:resource="http://web.resource.org/cc/Reproduction" />

   <permits rdf:resource="http://web.resource.org/cc/Distribution" />

   <requires rdf:resource="http://web.resource.org/cc/Notice" />

   <requires rdf:resource="http://web.resource.org/cc/Attribution" />

   <permits rdf:resource="http://web.resource.org/cc/DerivativeWorks" />

</License>



</rdf:RDF>



*/



/*  body und schrift deffinitionen */





body {

  background-color: #e1ddd9;

  font-size: 12px;

  font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;

  color:#564b47;  

  padding:0px;

  margin:0px;

}

#inhalt {     

  position:absolute;

  height:200px; 

  width:400px;

  margin:-100px 0px 0px -200px;

  top: 50%; 

  left: 50%;



  text-align: left;

  padding: 0px;

  background-color: #f5f5f5;

  border: 1px dotted #000000;

  overflow: auto;

}

p, h1 {

margin: 0px; 

padding: 10px; 

}

h1 {

font-size: 11px;

text-transform:uppercase;

text-align: right;

color: #564b47;

background-color: #90897a;

}



a { 

color: #ff66cc;

font-size: 11px;

background-color:transparent;

text-decoration: none; 

}

 /* ]]> */    

--></style>

</head>

<body>

<div id="inhalt">

<p align="right">

<a href="http://www.intensivstation.ch"><img src="css_logo.gif" alt="" width="414" height="56" border="0" /></a></p>

<h1>service for a better code</h1>



<p><b>zentrieren</b><br /><br />

Dieser Bereich soll horizontal und vertikal zentriert werden.<br />

Der Text bleibt linksb&uuml;ndig.<br />

<b>ie mac mach da nicht mit </b><br />

<a href="/templates/">&#171;= mehr TEMPLATES</a>

</p>

<p><img src="xhtml10.gif" alt="" width="80" height="15" border="0"/><br/>

<img src="css.gif" alt="css" width="80" height="15" border="0"/><br />

<a href="http://www.monorom.to"><img src="monorom.gif" alt="monorom" width="80" height="15" border="0"/></a><br />

                <!-- Creative Commons License -->



                <a rel="license" href="http://creativecommons.org/licenses/by/1.0/"><img src="cc.gif" alt="Creative Commons License" width="80" height="15" border="0"/></a><br />

This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/1.0/">Creative Commons License</a>.

<!-- /Creative Commons License --></p>

</div>



</body>

</html>

biddeschön ...

AbsBeginner · 18.04.2008, 22:52

Danke für die schnelle Antwort, aber das verwirrt mich jetzt nur noch mehr! Vielleicht kann mir jemand sagen, wie ich den code den ich in meiner letzten Antwort gepostet habe verändern muss, damit das alles schön zentral ist.

Wäre echt super - Danke

Ich habe mich jetzt auch mal weiter schlau gemacht und es soll wohl möglich sein, eine tabelle 100% x 100% zu erstellen und darin wiederum meine gewünschten Tabellen zu zentrieren.

Habe das mal so probiert:

<table width="100%" height="100%" border="1">
<tr>
<td> </td>
</tr>
</table>

In der horizontalen Linie ist die Tabelle 100%, aber vertikal nicht! Was mache ich jetzt hier falsch????

koenixblau · 18.04.2008, 22:59

Für was auch immer du das nutzen möchtest,
nutze Tabellen entsprechend ihrer Funktion.

Ein Webseiten-Layout sollte mit <div> erstellt werden.

Dennoch das folgende, "bescheidene", Beispiel.
Eine Tabelle mit einer Zeile und 3 Spalten:

HTML-Code:

<table width="100%" height="100%" border="1">
  <tr>
    <td align="center" valign="middle"><table width="560" border="1">
      <tr>
        <td>1. Spalte</td>
        <td>2. Spalte</td>
        <td>3. Spalte</td>
      </tr>
    </table></td>
  </tr>
</table>

AbsBeginner · 18.04.2008, 23:38

Warum auch immer - endlich hat es auch mit <div> geklappt. Meine page sieht jetzt wie folgt aus...

<title>Untitled Document</title>
<style type="text/css">

</style>
</head>

<body>
<div id="Layer1"></div>
</body>
</html>

Jetzt die folgende Frage: Wie füge ich weitere Layer in diesen Layer ein und sichere ab, dass diese auch mit dem Hauptlayer verbunden sind? Also dass in jedem Browser und bei jeder Einstellung die Layer an ihrem Platz bleiben?

Sorry für die vielleicht einfachen Fragen, aber irgendwann muss man ja mal anfangen.

Danke!

koenixblau · 18.04.2008, 23:49

Ich bitte dich den obigen geposteten Quelltext (v. Thomas) nochmal anzusehen.

Unter anderen bietet die Seite http://www.intensivstation.ch/ noch weitere nützliche Dinge.

Desweiteren " http://www.traum-projekt.com/forum/100-css/ " nicht vergessen.

Grobmodell:

HTML-Code:

<div>
<div>Das ist der eingefügte Div</div>
</div>

In dem Div wurde ein weiteres Div eingestellt, per CSS weist du dann weitere Eigenschaften für Größe etc. zu.

EDIT:
http://www.thestyleworks.de/index.shtml
http://www.andreas-kalt.de/
& Co. sind ebenfalls zu empfehlen.

AbsBeginner · 19.04.2008, 00:04

ich danke dir...hat super geklappt!

Ist es ratsam eine tabelle in den div einzufügen oder sollte ich alles mit layern machen.
Also ich meine: ich möchte mittig in den hauptlayer links ein profilfoto und rechts eine kurzbiographie einfügen. Deshalb: Eher eine Tabelle mit zwei Spalten oder zwei seperate Layer.

Vielen, vielen Dank für all die ratschläge hier..

Dominik

Singal · 19.04.2008, 00:06

Schau Dir mal diesen Thread an.

AbsBeginner · 19.04.2008, 00:13

funktioniert nicht...

Singal · 19.04.2008, 00:14

WAS funktioniert nicht?!

Webpage zentral einrichten (dreamweaver)

gähn

Gesagt - getan

Webpage zentral einrichten (dreamweaver)

*gähn*

Gesagt - getan

gähn