Hola a todos:
Tengo un problema con este diseño css que estoy haciendo (Disculpen pero soy nuevo en esto de diseñar con CSS) el problema es que quiero hacer tabs pero que las esquinas sean redondeadas eso encontré como hacerlo y me sale sin problema,
pero cuando le pongo un como si fuera un banner debajo sale un pequeño defecto como sino estuvieran en la misma posicion, ese es un error que tengo y el otro es :
que el diseño está concebido para que los tabs y el banner abarquen toda la pagina desde el lado izquierdo al derecho y no como sucede aqui que sale un margen derecho e izquierdo.
Le agradecería su ayuda
Aqui esta el codigo:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
<title>Borrowed Summer Holiday</title>
</head>
<style type="text/css">
.snazzy span {text-align:center; color:#fff; margin:0; font-weight:normal;}
.b1, .b2, .b3, .b4 {display:block; font-size:1px;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */ }
.b1, .b2, .b3 {height:1px;}
.b2, .b3, .b4 {border-left:1px solid #fff; border-right:1px solid #fff;}
.b1 {margin:0 5px; background:#fff;}
.b2 {margin:0 3px; border-width:0 2px;}
.b3 {margin:0 2px;}
.b4 {height:2px; margin:0 1px;}
.boxcontent {display:block; border-left:1px solid #fff; border-right:1px solid #fff;}
.red {background:#064385;}
.orange {background:#467aa7;}
a:hover b.red {background:#888;}
a:hover b.orange {background:#888;}
a:hover b.yellow {background:#888;}
a:hover b.green {background:#888;}
a:hover b.blue {background:#888;}
a:hover b.indigo {background:#888;}
a:hover b.violet {background:#888;}
#navigation2 ul {margin:0; padding:0; list-style-type:none; background:transparent;}
#navigation2 li {display:block; float:left; margin:0 0px;}
#navigation2 {
background-color:#FFFFFF;
color: #000;}
/*.pad {display:block; height:1em;
overflow: hidden;
}*/
a.menu2, a.menu2:visited {display:block; text-decoration:none; width:7.3em;}
a.menu2:hover {background:transparent; cursor:pointer;}
a.menu2:hover .boxcontent {background:#888;}
/*a.menu2:hover .pad {height:0.2em;}*/
#headercontainer{
margin: 0 0 0 0;
float: left;
width: 100%;
color: #FFFFFF;
background-color: #FFFFFF;
/* border: 1px solid #EBCD48;*/
}
#navigation {
margin: 0 0 0 0;
height:35px;
float: left;
width: 100%;
color: #FFFFFF;
background-color: #064385;
/* border: 1px solid #EBCD48;*/
}
</style>
<body>
<div id="headercontainer">
<div id="navigation2">
<ul>
<li>
<a class="menu2" href="#nogo">
<b class="pad"></b>
<b class="snazzy">
<b class="b1"></b>
<b class="b2 red"></b>
<b class="b3 red"></b>
<b class="b4 red"></b>
<span class="boxcontent red">Recuperar Docs</span>
</b>
</a>
</li>
<li>
<a class="menu2" href="#nogo">
<b class="pad"></b>
<b class="snazzy">
<b class="b1"></b>
<b class="b2 orange"></b>
<b class="b3 orange"></b>
<b class="b4 orange"></b>
<span class="boxcontent orange">Otras pruebas</span>
</b>
</a>
</li>
<li>
<a class="menu2" href="#nogo">
<b class="pad"></b>
<b class="snazzy">
<b class="b1"></b>
<b class="b2 orange"></b>
<b class="b3 orange"></b>
<b class="b4 orange"></b>
<span class="boxcontent orange">Foros</span>
</b>
</a>
</li>
</ul>
</div>
<div id="navigation">
</div>
</div>
</body>
</html>
Saludos