Difficulty adjusting menu and footer in responsive layout

Asked

Viewed 2,251 times

2

The code below relates to menu and footer, whose I’m having trouble adjusting to responsive layout:

 /*Código por Domingos Pereira, GPSI12 */
 /*Dísciplina de Redes */
 /* Professor: João Delgado */
 /*
 Menu
 */
#menu{
	text-align:center;
	width:750px;
	margin:0 auto;
	white-space: nowrap;
	display: block;

}
#menu > ul > li.active > a {
	color: #FFFFFF;
}
#menu ul ul li.active > a {
	color: #FFFFFF;
}
#menu ul {
	padding:0px;
	margin:0px;
	float: left;
	width: 49,5%;
	background-color:#EDEDED;
	list-style:none;
	font:80% Tahoma;
}
#menu ul li { 
	display: inline; 
}
#menu ul li a {
	display:block;
	text-align:center;
	background-color:#EDEDED;
	color: #333;
	text-decoration: none;
	border-bottom:3px solid #EDEDED;
	padding: 2px 10px;
	float:left;
}
#menu ul li a:hover {
	background-color:#D6D6D6;
	color: #6D6D6D;
	border-bottom:3px solid #565656;
}
 /* Termina Menu*/
 /* Footer */
footer {
	position: relative;
	z-index: 1;
	background: #e9e9e9;
	margin-top: -28px;
	padding: 48px 0 28px 0;
}
 /* Termina Footer */
 /* Imagens*/
 /* codigo extra, caso necessário */
 /*<img class="responsive" src="http://fotopex.com/42.jpg" />*/
 /*img.responsive { 
 border-radius: 3px;
 box-shadow: 0 3px 6px rgba(0,0,0,0.9);
 margin: 2.5% ;
 }
 @media screen and (orientation: portrait) {
 img.responsive { max-width: 95%; }
 }
 @media screen and (orientation: landscape) {
 img.responsive { max-height: 95%; } */
 /* Fim codigo extra, caso necessário */
 #logo{
 margin-left:10%;
 }
 /* IFRAMES / SLIDE*/
iframe{
	width:100%;
	height:100%;
	allowfullscreen:true;
	border:none;
	mozallowfullscreen:true;
	webkitallowfullscreen:true;
}
.wrapperr {
	max-width: 65.33333333333333em;
	margin: 0 auto;
}
.wrapper         {
	width:100%;
	height:100%;
	margin:0 auto;
	background:#ffffff;
}
.h_iframe        {position:relative;}
.h_iframe .ratio {display:block;width:100%;height:auto;}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}
 /* Fim Imagens */
 /* Formatação da página */
html, body {
	font-size: 100%; 
	-webkit-text-size-adjust: 100%; 
	-ms-text-size-adjust: 100%; 
	height: 98%;
	background-color:#f9f9f9;
}
#divsec {
	max-width:100%;
	max-height:100%;
	position:relative;
	height: 70%;
	width:60%;
	margin:0 auto;
	text-align:center;
}
#divinicio {
	max-width:100%;
	max-height:100%;
	position:relative;
	height: 65%;
	width:60%;
	border:1px solid #000000;
	margin:0 auto;
	margin-top:4%;
	text-align:center;
}
.container {
	padding: 3em 0;
	-webkit-margin-before: 1em;
	-webkit-margin-after: 1em;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
	margin-right: auto;
	margin-left: auto;
}
 /* Fim formatação da página */
 /* Tabela Software */
table {
	position:relative;
	margin-left:0;
	margin-right:0;
	margin-top:1%;
	border-collapse: collapse;
	border: 1px solid #666666;
	font: normal 11px verdana, arial, helvetica, sans-serif;
	color: #363636;
	background: #f6f6f6;
	text-align:left;
	display:block; 
	width:auto; 
	overflow-x: auto;
}
caption {
	text-align: center;
	font: bold 16px arial, helvetica, sans-serif;
	background: transparent;
	padding:6px 4px 8px 0px;
	color: #CC00FF;
	text-transform: uppercase;
}
thead, tfoot {
	background:url(bg1.png) repeat-x;
	text-align:left;
	height:30px;
}
thead th, tfoot th {
	padding:5px;
}
table a {
	color: #333333;
	text-decoration:none;
}
table a:hover {
	text-decoration:underline;
}
tr.odd {
	background: #f1f1f1;
}
tbody th, tbody td {
	padding:5px;
}
hr{
	height:2px; 
	border:1px;
	color:#000; 
	background-color:#000; 
	margin-top: 0px;
	margin-bottom: 0px;
}
 /* Fim tabela software */
	<!DOCTYPE html>
