Foros del Web » Creando para Internet » CSS »

problemas con css

Estas en el tema de problemas con css en el foro de CSS en Foros del Web. Saludos. Tengo un problema con un css revelde. En la siguiente página: http://beholdhecometh.net/ abajo en el bottom no logro acomodar los dos enlaces que hay ...
  #1 (permalink)  
Antiguo 06/04/2009, 12:20
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
problemas con css

Saludos.

Tengo un problema con un css revelde. En la siguiente página:

http://beholdhecometh.net/

abajo en el bottom no logro acomodar los dos enlaces que hay ahi y no entiendo porque, simplemente el código parece bien y no acomoda nada. el código de el bottom(la barra gris) es este:

Código CSS:
Ver original
  1. #bottom {
  2.     position:relative;
  3.     background-color:#d8d8d8;
  4.     top:838px;
  5.     left:auto;
  6.     width:778px;
  7.     height:40px;
  8.     line-height:34px;
  9.     border-top:2px solid #000}
  10. }
  11. #501c3{
  12.     position:absolute;
  13.     width:236px;
  14.     font-weight:400;
  15.     text-shadow:#FFFFFF;
  16.     left:151px;
  17.     top: 6px;
  18. }
  19. #weblogos{
  20.     position:absolute;
  21.     width:236px;
  22.     font-weight:400;
  23.     text-shadow:#FFFFFF;
  24.     left:446px;
  25.     top: 6px;
  26. }

los otros dos obviamente se ve a cual pertenecen. Asi me quedo el código luego de un monton de intendos( el bottom no lo he tocado) con posición relative, absolute, float left, float right, llegue hasta a poner los dos textos en un solo div y separarlos con         pero me parecio que sería mi ultimo recurso, porque se ve horrible. Asi me quedo casi bien, pero no se porque si esta en posición absolute, me deja el texto pegado a la izquierda o me manda uno sobre otro y a la izquierda.

alguna ayuda please.
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #2 (permalink)  
Antiguo 06/04/2009, 12:55
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: problemas con css

