Anfänger Box Problem

_patrice_ · 03.03.2010

Hallo an alle die sich für meine Probleme interessieren!

Ich versuche gerade per "learning by doing" meine erste Homepage zu machen und scheitere gerade an einem wahrscheinlich ganz simplen Problem.

Ich habe ein div mit einem bestimmten Hintergrund gefüllt. Jetzt hätte ich in diesem Kasten gerne mittig ein Blatt Papier gemacht mit Abstand nach allen Seiten. Dazu war meine Idee ein div in das erste div zu packen und diesem einfach den dementsprechenden margin zu geben.

HTML:

<style type="text/css">
      .
      .
      .
   	div#div1 {
		width:800px; height:800px;
		margin-left:auto; margin-right:auto;
	}
	
	div#div2 {
		width:600px; height:600px;
		margin-left:auto; margin-right:auto; margin-top:100px;
		background:url(Bilder/window_bg.jpg) 0 0 repeat;
	}
	
	.black {
		background-color:black;
	}
</style>

<body>

	<div id="div1" class="black">
    	      <div id="div2">
              </div>
        </div>
    
</body>

In der Dreamweaver Vorschau sieht es komischerweise genau so aus wie ich es gerne hätte, aber im Browser schiebt sich mein erstes div um genau den margin im 2. div nach unten (siehe Bild).

Kann mir jemand sagen was ich da nicht verstehe? Wäre wirklich sehr dankbar!

Smoky04 · 03.03.2010

AW: Anfänger Box Problem

hast du schon mal versucht, die größe anzupassen?

_patrice_ · 03.03.2010

AW: Anfänger Box Problem

Was meinst du damit?

Smoky04 · 03.03.2010

AW: Anfänger Box Problem

_patrice_ schrieb:
Was meinst du damit?

Du must in deinet index.htm die position angegen.

_patrice_ · 03.03.2010

AW: Anfänger Box Problem

Smoky04 schrieb:
Du must in deinet index.htm die position angegen.

Ich habe des Platzes etwas im CSS Bereich weggelassen, das steht auch noch drin:

HTML:

* {
	margin:0; padding:0; border:0;
   }
	
html {
	background-color:#CCCCCC;
}

Falls Du das nicht gemeint hast tut mir leid, aber dann hab ich keinen Plan auf was Du hinaus willst. Sorry

ElGreco · 03.03.2010

AW: Anfänger Box Problem

Er meint die index.html
Sollte etwa so ausssehen

Code:

<!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>Meine erste Homepage</title>
</head>

<body>
</body>
</html>

_patrice_ · 03.03.2010

AW: Anfänger Box Problem

Danke für die Antwort! Ja das tut sie natürlich!

HTML:

<!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>
<link href="Style.css" rel="stylesheet" type="text/css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TestPage</title>
</head>


<body>

<div id="div1" class="black">
    	<div id="div2">
        </div>
</div>
    
</body>
</html>

Sorry das ich das nicht gleich geschnallt habe, bin noch blutiger Anfänger! Ich habe auch schon probiert ob es am Chrome liegt, aber alle anderen Browser stellen die Seite genau so dar!

Egal was ich versuche, wenn zwei div's ineinander liegen und ich das Innere über margin im Äußeren positionieren will verschiebt sich mein Äußeres um den margin-top Wert nach unten!

aalangler · 03.03.2010

AW: Anfänger Box Problem

Hi _patrice_,

warum läßt du den <div2> nicht einfach weg und positionierst dein Blatt Papier mittig als Hintergrund im <div1>

background-image:url(Bilder/window_bg.jpg);
background-repeat:no-repeat;
background-position:50% 50%;

sollte funktionieren

sokie · 03.03.2010

AW: Anfänger Box Problem

ich habe verstanden, dass in einer Box von 800x800px eine zweite box von 600x600px zentriert werden soll.

HTML:

<div id="aussen">
    <div id="innen">
    </div>
</div>

Code:

/* css */
*{
  margin:0;
  padding:0;
}
#aussen{
  width: 600px;
  height: 600px;
  padding: 100px;
  margin: 0 auto;
  background: #000000;
}
#innen{
  width: 600px;
  height: 600px;
  background: #ffffff;
}

ein paar weiterführende Tipps:
- die Ansicht imDW kannst du getrost vergessen. Deine Webseite soll in Browsern funktionieren - niemand schaut sich deine Seite im DW an!
- IDs wie div1, div2 sprechen nicht! wenn du ein aufwendigeres Design hast, findest du am ende nicht mehr durch deinen Code (und hier im Forum will niemand solche codes bei fragen lesen;-)). IDs wie "#header","#footer","#navi-links","#kommentare" etc. sind hilfreich in HTML und im CSS 'auf einemBlick' den richtigen selektor zu finden.

_patrice_ · 03.03.2010

AW: Anfänger Box Problem

@sokie

ich habe meinen Post nur als Beispiel für mein Problem schnell gebastelt. In meinem eigentlichen Projekt arbeite ich schon etwas intuitiver. Ich komme aus der C++ Programmierung und weiß wie wichtig sinnvolle Namen sind!

Aber Dein Beispiel hat mir jetzt endlich klar gemacht wie das Box-Model funktioniert. Ich hatte einfach ein Verständnisproblem mit der grundsätzlichen Funktionsweise.

Also vielen Dank an Dich und alle anderen die mir helfen wollten.

sokie · 03.03.2010

AW: Anfänger Box Problem

_patrice_ schrieb:
...weiß wie wichtig sinnvolle Namen sind!

musst du mir nicht übel nehmen...ich hatte nur von 'learning by doing' gelesen, und dachte ein paar tipps zum start...

_patrice_ · 03.03.2010

AW: Anfänger Box Problem

Nein um Gottes Willen, ein Tipp zuviel in Foren ist immer besser als einer zu wenig!

hubspe · 04.03.2010

AW: Anfänger Box Problem

_patrice_ schrieb:
Ich versuche gerade per "learning by doing" meine erste Homepage zu machen und scheitere gerade .........

gerade CSS eignet sich denkbar schlecht für learning by doing, da muss man sich hinsetzen und a weng die Prinzipien lernen, sonst wird das imho nie was.

Zum Glück gibts Little Boxes auch online.