<html>
<head>
	<title>1CCEPB</title>
	<link rel="icon" href="img/favicon.ico" type="image/x-icon">
	<link rel="stylesheet"  href="css/style.css" type="text/css">
	<script type="text/javascript" src="js/script.js"> </script>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="description" content="Escola Profissional de Braga, EPB,Math,Matemática,Imagem da Matemática" />
</head>
<body>
	<!-- Logotipo -->
	<header>
		<div id="logo">
			<a href="index.html"><img src="img/logo_epb.png" alt="EPB" /></a>
		</div>
	</header>
	<!-- FimLogotipo -->
	<!-- Menu Principal -->
	<div class="clear"></div>
	<nav>
		<center>
			<div id="menu">
				<ul>
					<li><a href='index.html'>Inicio</a></li>
					<li><a href="galeria.html">Galeria </a> </li>
					<li><a href="evento.html">Eventos</a></li>
					<li><a href="math.html">Matemática</a></li>
					<li><a href="fq.html">FQ</a></li>
					<li class='active'><a href="software.html">Software</a></li> 
				</ul>
			</div>
		</center>
	</nav>	
	<br>
	<br>
	<br>	
	<!-- Fim Menu Principal -->
	<!-- DIV Software -->
	<div id="divsec">
		<!--Tabela software -->

		<center>
			<table width=500>
			 <thead>
				 <tr>
					 <th scope="col">Software</th><th scope="col">Descrição</th><th scope="col">Download</th>
				 </tr>
			 </thead>
			 <tbody>
				 <tr>
					 <th scope="row" id="Graph">
						 <hr/>
						 <p>Graph 4.4.2</p>
					 </th>
					 <td>
						 <br>
						 <p>Programa que desenha o gráfico de uma função e informa sobre algumas das suas caracteristicas.</p>
					 </td>
					 <td>
						 <a href="/software/graph.exe" title="Graph 4.4.2">Download</a>
					 </td>
				 </tr>
			 </tbody>
			 <tbody>
				 <tr>
					 <th scope="row" id="Graph">
						 <hr/>
						 <p>FX-9860G Emulator</p>
					 </th>
					 <td>
						 <p>Programa que emula a calculadora gráfica Casio FX - 9860G SD</p>
					 </td>
					 <td>
					 	<a href="/software/fx-9869-emulator.exe" title="FX-9860G Emulator">Download</a>
				 	</td>
			 	</tr>
			</tbody>
		 	<tbody>
			 	<tr>
				 	<th scope="row" id="Graph">
					 <hr/>
					 <p>Função Trignométrica</p>
				 	</th>
				 	<td>
						<p>Associação entre o círculo trigonométrico e os gráficos das funções trignoméricas no intervalo [0 , 2PI]</p>
				 	</td>
					 <td>
						 <a href="/software/fx-9869-emulator.exe" title="Função Trignométrica">Download</a>
					 </td>
			 	</tr>
		 	</tbody>
		 	<tbody>
				<tr>
					<th scope="row" id="Graph">
						<hr/>
						<p>Círculo Trignométrico</p>
					</th>
					<td>
						<p>Programa que permite a introdução do círculo trigonométrico.</p>
					</td>
					<td>
						<a href="/software/fx-9869-emulator.exe" title="Graph">Download</a>
					</td>
				</tr>
			</tbody>

			 <tbody>
				 <tr>
					 <th scope="row" id="Graph">
						 <hr/>
						 <p>Poly32</p>
					 </th>
					 <td>
						 <p>Programa que permite reconhecer e analisar algumas propriedades dos sólidos platónicos.</p>
					 </td>
					 <td>
						 <a href="/software/fx-9869-emulator.exe" title="Graph">Download</a>
					 </td>
				 </tr>
			 </tbody>
			 <tbody>
				 <tr>
					 <th scope="row" id="Graph">
						 <hr/>
						 <p>GeoGebra</p>
					 </th>
					 <td>
						 <br>
						 <p>Software de matemática dinâmica para utilizar em ambiente de sala de aula, que reune geometria, álgebra e cálculo.</p>
					 </td>
					 <td>
						 <a href="/software/fx-9869-emulator.exe" title="GeoGebra">Download</a>
					 </td>
				 </tr>
			 </tbody>
		 	</table>
 		</center>
 		<!-- Fim Tabela software -->

	</div>
	<!-- Fim DIV centrada -->
	<!-- Copy rights-->
	<footer>
		<p align="center">Copyright &copy; 2015 All rights reserved | <b> Domingos Manuel Gavina Pereira</b></p>
	</footer>
	<!-- Fim Copy rights-->