Dale a esos dos id (#501c3 y #weblogos) posición relativa y dispaly inline, uno lo flotas a la izquierda y el otro a la derecha, no les des anchuras ni tampoco los posiciones con top-left/right.

Creo que hay algún error, pues el #501c3 no lo carga (en la ventana de firebug no aparecen las propiedades de él)

Veo que todos los div hermanos de #bottom los tienes posicionados absolutamente, lo que te obliga al uso en exceso de <br> y posiblemente a nada que crezca esa página en contenidos será motivo de algún problemilla

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 06/04/2009, 14:18
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: problemas con css

Saludos kseso?

Ya hice lo que me indicaste, y ahora salen en sus respectivas esquinas pero con un espacio de diferencia, o sea, en una linea arriba y una abajo, por lo que asumo que el primer div esta abarcando toda la linea.

He revisado el código varias veces y no me da errores de validación ni de compatibilidad con los browser. Pienso que algo en el código del bottom es lo que afecta a esos div pero no veo que pueda ser.

Voy a poner el codigo css de los div por si ves algo, si no, alguno forma de poner eso ahi? solo que use un <p>

Código Css:
Ver original
  1. #contenedor {
  2.     position:relative;
  3.     margin:0 auto;
  4.     width:778px;
  5.     height:877px;
  6. }
  7.  
  8. #corner-left {
  9.     position:absolute;
  10.     left:0px;
  11.     top:0px;
  12.     width:285px;
  13.     height:201px;
  14. }
  15.  
  16. #flash-menu {
  17.     position:absolute;
  18.     left:0px;
  19.     top:1px;
  20.     width:778px;
  21.     height:201px;
  22. }
  23.  
  24. #center-menu {
  25.     position:absolute;
  26.     left:0px;
  27.     top:201px;
  28.     width:778px;
  29.     height:154px;
  30.     line-height:4px;
  31. }
  32. #sermons_btn{
  33.     position:absolute;
  34.     width:89px;
  35.     height:27px;
  36.     top:99px;
  37.     left:14px;
  38. }
  39. #music_btn{
  40.     position:absolute;
  41.     width:89px;
  42.     height:27px;
  43.     top:99px;
  44.     left:121px;
  45. }
  46.  
  47. #left-row {
  48.     position:absolute;
  49.     background-image:url(../images/shadow-left.jpg);
  50.     background-repeat:repeat;
  51.     left:0px;
  52.     top:355px;
  53.     width:242px;
  54.     height:482px;
  55. }
  56. #news-shadow{
  57.     position:relative;
  58.     background-image:url(../images/news-shadow.jpg);
  59.     width:242px;
  60.     height:135px;
  61. }
  62. #news-shadow2{
  63.     position:relative;
  64.     background-image:url(../images/news-shadow2.jpg);
  65.     width:242px;
  66.     height:213px;
  67. }
  68. #blue-line1{
  69.     position:absolute;
  70.     height:482px;
  71.     width:4px;
  72.     background-color:#0059d4;
  73.     top:0px;
  74.     left:0px;
  75. }
  76. #blue-line2{
  77.     position:absolute;
  78.     height:482px;
  79.     width:4px;
  80.     background-color:#0059d4;
  81.     top:0px;
  82.     left:240px;
  83. }
  84. #news-txt1{
  85.     position:absolute;
  86.     width:230px;
  87.     top:29px;
  88.     left:8px;
  89.     height: 73px;
  90. }
  91. #donation-button{
  92.     position:absolute;
  93.     top:311px;
  94.     left:32px;
  95.     height:73px;
  96.     width:179px;
  97. }
  98. #hands{
  99.     position:absolute;
  100.     width:68px;
  101.     height:85px;
  102.     left: 35px;
  103.     top: 392px;
  104. }
  105. #prayer-txt{
  106.     position:absolute;
  107.     width:113px;
  108.     height:20px;
  109.     left: 110px;
  110.     top: 427px;
  111. }
  112. #center {
  113.     position:absolute;
  114.     left:242px;
  115.     top:355px;
  116.     width:536px;
  117.     height:482px;
  118.     overflow:auto;
  119. }
  120. #arrow1{
  121.     position:absolute;
  122.     width:13px;
  123.     height:7px;
  124.     left: 358px;
  125.     top: 126px;
  126. }
  127. #arrow2{
  128.     position:absolute;
  129.     width:13px;
  130.     height:7px;
  131.     left: 537px;
  132.     top: 125px;
  133. }
  134. #arrow3{
  135.     position:absolute;
  136.     width:13px;
  137.     height:7px;
  138.     left: 717px;
  139.     top: 125px;
  140. }
  141. #blue-point-img{
  142.         padding-right:4px;
  143. }
  144.  
  145. #blue-point-div{
  146.     position:absolute;
  147.     width:213px;
  148.     height:21px;
  149.     top:26px;
  150.     left:18px;
  151. }
  152. #blue-point-news{
  153.     position:absolute;
  154.     width:187px;
  155.     height:17px;
  156.     top:133px;
  157.     left:12px;
  158. }
  159. #dove{
  160.     width:236px;
  161.     height:182px;
  162.     float:right;
  163. }
  164. #bottom {
  165.     position:relative;
  166.     background-color:#d8d8d8;
  167.     top:838px;
  168.     left:0px;
  169.     width:778px;
  170.     height:40px;
  171.     border-top:2px solid #000;
  172. }
  173. #501c3{
  174.     position:relative;
  175.     display:inline;
  176.     width:250px;
  177.     font-weight:400;
  178.     float:left;
  179. }
  180. #weblogos{
  181.     position:relative;
  182.     display:inline;
  183.     width:250px;
  184.     font-weight:400;
  185.     float:right;
  186. }
  187. hr{
  188.     position:relative;
  189.     top:50px;
  190. }
  191.  
  192. a:hover{color:#FF0000}
  193. #devons-pic{
  194.     float:right;
  195. }
  196. #clear{clear:both;}
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #4 (permalink)  
Antiguo 08/04/2009, 06:16
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: problemas con css

Perdón por la demora, gVenom.
Veo que al final lo lograste, yo al menos los veo ya alineados en el FF de este pc (no es el mio).
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 08/04/2009, 08:59
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Desacuerdo Respuesta: problemas con css

