margin-Problem
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
abstand
body
container
element
encoding
fehler
gen
insert
margin
platzen
test
transitional
variant
variante
-
Ich möchte, dass der div-Container vom Browserfenster überall einen Abstand von 10px hat. Ich finde nicht heraus, wieso er das beim folgenden Code nicht so macht:
<html> <head> <style> body { margin: 10px; } .div { font-family: arial; font-size: 10pt; color: #303030; border: 1px #a0a0a0 solid; position: absolute; height: 100%; width: 100%; padding: 10px; } </style> </head> <body> <div class="div">Test</div> </body> </html>
Sieht jemand von euch einen Fehler? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
swissman schrieb:
Ich möchte, dass der div-Container vom Browserfenster überall einen Abstand von 10px hat.
Wenn der div-Container vom Browserfenster den Abstand haben soll gehört das margin zum div nicht zum body.
Eine andere Möglichkeit müsste sein, bei body padding:10px einzufügen. -
Funktioniert leider mit beiden Varianten nicht. Unten hat der div-Container beim IE wie auch bei Firefox keinen Abstand zum Browserfenster.
-
<!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="de" lang="de"> <head> <style> html, body { margin: 0px; } .div { position: absolute; left: 10px; top: 10px; right: 10px; bottom: 10px; padding: 10px; font-family: arial; font-size: 10pt; color: #303030; border: 1px #a0a0a0 solid; } </style> </head> <body> <div class="div">Test</div> </body> </html>
So geht's im FF und auch im IE ;) -
Und hier die Variante mit relativer Positionierung. Zu beachten das im Firefox ein Element das weniger als 100% Höhe benötigt auch nur jenen Platz für sich beansprucht.
<?xml version="1.0" encoding="UTF-8" ?> <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Insert title here</title> <style type="text/css"> html { margin: 0; padding: 0; border: 0; } body { margin: 0; padding: 10px; border: 0; } .div { width: 100%; height: 100%; background: #FF0000; } </style> </head> <body> <div class="div"> Hallo Welt </div> </body> </html> -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
