de cs2 a cs3

rococo11 · #1 (**permalink**) 30/06/2012, 08:32

Hola a todos, me entere que para redondear los bordes en cs2 (creo que es el que uso, tengo el html-kit) no hay ninguna cualidad aunque se pueda hacer con imagen de fondo etc... Pero vi que en el css3 existe una cualidad para ponerlos (border-radius) yo lo puse y al darle a visualizar no paso nada, ¿si es por la version de css como se puede cambiar, esque esto me ahorraria muchisimo trabajo?

Saludos y gracias

noctovision · #2 (**permalink**) 30/06/2012, 09:46

Hola, enseña tu código, por favor.

ipraetoriux · #3 (**permalink**) 30/06/2012, 10:30

...enseña codigo, y fijate que algunos navegoadres caso IE 7,8 algo del 9 no acepta los nuevos atributos CSS3

fishdesign · #4 (**permalink**) 30/06/2012, 10:51

Primero debes crear el borde (border: 1px solid #000) y luego darle el radius (border-radius: 10px)

No tienes que cambiar nada. Tan solo verlo en un navegador que soporte CSS3.

rococo11 · #5 (**permalink**) 30/06/2012, 12:48

Vale bamos por partes, primero decir que tengo internet explorer 8, pero tambien tengo el opera, mozilla y chrome y se ve desfigurada pero tampoco se puede observar ningun borde redondeado. Me habeis pedido el codigo, enseño el html y el css porque no se cual quereis:

HTML:

</head>
<body>
<div id="global">

<div id="cabecera">
<div id="logotipo"><img src="material/logotipo.png" width="400px" height="58px" alt="Adobe-y-Office"></div>
<div id="home"><p><a href="#" target="_blank">Home</a> | <a href="#" target="_blank">E-mail</a> | <a href="#" target="_blank">Foro</a></p></div>
</div>

<div id="navegacion">
<div id="descargas">
<div id="adobe"><img src="material/boton2.png" width="170px" height="50px" alt="adobe"></div>
<div id="office"><img src="material/boton2.png" width="170px" height="50px" alt="adobe"></div>
</div>
<div id="informacion">
<div id="cursos"><img src="material/boton2.png" width="170px" height="50px" alt="adobe"></div>
<div id="foro"><img src="material/boton2.png" width="170px" height="50px" alt="adobe"></div>
</div>
</div>

<div id="anuncios">
<p>Anuncios:</p>
<ul>
<li><a href="#">Enlace del anuncio</a></li>
<li><a href="#">Enlace del anuncio</a></li>
<li><a href="#">Enlace del anuncio</a></li>
<li><a href="#">Enlace del anuncio</a></li>
</ul>
</div>

<div id="contenido">
<div id="lateral-izquierdo">
</div>
<div id="lateral-derecho">
</div>
</div>

</div>
</body>
</html>

Y el CSS:

body {background-color:#DED3D3; text-align:center}
#global {width:900px;}
#cabecera {background-color:white; width:1000px; height:80px; border-left:2px solid black; border-right:2px solid black; border-top:2px solid black; border-radius:15px}
#logotipo {background-color:white; width:548px; height:76px; float:left;}
#logotipo img {margin: 10px 0px 0px 0px}
#home {background-color:white; width:448px; height:76px; float:right;}
#home p {font-size:18px; font-weight:bold; margin:30px 0px 0px 190px}
#home a {}
#home a:visited {color:#3366BB}
#navegacion {background-image:url(material/fondist.png); background-repeat:repeat; width:1000px; height:170px; padding:0px 0px 0px 0px; border:2px solid black;}
#descargas {width:498px; height:168px; float:left;}
#adobe {width:249px; height:168px; float:left; padding: 90px 0px 0px 0px;}
#office {width:249px; height:168px; float:right; padding: 90px 0px 0px 0px;}
#informacion {width:498px; height:168px; float:right}
#cursos {width:249px; height:168px; float:left; padding: 90px 0px 0px 0px;}
#foro {width:249px; height:168px; float:right; padding: 90px 0px 0px 0px;}
#anuncios {background-color:yellow; width:1000px; height:20px; border-left:2px solid black; border-right:2px solid black; border-botom:2px solid black;}
#anuncios li {float:left; margin:0px 5px 0px 70px}
#anuncios p {float:left; margin:0px 10px 0px 10px}
#anuncios a {text-decoration:none}
#anuncios a:visited {color:#3366BB}
#contenido {background-color:#D8D8D8; width:1000px; height:600px; border:2px solid black}
#lateral-izquierdo {background-color:#BDBDBD; width:200px; height:596px; float:left}
#lateral-derecho {background-color:#BDBDBD; width:300px; height:596; float:right}

-----------------------------------------------------------------------------------------------------

PD: Me gustaria insertar el codigo en la div de cabecera, hay un codigo insertado pero no me surge efecto (border-radius:15px) si ustedes saben porque... Muchas gracias por sus respuestas.

emprear · #6 (**permalink**) 30/06/2012, 12:54

Para uitlizar border-radius en IE8/7 necesitas este auxiliar
http://css3pie.com/

ejemplo aplicado
http://foros.emprear.com/css3/PIE/

SAludos

rococo11 · #7 (**permalink**) 30/06/2012, 13:11

Esa herramienta que me diste tambien hace falta con internet explorer 9? me lo descarge ya pero mi web se ve sin los bordes redondeados y escuche que era compatible con css3. Seguramente el error estara en el codigo, arriba se lo deje.

Gracias por sus respuestas

emprear · #8 (**permalink**) 30/06/2012, 13:28

Solo para ie 8 y 7 , IE9 reconoce border-radius.
Mira la implementación en la demo que te dejé
Saludos