Problem bei Anzeige mit DIV

Status
Nicht offen für weitere Antworten.
M

matzseesi

Erfahrenes Mitglied
Hi Leute,

Dieses Thema wurde vermutlich schon ein paar mal durchgekauert aber mich beschäftigt es nun schon seit geraumer Zeit und ich komm einfach nicht dahinter!
Folgender Quelltext fuxt:

Code: 
<html>
  <head>
    <title>testpage</title>
  </head>
  <body>
    <div style="position:relative; width:600px; min-height:400px; border:1px solid #000000;">
      <div style="width:80%; min-height:300px; border:0px solid #FF0000; float:left; font-size:10px;">
        <div style="font-face:10px; width:100%; border:1px solid #00FF00; padding:4px;">
          Testausgabe
        </div>
      </div>
      <div style="width:20%; min-height:150px; border:0px solid #00FF00; float:left; font-size:10px;">
        <div style="font-face:10px; width:100%; border:1px solid #0000FF; padding:4px;">
          Testausgabe2
        </div>
      </div
    </div>
  </body>
</html>

Wenn ihr das in eine HTML Datei kopiert und euch diese anseht, dann seht ihr dass die DIVs, mit den Texten Testausgabe und Testausgabe2 über das Grunddiv drüber raus ragen! WARUM nur
Mittlerweile weiß ich, dass es mit dem padding zu tun hat, aber warum zieht er dann die divs auseinander und vor allem wie kann ich ihm das unterbinden?

Gruß Matz
 
Die Polsterung (padding) wird im CSS-Modell der festgelegten Breite und Höhe addiert. Die beiden Elemente werden also mit 488px (80% von 600px plus zweimal 4px-Polsterung) beziehungsweise 128px (20% von 600px plus zweimal 4px-Polsterung) dargestellt.

Probier mal Folgendes:
HTML: 
<div style="position:relative; width:600px; min-height:400px; background:#FE0">
  <div style="width:80%; min-height:300px; float:left; font-size:10px; background:#F00">
    <div style="font-face:10px; width:100%; margin:4px">
      Testausgabe
    </div>
  </div>
  <div style="width:20%; min-height:150px; float:left; font-size:10px; background:#0F0">
    <div style="font-face:10px; width:100%; margin:4px;">
      Testausgabe2
    </div>
  </div
</div>
 
Hi,

Danke für die Antwort, werde das gleich heute am abend ausprobieren und berichten ob mein Vorhaben so funktioniert! Wenn ich dein Beispiel teste, sieht es so aus wie ich mir das vorgestellt habe!

Gruß

Matthias
 
Also, ich verstehs nicht!

Habe es gerade probiert und jetzt folgendes:

Code: 
<div style="width:100%; background-color:#5a5a5a;">
  <div style="border:1px solid #000000; width:100%; color:#ffffff; text-align:left; background-color:#5a5a5a;">
    <div style="margin:4px;">
      Testausgabe
    </div>
  </div>
  <div style="text-align:left; border:1px solid #000000; width:100%;">
    Irgend ein inhalt
  </div>
</div>

Wenn ich nun border:1px mach dann zeigt er mir das richtig an. Das heißt er macht dann das margin:4px. Wenn ich jedoch border:0px einstelle dann will er mir das margin nicht anzeigen.

Warum bloß?

Außerdem, seht ihr beim zweiten Div den weißen strich da am Rand? Hat das was mit dem Rahmen zu tun?

Gruß Matz
 
Hallo ich weiss zwar nicht wo das problem liegt habe es mir aber gerade angeguckt.
PHP: 
.main{
	background:#5a5a5a;
	width:100%;
	border:1px solid #000;
	position:relative;
}
.main_top{
	width:100%
	color:white;
	border-bottom:1px solid #000;
}
.main_bottom{
	width:100%
	color:white;
	border-bottom:1px solid #000;
}
.text{
	padding:4px;
}
<body>
	<div class="main">
		<div class="main_top">
			<div class="text">
				Irgend ein inhalt
			</div>
		</div>
		<div class="main_bottom">
			<div class="text">
				Irgend ein inhalt
			</div>
		</div>
	</div>
</body>
aber probiers dochmal so das sollte auf jedenfall gehen;ansonsten schreib dochmal nen link.
Was generell besser ist das du das CSS incudierst und nicht irgendein Inline Style verwendest.Denk einfach an später wenn du mal was aendern möchtest dann musst du alle inline styles aendern so vergibst du nur die Klassen auf deine div`s die du dannbeliebig oft verwenden kannst und nur an einer Stelle aendern musst.
Auserdem was ich vergessen habe wenn du dir dein CSS schreibst esrtelle erstmal dies *{padding:0px; margin:0px;} somit setzt du alle browser erstmal auf 0 von den Abstaenden her das du bei jedem von einer und derselben Ausgangsituation bearbeiten kannst.
Also viel Glück Brewing
p.s.IE developer tool installen fuer den IE7
 
Zuletzt bearbeitet:
Hallo,

Danke für den Tip.
Ich verwende zuerst immer inline Style da das Design am anfang noch nicht feststeht! und wenn dann das Design annehmbar aussieht wird es in eine CSS Dateie ausgelagert und dann überlege ich mir wo ich Dinge doppelt verwenden kann (class) usw...
sonst muss ich jedesmal während der Entwicklung zwischen css sheet und html file hin und her wechseln was ziemlich nervt. Finde ich zumindest!

Gibt es bei den Browsern verschiedene Voreinstellungen?

Gruß

Matthias
 
Hi.
Brewing hat gesagt.:
p.s.IE developer tool installen fuer den IE7
Zum Vergrößern anklicken....
Falls mit dem Firefox entwickelt wird, ist die Web Developer Bar und Firebug zu empfehlen.

matzseesi hat gesagt.:
Gibt es bei den Browsern verschiedene Voreinstellungen?
Zum Vergrößern anklicken....
Ja, dies betrifft die Polsterungseigenschaften der einzelnen Blockelemente, weshalb Brewing

Code: 
* {
margin:0;
padding:0;
}
empfohlen hat, um die Polsterungseigenschaften auf null zurückzusetzen.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück