Text appears behind the menu

Asked

Viewed 269 times

1

I have a menu and my page text is appearing behind the menu and I want it to appear beside.

inserir a descrição da imagem aqui

Page code is:

<html>

<heard>
<meta charset='utf-8'>
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="styles.css">
   <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
   <script src="script.js"></script>

<title>Fernardo Pessoa - Vida</title>

</heard>

<body background="imagens/fundopessoa1.png">
   <div id='cssmenu'>
      <ul>
         <li><a href='inicio.html'><span>Inicio</span></a></li>
         <li><a href='vida.html'><span>Biografia</span></a></li>
         <li class='active has-sub'><a href=""><span>Obras Poéticas</span></a>
            <ul>
           <li><a href='ortonimo.html'><span>Ortónimo</span></a></li>
               <li class='has-sub'><a href=""><span>Heterónimos</span></a>
                  <ul>
                     <li><a href='AlvaroCampos.html'><span>Álvaro de Campos</span></a></li>
                     <li class='last'><a href='RicardoReis'><span>Ricardo Reis</span></a></li>
                     <li class='last'><a href='AlbertoCaeiro'><span>Alberto Caeiro</span></a></li>
                  </ul>
               </li>
            </ul>
     </li>
         <li class='last'><a href='crologia'><span>Crologogia</span></a></li>
      </ul>
   </div>

   <div>   
      <h1 align="center"><font color="green"><b>Fernando Pessoa</center></b></font></h1>
      <p><font color="blue" face="Verdana" size="4">Fernando Antônio Nogueira Pessoa foi um dos mais importantes escritores e poetas do modernismo em Portugal. Nasceu a 13 de Junho de 1888 na cidade de Lisboa(Portugal) e morreu, na mesma cidade, a 30 de NOvembro de 1935.
      <p>Fernando Pessoa foi morar, ainda infância, na mesma cidade Durban (África do Sul), onde seu pai tornou-se cônsul. Neste país teve contacto com a língua e literatura inglesa.
      <p>Adulto, Fernando Pessoa trabalhou como tradutor técnico, publicando seus primeiros poemas em Inglês.
      <p>Em 1905, retornou sozinho para Lisboa,e na ano seguinte, matriculou-se no curso superior de Letras. Porém, abandou o curso um ano depois.
      <p>Pessoa passou a ter um ontacto mais efetivo com a literatura portuguesa, principalmente <a href="PadreVieira.html">Padre Antônio Vieira</a> e <a href="CesarioVerde.html">Cesário Verde</a>. Foi também influênciado pelos estudos filosóficos de Nietzsche e Schopenhuer. Recebeu também influências do simbolismo francês.
      <p>Em 1912, começou suas atividades como ensaísta e crítico literário, na revista Águia.
      <p>A saúde do poeta português começou a apresentar complicações em 1935. Neste anoo foi hospitalizado com cólica hepática, provalmente causada pelo consumo excessivo de bebida alcoólica.</font>
   </div>
</body>

</html>

And the code to generate the menu is:

