Horizontale 100% Div-Box mit padding rechts bzw links

PsychoEagle · 17.04.2007, 08:29

Hi Forum

Ich hab ne horizontale Div-Box, welche ich einen Padding links und rechts zuweisen möchte. An sich ja recht einfach, nur hab ich da nen Problem. Mein Container ist 100% breit und wenn ich links, sowie rechts einen 10px Padding hinmache, addiert er diese 2 Werte zu den 100% und ich habe im Endeffekt 100%+20px. Wie kann ich dies umgehen bzw. unterbinden?

Hier ein wenig Quellcode:

Code:

div#content {
  position:             relative;
  float:                left;
  width:                100%;
}
[...]
  <div id="content">
    
  </div>

Vielen Dank für eure Hilfe. Ich hoffe es gibt eine Lösung. Per Suche fand ich nichts zu diesem Thema

Grüße
PsychoEagle

M3g4Star · 17.04.2007, 09:31

also der Begriff "horizontale Div-Box" ist mir auch neu ^^

Aber nun zu deiner Problematik:
(mit wirklich ein bischen Englisch und Google kam ich auf diese Seite)
zuerst:
hier
dann
hier
und dann hier
hier

inwiefern das nun zu umgehen ist weiß ich auch nicht.

wie du da lesen kannst ist es für CSS 3 vorgedacht ..

PsychoEagle · 17.04.2007, 09:45

Wusste nicht, wie ich das nennen kann oder wie man das nennt

Danke für die Links, leider nichts neues für mich

Was ich jedoch nach einigen weiteren Tests herausfand, klappt es mit folgendem Quellcode (CSS + HTML)

Code:

div#content-wide {
  position:             relative;
  float:                left;
  width:                100%;
  height:               200px;
}

div#content-padding {
  position:             relative;
  padding:              10px;
  width:                100%-20px;
  height:               200px;
}

[...]

    <div id="content-wide">
      <div id="content-padding">
        
      </div>
    </div>

Ist das so vom logischen her gut? Hab unter anderem das float bei der 2ten Box weggelassen, sonst funktioniert das ganze wiederrum nicht

Grüße und Danke Megastar, was würd ich ohne dich nur machen

Psy

M3g4Star · 17.04.2007, 09:52

wie ich sehe hast du 100%-20px benutzt .. *hm* klappt das bei den gängigen Browsern ??

Was ich noch gedacht hab, ähnlich wie du, mit einem verschachtelten Div zu arbeiten und dann dem äußeren Div ein Padding zu geben. Da müsste man mal testen wie sich das innere dann bei 100% verhält.

Weil an sich wird der Wert ja von außen gesetzt und somit müsste sich das innere danach richten.

Weißt wie ich mein ???

PsychoEagle · 17.04.2007, 10:04

Also der FF2.0 und der IE6 haben beide keine Darstellungsfehler und machen das so wie es sich gehört. Wunderte mich ein wenig *gg* vor allem beim IE6. Wenn ich float einsetze funktioniert es aber nicht.

Hmm, ja an sich weiss ich wie de meinst

so hatte ich es vorher auch mal probiert, jedoch ohne Erfolg.

Das Problem hierbei ist, wenn ich den äußeren Div ein Padding gebe, macht er die 100% + den Padding und geht somit über 100%

Der innere Div macht dann schön seine 100% vom äußeren Div, aber das bringt ja nicht viel da der äußere zu groß ist

Der äußere hat auch ein float, was das alles ein wenig beeinflusst. Ich werd die Version von mir noch im IE7 testen, denke aber das das keine Probleme bereiten wird, wenns im 6er funzt.

Oder was meinst du noch so dazu?

Grüße
Psy

M3g4Star · 17.04.2007, 10:13

Also ich teste meist IE 7 , IE 6 und IE 5.55 sowie FF 2.0

Ab und zu noch Netscape

Aber das nur Ausnahme ...

Solang dein Code zumindest W3 konform ist und die Anzeige das nicht verhaut ist doch gut wenn's so klappt. Lustig das mit dem Minus ^^

Code:

<body style="padding:0px;margin:0px;">
<div style="width:100%-10px;padding:10px;background-color:#0066FF;">
	<div style="background-color:#999999;width:100%;">moep</div>
</div>
</body>

Klappt tatsächlich (FF2.0, IE7, IE6)

nikosch · 17.04.2007, 11:52

Ist das mit dem Minus den w3 konform? Also ich hab da noch nie was von gehört. Das Ganze klingt verdächtig nach dem Box Model Bug. Verwende doch 2 ineinander verschachtelte divs, das äußere mit 100% und das innere mit margin 10px. Das sollte funktionieren.

M3g4Star · 17.04.2007, 11:59

Zitat:

Zitat von nikosch77

Verwende doch 2 ineinander verschachtelte divs, das äußere mit 100% und das innere mit margin 10px. Das sollte funktionieren.

*rofl* Jooo das meinte ich .. nur bei mir war's andersrum
Das müsste klappen oder ???

Aso zu W3 => mein Code:

Zitat:

Zitat von validator.w3.org

This Page Is Valid HTML 4.01 Transitional!

nikosch · 17.04.2007, 12:51

Interessant ist hier ja die Validierung des Stylesheets. 100%-20px ? Also ich weiß nicht...

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Von Rechts nach Links im Input!	CHRIS	HTML, Usability und Barrierefreiheit	6	07.04.2009 11:20
Wordpress Template		HTML, Usability und Barrierefreiheit	8	22.08.2005 11:21
Tabelle ganz links	lalala	HTML, Usability und Barrierefreiheit	1	06.07.2005 14:29
Menü das von links nach rechts ins bild kommt zum aufklappen		HTML, Usability und Barrierefreiheit	11	28.06.2005 18:21