Cita:
Iniciado por kseso? Ver Mensaje
Veo que al final lo lograste, yo al menos los veo ya alineados en el FF de este pc (no es el mio).
JAja, pues no la verdad no lo logré. Segui batallando pero no hubo forma de lograr ponerlos bien. Extraño porque ya lo he hecho antes. Lo que ves en la página es una imagen con los textos y un map sobre ellos, como esa página ya es del cliente no me puedo dar el lujo de tardar mucho asi que lo tuve que hacer asi, ni modo. No se ve nada raro en el CSS de arriba verdad?
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #6 (permalink)  
Antiguo 08/04/2009, 15:11
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 con css

Hola:

Y ¿hacerlo como una lista?

Código:
<ul>
<li><a href="http://weblogos.org">Web desing by www.weblogos.org.2008</a></li>
<li><a href="http://ggministries.org">501(c)(3) status by www.ggministries.org</a></li>
</ul>
Lógicamente con las position, margin, padding, float, etc. que tú necesites.

Saludos.

  #7 (permalink)  
Antiguo 08/04/2009, 15:19
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: problemas con css

Cita:
Iniciado por jomaruro Ver Mensaje
Hola:

Y ¿hacerlo como una lista?
Y dime, puedo acomodarlos de forma horizontal y con espacio entre ellos?
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #8 (permalink)  
Antiguo 08/04/2009, 21:09
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: problemas con css

Hola! vengo a ayudar!

Primero que nada, vi la pagina, y yo los veo alineados uno a la derecha, y otro a la izquierda. No se si ese sea lo que quieres hacer... Sea comos sea, tengo que confesar que no he leido todo el post, solo el primero, y los dos ultimos, y solo vengo a ampliar un poco la informacion de Jomaruro.

Si puedes acomodar los elementos de una lista en forma horizontal, y si puedes dar un espacio entre ellos. Te dejo el ejemplo:

Código HTML:
Ver original
  1. <ul>
  2.   <li><a href="link1.html">link1</a></li>
  3.  <li><a href="link.html">link1</a></li>
  4. <ul>

Código CSS:
Ver original
  1. ul {
  2. margin: 0px auto;
  3. display: block;
  4. }
  5.  
  6. ul li {
  7. margin: 5px; -- Esto deja espacio entre cada uno --
  8. float: left; -- Esto los acomoda horizontalmente --
  9. }

Espero te sirva! Hasta Luego!!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #9 (permalink)  
Antiguo 13/04/2009, 10:13
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
De acuerdo Respuesta: problemas con css

Saludos CaLiZzZ

Pues si, ya veo que si funciona bien, ahora mas tarde lo cambio a ver como se ve. El único detalle es que si tuviera que hacer otra lista por ahi, me va a aplicar los mismos efectos que aqui, y obviamente no seria bueno, se pueden aplicar los cambios al contenido de el div? y no a todos los list, claro, si es que pongo uno, mejor prevenir.


A proposito, como le quito a los li el punto que aparece en cada linea? en FF se ve en IE8 no.

Gracias
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr

Última edición por gVenom; 13/04/2009 a las 10:33
  #10 (permalink)  
Antiguo 13/04/2009, 13:59
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: problemas con css

Saludos!!

Claro que si se puede, solo que tendrias que tener la lista dentro de un contenedor, te lo grafico para que veas como:

Código HTML:
Ver original
  1. <div id="listauno">
  2. <ul>
  3. <li> ejemplo </li>
  4. <li> ejemplo </li>
  5. </ul>
  6. </div>
  7. <div id="listados">
  8. <ul>
  9. <li> ejemplo </li>
  10. <li> ejemplo </li>
  11. </ul>
  12. </div>

Código CSS:
Ver original
  1. #listauno ul li {
  2. bla bla bla
  3. }
  4. #listados ul li {
  5. bla bla bla
  6. }

Y asi le das estilo a dos listas diferentes...
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #11 (permalink)  
Antiguo 13/04/2009, 14:03
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: problemas con css

ahh, perfecto, me queda bien porque yo todo lo tengo en div con id para cada uno.

Gracias bro...
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #12 (permalink)  
Antiguo 13/04/2009, 14:08
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: problemas con css

Nada de gracias, es un placer poder ayudar

Hasta Luego!!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
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 23:06.