• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Website zentrieren

W

WeMa

Neues Mitglied
hallo,
ich weiss, dass zu diesem Thema schon viel geschriben wurde usw.
Das einzige Problem an den ganzen Sachen, die mir Google ausspuckt: ich versteh sie nicht ganz bzw. kann cih sie noch nicht ganz anwenden.

Mein konkretes Beispiel:

ich will diese Site http://kilian-photoart.net so einrichten, dass Sie sich immer automatisch zentriert. Aber wie mache ich das?

Kann mir vielleicht jemand helfen?
 
Also wenn ich es hier richtig gemacht habe:

HTML: 
<style type="text/css">
/*<![CDATA[*/
<!--

body {
        background-image: url(bg.jpg);
        background-repeat: no-repeat;
        background-color: #E0E0DD;
}

#test{
width:500px;
margin: 0 auto;
}
#apDiv4 {
        position:absolute;
        left:40px;
        top:169px;
        width:764px;
        height:364px;
        z-index:4;
        border:0px;
}
#apDiv1 {
        position:absolute;
        left:39px;
        top:136px;
        width:67px;
        height:27px;
        z-index:5;
        border:0px;
        font-size: 16pt;
        font-family: Verdana, Geneva, sans-serif;
}
#apDiv2 {
        position:absolute;
        left:740px;
        top:135px;
        width:63px;
        height:28px;
        z-index:6;
        border:0px;
        font-family: Verdana, Geneva, sans-serif;
        font-size: 16pt;
}
#apDiv3 {
        position:absolute;
        left:364px;
        top:547px;
        width:116px;
        height:25px;
        z-index:7;
        border:0px;
        font-size: 16pt;
        font-family: Verdana, Geneva, sans-serif;
}
a:link {
        color: #4E4E4C;
        text-decoration: none;
}
a:visited {
        text-decoration: none;
        color: #4E4E4C;
}
a:hover {
        text-decoration: none;
        color: #4E4E4C;
}
a:active {
        text-decoration: none;
        color: #4E4E4C;
}
body,td,th {
        font-family:  Geneva, sans-serif;
        color: #4E4E4C;
}
a {
        font-family: Geneva, sans-serif;
}

-->
/*]]>*/
</style>

<style type="text/css">
/*<![CDATA[*/
 body {
  background-color: #E0E0DD;
 }
/*]]>*/
</style>
</head>
<body>
<div id="test">
<div id="apDiv4"><img src="galleryinhalt.png" alt="gallery content" width="761" height="359" border="0" usemap="#gallery" /> <map name="gallery" id="gallery">
<area shape="rect" coords="34,65,165,288" href="fotokunst/index.html" target="_parent" alt="Fotokunst" />
<area shape="rect" coords="176,64,307,288" href="architecture/index.html" target="_parent" alt="Architecture" />
<area shape="rect" coords="317,65,450,288" href="friedhoefe/index.html" target="_parent" alt="Friedhöfe" />
<area shape="rect" coords="460,66,591,288" href="naturfotos/index.html" target="_parent" alt="Naturfotos" />
<area shape="rect" coords="602,64,734,292" href="schwarzweiss/index.html" target="_parent" alt="Schwarzweiss" /></map></div>
<div id="apDiv1"><a href="about.html">about</a></div>
<div id="apDiv2"><a href="gallery.html">gallery</a></div>
<div id="apDiv3"><a href="impressum.html">impressum</a></div>
</div>
</body>
</html>
Denn irgendwie funktioniert das nicht...
 
Steht da doch schon. Oder wohin meinst du?
Also ich habe das oben im header unter
HTML: 
#test{
width:500px;
margin: 0 auto;
}
 
Und für ältere Brower gibst du den Body noch einen Text-aligen-center, und in der äusersten Box wieder einen text-align-left um alles wieder grade zurücken :mrgreen:

zu den margin:auto;

lg.xooox
 
Ich möchte ja nicht meckern, aber die Website ist imemr noch nicht zentriert. Nur der Text darin :-)

HTML: 
<style type="text/css">
/*<![CDATA[*/
<!--

