Green Webdesign

Das Problem kannst du auch lösen mit folgendem Code:

PHP: 
#main
{
   left:50%;
   margin-left:-500px;
   width:1000px;
}

so ist das auch zentriert.
Vielleicht nicht die schönste Lösung (margin:auto ist einfach dafür gedacht :p), aber es geht immerhin ;-)
 
dominicbauer schrieb:
Wtf?
und ja, das div hat ne breite zugewiesen bekommen.
ietester != ie?
Zum Vergrößern anklicken....

Ich weiß ja nicht wie dein Quelltext aussieht, aber ich vermute mal dir fehlt einfach der richtige Doctype.

Naruto123 schrieb:
Ja, das meine ich ja. Ich habe einen div um alle anderen divs, bei dem margin: 0px auto steht, aber wenn ich die Eigenschaft bei den anderen divs wegmache, dann bleibt es nicht zentriert, obwohl ein div da ist, der alle anderen divs umschließt und mittig zentrieren sollte..
Zum Vergrößern anklicken....

Evtl. auch hier siehe Doctype. Lad' die Seite nochmal hoch.


x3ntar schrieb:
Vielleicht nicht die schönste Lösung (margin:auto ist einfach dafür gedacht :p), aber es geht immerhin ;-)
Zum Vergrößern anklicken....

Wieso einfach wenns auf kompliziert geht, wa ;)
 
Zuletzt bearbeitet:
Füge immer eine DTD ganz oben ein undzwar folgende:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="https://www.w3.org/1999/xhtml" lang="de">

Hab's mal nochmal gemacht und jetzt das margin bei der Contentbox weggelassen und einen div um alle drum gemacht mit margin: 0px auto, aber die Contentbox ist jetzt ganz links...

Also muss da irgendetwas nicht stimmen. :D
 
Bei 100% hast du den gleichen Effekt wie jetzt auch: Die Box ist 100% breit, der Rand beträgt auf beiden Seiten also 0. Daher ist die Box auch nicht mittig ausgerichtet.
 
Aber wenn ich nicht 100% angebe, dann wäre die Breite des Headers doch nicht 100% groß auf dem Bild, oder doch?
 
Richtig :biggrin: Aber "margin:0 auto;" kannst du ja auch auf anderen Elementen anwenden, und "#page" weglassen.
 
Ich hab mal ne Erklärung gebastelt, die dir hoffentlich hilft.
(Falls an meiner Erklärung etwas falsch sein sollte, dann bitte sofort schreien oder gleich verbessern. Danke.)

Und jetzt die Erklärung:
Alle roten Umrandungen stellen eigene Div-Container dar.
Die Namen der Container sind die Beschriftungen.
z.B. der grüne div heißt in meinem Beispiel "Navi".
erklaerung-css.gif
 
Danke für die Nette Erklärung, also müsste ich den div nur um die Elemente machen, wo die Breite nicht bei 100% liegt, also wäre dies in meinem Fall nur der Header, weil nur bei dem die Breite bei 100% liegt.
Ich hab's richtig verstanden, oder? :D
 
Naruto123 schrieb:
also müsste ich den div nur um die Elemente machen, wo die Breite nicht bei 100% liegt, also wäre dies in meinem Fall nur der Header, weil nur bei dem die Breite bei 100% liegt.
Zum Vergrößern anklicken....

Bei allem außer dem Header :biggrin: Aber wie gesagt, du kannst "margin:0 auto;" auch direkt auf die Elemente anweden.
 
Renegade schrieb:
Bei allem außer dem Header :biggrin: Aber wie gesagt, du kannst "margin:0 auto;" auch direkt auf die Elemente anweden.
Zum Vergrößern anklicken....

Meine auch bei allem außer dem Header. :LOL: Habe mich nur etwas schlecht ausgedrückt. :D

Edit:
So habe es jetzt mal gemacht... ;)
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="https://www.w3.org/1999/xhtml" lang="de">

    <head>
        <title>2. Design Umsetzung</title>
        <link href="style.css" type="text/css" rel="stylesheet" />
    </head>
    
    <body>
        <div id="navigation-buttons">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Referenzen</a></li>
                <li><a href="#">Kontakt</a></li>
                <li><a href="#">Support</a></li>
            </ul>
        </div>
        <div id="navigation-linie">
        </div>
        <div id="header">
            <div id="header-inhalt">
                <h6>Lorem Ipsum</h6>
                <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
                sed diam nonumy eirmod tempor invidunt ut labore et 
                </p>
            </div>
        </div>
    <div id="page">
        <div id="content">
                <h2>
                Neuigkeiten
                </h2>
            <div id="content-inhalt">
                <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
                no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,     
                sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
                et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
                <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
                no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
                sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
                et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
                <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
                no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
                sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
                et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
            </div>
            <div id="content-inhalt-unten">
            </div>
        </div>
    </div>
    </body>

</html>

Code: 
* {
    margin: 0;
    padding: 0;
}

body { 
    background-color: #fff6bc;
    margin: auto;
}

#page {
    margin: 0px auto;
    width: 1000px;
}

#navigation-buttons li {
    background-color: #b9e14b;
    width: 125px;
    height: 35px;
    position: relative;
    margin-left: 5%;
    margin-top: 60px;
    line-height: 35px;
    text-align: center;
    float: left;
}

#navigation-buttons ul {
    list-style: none;
    font-family: Tahoma, Verdana, sans-serif;
    font-size: 0.8em;
}

#navigation-buttons a:link {
    text-decoration: none;
    color: #302d23;
}
#navigation-buttons a:hover {
    font-weight: bold;
    color: #302d23;
}

#navigation-buttons a {
    text-decoration: none;
    color: #302d23;
}

#navigation-linie {
    background-color: #b9e14b;
    width: 100%;
    height: 5px;
    clear:both;
}

#header {
    background-color: #302d23;
    height: 150px;
    width: 100%;
    clear: both;
}

#header-inhalt {
    position: absolute;
    background-color: #423f33;
    margin: 26px 0px 0px 10%;
    width: 359px;
    height: 95px;
    
}

#header-inhalt h6 {
    font-family: Arial, Verdana, sans-serif;
    font-size: 0.8em;
    font-style: normal;
    color: #fff5bc;
    padding: 12px 0px 0px 52px;
}

#header-inhalt p {
    font-family: Arial, Verdanan, sans-serif;
    font-size: 0.8em;
    color: #fff5bc;
    padding: 5px 15px 15px 30px;
}

#content {
    background-color: #9c6b43;
    width: 1000px;
}

h2 {
    padding: 20px 30px 20px 30px;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 0.8em;
    color: #fff5bc;
}

#content-inhalt {
    background-color: #9c6b43;
    width: 1000px;
    border-top-color: #69e8cb;
    border-top-width: 1px;
    border-top-style: solid;
    border-left: none;
    border-right: none;
    border-bottom-color: #69e8cb;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

#content-inhalt p {
    padding: 5px 30px 5px 30px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 0.8em;
    color: #fff5bc;
}

#content-inhalt-unten {
    width: 1000px;
    height: 52px;
}

Habe die Codes durch den Validator gejagt und der sagt, dass alles soweit richtig ist.
Aber gäbe es vielleicht doch noch Möglichkeiten den Code schlanker zu machen? :)
 
Zuletzt bearbeitet:
ich hätte noch einen Hinweis zur Barrierefreiheit.
Um die Seite auch für Screenreader optimal nutzbar zu machen, ist es von Vorteil, wenn zuerst der Inhalt steht und danach die Navi oder ähnliches.

Screenreader lesen auch gerne alt tags für bilder und title tags für links.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben