XHTMLforum - Abstand von div zu "Eltern"div

Seite 1 von 2

40 Beiträge dieses Themas auf einer Seite anzeigen

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Abstand von div zu "Eltern"div (http://xhtmlforum.de/showthread.php?t=69521)

Suppenhuhn

08.06.2013 21:59

Abstand von div zu "Eltern"div

Servus zusammen,

ich möchte eine Seite erstellen, die grob skizziert so aussieht:
http://www10.pic-upload.de/08.06.13/d25vgnieo8.png
http://www10.pic-upload.de/08.06.13/d25vgnieo8.png

Doch irgendwie gibts Probleme dieses rote "Logo", welches ein div ist, zu platzieren. Der Rahmendiv soll immer 960px breit sein. Wenn ich in diesem Rahmendiv ein "padding: 10px" setze, wird zwar ein Freiraum zum Logo geschaffen, aber der Rahmen wird um 20px breiter trotz "width: 960px" :shock:. Mit einem margin beim Logodiv kann man einen Abstand zur linken Seite erstellen, aber es erscheint kein Abstand nach oben hin. Setzt man einen margin von z.B. 100px, dann sieht man, dass der Abstand nach links richtig eingehalten wird, aber nach oben hin rutscht der Rahmen mit runter :shock:. Bin grad echt verwirrt, vllt kann mir jmd helfen.

Danke schonmal!

MfG Suppenhuhn

Manfred62

09.06.2013 00:54

das mit der Breite ist das Thema 'Boxmodell'. Ansonsten vermutlich mit position:absolute gearbeitet? Nächstes mal bitte den Code oder einen Link posten.
Basis Lektüre zum lernen: Little Boxes

demo:

HTML-Code:

<!DOCTYPE html>

<html lang="de">

<head>

        <meta charset="UTF-8">

        <title>Test</title>

        <style type="text/css">

                * {

                        margin: 0;

                        padding: 0;

                }

                body {

                        background: #ccc;

                        font: 100%/1.5 sans-serif;

                        padding: 30px 0;

                }

                #rahmen {

                        background: #fff;

                        width: 940px;

                        margin: 0 auto;

                        padding: 10px 10px 25px;

                }

                #logo {

                        background: #f00;

                        width: 400px;

                        height: 200px;

                        margin-bottom: 23px;

                }

                #content {

                        background: #808080;

                        height: 400px;

                }

        </style>

</head>

<body>

        <div id="rahmen">

                <div id="logo">Logo</div>

                <div id="content">Content</div>

        </div>

</body>

</html>

hubspe

09.06.2013 09:41

Manfred macht die Breite ich guck nach de Höhe! :D
Die lustigen Collapsing margins lösen das aus. Hier kannze mal gucken watt da steht. da wird et dich erklärt! ;)

Suppenhuhn

10.06.2013 15:38

Danke euch beiden, das hat mir sehr geholfen! Ich hatte da ein paar Fehler gemacht, ich hab mir nicht erklären können, warum der "Rahmen" automatisch breiter wird, obwohl ich "width:960px" angegeben habe, wenn man "padding:10px" nutzt. Hab gedacht, es verändert sich lediglich der Abstand zum Inhalt des Divs von seinen Begrenzungskanten.

//edit:

Ich hab noch eine Frage: Ich würde im div "Rahmen" eine Trennlinie zwischen Logo und Content einbauen. Diese Trennlinie ist 960px breit und 10px hoch. Sie besteht aus einem Verlauf (.png) und ist ebenfalls ein div. Jedoch wird diese Trennlinie aufgrund des paddings des Rahmens um 10px nach rechts verschoben. Wie mache ich es, dass die Linie vom Padding ignoriert wird und genau am einen Ende des Rahmens beginnt und am anderen aufhört? Ist es irgendwas mit position:absolute/relative/fixed? Hoffe mir kann da jemand helfen :)

Manfred62

10.06.2013 18:15

Zitat:

Zitat von Manfred62 (Beitrag 530234)

Nächstes mal bitte den Code oder einen Link posten.

ähmm, ich wiederhole mich ungern...

Zitat:

eine Trennlinie zwischen Logo und Content einbauen

z.B. mit einer <hr>

Suppenhuhn

10.06.2013 20:59

Zitat:

Zitat von Manfred62 (Beitrag 530292)

z.B. mit einer <hr>

Zitat:

Diese Trennlinie ist 960px breit und 10px hoch. Sie besteht aus einem Verlauf (.png) und ist ebenfalls ein div.

HTML-Code:

<div id="content">

            <div id="header">

                    ...

            <div id="upper_content">

                    <div class="line_upper_content"></div>

                <div id="upper_content_inhalt">

                        ...

                </div>

                <div class="line_upper_content"></div>   

            </div>

            <div id="maincontent"></div>

            <div id="footer">

            

            </div>

        </div>

line_upper_content ist eine Trennlinie, die aus einem Bild besteht. Sie trennt den Header vom mittleren Infofeld und das wiederum vom Maincontent.

Code:

.line_upper_content

{

        height:10px;

        width:960px;

        background-image:url(images/trennlinie.png);

        clear: both;        

}

Die Linie ist so definiert. Klappt auch super, wäre die nicht um die 10px vom Rahmen-Padding nach rechts verschoben. Diese Verschiebung will ich umgehen. Any ideas?

Manfred62

11.06.2013 07:52

Man sollte halt wissen, was das werden soll?? Darum ist ein Link zur aktuellen Demo hilfreich. Auf Glaskugel polieren hab ich grad keine Lust..

Ansonsten das padding vom Rahmen weglassen, stattdessen border oder margin auf die innenliegenden Elemente verwenden.
Leere divs nur für irgendwelche Dekos ist nicht sinnvoll. Deshalb der Hinweis auf hr.

Suppenhuhn

11.06.2013 12:52

Zitat:

Zitat von Manfred62 (Beitrag 530294)

Man sollte halt wissen, was das werden soll?? Darum ist ein Link zur aktuellen Demo hilfreich. Auf Glaskugel polieren hab ich grad keine Lust..

<.<

Okay, hier mal eine grobe Skizze:

So soll es aussehen:
http://www7.pic-upload.de/11.06.13/u2rdser1uk4d.png

Und so sieht es im Moment aus:
http://www7.pic-upload.de/11.06.13/em4ldt9mstx.png

hubspe

11.06.2013 13:26

äh...was genau hast du daran nicht verstanden:

Zitat:

Darum ist ein Link zur aktuellen Demo hilfreich

Q Webdesigner Darmstadt

11.06.2013 13:31

Padding ist halt der Innenabstand.
Vielleicht solltest Du in Verbindung mit einer festen Breite eh auf padding verzichten, da gab's Fehlinterpretationen vom IE.
Du könntest in jede Box eine weitere Box setzen, und diese mit margin oder mit position-x entsprechend positionieren.

Alle Zeitangaben in WEZ +2. Es ist jetzt 15:38 Uhr.

Seite 1 von 2

40 Beiträge dieses Themas auf einer Seite anzeigen