Busco esa luz que me guíe en este nuevo camino de perdición
6 seguidores
Oh, dios!!!! Estoy perdido? mucho CSS, mucho Div, pero? no encajan ni pa?tras!!!!
Pido al apóstol Meddle que me ilumine!!! Esto tendría que ser coser y cantar, pero nole, nole.
¿Cómo puede ser que una tabla de 770 de ancho de tres filas y tres columnas, cuadre sin problema y eso mismo con divs sea un carajal?
También se la suelto al apóstol Txuma? Sirva la presente como propuesta formal para un seminario ;) o taller de esta nueva religión.
txuma
pon el codigo a ver qué le pasa... ;)
Cote
Dentro del Body:
<code>
<div id="contenedor">
<!-- Inicio Cabecera -->
<div id="cabecera">
Cabecera
</div>
<!-- Fin Cabecera -->
<!-- Inicio Lateral Izquierdo -->
<div id="lateralIzquierdo">
Lateral izquierdo
</div>
<!-- Fin Lateral Izquierdo -->
<!-- Inicio Barra navegación -->
<div id="barraNavegacion">
barraNavegacion
</div>
<!-- Fin Barra navegación -->
<!-- Inicio Contenedor -->
<div id="contenedor">
<div class="contenido">
Contenido
</div>
</div>
<!-- Fin Contenedor -->
<!-- Inicio Lateral Derecho -->
<div id="lateralDerecho">
lateralDerecho
</div>
<!-- Fin Lateral Derecho -->
<!-- Inicio Pie -->
<div id="pie">
Pie
</div>
<!-- Fin Pie -->
</div>
</code>
Y en el CSS:
<code>
body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
}
#contenedor{
width: 770px;
}
#cabecera{
padding: 10px 0px 0px 0px;
border-bottom: 1px solid #BBCBE2;
width: 770px;
height: 134px;
background-image:url(/images/f.cabecera.gif);
}
#lateralIzquierdo{
float: left;
width: 217px;
height: 100%;
margin: 0px;
padding: 0px;
background-color: #BBCBE2;
background-image:url(/images/f.lat.izq.gif);
}
#barraNavegacion{
float: left;
font-size: 60%;
height: 15px;
width: 454px;
padding: 2px 0px 0 10px;
}
#contenedor{
float: left;
width: 402px;
border-left: 1px solid #BBCBE2;
}
#lateralDerecho{
float:right;
width: 149px;
border-left: 1px solid #BBCBE2;
border-bottom: 1px solid #BBCBE2;
}
.contenido{
padding: 0px 0px 10px 10px;
font-size: 80%;
}
</code>
El lateral derecho se coloca debajo del contenedor. :|
Posteriormente lo que quiero, es poder programarlas de tal forma que si es una sección sin barra de navegación, que el contenedor y el lateral derecho, suban a la misma altura que el lateral izquierdo.
¿Cómo lo ves?
black
que es lo que quieres? que el lateral se coloque dentro del contenedor?
Cote
Necesito que cuadren todas las divisiones como en la siguiente imagen:
http://www.strategia.tk/domestika/tabla1.gif
A la división cinco, se le pira la pinza y se posiciona debajo de la cuatro.
Más tarde (cuando cuadren) programaré la página para que en función al tipo de sección que sea, desaparezca la división tres y dejarlas así:
http://www.strategia.tk/domestika/tabla2.gif
helenp
Mirandolo un poco,
de entrada tienes 2 contenedor en el css.....uno mas estrecho que otro,
quitando este: #contenedor{
float: left;
width: 402px;
border-left: 1px solid #BBCBE2;
}
ya se ve mejor..........:)
yo tengo mas o menos mi web así, pero usando margin-left etc en vez de floats.........
meddle
http://css.maxdesign.com.au/floatutorial/
los primeros te iran bien para pillar algo de teoria, y despues el 9 te ira bien especialmente porque es muy parecido a lo que tu quieres.
Jimena
Como ya te comentó Helenp tienes dos elementos con el mismo id (contenedor) y eso consigue que el CSS se haga la picha un lio. Aparte, algunos elementos se te iban abajo del todo porque las anchuras en pixels no le daban para encajar en el lugar que le habias puesto. El código para hacer más o menos lo que quieres es:
HTML:
<code>
<div id="contenedor">
<!-- Inicio Cabecera -->
<div id="cabecera">
Cabecera
</div>
<!-- Fin Cabecera -->
<!-- Inicio Lateral Izquierdo -->
<div id="lateralIzquierdo">
Lateral izquierdo
</div>
<!-- Fin Lateral Izquierdo -->
<!-- Inicio Barra navegación -->
<div id="barraNavegacion">
barraNavegacion
</div>
<!-- Fin Barra navegación -->
<!-- Inicio Contenedor -->
<div id="cuerpo">
Contenido
</div>
<!-- Fin Contenedor -->
<!-- Inicio Lateral Derecho -->
<div id="lateralDerecho">
lateralDerecho
</div>
<!-- Fin Lateral Derecho -->
<!-- Inicio Pie -->
<div id="pie">
Pie
</div>
<!-- Fin Pie -->
</div></code>
CSS (le he puesto colores de fondo para aclarame mejor):
<code>
body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
}
#contenedor{
width: 770px;
}
#cabecera{
padding: 10px 0px 0px 0px;
border-bottom: 1px solid #BBCBE2;
width: 770px;
height: 134px;
background-color:#E9F1FF;
}
#lateralIzquierdo{
float: left;
width: 217px;
height: 200px;
margin: 0px;
padding: 0px;
background-color:#D4CFAA;
}
#barraNavegacion{
float: left;
font-size: 60%;
height: 15px;
width: 543px;
padding: 2px 0px 0 10px;
background-color:#7DABFF;
}
#cuerpo{
float: left;
width: 402px;
border-left: 1px solid #BBCBE2;
padding: 0px 0px 10px 10px;
font-size: 80%;
background-color:#F7F5EB;
}
#lateralDerecho{
float:right;
width: 139px;
border-left: 1px solid #BBCBE2;
border-bottom: 1px solid #BBCBE2;
background-color:#D4CFAA;
}
#pie {
width: 100%;
clear:both;
background-color:#E9F1FF;
}
</code>
Por otro lado olvídate de la intrucción height:100% porque no funciona como en las tablas. Si quieres dar la impresión de que el lateral llega hasta abajo lo mejor es que le pongas un fondo al div #contenedor.
:)
Cote
Muchas gracias a todos.
Hola Jimena, ¿cómo va todo?
Veremos como sale el invento. Ya os contaré.