problemas con css

[gVenom]

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:

#bottom {
    position:relative;
    background-color:#d8d8d8;
    top:838px;
    left:auto;
    width:778px;
    height:40px;
    line-height:34px;
    border-top:2px solid #000}
}
#501c3{
    position:absolute;
    width:236px;
    font-weight:400;
    text-shadow:#FFFFFF;
    left:151px;
    top: 6px;
}
#weblogos{
    position:absolute;
    width:236px;
    font-weight:400;
    text-shadow:#FFFFFF;
    left:446px;
    top: 6px;
}
 

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.

[kseso?]

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

[gVenom]

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:

#contenedor {
    position:relative;
    margin:0 auto;
    width:778px;
    height:877px;
}
 
#corner-left {
    position:absolute;
    left:0px;
    top:0px;
    width:285px;
    height:201px;
}
 
#flash-menu {
    position:absolute;
    left:0px;
    top:1px;
    width:778px;
    height:201px;
}
 
#center-menu {
    position:absolute;
    left:0px;
    top:201px;
    width:778px;
    height:154px;
    line-height:4px;
}
#sermons_btn{
    position:absolute;
    width:89px;
    height:27px;
    top:99px;
    left:14px;
}
#music_btn{
    position:absolute;
    width:89px;
    height:27px;
    top:99px;
    left:121px;
}
 
#left-row {
    position:absolute;
    background-image:url(../images/shadow-left.jpg);
    background-repeat:repeat;
    left:0px;
    top:355px;
    width:242px;
    height:482px;
}
#news-shadow{
    position:relative;
    background-image:url(../images/news-shadow.jpg);
    width:242px;
    height:135px;
}
#news-shadow2{
    position:relative;
    background-image:url(../images/news-shadow2.jpg);
    width:242px;
    height:213px;
}
#blue-line1{
    position:absolute;
    height:482px;
    width:4px;
    background-color:#0059d4;
    top:0px;
    left:0px;
}
#blue-line2{
    position:absolute;
    height:482px;
    width:4px;
    background-color:#0059d4;
    top:0px;
    left:240px;
}
#news-txt1{
    position:absolute;
    width:230px;
    top:29px;
    left:8px;
    height: 73px;
}
#donation-button{
    position:absolute;
    top:311px;
    left:32px;
    height:73px;
    width:179px;
}
#hands{
    position:absolute;
    width:68px;
    height:85px;
    left: 35px;
    top: 392px;
}
#prayer-txt{
    position:absolute;
    width:113px;
    height:20px;
    left: 110px;
    top: 427px;
}
#center {
    position:absolute;
    left:242px;
    top:355px;
    width:536px;
    height:482px;
    overflow:auto;
}
#arrow1{
    position:absolute;
    width:13px;
    height:7px;
    left: 358px;
    top: 126px;
}
#arrow2{
    position:absolute;
    width:13px;
    height:7px;
    left: 537px;
    top: 125px;
}
#arrow3{
    position:absolute;
    width:13px;
    height:7px;
    left: 717px;
    top: 125px;
}
#blue-point-img{
        padding-right:4px;
}
 
#blue-point-div{
    position:absolute;
    width:213px;
    height:21px;
    top:26px;
    left:18px;
}
#blue-point-news{
    position:absolute;
    width:187px;
    height:17px;
    top:133px;
    left:12px;
}
#dove{
    width:236px;
    height:182px;
    float:right;
}
#bottom {
    position:relative;
    background-color:#d8d8d8;
    top:838px;
    left:0px;
    width:778px;
    height:40px;
    border-top:2px solid #000;
}
#501c3{
    position:relative;
    display:inline;
    width:250px;
    font-weight:400;
    float:left;
}
#weblogos{
    position:relative;
    display:inline;
    width:250px;
    font-weight:400;
    float:right;
}
hr{
    position:relative;
    top:50px;
}
 
a:hover{color:#FF0000}
#devons-pic{
    float:right;
}
#clear{clear:both;}
 

[kseso?]

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).

[gVenom]

Iniciado por kseso?

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?

[jomaruro]

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.

[gVenom]

Iniciado por jomaruro

Hola:

Y ¿hacerlo como una lista?

Y dime, puedo acomodarlos de forma horizontal y con espacio entre ellos?

[Calizman]

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:

<ul>
  <li><a href="link1.html">link1</a></li>
 <li><a href="link.html">link1</a></li>
<ul>
 

Código CSS:

ul {
margin: 0px auto;
display: block;
}
 
ul li {
margin: 5px; -- Esto deja espacio entre cada uno --
float: left; -- Esto los acomoda horizontalmente --
}
 

Espero te sirva! Hasta Luego!!

[gVenom]

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

[Calizman]

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:

<div id="listauno">
<ul>
<li> ejemplo </li>
<li> ejemplo </li>
</ul>
</div>
<div id="listados">
<ul>
<li> ejemplo </li>
<li> ejemplo </li>
</ul>
</div>
 

Código CSS:

#listauno ul li {
bla bla bla
}
#listados ul li {
bla bla bla
}
 

Y asi le das estilo a dos listas diferentes...

[gVenom]

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

Gracias bro...

[Calizman]

Nada de gracias, es un placer poder ayudar

Hasta Luego!!