Me fallan los backgrounds

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

CarlosMilles · #2 (**permalink**) 22/11/2015, 08:45

Buenas no se si entiendo bien la pregunta. ¿Te refieres a las 3 imagenes que te salen como cortadas?
No se si será la solución, pues acabo de empezar ahora en este mundillo, pero me parece que a

Código HTML:

Ver originalli.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;
}

les falta les declares un width y un height, que basicamente será el tamaño de esa imagen.

Saludo!

xLioneth · #3 (**permalink**) 22/11/2015, 09:02

Cita:

Iniciado por CarlosMilles

Buenas no se si entiendo bien la pregunta. ¿Te refieres a las 3 imagenes que te salen como cortadas?
No se si será la solución, pues acabo de empezar ahora en este mundillo, pero me parece que a

Código HTML:

Ver originalli.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;
}

les falta les declares un width y un height, que basicamente será el tamaño de esa imagen.

Saludo!

Lo acabo de probar y nada sigue igual :( yo tengo la manía que el fallo proviene del #nav pero no logro ver que puede ser

Asi he puesto lo que me dijiste:

Cita:

li.contenido
{
background-image:url('../imgs/book.png');
background-repeat:no-repeat;
width:100px;
height:100px;
}
li.videos
{
background-image:url('../imgs/film.png');
background-repeat:no-repeat;
width:100px;
height:100px;
}
li.contacto
{
background-image:url('../imgs/mail.png');
background-repeat:no-repeat;
width:100px;
height:100px;
}

Gracias por responder tan rapido :D te lo agradezco mucho

xLioneth · #4 (**permalink**) 22/11/2015, 09:52

Vale, pongo esto por si a alguien le pasa algo por el estilo y no sabe solucionarlo, yo he conseguido hacerlo pero un poco chapuzero, mejor que nada es xD

Ahora solo me queda el background del #content que no me saca nada, ni background-image ni background-color si alguien lo saca antes que yo o lo sabe, se agradece la ayuda

Aqui las modificaciones en el CSS:

Cita:

#nav
{
height:120px;
position:relative;
top:-52px;
font-size:3.3em; /* 1 */
color: silver;
background-image:url('../imgs/red015.jpg');

}
#nav li
{

padding-bottom:1000px;
margin:70px; /* 1 */
font-family: Courier;
text-align: center;
list-style: none;
display: inline;
}
li.contenido
{
position:relative; /* 1 */
top:8px; /* 1 */
background-image:url('../imgs/book.png');
background-repeat:no-repeat;
}
li.videos
{
position:relative; /* 1 */
top:8px; /* 1 */
padding-left:20px;
background-image:url('../imgs/film.png');
background-repeat:no-repeat;
}
li.contacto
{
position:relative; /* 1 */
top:8px; /* 1 */
padding-left:10px;
background-image:url('../imgs/mail.png');
background-repeat:no-repeat;
}
#nav li a
{
position:relative; /* 1 */
top:40px; /* 1 */
left:-45px; /* 1 */
color: orange;
margin:12px; /* 1 */
padding: 15px; /* 1 */
font-size: 18px; /* 1 */
text-decoration: none;
}

AngelKrak · #5 (**permalink**) 22/11/2015, 13:40

pasa tu codigo(Imagenes) para ver bien la pagina con las imagenes que ocupas, si puedes subelo a codepen, si no solo pasa el archivo .rar

udasha · #6 (**permalink**) 23/11/2015, 09:10

Cita:

Iniciado por xLioneth

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:

Y asi el archivo CSS:

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

Chequea el formato de la imagen del background, a veces no es problema de codigo sigo problema del formato de imagenes... si tiene formato .png en tu codigo y la imagen tiene formato .PNG, aunque digas son los mismos formatos, pero los servidores las leen como diferentes formatos... la mayuscula y la minuscula cambian en los servidores, y por lo tanto tu servidor no las podra leerlas..