apelo a su sabiduria, no consigo maquetarlo

ferminako · #1 (**permalink**) 01/02/2012, 11:35

Buenas a todos, llevo unos dias intentado maquetar una web super sencilla (soy programador y no tengo idea de estilos) y resulta que no consigo hacer que un div contenedor crezca segun el contenido, les dejo el html y el css , si tienen un ratito para mirarlo se lo agradeceria, soy novato en css...

El tema es que tanto el div maincontent, como el content , crezcan segun el contenido del div dinamiccontent, dejando el div mainmenu justo debajo del dinamiccontent.

Os dejo una captura de lo que pretendo... http://imageshack.us/photo/my-images/685/29184509.jpg/

Gracias por su atención y disculpas por preguntar algo que supongo es tan básico pero no consigo alcanzar.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JJJJJJJJJJJJJJJJJ</title>
<link rel="stylesheet" type="text/css" href="css/styleBrands.css" />

</head>
<body>
<div id="Main">
<div id="Header">
<div id="Header1">
<h1 class="tittle">JJJJJJJ JJJJJJJJ</h1>
<h2 class="tittle">JJJJJJ</h2>
<div id="Separador"></div>
</div>
</div>
<div id="MainContainer">
<div id="Content">
<nav id="Brands">
<ul id="ulBrands" class="liEnlaces">
<li><a href="#" alt"">Brand</a></li>
<li><a href="#" alt"">Brand</a></li>
<li><a href="#" alt"">Brand</a></li>
<li><a href="#" alt"">Brand</a></li>
<li><a href="#" alt"">Brand</a></li>
<li><a href="#" alt"">Brand</a></li>
</ul>
</nav>
<div id="TittleBrand">
<p align="center" id="TittleBrandP">BRAND</p>
</div>
<section id="DinamicContent">
<div id="Items">
<table border="1px" cellspacing="20px" cellpadding="15px" width="700px" id="Catalogo">
<tr>
<td ><img src="images/foto.jpg"> <p class="pJoyaMarca" align="right">Sortija Parentesi Ob</p></td>

<td ><img src="images/foto.jpg"> <p class="pJoyaMarca" align="right">Sortija Parentesi Ob</p></td>
</tr>
<tr>
<td ><img src="images/foto.jpg"> <p class="pJoyaMarca" align="right">Sortija Parentesi Ob</p></td>

<td ><img src="images/foto.jpg"> <p class="pJoyaMarca" align="right">Sortija Parentesi Ob</p></td>
</tr>
<tr>
<td ><img src="images/foto.jpg"> <p class="pJoyaMarca" align="right">Sortija Parentesi Ob</p></td>

<td ><img src="images/foto.jpg"> <p class="pJoyaMarca" align="right">Sortija Parentesi Ob</p></td>
</tr>
</table>
</div>
</section>
</div>
<nav id="MainMenu">
<ul id="ulMenu" class="liEnlaces">
<li><a href="History.html">Una historia familiar</a></li>
<li><a href="Brands.html">Toda tentación tiene su marca</a></li>
<li><a href="Collections.html">Colecciones</a></li>
<li><a href="Contact.html">Contacto</a></li>
</ul>
</nav>
</div>
<footer id="Footer">
<p>JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ</p>
</footer>
</div>

</body>
</html>

body
{
background-color:white;
font-family: Arial;
font-size: 14px;
height: 100%;
margin: 0px;
padding: 0px;
width: 100%;
}
html
{
height: 100%;
width: 100%;
}
h1, h2, h3, p, div, a, img, ul, li
{
margin: 0px;
padding: 0px;
}

a{
text-decoration:none;
}
a:link {
color: #ac4b62;
}
a:visited {
color: #ac4b62;
}

#Brands{
border:1px solid orange;
float: left;
height:500px;
padding-left:50px;
width:150px;
}
#Content{
background-color: white;
border-bottom:2px solid #900e2d;
border-left:2px solid #900e2d;
border-right:2px solid #900e2d;
margin:0 auto 2% auto;
width:956px;
}
#DinamicContent{
border:1px solid blue;
height:500px;
width:723px;
float:right;
margin-bottom:100px;

}
#Footer{
margin-right:2%;
text-align:right;
}
#Footer p{

