1

Esta es mi página ahí hay un menú que consta de youtube, contacto, política de privacidad, acerca de, inicio. Quiero que youtube e inicio luzcan igual a contacto, política de privacidad y acerca de. no quiero que se abra una ventana modal en inicio y youtube, quiero que tengan el recuadro gris también, a eso me refiero.

Este es mi código:

* *, *::before, *::after{ box-sizing: border-box; padding: 0; margin: 0;}
    body {
	background: #000000;
	color: #000000;
} 
header, footer {
	background: #000000;
	width: 90%;
	max-width: 1000px;
	margin:20px auto;

}

header nav {
	background: #000000;
	overflow: hidden;
}
header nav ul {
	list-style: none;
}
header nav ul li {
	float:right;
}
	header nav ul li a {
		padding: 10px 20px;
		display: block;
		color: #fff;
		text-decoration: none;


	}
	 header nav ul li a:hover {
	 	background: #55d737;
	 }
	
.main {
  background: #000000;
  display: flex;
  padding: : 0px
} 


.main aside,
.main .article{
  padding: 20px;
}

.main .iz{
  width: 15%;
}
.main .de {
	width: 15%
}
.iz{
  background: #000000;
  color: #fff;
  order: 1;
}

.de{
  background: white;
  order: 3;
}

.article{
  order: 2;
  width: 70%;
  background: white;
  
}

article{
  background: white;
  margin: 5%;
}

footer {background: #000;
color:#fff;
clear:both
padding:10px 0px;
text-align: center;
}
a {margin: 20px}
.centro {
	text-align: center;
}

a.open{
	background-color: #414141;
	border-radius: 5px;
	color: #fff;
	font-size: 0.5em;
	margin: 20px;
	padding: 10px 20px;
	text-decoration: none;
	text-shadow: 2px 2px 0px #000;
	

}


section.modalDialog{
	background-color: white;
	bottom: 0;
	top:0;
	left: 0;
	right: 0;
	position: fixed;
	display: none;
	z-index: 2;
}

section.modalDialog:target{
	display: block;
}

a.close{
	background-color: #414141;
	border-radius: 5px;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	line-height: 22px;
	position: absolute;
	right: 5px;
	top:5px;
	text-align: center;
	text-decoration: none;
	width: 28px;
}

a.close{
	background-color: #000;
}

section.modal{
	background-color: #111;
	box-shadow: 0px 0px 10px #000;
	border-radius: 5px;
	color: #fff;
	margin: 10% auto;
	padding: 20px;
	position: relative;
	width: 600px;
}

.diferencia {
	color: #fff;
	font-size: 2em;
	margin-bottom: 10px;
}

.diferente{
	color: #fff;
	font-size: 1.2em;
}

<nav>
  <ul><li><a href="#">INICIO</a></li>
    <li><div class="contenedor">
      <a href="#openmodal1" class="open"> ACERCA DE </a>
      <section id="openmodal1" class="modalDialog">
        <section class="modal">
          <a href="#close" class="close"> X </a>
          <h2 class="diferencia"> acerca de</h2>
          <p class="diferente">Este sitio abarca tutoriales para dar soluciones destinadas a resolver dudas acerca de todo tipo de ideas útiles para el internauta</p>
        </section>
      </section>
    </div></li>
    <li><div class="contenedor">
      <a href="#openmodal2" class="open">POLITICA DE PRIVACIDAD</a>
      <section id="openmodal2" class="modalDialog">
        <section class="modal">
          <a href="#close" class="close"> X </a>
          <h2 class="diferencia"> politica de privacidad</h2>
          <p class="diferente">Esta permitido compartir todo el contenido de este sitio, más no está permitido copiar cual fiel copia, para usarlo en el desarrollo de otro sitio web, todo o parte del contenido de mi sitio web. En cualquier caso que se inserte cualquier parte del contenido en otro sitio web se deberá hacer referencia de que se está compartiendo el contenido y de forma notoria que dicho contenido es de mi autoria: Susana Alexadra Loor García y de que se extrajo de: <a href="https://alexandrawp.herokuapp.com">https://alexandrawp.herokuapp.com/</a> Por lo tanto se establece que se respetará este sitio web como propiedad de la autora, y nadie se podrá adujudicar a su autoria todo del contenido de dicho sitio</p>
        </section>
      </section>
    </div></li>
    <li><div class="contenedor">
      <a href="#openmodal3" class="open"> CONTACTO</a>
      <section id="openmodal3" class="modalDialog">
        <section class="modal">
          <a href="#close" class="close"> X </a>
          <h2 class="diferencia"> CONTACTO</h2>
          <p class="diferente">Comunicate con nosotros a este correo [email protected]</p>
        </section>
      </section>
    </div> </li>
    <li><a target="_blank" href="https://www.youtube.com/channel/UCsYcSASeuWbHFBZJXy6SJEA?sub_confirmation=1">YOUTUBE</a></li>
  </ul>
      </nav>

1
  • 1
    No tendrás que poner el class open tanto en inicio como en YouTube? Es que así ahora mismo no le estás aplicando el estilo CSS
    – DevMind
    Commented el 19 ene. 2018 a las 19:55

2 respuestas 2

1

Tienes el youtube e inicio así :

YOUTUBE

<li>
    <a target="_blank" href="https://www.youtube.com/channel/UCsYcSASeuWbHFBZJXy6SJEA?sub_confirmation=1">YOUTUBE</a>

</li>

INICIO

<li>
   <a href="#">INICIO</a>
</li>

para que luzcan como deseas , ambas etiquetas <a> encierralas dentro de un <div class="contenedor"></div> , y a las etiquetas <a> agrégales las clases open, te guedarian los <li> así:

YOUTUBE

 <li>
       <div class="contenedor">
        <a target="_blank" class="open" href="https://www.youtube.com/channel/UCsYcSASeuWbHFBZJXy6SJEA?sub_confirmation=1">YOUTUBE</a>
       </div>
 </li>

INICIO

<li>
  <div class="contenedor">
     <a href="#" class="open">INICIO</a>
  </div>
</li>
3
  • Si utiliza lo que @Mario Guiber dijo en el comentario, podría funcionar también. <a class="open" href="#">INICIO</a> Commented el 19 ene. 2018 a las 20:07
  • 1
    si, es parte de lo mismo que le sugiero, agregarle open a las etiquetas a, pero también que las encierre dentro de los div , para que le queden igual a los demás
    – Asney
    Commented el 19 ene. 2018 a las 20:11
  • Es verdad. ;-). Commented el 19 ene. 2018 a las 20:13
0

Tienes q agregar la class="open" a los elementos q quieras q se vean con ese style.

Por otro lado, si los elementos de la class open tienen otras funcionalidades q no quieras compartir con YouTube ni Inicio, puedes crearles otra clase distinta, con los mismos cambios en el css.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.