Problemas con divs

chuequex · #1 (**permalink**) 02/10/2008, 08:44

saludos a todos soy novato con css y tengo un problema al ubicar mis divs. la cuestion es que quiero que salgan uno (div derecho) al lado de los otros no debajo. aqui les dejo el codigo.

index.html

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&iacute;tulo</title>

<link href="estilos/style.css" rel="stylesheet" type="text/css" />

</head>

 
<body>

 
<div id='contenedor'>

<div id='izquierdo'></div>

<div id="navigation" class="container">

        <div id="home" class="pri-nav active"><div><a href="home">home</a></div></div>

        <div id="about" class="pri-nav"><div><a href="about">about</a></div></div>

        <div id="services" class="pri-nav"><div><a href="services">services</a></div></div>

        <div id="solutions" class="pri-nav"><div><a href="solutions">solutions</a></div></div>

        <div id="contact" class="pri-nav"><div><a href="contact">contact</a></div></div>

  </div>

<div id='derecho'></div>

  </div>

</body>

</html>

style.css

Código PHP:

   
HTML {

    HEIGHT: 100&#37;;

}

BODY {

    HEIGHT: 100%;

    margin-bottom:0px;

    margin-left:0px;

    margin-right:0px;

    margin-top: 0px;

 
 
}

#contenedor{

    height: 100%;

    width:100%;

}

#izquierdo{

    width: 10%;

    height: 100%;

    background: url(../imagenes/izquierdo.png) repeat-y scroll;

    float:left;

    position:absolute;

    z-index :100;

    top: 0px;

    left:0px;

 

}

#derecho

{

    width: 80%;

    height: 100%;

    background:#339933;

    float: right;

    position:relative;

 
}

#navigation{/* contiene las imagenes del menu */

width:70px;

background: #CCCCCC;

 
}

 
.container{ /* clase del navigation */ 

    margin: 0pt auto;

    margin-left:100px;

    height: 100%;

    margin: 9.5%;

    background:#00CCFF;

    

 
}

#home, #home div, 

#about, #about div, 

#services , #services div, 

#solutions, #solutions div, 

#contact,  #contact div {

    width:80px;

    position:relative;

    height:97px;

    float:left;

    top: 0;

}

#home, #about, #services, #solutions, #contact{

    background-image: url(../imagenes/nav.png);

    background-attachment: scroll;

    background-repeat: no-repeat;

 
}

/* la posicion de cada item de la imagen comenzando de -30 para q se oculte una parte de la imagen*/

#home{

    background-position: -30px 0px;

    margin-left:0px;

    

}

#about{

    background-position: -30px -98px;

    margin-left:0px;

}

#services{

    background-position: -30px -196px;

    margin-left:0px;

}

#solutions{

    background-position: -30px -294px;

    margin-left:0px;

}

 
#contact{

    background-position: -30px -392px;

    margin-left:0px;

}

.pri-nav a{

    display:block;

    text-decoration:none;

    text-indent:-30000px;

}

.content{

    margin-left:100px;

    background:#00FF66;

}

 
#content-title{

background:#FFFFFF no-repeat scroll;    

width: 90%;

height: 100%;

margin-left:100;

}

gracias de antemano por su ayuda

eldjmix · #2 (**permalink**) 02/10/2008, 09:45

proba usando tablas, se te va a hacer un poco mas fasil.

chuequex · #3 (**permalink**) 02/10/2008, 09:47

si pero ya me canse de las tablas, kiero usar divs estoy aprendiendo eso.

eldjmix · #4 (**permalink**) 02/10/2008, 09:58

pero podes usar ambas, table y div, por ejemplo:

Código HTML:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="70"><div id="navigation" class="container">
        <div id="home" class="pri-nav active"><div><a href="home">home</a></div></div>
        <div id="about" class="pri-nav"><div><a href="about">about</a></div></div>
        <div id="services" class="pri-nav"><div><a href="services">services</a></div></div>
        <div id="solutions" class="pri-nav"><div><a href="solutions">solutions</a></div></div>
        <div id="contact" class="pri-nav"><div><a href="contact">contact</a></div></div>
  </div></td>
    <td></td>
    <td></td>
  </tr>
</table>

Table te sirve para que quede todo en su logar, sin andar lidiando con las propiedades de div.

webosiris · #5 (**permalink**) 02/10/2008, 10:07

Cita:

Iniciado por eldjmix

proba usando tablas, se te va a hacer un poco mas fasil.

eldjmix, deberias de leer esto.

chuequex, 2 cosas:
- estas teniendo es un problema de divitis. no todo es tablas ni todo son divs. tenes que usar los elelemtnos que necesites según el valor semántico de la información que tengas. Un menú por ejemplo es generalmente una lista desordenada de enlaces, entonces debes de usar los elementos que semánticamente tienen ese valor: UL y LI

- en tu css tienes varias cosas que son incompatibles uans con las otras, po ejemplo usar posicion absoulta y flotar el mismo elemento, etc... que quieres, generar 2 columnas? Entonces usa 2 divs, flota uno a la izq y el otro a la derecha, asignale un ancho a cada uno y ya está...

chuequex · #6 (**permalink**) 02/10/2008, 12:11

si bueno tablas voy a usar de eso no ay duda pero kiero maketarlo asi. bueno osiris el problema es q si he logrado poner div izq y derecho en linea pero al poner el menu el div derecho se me paso para abajo.