Issue
I can't seem to see my website elements in order.
I'm working on a school project, trying to be a little more ambitious than what was asked, which was actually pretty simple. Either way, I decided I was going to explore html 5 & css 3 further, and I'm trying to use stuff I didn't learn in class. With that being said, I made a website, where I have a main page and 4 more pages. I've finished the nav and the footer, so now I was working on one of the pages, the ZEN 4 page. When I added content to this page, everything looked just fine, but then I duplicated that content, just to see what would happen, and it appears with the footer on top, or it just hides the content behind the footer and leaves me with a scroll which is awful. I've tried to look into it on google, tried several "solutions", but nothing worked yet. Here's what I have so far:
HTML of the specific page I'm working on
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>AMD ZEN 4</title>
<meta name="author" content="José Júlio Ricardo Rodrigo" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-Avb2QiuDEEvB4bZJYdft2mNjVShBftLdPG8FJ0V7irTLQ8Uo0qcPxh4Plq7G5tGm0rU+1SPhVotteLpBERwTkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="icon" type="image/x-icon" href="./favIcon/amdLogo.ico"/>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="arquitetura.css"/>
</head>
<body>
<nav>
<ul class="menu">
<li onclick=esconderMenu()><a class="logo" href="#"><i class="fa-solid fa-xmark"></i></a></li>
<li><a href="#">José</a></li>
<li><a href="#">Júlio</a></li>
<li><a href="#">Ricardo</a></li>
<li><a href="#">Rodrigo</a></li>
</ul>
<ul>
<li><a class="logo" href="index.html">AMD</a></li>
<li class="esconderEmTlm"><a href="arquitetura.html">Zen 4</a></li>
<li class="esconderEmTlm"><a href="sobre.html">História</a></li>
<li class="esconderEmTlm"><a href="#">Ricardo</a></li>
<li class="esconderEmTlm"><a href="#">Novidades</a></li>
<li class="botaoMenu" onclick=mostrarMenu()><a href="#"><i class="fa-solid fa-bars"></i></a></li>
</ul>
</nav>
<main class="conteudoPrincipal_1">
<article class="caracteristicas">
<section>
<table class="comparacaoZen">
<tr>
<th>ZEN/ZEN+</th>
<th>ZEN 2</th>
<th>ZEN 3</th>
<th>ZEN 4</th>
</tr>
<tr>
<td>14nm/12nm</td>
<td>7nm</td>
<td>7nm</td>
<td>5nm</td>
</tr>
<tr>
<td>+52% IPC</td>
<td>+15% IPC</td>
<td>+19% IPC</td>
<td>+13% IPC</td>
</tr>
<tr>
<td>4-core</td>
<td>4-core</td>
<td>8-core</td>
<td>8-core</td>
</tr>
<tr>
<td>8MB L3</td>
<td>16MB L3</td>
<td>32MB L3</td>
<td>32MB L3</td>
</tr>
<tr>
<td>4.35GHz max</td>
<td>4.7GHz max</td>
<td>4.9GHz max</td>
<td>5.7GHz max</td>
</tr>
</table>
<section class="infoExtra">
<h3>Novas características</h3>
<p>ZEN/ZEN+ inovavam com a ativação de SMT, que permitia que um núcleo fosse capaz de executar 2 núcleos virtuais como uma só linha de execução. Além disso, trouxeram também um novo algoritmo de turbo. A ZEN 2, por sua vez apresenta um design novo "Chiplet Design". Por fim, o ZEN 4 acarreta uma nova topologia de memória cache L2 de 1MB e uma placa de vídeo integrada RDNA2 Graphics.</p>
</section>
</section>
<section class="imagemProcessador">
</section>
</article>
<article class="objetivo">
<section class="esports">
</section>
<section >
<table class="comparacaoZen">
<tr>
<th>ZEN/ZEN+</th>
<th>ZEN 2</th>
<th>ZEN 3</th>
<th>ZEN 4</th>
</tr>
<tr>
<td>14nm/12nm</td>
<td>7nm</td>
<td>7nm</td>
<td>5nm</td>
</tr>
<tr>
<td>+52% IPC</td>
<td>+15% IPC</td>
<td>+19% IPC</td>
<td>+13% IPC</td>
</tr>
<tr>
<td>4-core</td>
<td>4-core</td>
<td>8-core</td>
<td>8-core</td>
</tr>
<tr>
<td>8MB L3</td>
<td>16MB L3</td>
<td>32MB L3</td>
<td>32MB L3</td>
</tr>
<tr>
<td>4.35GHz max</td>
<td>4.7GHz max</td>
<td>4.9GHz max</td>
<td>5.7GHz max</td>
</tr>
</table>
</section>
</article>
</main>
<footer class="footer">
<div class="footerConteudo">
<div class="footerAMD">
<h3>AMD ZEN 4</h3>
<p>Para alcançar um verdadeiro progresso, é necessário que a inovação pioneira e o engenho humano trabalhem em conjunto para criar algo excecional.</p>
</div>
<ul class="footerLista">
<li><h3>Ligações</h3></li>
<li><a href="#" class="footerLink">AMD</a></li>
<li><a href="#" class="footerLink">Lorem Ipsum1</a></li>
<li><a href="#" class="footerLink">Lorem Ipsum2</a></li>
</ul>
<ul class="footerLista">
<li><h3>Autores</h3></li>
<li><p>José Silva</p></li>
<li><p>Júlio Sousa</p></li>
<li><p>Ricardo Matos</p></li>
<li><p>Rodrigo Rodrigues</p></li>
</ul>
<div class="footerRedes">
<h3>Redes sociais</h3>
<div class="footerRedesSociais">
<a href="#" class="footerLink" id="instagram">
<i class="fa-brands fa-instagram"></i>
</a>
<a href="#" class="footerLink" id="facebook">
<i class="fa-brands fa-facebook-f"></i>
</a>
<a href="#" class="footerLink" id="whatsapp">
<i class="fa-brands fa-whatsapp"></i>
</a>
</div>
<div class="footerRedesSociais">
<a href="#" class="footerLink" id="instagram">
<i class="fa-brands fa-instagram"></i>
</a>
<a href="#" class="footerLink" id="facebook">
<i class="fa-brands fa-facebook-f"></i>
</a>
<a href="#" class="footerLink" id="whatsapp">
<i class="fa-brands fa-whatsapp"></i>
</a>
</div>
<div class="footerRedesSociais">
<a href="#" class="footerLink" id="instagram">
<i class="fa-brands fa-instagram"></i>
</a>
<a href="#" class="footerLink" id="facebook">
<i class="fa-brands fa-facebook-f"></i>
</a>
<a href="#" class="footerLink" id="whatsapp">
<i class="fa-brands fa-whatsapp"></i>
</a>
</div>
<div class="footerRedesSociais">
<a href="#" class="footerLink" id="instagram">
<i class="fa-brands fa-instagram"></i>
</a>
<a href="#" class="footerLink" id="facebook">
<i class="fa-brands fa-facebook-f"></i>
</a>
<a href="#" class="footerLink" id="whatsapp">
<i class="fa-brands fa-whatsapp"></i>
</a>
</div>
</div>
</div>
<div class="footerCopyright">
©
Projeto realizado para a Unidade Curricular de LP1 - ISEP - Ctesp DAS, Ermesinde
</div>
</footer>
<!--EXPLICAR SCRIPT -> A função mostrarMenu é aplicada no último li da 2ª ul da nav que é um icon do menu burger,
e serve para mudar o estilo do menu para flex, abrindo-o pela lateral. A função esconderMenu, é aplicada no 1º li da 1ª ul
e a sua função é de fechar este menu mostrado quando o icon burger é pressionado, sendo que neste caso, o esconderMenu
tem o formato de um X -->
<script>
function mostrarMenu(){
const menu = document.querySelector('.menu')
menu.style.display = 'flex'
}
function esconderMenu(){
const menu = document.querySelector('.menu')
menu.style.display = 'none'
}
</script>
</body>
</html>
css stylesheet that comes with navbar and footer styling and some other things from main page that will be separated from this css later.
/*1 rem = 16px*/
/*margens e preenchimentos (margin & padding) têm 4 dimensões, na seguinte ordem top, right, bottom, left*/
/*se decidirem usar a short version ex: margin: 1rem 3rem, isto quer dizer 1rem em top & bot e 3rem em right e left*/
*{
margin: 0; /*Os browsers vêm com diferentes margins e paddings predefinidos, dar reset a estes valores pode ser vantajoso*/
padding: 0;
box-sizing: border-box; /*O default box-sizing é sempre content-box, o que faz com que quando definimos, por exemplo
width: 300px;, e adicionarmos 20px padding, a width passará a ser 340px. Com border-box, ao definirmos
with: 300px; a largura manter-se-á a 300px independentemente de paddings ou margins */
letter-spacing: 0.06rem; /*espaçamento entre letras*/
text-decoration: none; /*Retirar qualquer decoração de texto, p.ex: sublinhados de links*/
list-style-type: none; /*Retirar os pontos atrás dos elementos das listas*/
font-family: 'Poppins', sans-serif; /*Importei o estilo de letra Poppins, porque curti, se quiserem alterar força!*/
overflow-x: hidden;
}
body{
min-width: 100vw; /* 1vw é relativo a 1% da largura da janela de exibição, ou seja, 100vw = 100% || resize na janela, ela adapta*/
min-height: 100vh; /* 1vh é relativo a 1% da altura da janela de exibição, ou seja, 100vh = 100% || resize na janela, ele adapta*/
/*background-image: url(backgroundImage/background2.jpg); Adicionar uma imagem ao bg do body*/
background-color: black;
background-size: cover; /*Cobre todo o bg*/
background-position: center; /*Centra a imagem do bg*/
background-repeat: no-repeat; /*Sem repetição de imagem*/
position: relative;
}
h1{
font-size: 2.3rem;
font-weight: 500;
}
h3{
font-size: 1.7rem;
font-weight: 400;
}
p{
font-size: 1.3rem;
font-weight: 300;
}
a{
font-size: 1.3rem;
font-weight: 400;
color: #f5f5f5;
}
/*ESTILIZAÇÃO DOS MENUS*/
nav{
background-color:#f5f5f5;
position: relative;
padding-right: 1.625rem;
}
nav ul{
width: 100%;
display: flex; /*Apresenta todos os li's numa disposição horizontal dentro da nav*/
justify-content: flex-end; /*Posiciona todos os items no final da nav*/
align-items: center; /*Centra todos os items da nav em altura*/
}
nav li{
height: 3.125rem; /*Define a altura dos li, e como não foi definida nenhuma altura na nav, dita a altura da mesma também*/
}
nav a{
height: 100%; /*Define a altura dos links da nav como 100%, mantendo-as na posição central da mesma*/
padding: 0 2rem; /*preenchimento para a direita e para a esquerda em todos os items da nav*/
display: flex;
align-items: center;
color: #000001;
}
nav a:hover{
background-color: #000001;
color: #f5f5f5;
}
.logo{
font-size: 1.8rem;
font-weight: 500;
text-shadow: 0.12rem 0.12rem rgba(3, 62, 4, 0.542);
}
.logo:hover{
background-color: inherit;
color: inherit;
}
nav li:first-child{
margin-right: auto; /*encosta o logótipo totalmente à esquerda, excluindo o preenchimento*/
}
/*Menu Mobile/Tablet*/
.menu{
position: fixed; /*fixa a posição do menu num ponto*/
top: 0; /*define o começo do menu totalmente no topo*/
right: 0; /*e totalmente à direita*/
height: 100vh; /*faz com que seja visível em toda a altura da página web*/
width: 15.6rem; /*mas em apenas 15.6rem de largura*/
z-index: 999; /*Z-Index = 999 faz com que o elemento fique sempre acima dos outros elementos (z seria dimensão profundidade)*/
background-color: #f5f5f575; /*cor neutra com alguma transparência para combinar com o desfocado*/
backdrop-filter: blur(10px); /*adiciona um efeito desfocado ao menu */
box-shadow: -10px 0 10px #f5f5f5; /*adiciona um pequeno efeito de sombra branco*/
display: none; /*faz com que, por definição, em ecrãs grandes este menu não esteja disponível*/
flex-direction: column; /*coloca os elementos abaixo uns dos outros, ao invés de lado a lado*/
justify-content: flex-start; /*fixa os links do menu, no top do menu, caso contrário ficariam colados à parte de baixo do mesmo*/
}
.menu li{
width: 100%; /*elementos do menu com width a 100%, utilizam toda a largura do mesmo, enconstando-se assim à esquerda (exceto preenchimento)*/
}
.botaoMenu{
display: none;
}
/*RESPONSIVIDADE DOS MENUS*/
@media screen and (max-width: 800px){
.esconderEmTlm{
display: none; /*Aqui estamos a dizer que todos os elementos do nosso html que receberem esta classe, não estarão visíveis em
dispositivos com até 800px de largura*/
}
.botaoMenu{
display: block; /*fazer com o que nosso menu hamburguer apareça no canto superior direito*/
}
}
@media screen and (max-width: 400px){
.menu{
width: 100%;
}
}
/*Estilização BASE da main, conteúdos exclusivos da 1ª página serão estilizados abaixo do footer*/
.main{
width: 100vw; /*nosso conteúdo principal ocupará 100% da largura*/
height: 88vh; /*porém apenas 88% da altura, visto que reservamos 12% para o header, e o footer aparecerá quando dermos scroll na
página.*/
}
/*ESTILIZAÇÃO DO FOOTER*/
.footer{
width: 100%;
color: #f5f5f5;
position: relative;
}
.footerConteudo{
background-color: rgb(59, 39, 39);
display: grid; /*define o footer num contentor com formato tabela*/
grid-template-columns: repeat(4, 1fr); /*define que as tabelas terão formato coluna, e que se vão formar 4 colunas, com o mesmo tamanho*/
padding: 2rem 10rem; /*preenchimento entre colunas*/
}
.footerAMD h3{
margin-bottom: 1.5rem;
font-size: 1.25rem;
}
.footerAMD p{
width: 80%;
font-size: 0.75rem;
}
.footerAMD{
gap: 1rem; /*gap é espaço que separa elementos de uma tabela, funciona quase como line-spacing só que específico para linhas/colunas de tabela, embora também possa ser utilizado para line spacing*/
}
.footerRedesSociais{
display: flex; /*alinha os elementos frente a frente*/
gap: 2.5rem; /*espaço entre os elementos*/
margin-top: 1rem; /*afastar do conteúdo acima*/
}
.footerRedesSociais .footerLink{
display: flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
color: azure;
border-radius: 50%;
transition: all 0.5s;
/*este bloco de estilização serve para colocar os icons das redes sociais dentro de um pequeno círculo e centralizá-los dentro do mesmo, bem como definir o tempo de transição da opacidade*/
}
.footerRedesSociais .footerLink i{
font-size: 0.75rem;
}
.footerRedesSociais .footerLink:hover{
opacity: 0.8; /*quando se passa o rato em cima de links no footer, a sua opacidade diminui ligeiramente*/
}
#instagram{
background: linear-gradient(#7f37c9, #ff2992, #ff9807);
}
#facebook{
background-color: #4267b3;
}
#whatsapp{
background-color: #25d366;
}
/*nos blocos acima, atribuir as cores das respetivas redes aos círculos*/
.footerLista{
display: flex;
flex-direction: column; /*deixa os elementos da lista em formato coluna (uns embaixo dos outros)*/
gap: 1.5rem;
}
.footerLista h3{
font-size: 1.25rem;
}
.footerLista p{
font-size: 0.75rem;
}
.footerLista a{
font-size: 0.75rem;
}
.footerRedes h3{
margin-bottom: 0.75rem;
font-size: 1.25rem;
}
.footerCopyright{
background-color:rgb(59, 39, 39);
text-align: center;
padding: 1.5rem;
font-size: 0.75rem;
}
/*RESPONSIVIDADE FOOTER*/
@media screen and (max-width: 2560px) {
.footerConteudo{
gap: 15rem;
}
}
@media screen and (max-width: 1536px) {
.footerConteudo{
gap: 6rem;
}
}
@media screen and (max-width: 1440px) {
.footerConteudo{
gap: 6rem;
}
}
@media screen and (max-width: 1024px) {
.footerConteudo{
gap: 3rem;
}
}
@media screen and (max-width: 768px) {
.footerConteudo{
grid-template-columns: repeat(2, 1fr); /*aqui deixam de ser 4 colunas no footer e passam a ser duas, visto que o ecrã já é demasiado pequeno para as 4*/
gap: 2rem;
}
}
@media screen and (max-width: 426px) {
.footerConteudo{
grid-template-columns: repeat(1, 1fr); /*aqui trata-se de um telemóvel ou algo do género, pelo que terá que haver apenas 1 coluna*/
padding: 3rem 2rem;
}
}
@media screen and (max-width: 320px){
*{
overflow-x: hidden;
}
}
/*Aqui começa o conteúdo exclusivo da 1ª página*/
.arquiteturaZen{
color: white;
margin-top: 40px;
text-align: center;
}
.arquiteturaZen h2{
font-size: 6rem;
}
.arquiteturaZen p{
font-size: 1.5rem;
}
.zen4Introducao p{
font-size: 1rem;
}
.botaoDescobreMais{
margin-top: 2rem;
padding: 0.6rem;
}
.arquiteturaZen{
margin-top: 0;
background-image: url(imagens/mundo.jpg);
background-size: cover; /*Cobre todo o bg*/
background-position: center; /*Centra a imagem do bg*/
background-repeat: no-repeat;
}
figure{
width: 200px;
height: 180px;
float: left;
}
img{
width: 300px;
height: 250px;
}
.contentorGrelha p{
color: #FFFFFF;
}
and this is the specific css stylesheet for the page I'm working on rn
.conteudoPrincipal_1{
width: 100vw;
height: 88vh;
}
.caracteristicas{ /*1º Bloco de Conteúdo*/
width: 95vw;
height: 55vh;
display: grid;
grid-template-columns: repeat(2, 1fr);
margin: auto;
padding-top: 3rem;
color: #f5f5f5;
position:static;
}
.comparacaoZen{
width:100%;
background-color: rgba(133, 121, 147, 0.455);
line-height: 2.6rem;
border-collapse: collapse;
margin-right: 1.5rem;
}
.comparacaoZen th, td{
border: 0.2rem solid #381e1e;
text-align: center;
}
.infoExtra{
background-color:#381e1e;
line-height: 1rem;
}
.infoExtra h3{
font-size: 0.75rem;
text-align: center;
margin-bottom: 0.5rem;
}
.infoExtra p{
font-size: 0.5rem;
}
.imagemProcessador{
border-radius: 1rem;
margin-left: 1.5rem;
background-image: url(imagens/processador.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
} /*Fim do 1º Bloco de Conteúdo*/
.objetivo{
width: 95vw;
height: 50vh;
display: grid;
grid-template-columns: repeat(2, 1fr);
margin: auto;
padding: 6rem 0 6rem 0;
color: #f5f5f5;
position:static;
}
.esports{
width: 100%;
border-radius: 1rem;
margin-right: 1.5rem;
background-image: url(imagens/esports.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
@media screen and (max-width: 320px){
.caracteristicas{
grid-template-columns: repeat(1, 1fr);
}
.objetivo{
grid-template-columns: repeat(1, 1fr);
}
}
and also, this is what I see...
Solution
It's not immediately obvious from your question what the exact issue is with your page. I appreciate you're not a native English speaker though, so have made a best guess.
Judging by the page you linked in the comment, you want your page as one single scrolling unit, rather than what you have now which is where the section scroll separately to the whole page.
This is caused by the height being set to a viewport value in:
.conteudoPrincipal_1 {
width: 100vw;
height: 88vh;
}
This is causing your element to be restricted in height and scroll to fit the content. You then have your main page scroll around that to include the footer.
If you remove the height:88vh then it should scroll as the AMD page does.
Answered By - MasNotsram
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.