Autor Tema: Correcta construcción de código HTML anidar mal las etiquetas (Leído 3713 veces)

tata · « **en:** 08 de Abril 2015, 04:31 »

Hola, son unas pestanas que necesito que me salgan pero no me salen bien

En mi editor de texto lo tengo completo, lo copiare aqui completo

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="en">
<html>
<head>
   <title>DALLTEX</title>
          <meta charset="utf-"8"/>
		  <meta name="description"content="air conditioning and heating services in Dallas Texas and surrounding areas"/> 
		  <meta name="viewport"content="width-device-width,initial-scale=1"/>
		   <link rel="stylesheet" href="estilos.css"/>
</head>

   <body>
       <header
	      <h1>D A L L  T E X  A I R</h1>
		  <h2>AIR CONDITIONING AND HEATING SERVICES</h2>
		  </br></br>
		
			<marquee  direction="left"loop="infinite"> Welcome Dalltexair</marquee></br>
			 <nav>
		    <ul>
			    
				<li><a href="index.html">Home</a></li>
				<li><a href="about us.html">About us</a></li>
				<li><a href="services.html">Services</a></li>
				<li><a href="specials.html">Specials</a></li>
				<li><a href="contact.html">Contact</a></li> 
		   	
            </header> 
			    </nav>
		         </ul>
				</br></br></br>
				<h3>SPECIALS</h3>
			<div id="specials">
			    <a href="#special1" id="one">special1</a>
				<a href="#special2" id="two">special2</a>
				</div>
				
				
				<div id="special1" class="hidetext">especials 1<br><br>
				     *Senior citizen 15% discount*</br>
					 *ONLINE SPECIAL: 10% OFF for New Customers*</br>
					 *No overtime fee*</br>
					 </div>
				<div id="special2" class="hidetext">especials 2<br><br>
				     *Specials $500 off complete hvac system/installation*</br>
					 *24 hours services*</br>
					 *Open 7 days*</br>
					 </div>
				<div id="especialsvisible"/>especials 1<br></br>
				      *Senior citizen 15% discount*</br>
					  *ONLINE SPECIAL: 10% OFF for New Customers*</br>
					  *No overtime fee*</br>
					 </div>
		</body>
		</html>]

aqui el css3

Código: [Seleccionar]

  #specials{
      height:200px;
	  margin:16px auto;
	  width:300px;
}

#special1:target .#special2:target{
              background:#000000;
			  border:1px,solid #000;
			  color:000000;
			  display:block;
			  font-family:impact;
			  font-size:12px;
			  height:115px;
			  margin-top:41px;
			  padding-top:5px;
			  position:absolute;
			  width:350px;
			  visibility:visible;
			  z-index;2;
			  
	}
.hidetext{
  visibility:hidden;
 }
	 
.hidetext{
       background:#8F835A;
	   border:1px solid #fff;
	   color:f43t69;
	   display:block;
	   font-size:12px;
	   font-family:arial;
	   margin-top:41px;
	   padding-top:5px;
	   position:absolute;
	   width:350px;
	   height:115px;
	   visibility:visible;
	  
	   z-index:2;
	}
#one,#two{
      background:linear-gradient(#fff,#e3e3e3);
	  border:1px solid #000;
	  border-radius:10px 10px 0 0;
	  color:#4f4d4e;
	  display:inline-block;
	  font-family:Impact;
	  font-size:12px;
	  padding:5px 25px;
	  position:relative;
	  text-decoration:none;
	  z-index:3;
	}
#especialsvisible{
              background:#8F835A;
	   border:1px solid #fff;
	   color:f43t69;
	   display:block;
	   font-size:12px;
	   font-family:arial;
	   margin-top:41px;
	   padding-top:5px;
	   position:absolute;
	   width:350px;
	   height:115px;
	   visibility:visible;
	  
	   z-index:1;

Gracias Javi

javi in the sky · « **Respuesta #1 en:** 09 de Abril 2015, 10:46 »

Tata tienes el código mal construido, por ejemplo:

Código: [Seleccionar]

       <header
	      <h1>D A L L  T E X  A I R</h1>
		  <h2>AIR CONDITIONING AND HEATING SERVICES</h2>
		  </br></br>
		
			<marquee  direction="left"loop="infinite"> Welcome Dalltexair</marquee></br>
			 <nav>
		    <ul>
			    
				<li><a href="index.html">Home</a></li>
				<li><a href="about us.html">About us</a></li>
				<li><a href="services.html">Services</a></li>
				<li><a href="specials.html">Specials</a></li>
				<li><a href="contact.html">Contact</a></li> 
		   	
            </header> 
			    </nav>
		         </ul>

Mira donde empieza <ul>, luego vienen los li y al terminar los li tendrías que cerrar el <ul>. No puedes cerrar antes el header, porque entonces te queda el ul abierto dentro del header y cerrado fuera del header.

Tendrías que hacer los anidamientos en todo el código correctos, por ejemplo:

Código: [Seleccionar]

       <header
	      <h1>D A L L  T E X  A I R</h1>
		  <h2>AIR CONDITIONING AND HEATING SERVICES</h2>
		  </br></br>
		
			<marquee  direction="left"loop="infinite"> Welcome Dalltexair</marquee></br>
			 <nav>
		    <ul>
			    
				<li><a href="index.html">Home</a></li>
				<li><a href="about us.html">About us</a></li>
				<li><a href="services.html">Services</a></li>
				<li><a href="specials.html">Specials</a></li>
				<li><a href="contact.html">Contact</a></li> 
		   	  </nav>
		         </ul>
            </header>

Aquí lo que abre dentro del header, cierra dentro del header. Esto habría que revisarlo en todo el código, lo que abre dentro de algo tiene que cerrar dentro de ese algo.

Saludos!

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: