|
|||
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 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" . 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 . Bin grad echt verwirrt, vllt kann mir jmd helfen. Danke schonmal! MfG Suppenhuhn |
Sponsored Links |
|
||||
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> |
Sponsored Links |
|
||||
Manfred macht die Breite ich guck nach de Höhe!
Die lustigen Collapsing margins lösen das aus. Hier kannze mal gucken watt da steht. da wird et dich erklärt!
__________________
Ein mehrfacher Gruß aus dem Südosten Klaus Geändert von hubspe (09.06.2013 um 10:43 Uhr) |
|
|||
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 Geändert von Suppenhuhn (10.06.2013 um 17:03 Uhr) |
|
|||
Zitat:
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; } |
|
|||
Zitat:
Okay, hier mal eine grobe Skizze: So soll es aussehen: Und so sieht es im Moment aus: |
|
||||
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. |
Sponsored Links |
Stichwörter |
abstand, margin, padding |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Fragen zu CSS und Joomla | DOKTOR | CSS | 2 | 23.05.2011 20:29 |
Brauche Hilfe: Schwarzes Nichts | Zwox | CSS | 10 | 19.11.2010 17:53 |
Header entfernen | tripple | CSS | 17 | 15.06.2010 16:41 |
Schriftfarbe in den Eintragungsfeldern von jforms | Steveislucky | CSS | 2 | 16.03.2010 11:59 |
CSS Text nebeinander? | carstiee09 | CSS | 13 | 13.11.2009 20:18 |