Devblab

Esquinas Redondeadas en una Web

En esta ocación voy a tratar de explicar de una forma y sencilla como podemos crear una sitio web con esquinas redondeadas, para hacer pequeño diseño lo que vamos a necesitar es diseñar un par de imagenes que serviran tanto en la parte de arriba como la de abajo para hacer el efecto de esquinas redondeadas (en los archivos de descarga estan las imagenes que yo utilize)

Tambien algo que es impotrante y que no se nos debe olvidar utilizar (solo en caso que seas prinicipiante se te puede pasar, ya que tengas un poco de mas experiencia esto es automatica) es la hoja de estilos CSS, que es la que le va a dar forma a nuestra web.

En el diseño que puedes ver como demo, es solo eso un pequeño demo que utilize para hacer este pequeño tutorial, el demo esta constituido por header,footer,menu,barra lateral y espacio de contenidos. Todo esto lo puedes modificar a tus necesidades

Bueno ahora vamos a ver el codigo CSS:

[css]
body,td,th {
font-family:tahoma;
font-size: 12px;
color: #000000;
margin:0px auto;
text-align:center;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #CED0C3;
}
body,td,th {
font-family: tahoma;
font-size: 12px;
color: #000000;
margin:0px auto;
text-align:center;
}a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #708491;
}
a:hover {
text-decoration: none;
color: #000000;
}
a:active {
text-decoration: none;
color: #708491;
}

a.footerlinks, a.footerlinks:visited {
color:#59759f;
text-decoration: none;
}
a.footerlinks:hover {
color:#7b7b7b;
text-decoration: none;
}
#content {
width: 900px;
padding-top: 10px;
}
#footer {
width: 100%;
height: 94px;
text-align: left;
clear: both;
margin-top: 15px;
bottom: 0px;
}
#columnmain {
float: left;
width: 550px;
text-align: left;
font-size: 9px;
}
#columnright {
float: right;
width: 250px;
text-align: left;
font-size: 9px;
}
.1head {
color: #000000;
font-size: 15px;
text-align: left;
padding-left: 15px;
margin-bottom: 5px;
}
.global {
width:914px;
margin:0px auto;
text-align:center;
}
.content_out {
background-color:#FFFFFF;
height:70px;
}
.content_top {
background-image:url(content_top.jpg);
background-repeat:no-repeat;
background-color:#FFFFFF;
width:914px;
height:14px;
}
.content_end {
background-image:url(content_end.jpg);
background-repeat:no-repeat;
background-color:#FFFFFF;
width:914px;
height:14px;
}
.content {
width:828px;
text-align:left;
padding-left:20px;
padding-right:40px;
float:left;
background-color:#FFFFFF;
}

.footer_bg {
text-align:center;
background:#fff;
}

/* rounded nav */

#nav {
margin:0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #9FB1BC;
}

html>body #nav {
padding: 0 0 20px 10px;
border-bottom: 1px solid #9FB1BC;
}

#nav li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}

#nav a:link, #nav a:visited {
float: left;
font-size: 10px;
line-height: 14px;
font-weight: bold;
padding: 0 12px 6px 12px;
text-decoration: none;
color: #708491;
}

#nav a:link.active, #nav a:visited.active, #nav a:hover {
color: #000;
background: url(tab_rounded.gif) no-repeat bottom center;
}
.header {
width:828px;
text-align:left;
padding-left:40px;
padding-right:40px;
float:left;
background-color:#FFFFFF;
}
[/css]

Nota:En caso que cambies nombres en la hoja de estilos CSS no se te olvide hacerlo tambien en el HTML de lo contrario perdera el estilo que se le a dado. Tambien aqui podras experimentar con tamaños, colores y algunas otras cosas más.

Para empezar el archivo HTML debajo de body aremos una llamada a .global de la CSS:
[html]

[/html]

En esta parte e decido dejar el texto de prueba que coloque en el diseño para que se vea como queda.

Y ahora solo nos queda acomodar lo que seria nuestro footer:
[html]