Comunidad de diseño web y desarrollo en internet online

Mover un DIV en un CSS

Citar            
MensajeEscrito el 02 Dic 2010 07:36 pm
Hola Chicos y chicas!.

Espero por favor que me soluciones el problema.

Mi problema es que quiero mover un Div que esta en un CSS pero no se como, aquí esta el código, y pensé que me podrían ayudar.

Código :

#sidebar {float:left; width:250px; background:url(http://img441.imageshack.us/img441/8091/menuce.jpg) left repeat-y;
}


Lo que trato de hacer es que se mueva para donde le de las coordenadas, Entienden?.

Espero que me ayuden. Lo nesecito.

Gracias, Adios.

Por Carlos1020

28 de clabLevel



 

--

firefox
Citar            
MensajeEscrito el 02 Dic 2010 09:12 pm
¿Un div que está en un CSS?, eso no tiene sentido, los divs deben estar en el HTML y CSS es para dale estilos nada más.

La verdad es que no entiendo qué quieres decir con "mover un div". Si quieres posicionarlo en un lugar específico deberás comenzar por no hacerlo flotante porque siendo flotante es el navegador el que determina dónde irá a parar.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 02 Dic 2010 09:50 pm
La verdad no supe como explicarte.. como explicar :), Lo que quiero es Posicionarlo en un lugar ... SI quieres te paso el códgo completo del css..., Quiero posicionar el sidebar mas cerca de las esquinas del sitio. código:

Código :

            <style type="text/css">
         <!--
                  h1#title{display: none;}
h2#title span {display: none;}
#nav_container{display: none;}
#pre_header{display: none;}
#header{display:none;}

*{
   margin: 0px;
   padding: 0px;
}
a {
   color: #0EA2CC;
   text-decoration: none;
}
#headertopback {
width: 1279px;
height: 35px;
background-image: url(http://img227.imageshack.us/img227/4417/veausted2.png);
}

h1, h2, h3 {font-family:"Trebuchet MS", Verdana, sans-serif;}
h1 {font-size:26px;}
h2 {font-size:18px;}
h3 {font-size:16px;}
body {
   background:url(http://staticns.ankama.com/dofus/www/img/footer/body_roublard.es.jpg) fixed center top;
   background-color:#FFF;
   font:12px Verdana, Arial, Helvetica, sans-serif;
   background-repeat: no-repeat;
   background-image: url(http://img249.imageshack.us/img249/6204/backgroundz0.jpg);
}
#wrap {width:950px; margin:0 auto 0 auto;}
#header2 {background:url(http://img839.imageshack.us/img839/967/cabezala.png) no-repeat; height:174px;}
#content {background:url(http://img819.imageshack.us/img819/512/sitebgo.png) repeat-y; padding:0 30px 0 29px;}
#right {
   float:right;
   width:640px;
}
#right p {line-height:20px; margin-bottom:20px;}
#right a {border-bottom: solid 1px #0ea2cc;}
#right a:visited, active {border:none;}
#right a:hover {color:#000; border-bottom:solid 1px #000;}
h1 a, h2 a, h3 a, h4 a {text-decoration:none; border:none!important;}
.clear {clear:both;}
#sidebar {float:left; width:250px; background:url(http://img441.imageshack.us/img441/8091/menuce.jpg) left repeat-y;
}
#sidebartop {background: url(http://img695.imageshack.us/img695/5728/menuarh.jpg) left top no-repeat; height:10px;}
#sidebarbtm {background:url(http://img34.imageshack.us/img34/271/menuab.jpg) left top no-repeat; height:9px;}
#sidebar ul {list-style:none; font:bold 14px "Trebuchet MS", Verdana, sans-serif; margin-bottom:15px;}
#sidebar li {display:block; height:36px; margin-bottom:2px;}
#sidebar a, #sidebar a:visited {
   display:block;
   background:url(http://img542.imageshack.us/img542/3011/menu1.jpg) right top no-repeat;
   padding: 10px 10px 0 40px;
   height: 26px;
   color:#999;
}
#right h2 {
   color:#014782; font:normal 18px "Trebuchet MS", Verdana, sans-serif;
}
#right h2 a {color:#014782}
#right h2 a:hover {color:#000; background:#ffffee; border:none;}
#sidebar a:hover {background:url(http://img146.imageshack.us/img146/2493/menu2j.jpg) right top no-repeat; color:#333;}

#sidebar h2 {
   display:block;
   background:url(http://img98.imageshack.us/img98/2430/menubar.jpg) no-repeat;
   height:40px;
   padding:14px 10px 0 40px;
   color: #186185;
   text-transform:uppercase;
}
#footer {background:url(http://img51.imageshack.us/img51/2425/sitebjabajo.png) no-repeat; height:62px;}

#sitename {
   display:block;
   float:left;
   width:210px;
   padding:15px 0 0 40px;
   text-align:center;
   color: #FFFFFF;
   font: normal 28px "Trebuchet MS", Verdana, sans-serif;
}
#sitename a{color:#fff;}
.caption {
   display:block;
   font: normal 12px Verdana, Arial, Helvetica, sans-serif;
   color: #000000;
   padding-top:30px;}

