Dreamweaver, agregar atributos a un div

ASYNTETYCO · #1 (**permalink**) 01/05/2008, 09:27

Bueno pues en dreamweaver puse un div y le puse como nombre div2. Me aparecio despues del primer div (sin id todavia, que es mi encabezado con 100% de ancho y una imagen alineada a la derecha).

Lo que quiero es que el div2 que va debajo del encabezado tenga 20% de ancho (simulando una columna) y luego inmediatamente insertar otro div que iría casi en medio con un ancho de 60% y otro div inmediatamente con un ancho de 20% igual como los 2 anteriores como si fueran columnas Sumarian un 100% del ancho.

El problema es que en Dreamweaver en la paleta de CSS le di doble click y en la opcion cuadro le puse ancho 20% Pues resulta que no solo cambia el tamaño del div que selecciono sino tambien el de abajo. Y todos los que vaya inserando cambian de tamaño al mismo tiempo. Yo solo quiero ponerle el tamaño a ese div para irlos dibujando y maquetando mis divs como si fueran 3 columnas y abajo de esos 3 quiero insertar otro div con ancho de 100% para que haga mi pie de pagina.

¿Alguien sabe como agregar atributos a un div de forma individual?, mi codigo es este:

<body>
<div><img src="OXIGENO-Encabezado.gif" width="323" height="160" /></div>
<div id="div2"> Colocar aquí el contenido de la nueva etiqueta Div</div>

ASYNTETYCO · #2 (**permalink**) 01/05/2008, 09:42

PROBLEMA DE ATRIBUTOS RESUELTO.
Ya logre ponerle el ancho que yo queria a las tablas, aqui esta mi codigo:

<body>
<div id="div1"><img src="OXIGENO-Encabezado.gif" width="323" height="160" /></div>
<div id="div2" style="width: 15%"> Colocar aquí el contenido de la nueva etiqueta Div</div>
<div id="div3" style="width: 50%">Colocar aquí el contenido de la nueva etiqueta Div</div>
<div id="div4" style="width: 35%">Colocar aquí el contenido de la nueva etiqueta Div</div>

Ahora el problema es que debajo del div 2 aparece el 3 y debajo del 3 aparece el 4. Yo lo que queria es que los divs 2,3 y 4 aparecieran juntos a modo de columnas para hacer un ancho del 100% Por que el div2 si aparece justo debajo del div 1 que es encabezado.

¿Como se hace esto?

rsb17 · #3 (**permalink**) 01/05/2008, 09:50

pruba con el atributo float

pon a la 3 y a la4 float:left;

No estoy seguro de q te funcione pero podria ser

Mikmoro · #4 (**permalink**) 01/05/2008, 10:13

Pon esto:

<body>
<div id="div1"><img src="OXIGENO-Encabezado.gif" width="323" height="160" /></div>
<div id="div2" style="width: 15%; float: left;"> Colocar aquí el contenido de la nueva etiqueta Div</div>
<div id="div3" style="width: 50%; float: left;">Colocar aquí el contenido de la nueva etiqueta Div</div>
<div id="div4" style="width: 35%">Colocar aquí el contenido de la nueva etiqueta Div</div>

A ver qué tal.

Mikel.

ASYNTETYCO · #5 (**permalink**) 01/05/2008, 10:59

Cita:

Iniciado por rsb17

pruba con el atributo float

pon a la 3 y a la4 float:left;

No estoy seguro de q te funcione pero podria ser

Si ya lo probe y si funciono, le di flotar: izquierda a la div 2, le di un ancho de 25. Despues al div 3 le di posicion relativa y se puso junto al div 2. Y el div 3 lo borre por que no voy a poner nada ahi.
Para mi pie inserte otros dos divs. Uno flotando a la izquierda con 25% de ancho y otro con posicion relativa donde va a ir mi menu en texto. los puse asi para que queden justo abajo de la caja de contenido.

Este es mi codigo por si le sirve a alguien:

<body>
<div id="div1"><img src="OXIGENO-Encabezado.gif" width="323" height="160" /></div>
<div id="separatdor" style="height:50%" ></div>
<div id="div2" style="width: 25%; float: left; margin: auto;"></div>
<div class="Estilo11" id="div3" style="width: 600px; height:400px; position: relative; background-color: #FF2222; layer-background-color: #FF2222; border-left: 1px dashed #EC0000; border-right: 1px dashed #EC0000;">Colocar aquí el contenido de la nueva etiqueta Div</div>
<div class="Estilo12" id="separador2"></div>
<div class="Estilo11" id="menu" style="width:600px; position:relative">
<div align="right">Principal | ¿Oxigeno? | Publicidad | Diseño gráfico | Contacto</div>
</div>
</body>
</html>

PERO DREAMWEAVER ME LO DETECTA COMO PROBLEMA.
Si dreamweaver me lo muestra como un problema sin embargo asi es como yo quiero que quede, pero me preocupa que dice que solo se mostrara en IE 6 y 7 yo tengo IE 7 y lo muestra como quiero es decir como si fueran 2 columnas pero no hay tales. Este texto es el que me muestra:

31. Error de flotante no flotante.
Si un elemento no flotante con un ancho determinado sigue inmediatamente a un elemento con flotación a la izquierda con un ancho determinado, el contenedor no flotante aparecerá a la derecha del elemento flotante en lugar de permitir que el elemento flotante lo solape.

Afecta: Internet Explorer 6.0, 7.0; Internet Explorer for Macintosh 5.2
Probabilidad: Probable.

Este es el codigo:

<div class="Estilo11" id="menu" style="width:600px; position:relative">
<div align="right">Principal | ¿Oxigeno? | Publicidad | Diseño gráfico | Contacto</div>
</div>

¿Alguien me puede ayudar?

ASYNTETYCO · #6 (**permalink**) 01/05/2008, 11:35

SOLUCIONAD.
Borre mi el div 2. Despues le di atributo margin al div 3, margen de 25% y solucionado. Sin errores, anteriormente no se veia bien en Firefox, ahora si. Solucionado.