</body>
</html>

When the viewport is resized, the menu is not responsive and the footer "goes up" and is centralized, even using bottom: 0.

How can I solve this problem using only HTML and CSS?

css css3 responsive-layout

3 answers

1

There are 2 ways to get the result you are looking for.

  • Using only css, but you are limited to a certain html/css structure to make it work.
  • Using javascript (with css also), where you have a better dynamic on your site.

Before leaving for the answer itself, I should warn you that your table has a confusing html. You do not need to create a tag <tbody> for each line, only one is enough, the <tr> already works as a definition of "line".

Problem

Now to the problem itself.

Footer

Your problem with the footer occurs because your #divsec is defined with a value of height 70% fixed, that is, it will always have 70% of the screen height, so its footer does not get fixed at the bottom of the page. Remove this property by leaving the #divsec thus:

#divsec {
    max-width:100%;
    max-height:100%;
    position:relative;
    width:60%;
    margin:0 auto;
    text-align:center;
}

Another observation, your footer you won’t need the margin-top:-28px;, unless you really need it, but with that it is getting "above" the table, so I recommend removing this property so that it is immediately below the table.

Menu

As for your menu, it is a little more complex, using only css, you can use a @media having a code similar to this:

.menu {
    width:100%;
    height:40px;
    background:#eee;
    color:000;
}
.menu ul {
    list-style: none;
    margin:0; padding: 0;
    display: none;
}
.menu ul li {
    display: table-cell;
}
.menu:hover .menu ul {
    display: table;
}
span {
    display:inline-block;
    float: left;
}
span:hover ~ ul {
    display:table;
}

@media (min-width:992px) {
    .menu {
        width: 50%;
        margin:0 auto;
    }
    .menu ul {
        display:table;
        width:100%;
    }
    .menu ul li {
        height:40px;
        line-height:40px;
        text-align:center;
    }
    span {
        display:none;
    }   
}

See example working: http://jsfiddle.net/ggxbu8sf/2/

However, as stated earlier, you are restricted to a html, for it to have the display, you must leave the tag ul right after the tag span, which is where we activate the menu view in layout Responsive.

To have a more dynamic functionality, I recommend looking for a javascript menu. There are several templates ready to use in jQuery, for example.

But this will depend on your availability to create/use javascript in your project. As in this case your only need is to use html and css, the above answer should serve. I hope this helps you and guide you to get your results.

  • Celsom, maybe it would be better if you took your doubts before elaborating your answer to avoid unnecessary content in response, for this and to inform something to the user use the comment fields. Another point I would also like to comment on is the following "For each case we use a different approach, with a different ideal programming language", only javascript can be considered programming language in this case, where HTML is markup language and CSS relates to "stylesheet" in some cases also called formatting language :)

  • Yeah, maybe the way you expressed yourself to me was wrong. But it was not the kind of question waiting for an answer, but rather to answer both in the body of the text. Because I sought to answer both questions, how to make only the change/function in css and what should you do if you look for the functionality in JS.

  • I understand, but honestly, "Do you need to just adjust the layout?" sounds like a question waiting for an answer. Understand Celsom, I’m not pointing out as a negative criticism, maybe you could use this text snippet without using questions as something like this "in case you need to just adjust the layout and need it to stay with the "burger menu"and that by clicking it expands the options, you can do...", so you can avoid there being "doubts" regarding the reason for the questions...

  • 1

    Yes yes, I understand your point, and I intend just that, improve the explanation. I’m just not on the pc right now to do it more easily. But I will reread and elaborate better. I took as constructive yes =D

  • 1

    @Dorivalzanetto really, reading calmly now, had gotten a little confused the explanation, I think now improved =D Thanks for the tip

