dividir un div

[argie01]

Hola,

estoy haciendo un diseño sin tablas siguiendo este ejemplo: http://nemesis1.f2o.org/aarchive?id=7
Funciona perfectamente y ya lo tengo casi acabo, excepto por un detalle: en el encabezado de ese ejemplo (llamado #banner) meto algo de código php, y quisiera que ese encabezado estuviera divido en 2 columnas, de tal manera de poder poner una imagen a la izquierda, y el php a la derecha.

Resumiendo, sería como partir en 2 el "div".

Alguien me puede decir como hacerlo ?? Por mas que intento la imagen siempre me sale encima del php, y he probado metiendo float: left en varias partes, y sigo sin saber hacerlo :(

Gracias !

[Lecquio]

es q el posicionamiento d imagenes en css a veces da kebraderos d cabeza
si kieres partir ese div en 2 mete dntro d él otros 2 divs, uno a la izda y otro a la dcha y en el d la izda mete la imagen y en el otro el codigo php.

[argie01]

Ya veo que da dolores de cabeza :)
He hecho los divs, uno al lado del otro, y ambos dentro de un div contenedor.
Este es el code:

<div id="banner"><div id="col1"><img src="templates/test/images/image2.gif" width="150" height="58" border="0"/></div><div id="col2"><?php mosLoadModules ( 'top' ); ?> </div></div>

Luego, en el css, agregué esto:

#col1 { margin-left: -554px; height: 58px; width: 154px;}
#col2 { height: 45px; width: 600px; }

lo del margin negativo es para ver si la imagen se movia hacia la izquierda, porque ahora sigo como antes: con la imagen arriba y el php debajo.
Pero además es que la imagen no aparece justo a la izquieda (en coordenadas "0 0"), sino que justo en coordenadas "0 154" (154px es el ancho de la columna izquierda).

Y ni idea de como moverla de ahi. He probado con "align", con "float", y no consigo arreglar eso...

Si me puedes dar una mano te lo agradecería mucho.

saludos

PD: la imagen no va definida en el css porque será un link...

[Lecquio]

para q los 2 nuevos divs salgan en la misma linea ponles esto:
a col1 ponle float:left y a col2 float:right.
si tienes problemas posicionando la imagen dntro dl div asignale una clase y a esa clase le indicas la posicion donde la kieres, q supongo q kerras:

Código:

position:relative;
top:0px;
left:0px;

a ver si t sirve

[argie01]

humm, no, no funciona :(
Lo de los float ya lo habia hecho.
Agregué una clase dentro de "col1" y le puse los valores que me diste y sigue sin funcionar.
También probé meter directamente esos 3 valores dentro de "col1" (borré la clase antes), y es como si no existieran, porque no cambia nada.

Puedes ver como se ve aquí: http://img264.imageshack.us/img264/4630/scr3hg.jpg
Lo que sale abajo, en naranja, es un menú, que debería ir al lado de la imagen roja, la cual debería ir 154 px hacia la izquierda...

PD:
he descubierto un margin-left en "banner" que hacia que la imagen no se moviera hacia la izquierda. Ahora lo hace, es decir aparece casi en coordenadas "0 0", en IE6.
Pero en FF106 y en Opera802 todo el contenido de los demás divs aparece movido 154px hacia la izquierda :(

[Lecquio]

acabo d hacer esto para probar:
http://usuarios.lycos.es/elrincondei...ps/banner.html
el codigo css q use fue este:

Código:

#banner
{
width:100%;
height:200px;
border:2px solid black;
}
#col1
{
height:125px;
width:154px;
border:2px solid red;
float:left;} 
#col2
{
height:45px;
width:600px;
border:2px solid blue;
float:right;
}

como ves con ponerles los float se han colocado 1 junto al otro y no m izo falta posicionar la imagen, con colocar col1 ya basto.
lo unico q se m ocurre es q la suma d los width d col1 y col2 sobrepasen el width dl banner
mira a ver

[argie01]

Esta tarde voy a probar tu code, pero el problema que tengo ahora es otro.
Si tomas todo el código de la web del link del primer post mio, verás que todo funciona bien, y que el div "banner" tiene todo el ancho del "container".

Pero al anidar dos divs dentro de "banner" algo pasa con el float:left del div "nav", que hace que flote todo el contenido de ese div (y de los demás) hacia la izquierda, pero solo con FF y Opera.

Prueba todo el código de esa page y verás lo que te digo...

salu2

[argie01]

Estuve haciendo pruebas, y al final ahora conseguí hacerlo funcionar en FF y Opera, pero no en IE.

Este es el code que uso para el php:

<div id="container"> <div id="banner"><div id="col1" align="left" ><img src="templates/web/images/image2.gif" width="135" height="60" border="0"/></div><div id="col2" align="left" ><?php mosLoadModules ( 'top' ); ?> </div></div>

El tamaño de la imagen2.gif es 135px x 58px.

Tengo que usar "align" y "width" y "height" porque sino se va todo al carajo...
Lo mismo con el css:

#banner {
width:747px;
height:60px;
background-color: #FFFFFF;
display: inline;
padding: 0; }

#col1 {
border-top: 10px solid #3182C6;
border-left: 10px solid #3182C6;
height:60px; width:135px;
border-right:2px solid red;
float:left;
background-color: #3182C6;
z-index: 130px;
padding: 0; }

#col2 {
border-right: 10px solid #3182C6;
border-top: 10px solid #3182C6;
height:60px; width: 600px;
border-left: 2px solid #9932CC;
float: right; padding: 0;
margin: 0; }

#container {
margin: 1em 5%;
background-color: #FFFFFF;
background: url(../images/bck04.gif) repeat-y;
width: 764px;
padding: 0; }

Si en "banner" no uso "width=747px" lo del IE6 se ve aún peor. Pero a medida que ese valor disminuye IE va mejorando, pero se descalabran los otros 2 navegadores. Y lo mismo para el "display: inline;".

Estas son las imágenes (la línea amarillo es el border-right de "col1", y la violeta el border-left de "col2"):

Firefox 1.0.6
Nota que la imagen de abajo aparece movida hacia arriba (a la chica de la derecha no se le ve la cabeza).

http://img240.imageshack.us/img240/7215/ff1062pu.gif

Opera 8.0.2
La imagen aparece bien:

http://img240.imageshack.us/img240/5195/opera8029zk.gif

IE6
La imagen aparece casi bien, pero mucho mas separada del menu que en Opera.

http://img240.imageshack.us/img240/7288/ie68og.gif

A este punto ya estoy desesperado.
Lo único que se me ocurre sería hacer que "banner" no sea 100% de ancho, y en cambio la columna "nav" se prolongue hacie arriba, hasta el "top" del "container" (pero ni idea de como hacer eso).

salu2

[codigoflecha]

Ahora no tengo tiempo de probarlo pero, si a banner le das un width de 747 px y a las col 1 y col 2 le das estos valores:
col1 : width 135 + border-left :10 + border right:2 // total 147
col2 : width 600 + idem :10 + idem :2// total 612
total col1 + col2 = 759 px
tienes unas valores de ancho de col1 y col2 mayores que el banner, con lo cual te descuadra, intenta probar a no pasar de los valores del banner.
Es una opción , como te dije no lo he probado así que no te aseguro que solucione tu problema.
un saludo