Foros del Web » Creando para Internet » CSS »

problema con un diseño CSS

Estas en el tema de problema con un diseño CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 11/07/2007, 08:18
 
Fecha de Ingreso: junio-2004
Mensajes: 185
Antigüedad: 13 años, 6 meses
Puntos: 0
Pregunta problema con un diseño CSS

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:centercolor:#fff; margin:0; font-weight:normal;}

.b1, .b2, .b3, .b4 {display:blockfont-size:1px;
/* hide overflow:hidden from IE5/Mac */ 
/* \*/ 
overflowhidden;
/* */ }


.
b1, .b2, .b3 {height:1px;}
.
b2, .b3, .b4 {border-left:1px solid #fff; border-right:1px solid #fff;}
.b1 {margin:0 5pxbackground:#fff;}
.b2 {margin:0 3pxborder-width:0 2px;}
.
b3 {margin:0 2px;}
.
b4 {height:2pxmargin:0 1px;}

.
boxcontent {display:blockborder-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.menu2a.menu2:visited {display:blocktext-decoration:nonewidth:7.3em;}
a.menu2:hover {background:transparentcursor:pointer;}
a.menu2:hover .boxcontent {background:#888;}
/*a.menu2:hover .pad {height:0.2em;}*/

#headercontainer{
    
margin0 0 0 0;
    
floatleft;
    
width100%;
    
color#FFFFFF;
    
background-color#FFFFFF;
   /* border: 1px solid #EBCD48;*/
}

#navigation {
    
margin0 0 0 0;
    
height:35px;
    
floatleft;
    
width100%;
    
color#FFFFFF;
    
background-color#064385;
   /* border: 1px solid #EBCD48;*/
}
</
style>

<
body>
<
div id="headercontainer">

<
div id="navigation2">
<
ul>



<
li>
<
class="menu2" href="#nogo">
    <
class="pad"></b>
    <
class="snazzy">
        <
class="b1"></b>
        <
class="b2 red"></b>
        <
class="b3 red"></b>
        <
class="b4 red"></b>
        <
span class="boxcontent red">Recuperar Docs</span>
    </
b>
</
a>
</
li>

<
li>
<
class="menu2" href="#nogo">
    <
class="pad"></b>
    <
class="snazzy">
        <
class="b1"></b>
        <
class="b2 orange"></b>
        <
class="b3 orange"></b>
        <
class="b4 orange"></b>
        <
span class="boxcontent orange">Otras pruebas</span>
    </
b>
</
a>
</
li>

<
li>
<
class="menu2" href="#nogo">
    <
class="pad"></b>
    <
class="snazzy">
        <
class="b1"></b>
        <
class="b2 orange"></b>
        <
class="b3 orange"></b>
        <
class="b4 orange"></b>
        <
span class="boxcontent orange">Foros</span>
    </
b>
</
a>
</
li>
</
ul>
</
div>
    <
div id="navigation">
     </
div>
</
div>
</
body>
</
html
Saludos
  #2 (permalink)  
Antiguo 11/07/2007, 20:06
Avatar de NUCKLEAR
Moderador radioactivo
 
Fecha de Ingreso: octubre-2005
Ubicación: Cordoba-Argentina
Mensajes: 5.688
Antigüedad: 12 años, 1 mes
Puntos: 890
Re: problema con un diseño CSS

Hola, antes que nada lo recomendable es que tengas la hoja de estilos separado, bueno al punto, no entiendo muy bien lo que quieres hacer pero si quieres que tu contenido este pegado al borde y no se vea el margen a los bordes en tu css debes poner body{
margin: 0px; /*esto hace que elimine o que deje 0px de margen, también puedes poner aca las propiedades generales de tu web como font-size, color etc*/

}

El problema esta en el tercer elemento del menu?,no se como solucionarlo,
que alguien nos ayude!

Por cierto, me parece que nos la hacen complicada al no dejarnos copiar el codigo directamente.
Lo digo por el javascript que desabilita copiar, no se que finalidad tenga esto.
saludos
__________________
Drupal Argentina

Última edición por NUCKLEAR; 11/07/2007 a las 20:20
  #3 (permalink)  
Antiguo 12/07/2007, 12:27
 
Fecha de Ingreso: junio-2004
Mensajes: 185
Antigüedad: 13 años, 6 meses
Puntos: 0
Re: problema con un diseño CSS

Gracias, eso funcionó.

Saludos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:04.