Foros del Web » Creando para Internet » CSS »

Problemas con <section> background, display y border

Estas en el tema de Problemas con <section> background, display y border en el foro de CSS en Foros del Web. ...display ampoco funciona... Por alguna rara razón que desconozco tengo problemas para aplicar css a lo siguiente: Cita: <section> <nav> <dl> <dt> <a href="">---</a> </dt> ...
  #1 (permalink)  
Antiguo 28/04/2012, 11:54
 
Fecha de Ingreso: enero-2008
Mensajes: 581
Antigüedad: 16 años, 5 meses
Puntos: 9
Problemas con <section> background, display y border

...display ampoco funciona...

Por alguna rara razón que desconozco tengo problemas para aplicar css a lo siguiente:

Cita:
<section>
<nav>
<dl>
<dt>
<a href="">---</a>
</dt>
</dl>
</nav>
</section>
el background no se aplica en <dl> ni <dt>

y si le pongo un borde a los enlaces, el borde se aplica a la izquierda del enlace

Cita:
<!DOCTYPE html>
<html lang="es">
<head>
<title>ANHIDA</title>
<meta name="description" content="Asociación de Niños con Hiperactividad y7o Déficit de Atención" />
<meta charset="uft-8" />
<meta name="viewport" content="width=100px, user-scalable=no" />
<meta http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=0)">
<meta http-equiv="Page-exit" CONTENT="RevealTrans(Duration=4,Transition=0)">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/hidden_bar_android.js"></script>
<script type="text/javascript" src="js/transition_page.js"></script>
<link rel="stylesheet" type="text/css" href="css/menu.css">
</head>
<body>

<header>
<nav>
<dl>
<dt><a>Menu</a></dt>
<dt><span>Menu</span></dt>
<dt><a>Contactar</a></dt>
</dl>
</nav>
</header>

<section>
<nav>
<dl>
<dt><a href="#">Inicio</a></dt>
<dt><a href="#">Tdah</a></dt>
<dt><a href="#">Anhida</a></dt>
<dt><a href="#">Enlaces</a></dt>
<dt><a href="#">Foros</a></dt>
</dl>
</nav>
</section>

<footer>
<nav>
<dl>
<dt>Menu</dt>
</dl>
</nav>
</footer>

</body>
</html>
Cita:
body{
background:url(../imagenes/bg.png);
}

header dl, footer dl{
display:table;
width:100%;
margin:0;
}

header dt, footer dt{
display:table-cell;
}

header, footer{
background: #b4bfce; /* Old browsers */
background: -moz-linear-gradient(top, #b4bfce 0%, #889bb3 50%, #7f94b0 51%, #6d83a1 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b4bfce), color-stop(50%,#889bb3), color-stop(51%,#7f94b0), color-stop(100%,#6d83a1)); /* Chrome,Safari4+ */
background-sizeground: -webkit-linear-gradient(top, #b4bfce 0%,#889bb3 50%,#7f94b0 51%,#6d83a1 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b4bfce 0%,#889bb3 50%,#7f94b0 51%,#6d83a1 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b4bfce 0%,#889bb3 50%,#7f94b0 51%,#6d83a1 100%); /* IE10+ */
background: linear-gradient(top, #b4bfce 0%,#889bb3 50%,#7f94b0 51%,#6d83a1 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4bfce', endColorstr='#6d83a1',GradientType=0 ); /* IE6-9 */

left:0;
line-height:40px;
position:absolute;
right:0;
z-index:1;
}

header{
border-bottom:1px solid black;
top:0px;
}

header dt a, footer dt a{
background-size:120px 34px;
display:block;
line-height:40px;
margin:0 0 -1px 0;
text-decoration:none;
outline:0;
width:120px;
}

header dt:first-child a, footer dt:first-child a{
background:url(../imagenes/Button_Back.png) center no-repeat;
float:left;
padding-left:5px;
}

header dt:last-child a, footer dt:last-child a{
background:url(../imagenes/Button_Forward.png) center no-repeat;
float:right;
margin-right:2px;
padding-right:5px;
}

header dt, header a, footer dt, footer a{
color: white;
font-weight:bold;
text-shadow:0px -1px 1px #000;
text-align:center;
vertical-align:middle;
}

footer{
display:none;
}

section{
bottom:0;
left:0;
position:absolute;
right:0;
top:40px;
}

section nav{
background:white;
border:1px solid silver;
border-radius:10px;
margin:5px;
padding:0;
}

section dl{
margin:0;
width:0;
}

section dt{
border-top:1px solid silver;
}

section a{
color:black;
display:block;
line-height:40px;
padding-left:10px;
outline:0;
text-decoration:none;
}

@media only all and (max-device-width: 720px) and (orientation:portrait ) {

header span{
display:none;
}

section{
bottom:39px;
}

footer{
border-top:1px solid black;
bottom:-1px;
display:block;
}

} /*vertical*/
@media only all and (max-device-width: 720px) and (orientation:landscape) {

section{
bottom:0px;
}

footer{
display:none;
}

}/*horizontal*/

Última edición por quico5; 28/04/2012 a las 12:58
  #2 (permalink)  
Antiguo 28/04/2012, 17:01
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 1 mes
Puntos: 539
Respuesta: Problemas con <section> background, display y border

Primero:
Tiene mal construida su lista de definición:
Código HTML:
Ver original
  1. <dl>
  2.    <dt>Enunciado</dt>
  3.         <dd>Definición</dd>
  4.         <dd>Puede haber más de un dd por cada dt</dd>
  5.         <dd>Pero no un dt sin dd´s</dd>
  6. </dl>
Semánticamente un listado de enlaces de navegación no se corresponde con una lista de definición (dl/dt/dd). Más acertado con una ¿desordenada? ul/li/a

Cambie los gradientes por color sólido para ver si es cosa de la sintaxis que utiliza si una vez corregido el html el problema persiste.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 28/04/2012, 17:33
 
Fecha de Ingreso: enero-2008
Mensajes: 581
Antigüedad: 16 años, 5 meses
Puntos: 9
Respuesta: Problemas con <section> background, display y border

he rectificado el código, perdona kseso?, solo pense que valdria igual

<ul>
<li><a href="#tdah">Tdah</a></li>
<li><a href="#anhida">Anhida</a></li>
<li><a href="#enlaces">Enlaces</a></li>
</ul>

errores corregidos -> http://movil.anhida.es/#menu

Última edición por quico5; 29/04/2012 a las 09:24

Etiquetas: border, chrome, html, section, fondo
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 07:49.