0

Como ven estan superpuestas introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

corrijanme mi código porfavor

* *, *::before, *::after{ box-sizing: border-box; padding: 0; margin: 0;}
    body {
	background: #000000;
	color: #000000;
} 
header, footer {
	background: #e6e6e6;
	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:left;
}
	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;
  text-align: center;
}

article{
  background: white;
}

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

a.open{
	background-color: #414141;
	border-radius: 5px;
	color: #fff;
	font-size: 1.5em;
	margin: 20px;
	padding: 10px 20px;
	position: absolute;
	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;
}

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

p{
	color: #fff;
	font-size: 1.2em;
}
<header>
	

<div class="logotipo"><img src="imagenes/alex.bmp" width="70" alt="logotipo"> </div>
	<nav>
	<ul><li><a href="#">INICIO</a></li>
		<li><div class="contenedor">
      <a href="#openmodal" class="open"> ACERCA DE </a>
      <section id="openmodal" class="modalDialog">
        <section class="modal">
          <a href="#close" class="close"> X </a>
          <h2> acerca de</h2>
          <p>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="#openmodal" class="open">POLITICA DE PRIVACIDAD</a>
			<section id="openmodal" class="modalDialog">
				<section class="modal">
					<a href="#close" class="close"> X </a>
					<h2> politica de privacidad</h2>
					<p>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="home.html">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="#openmodal" class="open"> CONTACTO</a>
      <section id="openmodal" class="modalDialog">
        <section class="modal">
          <a href="#close" class="close"> X </a>
          <h2> CONTACTO</h2>
          <p>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>
		</header>

ya solucioné lo anterior, tenia una etiqueta

</ul>

de más, ahora lo que quiero lograr que inicio y youtube tenga un recuadro plomo permanente como lo tienen acerca de contacto y política de privacidad .Donde está iluminado con verde es porque pase el mouse por encima de youtube introducir la descripción de la imagen aquí

1 respuesta 1

0

Saludos. Quítale a a.open el position:absolute. Y listo.


Si sigue desordenado o no luce como esperas, es porque no se a que te refieres, ¿Exactamente de como debe verse el menú? por ejemplo yo intente lo mismo que te aconsejo y cambie tanto el tamaño de la letra como modifique los margin y los padding de los enlaces y ya no lo veo desordenado al menos, no tanto como lo tenías. ¿Podrías proveer una imagen de como debe verse?

Aquí te dejo las modificaciones que hice al código, principalmente en el css al ul, a y a.open y al html lo idente y organice mejor para mi lectura porque estaba un poco desordenado:

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

header nav {
  background: #000000;
  overflow: hidden;
}
header nav ul {
  list-style: none;
  padding-top: 1em;
}
header nav ul li {
  display: inline-block;
}
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;
  text-align: center;
}

article {
  background: white;
}

footer {
  background: #000;
  color: #fff;
  clear: both;
  padding: 10px 0px;
  text-align: center;
}
a {
  font-size: 0.8em;
  margin: 0.2em;
  padding: 0.3em;
}

a.open {
  background-color: #414141;
  border-radius: 5px;
  color: #fff;
  /*position: absolute;*/
  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;
}

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

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


/*===========================================
=============================================
Esto ignoralo, es para que se vea el logotipo
=============================================
=========================================== */

.logotipo{
  background-image: url(https://i.sstatic.net/cFqte.png);
  background-size: 1366px 768px;
  background-position: -67px -116px;
  min-height: 57px;
  max-width: 768px;
}

.logotipo img{
   opacity: 0;
}
<header>
  <div class="logotipo">
    <img src="imagenes/alex.bmp" width="70" alt="logotipo"> 
  </div>
	<nav>
    <ul>
      <li>
        <a href="#">INICIO</a>
      </li>
      <li>
        <div class="contenedor">
          <a href="#openmodal" class="open">ACERCA DE</a>
          <section id="openmodal" class="modalDialog">
            <section class="modal">
              <a href="#close" class="close"> X </a>
              <h2> acerca de</h2>
              <p>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="#openmodal" class="open">POLITICA DE PRIVACIDAD</a>
          <section id="openmodal" class="modalDialog">
            <section class="modal">
            <a href="#close" class="close"> X </a>
            <h2> politica de privacidad</h2>
            <p>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="home.html">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="#openmodal" class="open">CONTACTO</a>
            <section id="openmodal" class="modalDialog">
            <section class="modal">
              <a href="#close" class="close"> X </a>
              <h2> CONTACTO</h2>
              <p>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>
</header>

9
  • TODAVIA SALE DESORDENADO EN OPEN LE CAMBIÉ EL FONT ZISE A 0.5 EM, ¿cÓMO HAGO PARA QUE NO SALGA DESORDENADO? Commented el 16 ene. 2018 a las 16:49
  • ayuda porfavor no quiero crear otra pregunta Commented el 16 ene. 2018 a las 18:48
  • Tranquila, acabo de modificar mi respuesta, para mostrarte lo que yo creo que no se ve desordenado. Sin embargo, si no es eso, es que no entendí bien qué quieres lograr ¿Tienes la imagen del sketch, wireframe o diseño de lo que quieres hacer? Commented el 16 ene. 2018 a las 19:53
  • 1
    tenia un <ul> de mas, y con eso se arregló ahora ya te enseño lo que quiero lograr Commented el 16 ene. 2018 a las 19:57
  • necesito poner una nueva respuesta Commented el 16 ene. 2018 a las 19:58

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.