padding:0px;
margin:0px;
}
#Header{
background-color: #f4f4f4;
border-top:2px solid #f4f4f4;
border-right:2px solid #f4f4f4;
border-left:2px solid #f4f4f4;
margin:2% auto 0 auto;
width:996px;
}
#Header1{
background-color: white;
border-left:2px solid #900e2d;
border-right:2px solid #900e2d;
border-top:2px solid #900e2d;
margin:2% auto 0 auto;
width:956px;
}
#Items{
border:1px solid green;
width:723px;
}
.liEnlaces{
list-style:none;
}
#Main{
width:1000px;
margin:0 auto;
}
#MainContainer{
background-color: #f4f4f4;
border-right:1px solid #f4f4f4;
border-left:1px solid #f4f4f4;
border-bottom:1px solid #f4f4f4;
margin:0 auto;
width:996px;
min-height:500px;
}
#MainMenu{
clear:both;
border:1px solid red;
}
.pJoyaMarca{
margin-right:15%;
font-size:1.1em;
font-weight:bold;
}
#Separador{
margin:0 auto;
border-top:3px solid #900e2d;
width:860px;
}
.tittle{
text-align:center;
padding:10px;
}
#TittleBrand{
border:1px solid pink;
font-size:3em;
margin:0 auto;
padding-top:15px;
width:40%;
}
#TittleBrandP{
margin: 0px;
}
#ulBrands{
border-right:3px solid #900e2d;
margin-left:5px;
margin-top:35px;
height:380px;
}
#ulBrands li{
font-size:1.5em;
padding-top:15px;
}
#ulMenu {
margin: 3% auto 0.6% auto;
text-align:center;
}
#ulMenu li{
display: inline;
list-style-type: none;
margin-right: 0.5%;
padding:1% 0% 3% 0%;
font-size:1.2em;
font-weight:bold;
}
#ulMenu li:hover{
background: #900e2d;
}
#ulMenu li a {
padding:1% 1% 3% 1%;
}
#ulMenu li a:hover {
color:white;
}

maximilianojcelis · #2 (**permalink**) 01/02/2012, 12:07

Que un div crezca segun el contenido...
Probaste con un:

Código CSS:

Ver originalCopiarheight: auto

ferminako · #3 (**permalink**) 01/02/2012, 13:23

lo he probado tanto en maincontent como en content y niguno de los dos crece

maximilianojcelis · #4 (**permalink**) 01/02/2012, 13:47

Rarisimo que no te funcione. Proba con position relative y float left, si se te descuadra algo con el float usa clear.

ferminako · #5 (**permalink**) 01/02/2012, 14:12

no puede ser que al ser elementos que flotan , no los tengan en cuenta lso dos divs que hacen de contenedores?

ferminako · #6 (**permalink**) 01/02/2012, 14:21

les he quitado el float y aun moviendose todo siguen sin respetar a los divs contenedores :s

C2am · #7 (**permalink**) 01/02/2012, 14:46

El maincontent funciona bien, veo que se extiende hasta donde debería.
El content solo agregale

Código CSS:

Ver originalCopiaroverflow:hidden;

Saludos

ferminako · #8 (**permalink**) 01/02/2012, 14:50

Hola C2am , al hacer eso si es verdad que el content crece pero no todo lo que deberia, puesto que habiendo 3 filas en la tabla, corta la tabla hacia la 2 fila y media en vez de crecer más.(ie8,9,chrome y mozilla) y en ie8 el main menu no sale abajo sino a un lado :s
Gracias por tu interes, es de gran ayuda , este mundo es desconocido para mi :D

C2am · #9 (**permalink**) 01/02/2012, 14:55

Tienes un enlace para ver exactamente que tienes

ferminako · #10 (**permalink**) 01/02/2012, 15:00

te dejo un enlace a un rar con la web: http://dl.dropbox.com/u/52172162/web.rar el como debe quedar ya lo has visto en la imagen del primer post ;) gracias de nuevo

C2am · #11 (**permalink**) 01/02/2012, 15:07

El problema es que dinamicontent tiene una altura definida. Así que allí reside uno de los problemas.

ferminako · #12 (**permalink**) 01/02/2012, 15:32

Ho!! gracias :D se nota q soy novato, por ultimo en el caso de ie8 sale el mainmenu a un lado en vez de debajo de todo, a que se debe???pensaba que el clear:both solucionaba eso :S

C2am · #13 (**permalink**) 01/02/2012, 15:45

Me parece que tiene que ver con que IE8 no entiende el <nav> o etiquetas HTML5, pero no estoy seguro.
Las cambie por div y se posiciono como se espera.

ferminako · #14 (**permalink**) 01/02/2012, 15:49

gracias funciono!!! siento ser tan minucioso... al ponerme sobre cada elemento del menu (evento hover) se deslegaba un rectangulo granate que llegaba hasta el final del borde gris, al poner el overflow ya no lo hace hace hasta ahi sino solo hasta el limite del content, podria solucionarlo de alguna manera?

C2am · #15 (**permalink**) 01/02/2012, 16:06

En realidad no, estoy con el IE9 en modo IE8 y documento modo IE8.

Sobre el inconveniente con overflow:hidden, también lo note.
Con el overflow no podrás lograr el efecto que tenias. O mejor dicho en este momento no se me ocurre nada.
Una solución ubicar ese mainmenu en el footer y acomodarlo de manera de mantener la continuidad con el maincontent. Claro, siempre y cuando esos bordes de colores sean solo a los fines de prueba y en el final no queden.

ferminako · #16 (**permalink**) 01/02/2012, 16:08

de acuerdo, mañana me pondre a ello que es hora de ir a dormir aki en españa... y mañana madrugo , gracias una vez más C2am , un saludo ;)