0

Without Javascript it gets kind of complicated and ugly to do, because you will not be able to use the click, only the CSS3 Hover.. You will need to create two CSS3 styles for the menu, one for the esktop version and the other for the mobile version (If you determine from which width you want to change to the mobile menu..

For that use:

@media screen and (max-width: 1800px) {  }

change to the amount of pixel you want to change the menu.. Among the keys you will put the style of the menu (or the whole site, I prefer it this way) in your mobile version..

use this video (Spanish) to help : Menu Responsive

You will only need to change, when using javascript put in CSS. menu_bar (menu class) :Hover and between key the padding etc that are in javascript..

Any doubt speaks there

EDIT (I made an example for you)

@media screen and (max-width: 1800px) {  
    /* Aqui vai a classe do meu menu */
    .menu_bar {
        display:block;
        margin: 0;
        width:100%;
        height: 60px;
        position: fixed;
        top:0;
        background:#889aae;
        left: -100%;
    }
    /* aqui ele vai mover o meu menu (fazendo ele aparecer) quando eu tiver com o mouse na barra de menu */
    .menu_bar:hover{
        left: 0;
    }
    /* Aqui são as opçoes do meu menu */
    header nav {
        margin-top: -8px;
        width: 75%;
        height: 100%;
        position: fixed;
        right:100%;
        overflow: scroll;
    }

    header nav::-webkit-scrollbar{
            display: none;
    }

    header nav ul li {
            height: 50px;
            display: block;
            margin: 15px;
            text-align: left;
    }
}

Watch the video to understand better, but on phone the site was half bad, then try to use target instead of Hover...

The footer you leave so it should give:

footer{
    clear: both;
    margin-top: 10px;

}

0

Your layout is well done, having used tables to create the body of the page was an asset, having done this, you avoided a lot of problems with positioning. Still, the way you put the elements, it’s very likely that if you didn’t use a table to contain the body, the same would happen in that area.

In all there are 4 types of positioning, being them Static, relative, Absolute, Fixed, only the first 2 are part of the normal positioning.

Static

Elements with the positon property Static, are organized according to the normal document flow, and cannot be positioned using top, left, and other properties, i.e., they act according to the structure defined for them in the normal page flow. By default, elements with no defined position property, are Static.

.cont { background-color:gray; padding:15px; }
.primeiro { background-color:red; top:10px;}
.segundo{ background-color:blue; }
.terceiro{ background-color:orange; }
<section class="cont">
<div class="primeiro">Primeiro</div>
<div class="segundo">Segundo</div>
<div class="terceiro">Terceiro</div>
</section>

Relative

Assigning the positioning relative is an element, so that it is positioned relatively according to the normal position of this element, that is, if we have an element with relative positioning, among others with static positioning, the relative positioning element can assume new positions, and the static elements will not even notice, will act as if that element is still there.

.cont { background-color:gray; padding:15px; }
.primeiro { background-color:red; position:relative; top:100px;}
.segundo{ background-color:blue; }
.terceiro{ background-color:orange; }
<section class="cont">
<div class="primeiro">Primeiro</div>
<div class="segundo">Segundo</div>
<div class="terceiro">Terceiro</div>
</section>

#Solution:

The problem in your layout, occurs due to the measures specified for the size of the document, and you are working with an error margin that varies according to the value of the screen, can vary from 200~450px height (based on my screen size).

html, body {
    font-size: 100%; 
    -webkit-text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%; 
    height: 98%;
    background-color:#f9f9f9;
}

In this part, this is where the violation happens. Remove the property heigth, to solve the problem.

And for the footer, simply remove the property margin-top, or change the negative value to any positive, depending on the desired space.

footer {
    position: relative;
    z-index: 1;
    background: #e9e9e9;
    margin-top: 1em;
    padding: 48px 0 28px 0;
}

In this example above, I changed the value -28px for 1em.

Since you’re working with tables, the properties position of the components of the main part (header, table container, footeer), could function without relative positioning, these and many other properties that are in the style sheet, without performing any important function.

Browser other questions tagged css css3 responsive-layout

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