zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Komisches Div margin Problem nach float & clear

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.05.2005, 22:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.05.2005
Beiträge: 19
matott befindet sich auf einem aufstrebenden Ast
Standard Komisches Div margin Problem nach float & clear

Hi!
Also ich habe folgenden Code:
Code:
<?xml version="1.0" encoding="iso-8859-15"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title></title>
<style type="text/css">
<!--
#m
	{
	float:left;
	width: 298px;
	border: 1px solid black;
	}
	
#t
	{
	float: left;
	width: 648px;
	border: 1px solid black;
	}

#f
	{
	clear: left;
	width: 948px;
	border: 1px solid black;
	margin-top: 10px;
	}
-->
</style>
</head>
<body>
<div id="m">


</div>
<div id="t">












</div>
<div id="f">
</div>
</body>
</html>
Mein Problem ist nun, dass die margin auf <body> angewendet wird und nicht auf die beiden Elemente.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.05.2005, 22:56
Benutzerbild von Floele
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 30.03.2005
Beiträge: 355
Floele befindet sich auf einem aufstrebenden Ast
Standard

Vermutlich meinst du damit den bei (fast) jedem Browser voreingestellten margin. Schreib einfach mal
Code:
body {margin:0;padding:0;}
dazu

Übrigens, bei XHTML Dokumenten halte ich es für bedenklich den CSS Code in Kommentaren einzuschließen ( http://www.w3.org/TR/xhtml1/#C_4 ).
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.05.2005, 23:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.05.2005
Beiträge: 19
matott befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Floele
Vermutlich meinst du damit den bei (fast) jedem Browser voreingestellten margin. Schreib einfach mal
Code:
body {margin:0;padding:0;}
dazu

Übrigens, bei XHTML Dokumenten halte ich es für bedenklich den CSS Code in Kommentaren einzuschließen.
Nein, das ist nicht das Problem. #f richtet seinen margin and <body> und nicht an #t oder #m aus.
Mit Zitat antworten
  #4 (permalink)  
Alt 07.05.2005, 23:10
Benutzerbild von Floele
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 30.03.2005
Beiträge: 355
Floele befindet sich auf einem aufstrebenden Ast
Standard

Hm, vermutlich willst du dann das hier erreichen?

Code:
#m
   {
   float:left;
   width: 298px;
   border: 1px solid black;
   
   }
   
#t
   {
   margin-bottom: 10px;
   float: left;
   width: 648px;
   border: 1px solid black;
   }

#f
   {
   clear: left;
   width: 948px;
   border: 1px solid red;
   }
Mit Zitat antworten
  #5 (permalink)  
Alt 07.05.2005, 23:18
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.05.2005
Beiträge: 19
matott befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Floele
Hm, vermutlich willst du dann das hier erreichen?

Code:
#m
   {
   float:left;
   width: 298px;
   border: 1px solid black;
   
   }
   
#t
   {
   margin-bottom: 10px;
   float: left;
   width: 648px;
   border: 1px solid black;
   }

#f
   {
   clear: left;
   width: 948px;
   border: 1px solid red;
   }
Nicht so ganz, da #m auch größer sein kann als #t (ist hier ja nur stark vereinfacht).
Mit Zitat antworten
  #6 (permalink)  
Alt 07.05.2005, 23:24
Benutzerbild von Floele
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 30.03.2005
Beiträge: 355
Floele befindet sich auf einem aufstrebenden Ast
Standard

Jetzt aber

Code:
#m
   {
   margin-bottom:10px;
   float:left;
   width: 298px;
   border: 1px solid black;
   }
   
#t
   {
   margin-bottom:10px;
   float: left;
   width: 648px;
   border: 1px solid black;
   }

#f
   {
   clear:left;
   width: 948px;
   border: 1px solid red;
   }
Mit Zitat antworten
  #7 (permalink)  
Alt 07.05.2005, 23:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.05.2005
Beiträge: 19
matott befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Floele
Jetzt aber

Code:
#m
   {
   margin-bottom:10px;
   float:left;
   width: 298px;
   border: 1px solid black;
   }
   
#t
   {
   margin-bottom:10px;
   float: left;
   width: 648px;
   border: 1px solid black;
   }

#f
   {
   clear:left;
   width: 948px;
   border: 1px solid red;
   }
Ist zwar hässlich, aber es funktioniert. Danke!
Mit Zitat antworten
  #8 (permalink)  
Alt 07.05.2005, 23:45
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Dass der margin top im clearenden Element nicht angezeigt wird, liegt an der Definition des clear:
CSS-Spezifikation:
Zitat:
left
The clearance of the generated box is set to the amount necessary to place the top border edge below the bottom outer edge of any left-floating boxes that resulted from elements earlier in the source document.
Hier gibt's eine Illustration dazu


Warum der margin dann nach oben wandert?
Vielleicht wegen dieser Regel:
Zitat:
A floating box's outer top may not be higher than the top of its containing block. When the float occurs between two collapsing margins, the float is positioned as if it had an otherwise empty anonymous block parent taking part in the flow. The position of such a parent is defined by the rules in the section on margin collapsing.
Ich weiß aber nicht, ob ich das Ganze richtig verstehe. (In der deutschen Übersetzung fehlt dieser Teil...)

Grüße
fricca
Mit Zitat antworten
  #9 (permalink)  
Alt 07.05.2005, 23:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.05.2005
Beiträge: 19
matott befindet sich auf einem aufstrebenden Ast
Standard

Achja, vielleicht hätte ich das lesen sollen. Naja, ich hoffe css 3 behebt das.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 07.05.2005, 23:56
Benutzerbild von Floele
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 30.03.2005
Beiträge: 355
Floele befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Warum der margin dann nach oben wandert?
Das sagt doch das Zitat oben schon, oder nicht? Mit anderen Worten heißt das doch, dass der Rand oben so weit vergrößert wird, dass sich das Element unterhalb der vorherigen fließenden Box befindet (und der margin-top Wert dadurch nicht zur Geltung kommt). Korrigier mich wenn ich falsch liege
Mit Zitat antworten
Sponsored Links
Antwort

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
z-index hoch, dennoch grafik nicht ganz oben bergg CSS 6 27.10.2010 17:02
3 spaltiges Layout die mitte vergrössern, wie? plinius12 (X)HTML 18 10.02.2009 19:07
DIV immer ganze Breite - normal?!?!? csski CSS 3 02.07.2008 13:20
joomla template entschlüsseln nieselfriem CSS 2 18.03.2008 14:12
So langsam bekomme ich die Krise mit den DIVs Thuroc CSS 12 12.11.2007 15:25


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:02 Uhr.