Comunidad de diseño web y desarrollo en internet online

CSS width para textos

Citar            
MensajeEscrito el 26 Mar 2005 01:18 am
miren en www.bugu.tk , como hago con css para que las "cajas" de todos los links tengan el mismo ancho?? :oops:

Por anabelle

88 de clabLevel



Genero:Femenino  

Mi Nube

firefox
Citar            
MensajeEscrito el 26 Mar 2005 05:58 am
Hola, bueno lo primero, defines una clase para los divs:

Código :

.caja_link {
  width: 100px;
  background-color: #666666;
  color: #FFFFFF;
  }

.caja_link:hover {
  background-color: #999999;
  border-color: red(no recuerdo el numero);
  border-width: 1px solid;
  }


Y luego lo asignas a cada div:

Código :

<div class="caja_link">link 1</div>
<div class="caja_link">link 2</div>
<div class="caja_link">link 2</div>


Con eso deberia funcionar bien en cualquier navegador :wink:

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell REC Héroes

London, UK

firefox
Citar            
MensajeEscrito el 26 Mar 2005 04:10 pm
a mi tambien me interesa mucho este tema del CSS y apenas comienzo a leer...pero este post si va aki? :?

Por rosvel

SWAT Team

1311 de clabLevel

2 tutoriales
1 articulo
1 ejemplo

Genero:Masculino   SWAT

"la oficina"

firefox
Citar            
MensajeEscrito el 26 Mar 2005 04:41 pm
Cierto, deberia estar en general. :oops:

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell REC Héroes

London, UK

firefox
Citar            
MensajeEscrito el 26 Mar 2005 06:51 pm
Bien, ya es otro dia y ya puedo entrar al IE. Creo que lo que buscas es esto anabelle.


CSS

Código :

.links {
  width:75px;
  height:15px;
  margin:15px;
  }
  
.links a {
  width:100%;
  height:100%;
  display:block;
  
  background:#000;
  border:1px solid #000;
  
  color:#FFF;
  font-family:verdana;
  font-size:10px;
  text-transform:uppercase;
  text-decoration:none;
  }
  
.links a:hover {
  background:#000;
  border:1px solid red;
  }



XHTML

Código :

<div id="links">
   <div class="links">
   <a href="#">a</a>
   </div>
   <div class="links">
   <a href="#">a</a>
   </div>
   <div class="links">
   <a href="#">a</a>
   </div>
</div>



Suerte!


PD: ramm tu codigo no funciona en IE. Te odio IE, si si te odio!!

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

clabbrowser
Citar            
MensajeEscrito el 26 Mar 2005 11:30 pm
:oops:

Cierto, habia olvidado que en IE no sirve el :hover asi.

si, yo tambien te odio

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell REC Héroes

London, UK

firefox
Citar            
MensajeEscrito el 27 Mar 2005 03:02 am

ramm escribió:

si, yo tambien te odio

Me odias ? :shock:
Oh yeeahh! :bofh: :bofh:
MWAHAHAHAHAHA

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

clabbrowser
Citar            
MensajeEscrito el 27 Mar 2005 06:00 pm
:lol: :lol: :lol: :lol: :lol: :lol: :lol:
i was talking about IE

8)

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell REC Héroes

London, UK

firefox

 

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