css margen anidado

css margen anidado Rate Topic:

#1 Horacio Segura

Advanced Member

Group: Members
Posts: 533
Joined: 11-August 09
Location:Argentina

Posted 25 February 2010 - 10:35 AM

Hola amigos

yo otra vez con css

tengo un problema

tengo grupos anidados y quiero que los grupos esten indentados
hice algo asi

<div class="master">
 <div class="detail">
   <div class="simple">
      <p> algo </p>
   </div>
 </div>
</div>

y el css


.master {
  margin-left:10px;
  
}

.detail {
    margin-left:20px;
}

.simple {
    padding: 0.13em 0;
}

Pero no sale indentado como quisiera

yo quiero algo asi

Quote

MASTER1
...DETAIL1
.....pepe
...DETAIL2
.....papa
MASTER2

y sale asi

Quote

MASTER1
...DETAIL1
.....pepe
......DETAIL2
........papa
..........MASTER2

gracias !!!

KISS - Keep It Simple Stupid
ASAP-As Soon As Possible
http://www.yiiframew...oc/cookbook/71/
http://hmsegura.blogspot.com/

#2 PoL

Advanced Member

Group: Members
Posts: 505
Joined: 05-November 08
Location:Buenos Aires, Argentina

Posted 25 February 2010 - 10:40 AM

Hola Horacio,
proba asi:

.master {
  padding-left:10px;
 
}

.detail {  
  padding-left:10px;
}

.simple {
    padding: 0.13em 0;
}

Padding es el "margen hacia adentro" (Busca "modelo de cajas en css" y te vas a dar cuenta)

Don't say what you think, think what you say
The problem is communication! Excess of communication!

#3 PoL

Advanced Member

Group: Members
Posts: 505
Joined: 05-November 08
Location:Buenos Aires, Argentina

Posted 25 February 2010 - 10:42 AM

Perdon, vi el indentado que hicieste despues de que postee...
Tenes bien anidados los div?
Me podes mostrar un ejemplo con mas master details, etc, pero el html mostrame...

Don't say what you think, think what you say
The problem is communication! Excess of communication!

#4 Horacio Segura

Advanced Member

Group: Members
Posts: 533
Joined: 11-August 09
Location:Argentina

Posted 25 February 2010 - 10:59 AM

PoL, on 25 February 2010 - 10:42 AM, said:

Perdon, vi el indentado que hicieste despues de que postee...
Tenes bien anidados los div?
Me podes mostrar un ejemplo con mas master details, etc, pero el html mostrame...

los div estan anidados

ok, no te asustes con el codigo
lo estoy mejorando de a poco

ejemplo.html (1.22K)
Number of downloads: 8

[edit]

master=matricula
detail=novedad

This post has been edited by Horacio Segura: 25 February 2010 - 11:00 AM

KISS - Keep It Simple Stupid
ASAP-As Soon As Possible
http://www.yiiframew...oc/cookbook/71/
http://hmsegura.blogspot.com/

#5 Jack Fiallos

Standard Member

Group: Members
Posts: 252
Joined: 15-October 09
Location:Mexico

Posted 25 February 2010 - 11:15 AM

Acabo de ver el codigo.. y tambien cuando vi como estabas identando pense en si estabas cerrando correctamente los divs.. pero creo que un ejemplo claro y sencillo seria

<html>
<style>
.master {
  margin:10px;
  border:1px solid blue;
  
}

.detail {
    margin:20px;
	border: 1px solid red;
}

.simple {
    margin: 30px;
	border:1px solid orange;
}
</style>
<div class="master">
	Master
	<div class="detail">
		Detail
		<div class="simple">
			<p> algo </p>
		</div>
	</div>
</div>
<div class="master">
	Master
	<div class="detail">
		Detail
		<div class="simple">
			<p> algo </p>
		</div>
	</div>
</div>
<div class="master">
	Master
	<div class="detail">
		Detail
		<div class="simple">
			<p> algo </p>
		</div>
	</div>
</div>
</html>

Celestic Dev Team
Yii Open Source Project Manager

#6 PoL

Advanced Member

Group: Members
Posts: 505
Joined: 05-November 08
Location:Buenos Aires, Argentina

Posted 25 February 2010 - 11:40 AM

Exactamente lo que dice Jack... el problema esta en que los divs no estan bien anidados... el ejemplo que puso Jack es perfecto para lo que queres lograr...

Don't say what you think, think what you say
The problem is communication! Excess of communication!