zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Abstand von div zu "Eltern"div

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.06.2013, 22:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.06.2013
Beiträge: 6
Suppenhuhn befindet sich auf einem aufstrebenden Ast
Unglücklich 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 09.06.2013, 01:54
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

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>
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.06.2013, 10:41
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

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)
Mit Zitat antworten
  #4 (permalink)  
Alt 10.06.2013, 16:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.06.2013
Beiträge: 6
Suppenhuhn befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
  #5 (permalink)  
Alt 10.06.2013, 19:15
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Zitat:
Zitat von Manfred62 Beitrag anzeigen
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>
Mit Zitat antworten
  #6 (permalink)  
Alt 10.06.2013, 21:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.06.2013
Beiträge: 6
Suppenhuhn befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Manfred62 Beitrag anzeigen
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?
Mit Zitat antworten
  #7 (permalink)  
Alt 11.06.2013, 08:52
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

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.
Mit Zitat antworten
  #8 (permalink)  
Alt 11.06.2013, 13:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.06.2013
Beiträge: 6
Suppenhuhn befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Manfred62 Beitrag anzeigen
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:



Und so sieht es im Moment aus:
Mit Zitat antworten
  #9 (permalink)  
Alt 11.06.2013, 14:26
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

äh...was genau hast du daran nicht verstanden:
Zitat:
Darum ist ein Link zur aktuellen Demo hilfreich
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 11.06.2013, 14:31
Neuer Benutzer
neuer user
 
Registriert seit: 29.03.2012
Ort: Darmstadt
Beiträge: 13
Q Webdesigner Darmstadt befindet sich auf einem aufstrebenden Ast
Standard

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.
__________________
So schreibst Du gute Webseiten-Texte - mein Buch hier kostenfrei probelesen: Werbetexte schreiben.
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
abstand, margin, padding

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:30 Uhr.