body {
        background-image: url(bg.jpg);
        background-repeat: no-repeat;
        background-color: #E0E0DD;
}
#test{
width:500px;
margin: 0 auto;
text-align: center;
}
#apDiv4 {
        position:absolute;
        left:40px;
        top:169px;
        width:764px;
        height:364px;
        z-index:4;
        border:0px;
}
#apDiv1 {
        position:absolute;
        left:39px;
        top:136px;
        width:67px;
        height:27px;
        z-index:5;
        border:0px;
        font-size: 16pt;
        font-family: Verdana, Geneva, sans-serif;
}
#apDiv2 {
        position:absolute;
        left:740px;
        top:135px;
        width:63px;
        height:28px;
        z-index:6;
        border:0px;
        font-family: Verdana, Geneva, sans-serif;
        font-size: 16pt;
}
#apDiv3 {
        position:absolute;
        left:364px;
        top:547px;
        width:116px;
        height:25px;
        z-index:7;
        border:0px;
        font-size: 16pt;
        font-family: Verdana, Geneva, sans-serif;
}
a:link {
        color: #4E4E4C;
        text-decoration: none;
}
a:visited {
        text-decoration: none;
        color: #4E4E4C;
}
a:hover {
        text-decoration: none;
        color: #4E4E4C;
}
a:active {
        text-decoration: none;
        color: #4E4E4C;
}
body,td,th {
        font-family:  Geneva, sans-serif;
        color: #4E4E4C;
}
a {
        font-family: Geneva, sans-serif;
}

-->
/*]]>*/
</style>

<style type="text/css">
/*<![CDATA[*/
 body {
  background-color: #E0E0DD;
 }
/*]]>*/
</style>
</head>
<body>
<div id="test">
<div id="apDiv4"><img src="galleryinhalt.png" alt="gallery content" width="761" height="359" border="0" usemap="#gallery" /> <map name="gallery" id="gallery">
<area shape="rect" coords="34,65,165,288" href="fotokunst/index.html" target="_parent" alt="Fotokunst" />
<area shape="rect" coords="176,64,307,288" href="architecture/index.html" target="_parent" alt="Architecture" />
<area shape="rect" coords="317,65,450,288" href="friedhoefe/index.html" target="_parent" alt="Friedhöfe" />
<area shape="rect" coords="460,66,591,288" href="naturfotos/index.html" target="_parent" alt="Naturfotos" />
<area shape="rect" coords="602,64,734,292" href="schwarzweiss/index.html" target="_parent" alt="Schwarzweiss" /></map></div>
<div id="apDiv1"><a href="about.html">about</a></div>
<div id="apDiv2"><a href="gallery.html">gallery</a></div>
<div id="apDiv3"><a href="impressum.html">impressum</a></div>
</div>
</body>
</html>
 
Eigentlich sollte sie aber zentriert sein :P

Liegt wahrscheinlich daran, dass du

position: absolute;

verwendest.

Wenn du es nicht unbedingt brauchst, nimm es raus.

Gruß
Toast
 
PHP: 
body 
{
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-color: #E0E0DD;
text-align: center;
}
#test{
width:500px;
margin: 0px auto;
text-align: left;
}

Erst mal das ganze so machen, dann mal testen und dich noch mal zu wort melden :mrgreen:
 
Eigentlich sollte sie aber zentriert sein :P

Liegt wahrscheinlich daran, dass du

position: absolute;

verwendest.

Wenn du es nicht unbedingt brauchst, nimm es raus.

Gruß
Toast
Zum Vergrößern anklicken....


Naja, wenn ich das weglasse würfelts mir halt alles schön durcheinander, weil ich damals eben die Site "ap Div basiert" programmiert habe. :-)

Sorry, dass ich mich ein bisschen dumm anstelle:oops:
 
Wenn du die Elemente von #test ausgehend, absolute positionieren willst muss #test ebenfalls position ungleich static haben (position: relative; reicht).
 
neuroleptika schrieb:
Wenn du die Elemente von #test ausgehend, absolute positionieren willst muss #test ebenfalls position ungleich static haben (position: relative; reicht).
Zum Vergrößern anklicken....

WOW. Ich hab zwar noch ein paar kleinere Probleme damit, aber du hast mich auf den richtigen Weg geschubst. Mehr will ich gar nicht. Vielen Dank dafür!!!
Und sollte es doch wieder erwarten noch probleme geben poste ich einfach wieder hier :-)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben