Foros del Web » Creando para Internet » CSS »

Problemas (me ayudan con el posicionamiento de Divs por favor?)

Estas en el tema de Problemas (me ayudan con el posicionamiento de Divs por favor?) en el foro de CSS en Foros del Web. Buenos Dias foreros tengo un diseño que debo terminar, y tengo algunas dudas al respecto, fijense lo que he logrado hasta ahora: Y lo que ...
  #1 (permalink)  
Antiguo 18/03/2009, 08:15
 
Fecha de Ingreso: diciembre-2008
Ubicación: http://www.solucionesrios.tk/
Mensajes: 413
Antigüedad: 9 años
Puntos: 19
Problemas (me ayudan con el posicionamiento de Divs por favor?)

Buenos Dias foreros tengo un diseño que debo terminar, y tengo algunas dudas al respecto, fijense lo que he logrado hasta ahora:



Y lo que deberia ser:



A continuacion les pego el codigo de lo que he realizado hasta ahora:

Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>

<
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<
title>Documento sin título</title>
<
style type="text/css">
<!--
ul {
margin-top1em;
margin-bottom0.5em;
}

div {
    
border1px dotted gray;
    
padding.5em;
    
text-aligncenter;
}

#nav_menuH ul {
background-colorsilver;
text-aligncenter;
margin-left0;
padding-left0;
border-bottom1px solid gray
}

#nav_menuH li {
list-style-typenone;
padding0.25em 1em;
border-left1px solid white;
displayinline
}

#nav_menuH li:first-child {
bordernone;
}

#nav_menuV {
background-colorsilver;
bordersolid 1px gray;
width8em
}

#nav_menuV ul {
list-style-typenone;
margin0;
padding0;
bordernone
}

#nav_menuV li {
margin0;
padding0.25em 0.5em 0.25em 1em;
border-top1px solid gray;
width100%;
displayblock
}

html>body #nav_menuV li {
widthauto;
}

#nav_menuV li:first-child {
bordernone
}
html>body #nav_explorer li {
widthauto;
}

#nav_explorer li:first-child {
bordernone
}
-->
</
style>
</
head>

<
body>

<
div id="nav_header">HEADER
  
</div>
<
div id="nav_menuH">
<
ul>
<
li>enlace1</li>
<
li>enlace2</li>
<
li>enlace3</li>
<
li>enlace4</li>
<
li>enlace5</li>

</
ul>
</
div>
<
div id="nav_menuV">
<
ul>
<
li>enlace1</li>
<
li>enlace2</li>
<
li>enlace3</li>
<
li>enlace4</li>
<
li>enlace5</li>
</
ul>
</
div>
<
div id="nav_explorer">
  <
p>Este DIV quiero que salga en la parte centralal lado del menu vertical y justo debajo del menu horizontal</p>
  <
div id="nav_googleads">Y este DIV deseo que este colocado antes del footer al final en un recuadro a la derecha (aqui colocare google ads)  </div>
  <
div id="nav_footer">
    <
p>FOOTER</p>
</
div></div>
&
nbsp;

</
body>
</
html
Mi otra duda es como cargo el contenido dinamicamente en esos divs, es decir que al darle clic en un enlace, este me cargue en el div de contenido respectivamente, saludos y gracias por su ayuda!

Última edición por warbandit69; 18/03/2009 a las 08:16 Razón: ME equivoque
  #2 (permalink)  
Antiguo 19/03/2009, 14:37
Avatar de armandoweb  
Fecha de Ingreso: enero-2003
Ubicación: San Cristobal, Santa Fe, Argentina
Mensajes: 544
Antigüedad: 14 años, 10 meses
Puntos: 7
Respuesta: Problemas (me ayudan con el posicionamiento de Divs por favor?)

Hola:

Te recomiendo que leas este libro:

http://www.librosweb.es/css/index.html

Seguramente te ayudará a terminar el diseño que debes hacer, porque creo que nadie hará el trabajo por ti...

Espero sepas entender...

Saludos.

ARMANDOWEB.
__________________
www.awdesarrollos.com.ar - [twitter: @armandoweb] - [Skype: awdesarrollos"]
  #3 (permalink)  
Antiguo 19/03/2009, 15:42
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Problemas (me ayudan con el posicionamiento de Divs por favor?)

Hola:

Échale una ojeada a la página de Mikmoro, concretamente este apartado, tienes la extructura externa de tu página solo tienes que adaptarla a tus necesidades.

Saludos.

  #4 (permalink)  
Antiguo 20/03/2009, 06:24
 
Fecha de Ingreso: abril-2008
Mensajes: 62
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: Problemas (me ayudan con el posicionamiento de Divs por favor?)

Hola amigo! Como bien dijo jomaruro, has maquetado tu página correctamente ya.

Ahora lo que te falta es solo un poco de habilidad con CSS para flotar los elementos <div> a la derecha o a la izquierda de la página.

Fijate que hay un atributo llamado "float" que puede tener los siguientes argumentos: left, right, center, none. Este atributo le indica al navegador, donde deben posicionarse ("flotar") los recuadros. SI es left, pues flotará en la izquierda de la página. Si es right, a la derecha.

Otra cosa, cuidado a la hora de anidar los divs. Deberías tener algo así:

Código:
<div id="contenedor">
    <div id="nav_header">
    </div>

    <div id="nav_menuH">
    </div>

    <div id="recuadro_navs">

        <div id="nav_menuV">
        </div>

        <div id="nav_explorer">
        </div>

    </div>

[.......]

</div>

En este caso, fijate que he agrupado los divs en una especie de "filas". Así, está el #contenedor para agrupar TODOS los divs. Está el #recuadro_navs para agrupar la tercera fila (que contendría el menu vertical y el recuadro principal, y así sucesivamente. Podrías agregar también un #recuadro_headers y un #recuadro_footers así trabajas de forma mas ordenada.

El div #nav_menuV" tiene como atributo float: "left", y el div #nav_explorer tiene como atributo float: "right". Capische?

Ah! Y tené mucho cuidado con los anchos de cada div, que si son más grandes que el div que los contiene o que la ventana del navegador, directamente se te pasen abajo por más que uno haya estado flotado a la derecha y otro a la izquierda.
  #5 (permalink)  
Antiguo 20/03/2009, 09:43
 
Fecha de Ingreso: diciembre-2008
Ubicación: http://www.solucionesrios.tk/
Mensajes: 413
Antigüedad: 9 años
Puntos: 19
Respuesta: Problemas (me ayudan con el posicionamiento de Divs por favor?)

Gracias a todos por su ayuda ya logre darle vida al diseño solo me hacia falta estudiar un poco de CSS, saludos.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:01.