CSS simples Design

M

Milbex

0
Hallo Community,

ich habe ein Problem mit dem Design meiner Website. Ich möchte ein eigentlich simples Design haben. es soll oben etwa 240px und an den Seiten jeweils 10px Abstand haben. Nun ich bin zwar kein Meister des Webdesigns mit HTML und CSS aber ich würde mich als geübt bezeichnen. Ich stehe jetzt aber total auf dem Schlauch und weiß nicht weiter. Ich möchte, dass die #content div bis ganz nach unten geht.

meine Code:
index.html
HTML: 
<html>
<head>
    <title>WEB DESIGN</title>
    <link href="style.css" type="text/css" rel="stylesheet" />
</head>

<body>
<div id="asdf">
</div>

<center>
<div id="content">
<h1>Herzlich Willkommen</h1>
<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. 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. 
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
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. 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. 
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
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. 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. 
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
</p>
</div>
</center>

</body>
</html>
style.css
Code: 
*{
    margin: 0;
    padding: 0;
}

body
{
    background-image: url(bilder/lsrs.gif);
    background-repeat: repeat-x;
    background-color: #3867FF;
}

#content
{
    width: 98%;
    background-color: white;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    margin-top: 240px;
}

Danke =)

mit freundlichen Grüßen
Milbex
 
re:

Genau da liegt mein Problem. Wenn ich ein height: 100%; mache, dann geht die Höhe des #content div über die Größe des Bildschirms und ich muss scrollen. Wenn ich das ganze mit Pixeln machen würde, dann würde es zwar auf meinen Monitor passen, aber woher weiß ich, welche AUflösung der Client nachher hat...
 
Du könntest eventuell mittels Javascript die screen.height abfragen und dann entsprechende Platzhalter im HTML/CSS-Source ersetzen.
 
Ich würde eher das margin-top von der height abziehen, da ja für die wirkliche Höhe alle Werte summiert werden (margin+border+padding+height = outerHeight). Also müsste die height(innerHeight) mit 73% angegeben werden.

Und als Info:
Der center-Tag ist in der HTML 4.01 Spezifikation deprecated.
 
@BasicAvid es hat funktioniert. Nun habe ich das gewünschte Design. Könntest du mir erklären wie du auf die 73% kommst, da ich ja die margin-top in Pixeln angegeben habe, ist es auf jedem Monitor anders.
 
Also, ich zeigs Dir mal an einem Beispiel:

HTML: 
<html>
    <head>
        <title>Box model</title>
        <style type="text/css">
            .wrapperBox,
            .wrapper {
                width: 600px;
                margin: auto 0;
                border: 1px solid #000000;
                float: left;
            }
                        
            .left,
            .right {
                width: 300px;
                height: 300px;
                border: 1px solid #8f8f8f;
                margin: 5px;
                padding: 10px;
                float: left;
            }
            
            .left {
                background-color: #3c77c2;
            }
            .right {
                background-color: #1460c2;
            }
            
            .wrapperBox .left,
            .wrapperBox .right {
                width: 268px;
            }
            
        </style>
    </head>
    <body>
        <div class="wrapper">
            <p>Beide Div-Container haben eine width von 300px, ein margin von 5px, einen border mit 1px und ein padding mit 10px. Der äußere Div-Container hat eine width von 600px. Und da im box model alle Attribute die sich auf die Größe auswirken addiert werden und sich somit die wirkliche Breite/Höhe ergibt, kommen wir auf eine wirklich width von 332px.</p>
            <div class="left">
                Ich bin lefti, habe ein margin, border und padding und dachte ich mach mich mal mit meinem Bruder righti hier breit.
            </div>
            <div class="right">
                Tja, lefti meinte ich hätte noch platz dort oben, aber ich hab ja auch die gleichen Stylesheets wie mein Bruder.
            </div>
        </div>
        <div class="wrapperBox">
            <p>Hier wurden das margin, der border und das padding (für die width zählen natürlich nur die left & right Werte von margin, border und padding) von der width, in diesem Fall 300px abgezogen, was eine width von 268px ergibt.</p>
            <p>Hier nochmal die Berechnung:<br />
            width(die die der Div-Container kriegen muss) = width(die der Div-Container haben soll) - (margin-left + margin-right + border-left + border-right + padding-left + padding-right)
            <div class="left">
                Jetzt können wir es uns hier nebeneinander breit machen.
            </div>
            <div class="right">
                Ja, und nur weil wir margin, border, padding und width addiert haben, und gesehen haben dass wir die width anpassen müssen.
            </div>
        </div>
    </body>
</html>
Falls das nicht reicht oder zu umständlich erklärt ist, hier der Link zu selfhtml
 
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben