Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] codigo css posicionar div

Estas en el tema de codigo css posicionar div en el foro de CSS en Foros del Web. Me gustaria q me dieran un tip de como poder lograr posicionar el div#cp q es el cuadro negro al lado del div#sidebar1 q es ...
  #1 (permalink)  
Antiguo 07/03/2013, 18:06
 
Fecha de Ingreso: enero-2011
Mensajes: 10
Antigüedad: 13 años, 3 meses
Puntos: 0
Pregunta codigo css posicionar div

Me gustaria q me dieran un tip de como poder lograr posicionar el div#cp q es el cuadro negro al lado del div#sidebar1 q es el q contiene el arte al lado izquierdo
Aqui les dejo el link de la web: http://urbanconnexion.net/Home.html

Aqui esta el codigo css

Código:
@charset "utf-8";

body {background-color: #FFF;
}
#contenedor{
	float:left;
	width: 100%;
	height:auto;
	position: absolute;
	min-width:1333px;
	

	
	
}
#ab { background-image:url(http://urbanconnexion.net/menulinea1.png);
      width: 100%;
	  height: 40px;
	  margin-bottom: 5px;
}
/*Estilo para el banner superior*/
#banner_caja1 { width: auto;
                height: auto;
}
#banner_1 { float:left;  
            width: 820px;
            height: 120px;
			margin-right: 10px;
}
#radio { float:left;
         width: 500px;
		 height: 120px;
		 border-width:thin;
		 border-style:dotted;		 
		 
}
/*Finaliza Estilo para el banner superior*/
#clear{clear:both;}

/*Comienza el menu*/
#navi{border-width:thin;
      border-bottom-style:dotted;
      width: 100%;
      height: auto;
	  padding-left:200px;
	  float:left;
	  list-style: none;
	     
}
#navi li{ float:left;
          
}
#navi li a{display:block;
           font-size:20x;
		   color:#000;
		   padding-left: 110px;
		   
		   
}
#navi li:hover > a{color:  #CCC;}
/* termina el menu*/

/* div para un elemento flash */

#cajaflash{float:left;
	       width:100%;
	       height:auto;
	       margin: 0 0 0 0;
		   border-bottom-width:thin;
		   border-bottom-style:dotted;
		   
		   
}
	
	          
#naviflash { clear:left;
	         width: 900px;
	         height: 200px;
             margin: 0 auto 0 auto;
			 background-color:#666;
}
/* div del contenido principal*/

#sidebar1{width: 200px;
          height:auto;
		  float:left;
		  position:absolute;
		  margin-left:50px;
		  border-width:thin;
		  border-style:dotted;
		  
}
#promo_L1{width: 150px;
        height: 500px;
		background-color:#666;
		border-width:thin;
		border-style:dotted;
		border-color:#000;
		margin-bottom: 15px;
		margin-left:25px;
		
}
#promo_L2{width: 150px;
        height: 200px;
		background-color: #FFF;
		border-width:thin;
		border-style:dotted;
		border-color:#000;
		margin-bottom: 15px;
		margin-left:25px;
}

#promo_L3{width: 150px;
        height: 100px;
		background-color: #FFF;
		border-width:thin;
		border-style:dotted;
		border-color:#000;
		margin-bottom: 15px;
		margin-left:25px;
}
#cp{ float:left;
	background-color:#000;
    width:100%;
	height: 2000px;
	position: static;
}

Aqui el html
Código:
<!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>Urbanconnexion.net</title>
<link href="Home.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>

<div id="contenedor">

                    <!-- el div que contiene la linea de arriba antes del banner ce urbanconnexion -->
<div id="ab">
 </div>
 
                                   <!-- div del banner-->
<div id="banner_caja1">

  <div id="banner_1">
    <img src="http://urbanconnexion.net/baner2s.png" width="820" height="120" />
    </div>
  <div id="radio">
  Aqui va un radio o mp3 player
  </div>
</div>                            <!-- termina banner caja1-->

<div id="clear"></div>

                                     <!-- div del menu-->
 <ul id="navi">
 
 <li><a href="#">Home</a></li>
 <li><a href="#">Musica</a></li>
 <li><a href="#">Fotos</a></li>
 <li><a href="#">Foro</a></li>
 <li><a href="#">Contact</a></li>
 <li><a href="#">Eventos</a></li>
 
 </ul>                              <!-- termina el menu-->
 
 
 <div id="clear"></div>
 
                             <!-- empieza el div del flas de promociones superior-->
 
 
 <div id="cajaflash">

 <div id="naviflash">Aqui va otro elemto flash
 </div>
 </div>                  <!-- termina el div del flash de promo-->
 
 <div id="clear"></div>
 
 
 
 <div id="sidebar1">
 
 <div id="promo_L1"><img src="http://urbanconnexion.net/nyjory.jpg" width="149" height="500" /> </div>
 <div id="promo_L3"></div>
 <div id="promo_L1"> </div>
 <div id="promo_L2"> </div>
 <div id="promo_L1"> </div>

 </div>
 
 <div id="cp"></div>
 


 
 
 
 

  </div>            
<!-- cierra contenedor-->
  </body>

</html>



Espero que puedan decirme que estoy haciendo mal... Grax de ante mano
  #2 (permalink)  
Antiguo 08/03/2013, 06:35
Avatar de madman_18  
Fecha de Ingreso: agosto-2010
Mensajes: 792
Antigüedad: 13 años, 8 meses
Puntos: 14
Respuesta: codigo css posicionar div

Creo que el problema está en que estás aplicando al float:left al elemento que tienes dentro del banner-caja.