#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu {
  width: 200px;
  font-family: Helvetica, Arial, sans-serif;
  float:left;
  z-index:20;
  position: absolute;
  color: #000000;
}
#cssmenu ul ul {
  display: none;
}
.align-right {
  float: right;
}
#cssmenu > ul > li > a {
  padding: 15px 20px;
  border-left: 1px solid #444444;
  border-right: 1px solid #444444;
  border-top: 1px solid #444444;
  cursor: pointer;
  z-index: 2;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  background: #ffffff;
  background: -webkit-linear-gradient(#444444, #333333);
  background: -moz-linear-gradient(#444444, #333333);
  background: -o-linear-gradient(#444444, #333333);
  background: -ms-linear-gradient(#444444 #333333);
  background: linear-gradient(#444444, #333333);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a,
#cssmenu > ul > li.open > a {
  color: #ffffff;
  background: #ffffff;
  background: -webkit-linear-gradient(#444444, #333333);
  background: -moz-linear-gradient(#444444, #333333);
  background: -o-linear-gradient(#444444, #333333);
  background: -ms-linear-gradient(#444444 #333333);
  background: linear-gradient(#444444, #333333);
}
#cssmenu > ul > li.open > a {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid #000000;
}
#cssmenu > ul > li:last-child > a,
#cssmenu > ul > li.last > a {
  border-bottom: 1px solid #333333;
}
.holder {
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  right: 0;
}
.holder::after,
.holder::before {
  display: block;
  position: absolute;
  content: "";
  width: 6px;
  height: 6px;
  right: 20px;
  z-index: 10;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.holder::after {
  top: 17px;
  border-top: 2px solid #000000;
  border-left: 2px solid #000000;
}
#cssmenu > ul > li > a:hover > span::after,
#cssmenu > ul > li.active > a > span::after,
#cssmenu > ul > li.open > a > span::after {
  border-color: #ffffff;
}
.holder::before {
  top: 18px;
  border-top: 2px solid;
  border-left: 2px solid;
  border-top-color: inherit;
  border-left-color: inherit;
}
#cssmenu ul ul li a {
  cursor: pointer;
  border-bottom: 1px solid #000000;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
  padding: 10px 20px;
  z-index: 1;
  text-decoration: none;
  font-size: 13px;
  color: #ffffff;
  background: #666666;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#cssmenu ul ul ul li a {
  cursor: pointer;
  border-bottom: 1px solid #000000;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
  padding: 10px 20px;
  z-index: 1;
  text-decoration: none;
  font-size: 13px;
  color: #ffffff;
  background: #888888;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.open > a,
#cssmenu ul ul li.active > a {
  background: #666666;
  color: #ffffff;
}
#cssmenu ul ul li:first-child > a {
  box-shadow: none;
}
#cssmenu ul ul ul li:first-child > a {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#cssmenu ul ul ul li a {
  padding-left: 30px;
}
#cssmenu > ul > li > ul > li:last-child > a,
#cssmenu > ul > li > ul > li.last > a {
  border-bottom: 0;
}
#cssmenu > ul > li > ul > li.open:last-child > a,
#cssmenu > ul > li > ul > li.last.open > a {
  border-bottom: 1px solid #32373e;
}
#cssmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a {
  border-bottom: 0;
}
#cssmenu ul ul li.has-sub > a::after {
  display: block;
  position: absolute;
  content: "";
  width: 5px;
  height: 5px;
  right: 20px;
  z-index: 10;
  top: 11.5px;
  border-top: 2px solid #eeeeee;
  border-left: 2px solid #eeeeee;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
#cssmenu ul ul li.active > a::after,
#cssmenu ul ul li.open > a::after,
#cssmenu ul ul li > a:hover::after {
  border-color: #ffffff;
}
html css

  • if possible @Catarinasilveste, post the code you use to generate the menu

  • @Catarinasilvestre, I advise you to look at the following codepen: http://codepen.io/SitePoint/pen/uIemr, it might help you.

  • I with the reply of @Renilson Andrade I already managed to solve what I wanted but now I would like to put a margin also on the right side, but I can’t get what I tried was . menu float: left; width: 30%; top: 20%;} . content { float: right; width: 70%; height: 100%;}.

  • you can add a second div with float: right.

2 answers

1


You can work with the property float, and size according to your need.

Add this code to your CSS:

.menu { float: left; width: 30%; top: 20%;}
.conteudo { float: right; width: 70%; }

Refer to css in specific Ivs:

<div id='cssmenu' class="menu">
...
</div>
<div class="conteudo">   
...
</div>

Example

0

I don’t know if it will help you, but if this menu is fixed width you can put a left margin in the text container.

.classe-da-div-com-textos{
     margin-left: 150px; //essa é a largura do menu
}

It’s not the most beautiful solution, but it should work. Read about the property float and further on grid.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.