17.04.2007, 08:29
PsychoEagle there's only one psycho Registriert seit: 21.08.2007 Beiträge: 1.283 PHP-Kenntnisse: Anfänger	Horizontale 100% Div-Box mit padding rechts bzw links Hi Forum Ich hab ne horizontale Div-Box, welche ich einen Padding links und rechts zuweisen möchte. An sich ja recht einfach, nur hab ich da nen Problem. Mein Container ist 100% breit und wenn ich links, sowie rechts einen 10px Padding hinmache, addiert er diese 2 Werte zu den 100% und ich habe im Endeffekt 100%+20px. Wie kann ich dies umgehen bzw. unterbinden? Hier ein wenig Quellcode: Code: div#content { position: relative; float: left; width: 100%; } [...] <div id="content"> </div> Vielen Dank für eure Hilfe. Ich hoffe es gibt eine Lösung. Per Suche fand ich nichts zu diesem Thema Grüße PsychoEagle __________________ "Weaseling out of things is important to learn. It's what separates us from the animals ... except the weasel." (Homer J. Simpson)


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

17.04.2007, 09:31
M3g4Star Erfahrener Benutzer Registriert seit: 23.08.2007 Beiträge: 1.510	also der Begriff "horizontale Div-Box" ist mir auch neu ^^ Aber nun zu deiner Problematik: (mit wirklich ein bischen Englisch und Google kam ich auf diese Seite) zuerst: hier dann hier und dann hier hier inwiefern das nun zu umgehen ist weiß ich auch nicht. wie du da lesen kannst ist es für CSS 3 vorgedacht ..

17.04.2007, 09:45
PsychoEagle there's only one psycho Registriert seit: 21.08.2007 Beiträge: 1.283 PHP-Kenntnisse: Anfänger	Wusste nicht, wie ich das nennen kann oder wie man das nennt Danke für die Links, leider nichts neues für mich Was ich jedoch nach einigen weiteren Tests herausfand, klappt es mit folgendem Quellcode (CSS + HTML) Code: div#content-wide { position: relative; float: left; width: 100%; height: 200px; } div#content-padding { position: relative; padding: 10px; width: 100%-20px; height: 200px; } [...] <div id="content-wide"> <div id="content-padding"> </div> </div> Ist das so vom logischen her gut? Hab unter anderem das float bei der 2ten Box weggelassen, sonst funktioniert das ganze wiederrum nicht Grüße und Danke Megastar, was würd ich ohne dich nur machen Psy __________________ "Weaseling out of things is important to learn. It's what separates us from the animals ... except the weasel." (Homer J. Simpson)

17.04.2007, 09:52
M3g4Star Erfahrener Benutzer Registriert seit: 23.08.2007 Beiträge: 1.510	wie ich sehe hast du 100%-20px benutzt .. hm klappt das bei den gängigen Browsern ?? Was ich noch gedacht hab, ähnlich wie du, mit einem verschachtelten Div zu arbeiten und dann dem äußeren Div ein Padding zu geben. Da müsste man mal testen wie sich das innere dann bei 100% verhält. Weil an sich wird der Wert ja von außen gesetzt und somit müsste sich das innere danach richten. Weißt wie ich mein ???

17.04.2007, 10:04
PsychoEagle there's only one psycho Registriert seit: 21.08.2007 Beiträge: 1.283 PHP-Kenntnisse: Anfänger	Also der FF2.0 und der IE6 haben beide keine Darstellungsfehler und machen das so wie es sich gehört. Wunderte mich ein wenig gg vor allem beim IE6. Wenn ich float einsetze funktioniert es aber nicht. Hmm, ja an sich weiss ich wie de meinst so hatte ich es vorher auch mal probiert, jedoch ohne Erfolg. Das Problem hierbei ist, wenn ich den äußeren Div ein Padding gebe, macht er die 100% + den Padding und geht somit über 100% Der innere Div macht dann schön seine 100% vom äußeren Div, aber das bringt ja nicht viel da der äußere zu groß ist Der äußere hat auch ein float, was das alles ein wenig beeinflusst. Ich werd die Version von mir noch im IE7 testen, denke aber das das keine Probleme bereiten wird, wenns im 6er funzt. Oder was meinst du noch so dazu? Grüße Psy __________________ "Weaseling out of things is important to learn. It's what separates us from the animals ... except the weasel." (Homer J. Simpson)

17.04.2007, 10:13
M3g4Star Erfahrener Benutzer Registriert seit: 23.08.2007 Beiträge: 1.510	Also ich teste meist IE 7 , IE 6 und IE 5.55 sowie FF 2.0 Ab und zu noch Netscape Aber das nur Ausnahme ... Solang dein Code zumindest W3 konform ist und die Anzeige das nicht verhaut ist doch gut wenn's so klappt. Lustig das mit dem Minus ^^ Code: <body style="padding:0px;margin:0px;"> <div style="width:100%-10px;padding:10px;background-color:#0066FF;"> <div style="background-color:#999999;width:100%;">moep</div> </div> </body> Klappt tatsächlich (FF2.0, IE7, IE6)

17.04.2007, 11:52
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Ist das mit dem Minus den w3 konform? Also ich hab da noch nie was von gehört. Das Ganze klingt verdächtig nach dem Box Model Bug. Verwende doch 2 ineinander verschachtelte divs, das äußere mit 100% und das innere mit margin 10px. Das sollte funktionieren.

17.04.2007, 12:51
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Interessant ist hier ja die Validierung des Stylesheets. 100%-20px ? Also ich weiß nicht...