Si no estoy muy mal tu composición creo que debería ser así:
Código CSS:
Ver original
  1. #contendor{width:auto;height:auto}
  2. #izquierda{float:left;width:200px;height:auto;}
  3. #derecha{float:right;width:500px;height:auto;}
  4. #limpia{clear:both}
Código HTML:
Ver original
  1. <div id=contenedor>
  2. <div id=izquierda>
  3. <!-- aquí metes los divs con los banner y demás -->
  4. </div>
  5. <div id=derecha>
  6. <!-- aquí metes el contenido de tu página, el texto y demás -->
  7. </div>
  8. <div id=limpia>
  9. <!-- este te va a servir por si pones contenido abajo de esos dos divs no se te descontrole -->
  10. </div>
  11. </div>

Creo que entendí que eso es lo que querías...pruébalo editando los width y los height y a ver si así te funciona
__________________
"Si consigues ser algo más que un hombre, si te entregas a un ideal, te convertes en algo muy diferente"
  #3 (permalink)  
Antiguo 09/03/2013, 13:21
 
Fecha de Ingreso: enero-2011
Mensajes: 10
Antigüedad: 13 años, 3 meses
Puntos: 0
Respuesta: codigo css posicionar div

Grax por ayudarme madman_18 puedes darme tu email para preguntarte unas cosas..?
  #4 (permalink)  
Antiguo 09/03/2013, 14:35
Avatar de madman_18  
Fecha de Ingreso: agosto-2010
Mensajes: 792
Antigüedad: 13 años, 8 meses
Puntos: 14
Respuesta: codigo css posicionar div

Cita:
Iniciado por azael222 Ver Mensaje
Grax por ayudarme madman_18 puedes darme tu email para preguntarte unas cosas..?

Hola! De nada, para eso estamos todos por el foro...en cuanto al e-mail....verás tengo por norma no darlo a personas que no conozco por unas historias que me pasaron ;)

Cuando tengas algún problemilla o algo me puedes escribir por aquí en algún privado y te contesto sin problemas :)
__________________
"Si consigues ser algo más que un hombre, si te entregas a un ideal, te convertes en algo muy diferente"
  #5 (permalink)  
Antiguo 09/03/2013, 19:28
 
Fecha de Ingreso: enero-2011
Mensajes: 10
Antigüedad: 13 años, 3 meses
Puntos: 0
Respuesta: codigo css posicionar div

ohh ok entiendo no problem por lo del email no soy un acosador jajaja.......... Bueno ps pude solucionar el dilema q tenia con el div cambiandole a el div#cp que tenia el widht: al 100% por 80% eso me lo alineo el #cp justo al lado del div#sidebar1 como yo queria. Ahora dentro del div#cp intruduje 2 div adicionales a uno le llame #songs que es donde pondre las canciones para q las puedan bajar ese div quedo donde queria que quedara el segundo div #sidebar2 quedo al lado derecho del div#songs pero a nivel donde termina el div#songs en otras palabras mientras agrego mas divs dentro del div#songs el div#sidebar2 va bajando y siempre queda alineado con el borde inferior del div#songs entra a esta direcion para que veas a que me refiero http://urbanconnexion.net/Home.html.net el cuadro negro es el div#cp
  #6 (permalink)  
Antiguo 09/03/2013, 19:39
 
Fecha de Ingreso: enero-2011
Mensajes: 10
Antigüedad: 13 años, 3 meses
Puntos: 0
Respuesta: codigo css posicionar div

Aqui te dejo el html

Código HTML:
<div id="cp">
 
 
 
 
 <div id="songs"></div>
 <div id="songs"></div>
 <div id="songs"></div>
 <div id="songs"></div>
 
 <div id="clear"></div>
 
 <div id="sidebar2">
 
 <div id="promo_R1"></div>
 <div id="promo_R3"></div>
 <div id="promo_R3"></div>
 <div id="promo_R1"></div>
 <div id="promo_R2"></div>
 <div id="promo_R3"></div>
 
 <div id="clear"></div>
 
 </div> 
 
 </div> 


aqui esta el css del div#cp div#songs div#sidebar2:


Código CSS:
Ver original
  1. /*------------------------------------------empieza el div de las canciones para bajar---------------------------------*/
  2.        
  3. #cp{ float:left; background-color:#000; width:80%; height: auto; }
  4.  
  5. #songs { width: 800px; height: 200px; background-color:#666;  margin-bottom: 25px; }
  6.  
  7. /* --------------------------------termina el div central donde estan las canciones para bajar------------------------------*/
  8.  
  9. /* --------------------------------empieza el div sidebar2------------------------------*/
  10.  
  11. #sidebar2{ width: 200px; height:auto; float: right; border-width:thin;  border-style:dotted; }
  12.  
  13. #promo_R1{ width: 150px; height: 500px; background-color:#666; border-width:thin; border-style:dotted; border-color:#000;
  14.         margin-bottom: 15px; margin-left:25px; }
  15.        
  16. #promo_R2{ width: 150px; height: 200px; background-color: #FFF; border-width:thin; border-style:dotted; border-color:#000;
  17.         margin-bottom: 15px; margin-left:25px; }
  18.  
  19. #promo_R3{ width: 150px; height: 100px; background-color: #FFF; border-width:thin; border-style:dotted; border-color:#000;
  20.         margin-bottom: 15px; margin-left:25px; }
  21.        
  22. /*------------------------------------termina el el div sidebar2------------------------------*/
  #7 (permalink)  
Antiguo 09/03/2013, 21:52
 
Fecha de Ingreso: enero-2011
Mensajes: 10
Antigüedad: 13 años, 3 meses
Puntos: 0
Respuesta: codigo css posicionar div

puede solucionar el error.... ya quedo como queria lo que cambie fue al codigo css al div#songs el valor height de 200px le puse auto y funciono

Etiquetas: hover, html
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 09:45.