Green Webdesign

Naruto123 · 2 Mai 2010

x3ntar schrieb:
mach doch bei deinem header-div n margin-top von 135px

Jetzt habe ich das Problem, dass die Buttons unter der Trennlinie sind und ich die irgendwie nicht hochbekomme. Schon mit margin probiert und die Buttons bleiben unterhalb, obwohl die divs für die Buttons im HTML Dokument vor den divs der Trennlinie kommt.

Killerbear · 2 Mai 2010

schonmal
clear: both;

probiert?

Naruto123 · 2 Mai 2010

Jetzt ist es nicht mehr so übereinander, aber auch hier ist der Button leider wieder unter der Trennlinie. Aber vielen dank für eure Vorschläge!

Killerbear · 2 Mai 2010

ich hab deine css um ein clear:both erweitert
und schon gehts:

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

Naruto123 · 2 Mai 2010

Jetzt bin ich fast schon fertig und will diese Trennlinien in der Contentbox machen, aber die untere Linie will nicht so wie ich will...

Die Farbe von der unteren Linie ist zu dunkel und außerdem sieht das wie ein Kasten aus.
Habe dafür die hr-Tags verwendet.

Hier könnt ihr die Seite sehen:
https://deevil.funpic.de

Und hier mal die Codes:

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="#">Home</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</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="content">
            <p>
                <span id="content-header">
                Neuigkeiten
                </span>
            </p>
            <hr />
            <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>
            <span id="content-line-bottom">
                <hr />
            </span
        </div>
    </body>

</html>

Code:

* {
    margin: 0;
    padding: 0;
}
body { 
    background-color: #fff6bc;
}

#navigation-buttons li {
    background-color: #b9e14b;
    width: 125px;
    height: 35px;
    margin-left: 5%;
    margin-top: 60px;
    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%;
    margin-top: 0px;
    clear: both;
}

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

#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;
    margin: 0px auto;
}

#content-header {
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 0.8em;
    color: #fff5bc;
}

#content p {
    padding: 20px 30px 20px 30px;
}

#content hr {
    color: #69e8cc;
}

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

#content-line-bottom hr {
    padding-bottom: 60px;
    margin-top: 30px;
}

x3ntar · 3 Mai 2010

Ich hätte das anders gelöst.
Mach einen Maindiv für die Überschrift,
dann einen Div darin für den ganzen Text mit border-top und border-bottom. Das find ich persönlich viel sinniger

topfkanne · 4 Mai 2010

Naruto123 schrieb:
Die Farbe von der unteren Linie ist zu dunkel

Ein hr-Tag besteht im Grunde aus einer oberen und einer unteren Rahmenlinie. Wenn du nur color vergibst, bleibt sie farblich trotzdem abgestuft und 2px hoch.

Achso, die untere Linie hat übrigens die selbe Farbe wie die obige. Das dir die Farben unterschiedlich vorkommen liegt an den verschiedenen Umgebungsfarben welche die beiden Linien haben. Die untere grenzt an den hellen Hintergrund.

|Die obere Abbildung ist eine Nahaufnahme deiner jetzigen Linien. Die rechte ist dabei die untere. Die untere Abb. zeigt die durch verschiedene Umgebungsfarben entstehende, unterschiedliche Farbwirkung einer Farbe.

Naruto123 schrieb:
und außerdem sieht das wie ein Kasten aus.

Das liegt am padding-bottom was du vergessen hast. Im Box-Modell ist padding gleich der innere Abstand und margin der äußere. Dein Problem sollte jetzt also selbsterklärend sein

Naruto123 · 4 Mai 2010

Wollte erstmal die Methode von x3ntar probieren, aber ich hab's nicht hinbekommen.

Hier mal die Seite:
https://deevil.funpic.de

Und hier die Codes:

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="#">Home</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</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="content">
            <div id="content-header">
                <p>
                Neuigkeiten
                </p>
            </div>
            <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>
    </body>

</html>

Code:

* {
    margin: 0;
    padding: 0;
}
body { 
    background-color: #fff6bc;
}

#navigation-buttons li {
    background-color: #b9e14b;
    width: 125px;
    height: 35px;
    margin-left: 5%;
    margin-top: 60px;
    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%;
    margin-top: 0px;
    clear: both;
}

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

#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;
    margin: 0px auto;
}

#content-header {
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 0.8em;
    color: #fff5bc;
}

#content p {
    padding: 20px 30px 20px 30px;
}

#content-inhalt {
    background-color: #9c6b43;
    width: 1000px;
    margin: 0px auto;
    border-top-color: #69e8cb;
    border-top-width: 1px;
    border-left: none;
    border-right: none;
}

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

Die Border werden nicht angezeigt... Was habe ich falsch gemacht?

Leuchte84 · 4 Mai 2010

Da fehlt noch ein

HTML:

border-top-style: solid;

bzw. was du für einen "Style" haben willst

topfkanne · 5 Mai 2010

Kurze Schreibweise übrigens z.B: border-top:1px #000 solid

Anstelle von:

HTML:

<div id="content-header">
<p>Neuigkeiten</p>
</div>

geht auch:

HTML:

<h2>Neuigkeiten</h2>

Und die CSS nennst du einfach von #content-header in h2 um.

Der Vorteil darin ist, dass diese Schreibweise semantischer ist und weniger Quelltext benötigt.

Naruto123 · 5 Mai 2010

Danke für die Tipps mit dem border-style und h2. Habe sie auch schnell mal umgesetzt, aber jetzt habe ich das Problem, dass ich die kleine Box im Header nicht nach unten verschieben kann. Wenn ich das mit margin machen will, dann bewegt sich der ganze Header Bereich mit und auch alles was darunter ist.
Genauso bei den Buttons. Wenn ich die Schrift darin mit margin verschieben will, dann bewegt sich alles mit und mit padding wird der Button von der Größe her größer...

https://deevil.funpic.de

topfkanne · 5 Mai 2010

Zur Änderung: Den Div um die h2-Headline kannst du dir auch noch sparen. Die Eigenschaften des Div's kannst du auch dem h2-Tag zuweisen.

Les dir bitte nochmal etwas über's Box-Modell durch, dann löst sich die Frage mit den Abständen von selbst und du vermeidest evtl. weitere Fragen die sich mit diesem Modell klären lassen. Ist eben Grundlage

Kleiner Tip aber, der dort nicht zu finden ist: Wenn du eine Box mit fester Höhe hast und in dieser einen – einzeiligen – Text vertikal zentrieren möchtest, dann brauchst du dafür keinen inneren Abstand (padding) zu vergeben, sondern kannst das ganze auch mit line-height:(Höhe der Box) lösen.

Übrigens solltest du, wie hier glaube schon vorgeschlagen wurde, einen umschließenden DIV (Container...) mit fester Breite und gewünschter Zentrierung verwenden, welcher die gesamte Seite beinhaltet. Damit hast du deine Navi, den Header und den Content auf einen Schlag an der gewünschten horizontalen Position – also auch zentriert.

Wenn du das getan hast, solltest du den äußeren Abstand (margin) der List-Items im Menü anstatt von links eher nach rechts setzen. Damit hast du das Menü wie im Screen auch linksbündig, ohne – wenn du das margin von rechts setzt – später die Liste nochmal nach links anpassen zu müssen.

Den Infokasten sowie das Logo würde ich mit absoluter Positionierung lösen.

Wenn du meine Vorschläge umgesetzt hast, sollte es dem Screen eigentlich schon sehr nahe kommen.

Dann kann man sich ja noch an's verbessern des Codes ansich machen

Naruto123 · 5 Mai 2010

Danke für die Tipps.

Habe sie auch mal umgesetzt und mir das Boxmodell mal genauer angeschaut, aber es macht bei mir keinen Unterschied, ob ein div um alle anderen divs ist oder nicht. Wenn ich das margin: 0px auto; wegmache bei dem content-div, dann bleibt der div nicht mehr mittig.

Habe auch was davon gehört, dass wenn man das alles mit einem div mittig positionieren will, man auch noch bestimmte Sachen für den IE machen muss...

dominicbauer · 5 Mai 2010

Habe auch was davon gehört, dass wenn man das alles mit einem div mittig positionieren will, man auch noch bestimmte Sachen für den IE machen muss...

wenn du den ie6 unterstützen willst, ja. willst du aber nicht.

topfkanne · 5 Mai 2010

Naruto123 schrieb:
Habe auch was davon gehört, dass wenn man das alles mit einem div mittig positionieren will, man auch noch bestimmte Sachen für den IE machen muss...

dominicbauer schrieb:
wenn du den ie6 unterstützen willst, ja. willst du aber nicht.

Nein.

HTML:

#container {
width:900px;
margin:0 auto
}

HTML:

<body>
<div id="container">

 <div id="header">
    foo
 </div>
 <div id="content">
    foo
 </div>

</div>
</body>

100% Cross-Browser-Compatible.

Naruto123 · 5 Mai 2010

Und das soll heißen, dass es doch für den IE kompatibel ist? :roll:

Killerbear · 5 Mai 2010

japp
kompatible seit 1996

also müsste das IE v3.0 sein

Killerbear · 5 Mai 2010

Naruto123 schrieb:
...aber es macht bei mir keinen Unterschied, ob ein div um alle anderen divs ist oder nicht. Wenn ich das margin: 0px auto; wegmache bei dem content-div, dann bleibt der div nicht mehr mittig.

richtig
und wenn du das margin: 0 auto von der navi weg nimmst, dann ist die navi nicht mehr mittig
und wenn du das margin: 0 auto vom header weg nimmst, dann ist der auch nicht mehr mittig

und wenn du jetzt noch nen footer hättest oder weitere Bereiche, die zentriert werden sollen, dann musst du jedes mal margin: 0 auto vergeben um den jeweiligen Bereich zu zentrieren.

Bei dir sollen aber alle Bereiche gleichermaßen mittig zentriert sein.
Dadurch bietet es sich an einen extra Container um Navi, Header und Content zu legen und dort die Eigenschaft margin:0 auto nur einmal zu vergeben anstatt 3 mal.

dominicbauer · 6 Mai 2010

topfkanne schrieb:
Nein.

HTML:

#container { width:900px; margin:0 auto }

HTML:

<body> <div id="container"> <div id="header"> foo </div> <div id="content"> foo </div> </div> </body>

100% Cross-Browser-Compatible.

Wtf?
und ja, das div hat ne breite zugewiesen bekommen.
ietester != ie?

Naruto123 · 6 Mai 2010

Killerbear 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...

Oder reden wir gerade einfach nur aneinander vorbei? :ugly:

Green Webdesign

Naruto123

Killerbear

Well-known member

Naruto123

Killerbear

Well-known member

Naruto123

x3ntar

Yet another User

topfkanne

♪ ♫

Naruto123

Leuchte84

Well-known member

topfkanne

♪ ♫

Naruto123

topfkanne

♪ ♫

Naruto123

dominicbauer

Well-known member

topfkanne

♪ ♫

Naruto123

Killerbear

Well-known member

Killerbear

Well-known member

dominicbauer

Well-known member

Naruto123

Green Webdesign

Well-known member

Well-known member

Yet another User

&#9834; &#9835;

Well-known member

&#9834; &#9835;

&#9834; &#9835;

Well-known member

&#9834; &#9835;

Well-known member

Well-known member

Well-known member

♪ ♫

♪ ♫

♪ ♫

♪ ♫