#sitename a .blue {
   color:#0F9EC8;
   font-style: italic;
}
#sitename a:hover {color:#0f9ec8;}
#sitename a:hover .blue{color:#9c6; font-family:Georgia; font-weight:normal;}

#nav {float:right; width:645px; padding:0 40px 0 0; height:134px;}
#breadcrumb { background:url(http://img24.imageshack.us/img24/6724/breadcrumb.jpg) center bottom no-repeat;
   padding:7px 40px 5px ;
   height: 18px;
   color:#999999; text-transform:uppercase;
   font: bold 16px"Trebuchet MS", Verdana, sans-serif;}
#breadcrumb a.active {color:#000!important;}
#breadcrumb a{text-decoration:none; color:#999;}
#breadcrumb a:visited, breadcrumb a:active {color:#999;}
#breadcrumb a:hover {color:#333;}
#nav #search{
   padding-left: 475px;
   padding-top: 17px;
   height: 48px;
}
#nav #search .keyword{
   background: transparent url(http://img5.imageshack.us/img5/8623/searchd.png) no-repeat;
   height: 33px;
   width: 132px;
   padding: 10px 20px 0 10px;
   font-size: 12px;
   color: #999;
   border:none;
   overflow:hidden;
}
#header form {padding:0; margin:0;}
#topmenu { height:51px; font:bold 14px "Trebuchet MS", Verdana, sans-serif; text-transform:uppercase; padding-top:15px;}
#topmenu ul {list-style:none; padding-left:10px;}
#topmenu li {display:inline; margin-left:3px;}
#topmenu a, #topmenu a:visited {display:block; float:left; background:url(http://img24.imageshack.us/img24/9928/nav2.png) repeat-x; text-align:center; padding:5px 25px 0 25px; height:25px; color:#999999;}
#topmenu .active a {background:url(http://img509.imageshack.us/img509/7338/nav1.png) repeat-x; color:#333;}
#topmenu .active a:hover {background:url(http://img24.imageshack.us/img24/1596/nav4.png) repeat-x; color:#333;}
#topmenu a:hover {background:url(http://img24.imageshack.us/img24/6036/nav3i.png) repeat-x; color:#fff;}
#featured {
   background:url(http://img24.imageshack.us/img24/6215/ftrdbox.jpg) no-repeat;
   height:150px;
   color:#00CCFF;
   margin-bottom:15px;
}
#featured div {
   padding:25px 10px 0 50px;
   height: 90px;
   font:normal 16px "Palatino Linotype", "Book Antiqua", Palatino, serif;

}
.ftd_btm {display:block; height:20px; padding:15px 5px 0 35px; background:url(http://img5.imageshack.us/img5/1768/ftrdlink.png)8px 12px no-repeat}
#featured a {color:#fff; border-bottom:none;}
#featured a:visited, #featured a:active{color:#E3F7FD;}
#featured a:hover { text-decoration:underline; color:#fff!important;}
.postbottom {background:url(#) no-repeat; height:26px; margin-bottom:20px;}
.postbottom ul {list-style:none;}
.postbottom li {display:inline; margin:0!important; padding:0!important;}
.postbottom a, .postbottom a:visited, .postbottom a:active{color:#fff; border:none!important; display:block; float:left; height:20px; padding:6px 5px 0 30px;}
.postbottom a:hover {color:#000;}
.permalink a, .permalink a:visited, .permalink a:active {background:url(images/ico_more.png)5px 5px no-repeat;}
.cats a{background:url(http://img24.imageshack.us/img24/2779/icocat.png)5px 5px no-repeat;}
.auth a{background:url(http://img24.imageshack.us/img24/737/icousr.png)5px 5px no-repeat;}
.date a{background:url(http://img24.imageshack.us/img24/9229/icodate.png) 5px 5px no-repeat;}
.comnts a{background:url(http://img24.imageshack.us/img24/1592/commentx.png)5px 5px no-repeat;}

.post h2 {display:block; margin-bottom:15px;}
.post .description {display:block; font-size:12px; color:#999;}

.post blockquote {background:#eee url(http://img24.imageshack.us/img24/630/quotetmc.png) 5px 5px no-repeat; padding:8px 8px 0 35px; font:normal 14px "Palatino Linotype", "Book Antiqua", Palatino, serif; display:block; border: solid 1px #ddd; }

.post .extract { float:left; margin-right:10px; width:250px;}

.post ul {margin-left:25px;}
.post ol {margin-left:25px;}
.post li {padding:3px;}
.post .leftalign {display:block; padding:5px; background:#eee; margin:8px; float:left; border:solid 1px #ddd;}
.post .rightalign {display:block; padding:5px; background:#eee; margin:8px; float:right;border:solid 1px #ddd;}


/*tables and Forms */

#right table {
   width:90%;
   border:1px solid #0075A4;
   margin-bottom:20px;
   background: #E3F6FF;
   margin-top: 15px;
}
#right th {
   background:#0075A4;
   padding:5px 15px 5px 15px;
   color:#8ADBFF;
   text-align:center;
   border-bottom:1px solid #000000;
   font: bold 16px "Trebuchet MS", Verdana, sans-serif;
   text-transform: uppercase;
}
#right td {
   border-bottom:1px solid #0075A4;
   padding:5px 15px 5px 15px;
   border-right:1px solid #0075A4;
}


.textfield {
   display: block;
   width:50%;
   margin:3px 3px 3px 30px;
   padding:3px;
   border: 1px solid #CBE0E7;
   background: #E9F2F5;
}
label {
   display: block;
   margin:3px;
   padding: 5px;
   font-weight: bold;
}
.button {
   display: block;
   padding:0px;
   margin:3px;
   border: 1px solid #9DC6D2;
   color:#000000;
   background: #E9F2F5;
}
.textfield:hover {
   background:#FFFFCC;
}
.textfield:focus {
   background:#ffffff;
   border: 1px solid #3A2C1B;
}
.hide {display:none;}
#bottom {padding:20px; background:url(http://img24.imageshack.us/img24/7671/bottombg.png) repeat-x; margin-top:15px;}
#bottom p {display:block; padding:3px; text-align:center;}
#credits {text-align:right; font-size:10px; padding:5px 40px 0 40px; }
.pagenavi { height:22px; padding: 5px 5px 0 5px; background: #eee; border: solid 1px #ddd; margin:25px 0 15px 0;}
.pagenavi .alignleft {display:block; text-align:left;}
.pagenavi .alignright {display:block; float:right;}
.pagenavi a, .pagenavi a :visited, .pagenavi a :active {color:#000; font-weight:bold; text-decoration:none; border:none!important;}
.pagenavi a:hover {color:#0099CC!important;}

/*shopping Cart */
#catalogue {margin:10px 0 10px 0; background:#eee; border:solid 1px #ddd; padding:5px;}
.item {width:135px; float:left; height:220px;}
.item h3 {display:block; padding:3px;}
.item span {display:block; padding:3px;}
.item .price {color:#993300; font-weight:bold; }
.item span img {border:none!important;}
.item span a {border:none!important; text-decoration:none;}
.item img {}
img.productimg {border:solid 1px #716148; margin:0 0 0 8px;}
.clear2 {width:100%; clear:left;}
.sec_head {
   display:block;
   background: #0077A2 url(http://img24.imageshack.us/img24/6044/ftrdboxn.jpg) no-repeat 0px -60px;
   padding:3px;
   margin-bottom:15px;
   color: #FFF !important;
}         //-->
              </style>

Por Carlos1020

28 de clabLevel



 

--

firefox
Citar            
MensajeEscrito el 02 Dic 2010 09:52 pm
Quiero saber como cambiarle el lugar de la posición.

P.D.: Ya le quite el float pero no pasó nada.

Por Carlos1020

28 de clabLevel



 

--

firefox
Citar            
MensajeEscrito el 02 Dic 2010 10:54 pm
No sirve de nada que pegues todo el CSS si no está el HTML al cual le da estilo.
¿Por qué no mejor nos pasas la URL de la página que estás haciendo así vemos el problema "in situ"?.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 02 Dic 2010 11:52 pm
Bueno la verdad el sito web no está subido a la red, puedo pasarte el documento de html...

Hay lo tienes:
http://www.mediafire.com/?x0dt5y86ypvq8jm

Siento el sevidor no tengo donde subir el archivo.

Por Carlos1020

28 de clabLevel



 

--

firefox
Citar            
MensajeEscrito el 03 Dic 2010 12:37 pm
Tienes un puré de código que ni Berner-Lee lo desenreda xD.

En principio no veo nada de malo en el menú que tienes a la izquierda. ¿Dónde quieres ponerlo?.

La barra gris que mencionas es el fondo (background-image) de un div con id "content" que está dentro de del div con id "container". Lo que pasa es que tienes varios divs que tienen el mismo id y solo puede haber un único id en todo el código.

Tienes que hacer una limpieza de código antes que nada. A simple vista esto lo podrías haber hecho con cinco divs nada más.

A propósito ¿qué hace ese iframe al final del código?.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 03 Dic 2010 05:19 pm
La verdad... escribi el Iframe y no me dio importancia quitarlo...

Y otra cosa.. Me podrias ayudar a arreglar el código?..

Lo que querria hacer es que dejara de ser flotante y se moviera a lsa coordenadas que le dijera..

y quiero que no esté esa barra hay..

Espero que me ayudes..

Por Carlos1020

28 de clabLevel



 

--

firefox
Citar            
MensajeEscrito el 20 Dic 2010 11:07 pm
Hola CARLOSSSS!!

Queres mover un DIV?
Agregale
margin: 0 0 0 0;

Despues de ahi lo vas manejando cambiando las coordenadas
ejemplo

margin: 0 10px 0 15px;

Por CLAnonimo

Claber

600 de clabLevel

5 tutoriales
1 articulo

 

Este es un usuario anónimo genérico para las cuentas borradas o perdidas.

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.