help ! me doy por vencido !

Peiping · #1 (**permalink**) 03/03/2008, 11:09

Estoy maquetando una actualización de mi web.
Y quiero hacerla en CSS. Pero tengo un problema a ver si alguien me puede ayudar

Quiero juntar mi
<div id="izq">

con los div: <div id="principal"> y <div id="idioma">

el ejemplo está en www.construirturismo.com.ar/test.asp

Les pego los códigos para que me den una mano

ASP

<body>
<div id="contenedor">
<div id="header"><% call header %></div>
<div id="idioma">IDIOMA</div>
<div id="cuerpo">
<div id="der">DERECHA</div> <div id="principal"> principal </div> <div id="izq">IZQUIERDA</div>
</div>

<div id="menuinf"> <% call menuinf %> </div>
<div id="pie"> <% call piepagina %> </div>
</div>

</body>

CSS

BODY {
font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 10 0 10 0px;
text-align: center;
background-color: #ebebeb;
}
#contenedor{
text-align: left;
width: 980px;
margin: auto;
}
#header{
background-color: #d0d0ff;
color: #333300;
font-size:12pt;
font-weight: bold;
}

#idioma {
background-color: #d0d0ff;
color: #ffffff;
font-size:12pt;
font-weight: bold;
padding: 3 3 3 10px;
}

#cuerpo{
margin: 10 0 10 0px;
}

#der{
width: 150px;
background-color: #999999;
float: left;
}

#izq{
width: 190px;
background-color: #999999;
float:right;
}

#principal{
margin-left: 150px;
background-color: #ffffff;
width: 630px;
padding: 4 4 4 4px;
}

#menuinfd {
width: 130px;
margin-bottom: 10px;
margin-top: 10px;
float: right;
height: 100px;
border:1px;
border-color:#FF9933;
border-style:dashed;
padding: 0 0 0 0px;
}
#menuinfds {
width: 122px;
margin-bottom: 4px;
margin-top: 4px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
color: #FF9933;
height: 20px;
text-align:center;
}

#menufoto {
width: 122px;
margin-bottom: 4px;
margin-top: 8px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
color: #FF9933;
height: 20px;
text-align:center;
}
#pie{
background-color: #cccccc;
padding: 3 10 3 10px;
text-align:right;
clear: both;
}
#menuinf{
background-color: #ffffff;
clear: both;
}

hades87 · #2 (**permalink**) 03/03/2008, 13:16

pero jutnar a que te refieres? que los 3 formen 1 solo div?

por que gastas un fichero asp en vez de html?

Peiping · #3 (**permalink**) 03/03/2008, 13:42

hola hades, gracias por tus palabras...
la página original es www.construirturismo.com.ar

que como verás es un desastre de tablas y cosas unas dentro de las otras en el código fuente.
mi idea ahora es relanzar el sitio.
Yo en realidad soy agente de viajes... que algo de maña me doy con esto de diseñar que es mi pasatiempo y cable a tierra.

El maquetar en ASP es porque voy a hacer todo el sitio en ASP nuevamente, pero con CSS no como está hecho ahora... jajaj y si me salgo de mi estructura me pierdo..

con juntar me refiero que queden los 3 div en la misma linea a la misma altura (obviamente respetando sus posiciones, tal y como puedes ver la columna ¨aca viene el menú con la columna ¨principal¨me gustaría que quede la columna ¨izquierda¨) www.construirturismo.com.ar/test.asp y que si crece uno los otros dos crezcan a la par.

Tks.

saulhm · #4 (**permalink**) 03/03/2008, 14:09

Buenas.

Yo no alcanzo a entender el error o lo que quieres. Entré a la página que señalas y no vi nada raro (unos errores de dedo por ahi)...espera, lo estoy viendo en Firefox.

Voy a verlo con iexplorer

.
.
.

Bueno, parece todo normal, solo que aquí veo un fondo azul que no se mostraba en Firefox.

Lo que te decían hace un rato del ASP es en este caso que no tiene nada que ver el ASP con la hoja de estilos. En el mundillo este de los servidores PHP es más popular, pero igual, los estilos son muy aparte. No importa que la extensión sea ASP o PHP la hoja de estilos va a ser interpretada como un típico CSS dentro de un HTML.

Creo que cuando se ponen dos o mas DIVs a funcionar como columnas dentro de otro DIV hay que abrir y cerrar el DIV contenedor con la instrucción CLEAR.

No se si por ahí va el asunto.

Si el error ya quedó resuelto sería bueno que postearas como lo resolviste y pusieras algún letrerito que dijera "Solucionado"

Saludos.

cleft · #5 (**permalink**) 03/03/2008, 14:13

A la estructura agrega nada mas un clear:both

Código:

<div id="cuerpo">
<div id="der">DERECHA</div> <div id="principal"> principal </div> <div id="izq">IZQUIERDA</div>
<div class="clear"></div>
</div>

Si no deseas utilizar ese elemento adicional en la estructura, revisa esto:
http://www.positioniseverything.net/easyclearing.html

Cambios en CSS: (Flotar las capas a la izquierda)

Código:

#cuerpo{
margin: 10px 0 10px 0; /* Aqui define la unidad siempre, en este caso px */
} 

#der{
width: 150px;
background-color: #999;
float: left;
}

#izq{
width: 190px;
background-color: #999;
float:left;
}

#principal{
background-color: #ffffff;
width: 630px; /* Le he quitado el padding para que solo pruebes */
float:left;
}

.clear {
clear: both;
}

Lo del padding y el margen extra que desees dejar para separar las capas, quedan a tu gusto. Nada mas recordar el Box Model Bug de IE v5 en el caso de agregar padding.

Espero te sirva. Cualquier cosa nos avisas.

Peiping · #6 (**permalink**) 03/03/2008, 15:32

grande cleft !!!!!!! funciono 100 puntos