Foros del Web - Ver Mensaje Individual

xLioneth · #1 (**permalink**) 22/11/2015, 08:32

Hola buenas, me esta fallando algo del código, yo ya previamente he modificado y probado distintas combinaciones para intentar solucionarlo y ya casi me he vuelto loco, quería a ver si alguno podía ayudarme y arrojarme algo de luz, para nada quiero que me "hagáis los deberes" simplemente ayudarme con el error ya que he probado de mil maneras.

Los backgrounds que me fallan son el de li.contenido, li.video, li.contacto y el #content.
He probado poniendo un div arriba de cada li, poniendo un div y dentro el li, poniendo dentro del li un div y poniendo entre el #nav y el li he puesto también los divs. Y seguía sin salir bien la imagen o en algunas veces directamente ni salia.

PD: Las imagenes del .header_article o article no las he puesto aun, con lo cual no hace falta que me digais como ni nada, solo quiero saber o poder solucionar el error del apartado #nav li y los class li.contenido, li.video, li.contacto y el del #content nada mas

Así tengo la estructura HTML:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Documento sin título</title>
<link rel="stylesheet" type="text/css" href="css\estilo.css" />
</head>
<body>
<div id="header">
<h1>Curso de HTML5 y CSS3</h1>
</div>
<div id="nav">
<ul>
<li class="contenido">
<a href="#">Contenidos</a>
</li>
<li class="videos">
<a href="#">Vídeos</a>
</li>
<li class="contacto">
<a href="#">Contacto</a>
</li>
</ul>
</div>
<div id="content">
<div class="article">
<div class="article_header">
<h2>HTML5</h2>
</div>
<p>Veremos los nuevos <b>elementos estructurales</b>,
así como los nuevos elementos existentes para <b>formularios,
audios y vídeo</b>.El<b>nuevo elemento canvas</b> nos abre un
mundo de posibilidades en el <b>desarrollo de vídeojuegos</b>web.</p>
</div>
<div class="article">
<div class="article_header">
<h2>CSS3</h2>
</div>
<p>Mejoraremos nuestros diseños web utilizando las nuevas
características de CSS3:<b>efectos, transformaciones, animaciones</b>,
etc.
Con CSS3 nuestros diseños serán más simples, pero no menos impactantes.</p>
</div>
<div class="article">
<div class="article_header">
<h2>javascript</h2>
</div>
<p>Junto con HTML5 aparecen nuevas <b>API javascript</b> que nos aportan
multitud de facilidades y posibilidades en el desarrollo de nuestros
proyectos web.
Con las nuevas API javascript nuestras manos dejaran de estar atadas.</p>
</div>
</div>
<div id="footer">
<p>David García Torres. 2015.Practica2 Curso de HTML5 y CSS3.
Impartido para: <a href="#">IES San Vicente - Desarrollo de Aplicaciones
Multiplataforma</a></p>
</div>
</body>
</html>

Y asi el archivo CSS:

Cita:

@charset "utf-8";
/* CSS Document */
body
{
width:960px;
background-image:url('../imgs/old_map.png');
}
#header
{
height:100px;
font-family: courier;
color: white;
font-size: 1.1em;
border-bottom:6px;
border-bottom-color:black;
border-bottom-style: solid;
background-color: #313B44;
}
h1
{
background-position:2% 120%;
background-image:url('../imgs/logo.png');
background-repeat:no-repeat;
padding-left:85px;
padding-top:25px;
}
#nav
{
height:120px;
position:relative;
top:-16px;
color: silver;
background-image:url('../imgs/red015.jpg');

}
#nav li
{
font-family: Courier;
text-align: center;
list-style: none;
display: inline;
}
li.contenido
{
background-image:url('../imgs/book.png');
background-repeat:no-repeat;
}
li.videos
{
background-image:url('../imgs/film.png');
background-repeat:no-repeat;
}
li.contacto
{
background-image:url('../imgs/mail.png');
background-repeat:no-repeat;
}
#nav li a
{
color: orange;
padding: 5px 5.5em;
font-size: 1.4em;
text-decoration: none;
}
#nav li a:hover
{
color: white;
}
#content
{
background-image:url('../imgs/grey008.jpg');
font-family:verdana;
font-size:0.8em;
}
.article
{
width:240px;
border: 1px;
border-color:lightgray;
border-style: solid;
background-color: white;
line-height: 1.8em;
padding-left:5px;
padding-right:5px;
padding-top:5px;
padding-bottom:22px;
margin:30px;
float:left;
}
.article_header
{
padding:10px;
border-bottom:1px;
border-style:solid;
border-color:#999999;
}
#footer
{
clear:both;
color:white;
font-size:0.7em;
background-color:#313B44;
border-top:6px;
border-top-color:black;
border-top-style:solid;
padding-top:15px;
padding-bottom:15px;
}
h2
{
padding:10px;
font-size:1.2em;
}
#footer p
{
text-align:center;
}

Muchísimas gracias de antemano seria de gran ayuda que alguien me arrojara un poco de luz sobre tanto fallo con simples backgrounds xD