CSS wo kommt der Abstand her ?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
absatz
abstand
auto
code
frage
haupt
http
inhalt
layout
liegen
listen
logik
mitte
paragraph
problem
start
suchen
test
unterschied
verwirrung
-
Hallo
ich habe mal einen Test mit CSS Layout gemacht
und frage mich, wo der Abstand zwischen div id="oben" und div id="mitte"´her kommt,
also definiert ist er nicht, da soll eigentlich kein Abstand sein ?!
QuellCode siehe: http://webclub.lima-city.de/test1.html
edit: oder gleich hier
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Start</title> <meta name="description" content="Startseite der Homepage" /> <meta name="keywords" content="Start, Startseite, Willkommen" /> <style type="text/css"> <!-- body { margin: 0 auto; padding: 0px; text-align: center; background: #000000; } #seite { margin: 0 auto; padding: 0px; width: 1000px; text-align:center; background: #336666; } #oben { margin: 0 auto; padding: 0px; clear: both; width: 94%; background: #AAAAAA; } #mitte { margin: 0 auto; padding: 0px; clear: both; float: left; width: 70%; background: #CCCCCC; } #sidebar { margin: 0 auto; padding: 0px; float: right; width: 30%; background: #AAAAFF; } #footer { clear: both; margin: 0 auto; padding: 0px; width: 90%; background: #AAAAAA; } --> </style> </head> <body> <div id="seite"> <div id="oben"> <p>hier Dein Menü</p> </div> <div id="mitte"> <p>hier Dein Haupt-Inhalt</p> </div> <div id="sidebar"> <p>hier Seiten-Inhalt</p> </div> <div id="footer"> <p>hier Footer-Inhalt</p> </div> </div> </body> </html>
Woran kann das liegen, alles mit margin 0 auto und padding 0px aber trotzdem Abstand ?!
hä ?!
Beitrag zuletzt geändert: 5.5.2011 15:10:27 von webclub -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
webclub schrieb:
Hallo
ich habe mal einen Test mit CSS Layout gemacht
und frage mich, wo der Abstand zwischen div id="oben" und div id="mitte"´her kommt,
also definiert ist er nicht, da soll eigentlich kein Abstand sein ?!
Woran kann das liegen, alles mit margin 0 auto und padding 0px aber trotzdem Abstand ?!
hä ?!
^^ Schmeiß <p></p> raus und schon gehts.<div id="oben"> <p>hier Dein Menü</p> </div>
<div id="oben"> hier Dein Menü </div>
-
Oder du setzt ganz einfach mit CSS den Abstand des 'div#oben p' auf '0':
#oben p { margin:0; }
Beitrag zuletzt geändert: 5.5.2011 17:07:24 von wagnerm -
Genau weiß ich es auch nicht, aber es hängt mit "float" zusammen. Wenn du für #mitte und #sidebar das float weglässt, hast du überall die Abstände. Google mal ein bißchen danach und gib uns dann Bescheid!
-
Das ist eine Vorbelegung des Browsers, um ein sinnvolles Standardlayout anzeigen zu können, wenn keine Layoutangaben getroffen wurden.
Da ein <p> einen Absatz (engl. paragraph) darstellt sollte dieser auch räumlich als Absatz erkennbar sein, darum wird am Ende ein Abstand von [meistens ca.] 1em eingefügt, damit die Trennung erfolgt. Das selbe ist auch bei Listen der oder <blockquote> der Fall, diese werden ohne Anderweitige Layoutangaben Eingerückt um sie als Liste bzw. Zitat kenntlich zu machen.
Mit freundlichen Grüßen -
Um da Probleme bzw. verwirrungen zu vermeiden, greife ich immer zum "globalen nullen":
* { padding: 0px; margin: 0px; }
Zwar musst du dann sämtliche Abstände selbst definieren, dafür vermeidest du aber Unterschiede bei verschiedenen Browsern (die evtl. verschiedene Standartwerte haben). Außerdem wirst du durch scheinbar nicht definierte Abstände nicht verwirrt :) -
Wenn man so ein Problem sucht wieso greift man nicht nach Firebug und sucht danach geht kinderleicht?
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
