×
Ir ao conteúdo
  • Cadastre-se

HTML Como tornar a página inicial responsiva


Posts recomendados

Bom Dia Galera

 

Eu agradecia muito se alguém me pudesse ajudar nessa:

Eu tenho um site em php porém ele fica bem no meu monitor, e em um mais pequeno fica desformatado, como eu não entendo nada de <div>, será que alguém me poderá colocar a página responsiva?

 

Obrigado pela atenção

 

imagem.thumb.png.f880746475058e85dc757b6bba0a9a75.png

<?php

session_start();

if(!$_SESSION['utilizador']) {

    header('Location: index.php');

    exit();

}

?>

<!DOCTYPE html>

<html>

<head>

<link rel="shortcut icon" href="favicon.ico">

<link rel="stylesheet" href="stylepaginicial.css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <title>Página Inicial</title>

</head>

<body>

<h1>Gestão Moviblock</h1>

<a href="paginainicialv2.php" class="img"> <img src="seta.png" width="17%""></a>

<a href="paginainicialv2.php" class="a"><font color=#F0F8FF>Tabelas REUSE e MFT5</a>

<table>

    <tbody>

       

<a href="logout.php" class="b" onclick="return confirm('De certeza que quer terminar sessão?');"> <img src="logoff.png" width="30%""></a>

<?php

echo "<p class=\"c\">", ($_SESSION['utilizador']);

?>

<table class="MFE21">

    <thead>

        <tr>

            <th><b>MFE21</th>

       

        </tr>

    </thead>    

    <tbody>        

    <p class="big">

<td style="text-align: center"><a href="AS11.php"><b> AS11</a></td>

</tr>

<td style="text-align: center"><a href="AS12.php"><b> AS12</a></td>

</tr>

<td style="text-align: center"><a href="AS13.php"><b> AS13</a></td>

</tr>

<td style="text-align: center"><a href="AS14.php"><b> AS14</a></td>

</tr></table><br><p class="big">

   

<table class="MFE21-2">

<td style="text-align: center"><a href="FormAS11.php"><b>Inserir Material - AS11</a></td>

</tr>

<td style="text-align: center"><a href="FormAS12.php"><b>Inserir Material - AS12</a></td>

</tr>

<td style="text-align: center"><a href="FormAS13.php"><b>Inserir Material - AS13</a></td>

</tr>

<td style="text-align: center"><a href="FormAS14.php"><b>Inserir Material - AS14</a></td>

</table>

</tr></td>

</table>



<table class="MFE22">

    <thead>

        <tr>

            <th><b>MFE22</th>

       

        </tr>

    </thead>    

    <tbody>        

    <p class="big">

<td style="text-align: center"><a href="AS21.php"><b>AS21</a></td>

</tr>

<td style="text-align: center"><a href="AS22.php"><b>AS22</a></td>

</tr>

<td style="text-align: center"><a href="AS23.php"><b>AS23</a></td>

</tr>

<td style="text-align: center"><a href="AS24.php"><b>AS24</a></td>

</tr></table><br><p class="big">



<table class="MFE22-2">

<td style="text-align: center"><a href="FormAS21.php"><b>Inserir Material - AS21</a></td>

</tr>

<td style="text-align: center"><a href="FormAS22.php"><b>Inserir Material - AS22</a></td>

</tr>

<td style="text-align: center"><a href="FormAS23.php"><b>Inserir Material - AS23</a></td>

</tr>

<td style="text-align: center"><a href="FormAS24.php"><b>Inserir Material - AS24</a></td>

</table>



<table class="MFE23">

    <thead>

        <tr>

            <th><b>MFE23</th>

       

        </tr>

    </thead>    

    <tbody>        

    <p class="big">

<td style="text-align: center"><a href="SE1.php"><b>SE1</a></td>

</tr>

<td style="text-align: center"><a href="SE2.php"><b>SE2</a></td>

</tr>

<td style="text-align: center"><a href="SE4.php"><b>SE4</a></td>

</tr>

<td style="text-align: center"><a href="SE5.php"><b>SE5</a></td>

</tr>

</table><br><p class="big">



<table class="MFE23-2">

<td style="text-align: center"><a href="FormSE1.php"><b>Inserir Material - SE1</a></td>

</tr>

<td style="text-align: center"><a href="FormSE2.php"><b>Inserir Material - SE2</a></td>

</tr>

<td style="text-align: center"><a href="FormSE4.php"><b>Inserir Material - SE4</a></td>

</tr>

<td style="text-align: center"><a href="FormSE5.php"><b>Inserir Material - SE5</a></td>

</tr>

</table>

</body>

</html>

 

 

Se alguém necessitar do CSS, segue abaixo:

 

 

body { font-family: American Typewriter, serif; font-size: large;

    background-image: url("bosch.jpg");  background-size: 100% 100%; position:stretch;

}

html {

    height: 100%

}

h1 {color:#000000; padding-left:1ex; font-size: 535%;}

h1 {font-family:Calibri; }

body { color:black; font-family:Calibri;}  

a:visited, a { color: black; font-weight: normal; text-decoration: none;}  

table, td, th { border: 3px solid; border-collapse: collapse; border-color: black;}

th { background: #4682B4; font-size:240%;}

td {font-size:215%; background-color:#FFFFE0;}

td { text-align:left;}  

p.big {

line-height: 0.7;

}

.img {

position:absolute;

top:4.5%;

left:59.088%;

}

.a {

position:absolute;

top:7.3%;

left:67.7%;

font-size:203.9%;

width:13.5%;

font-weight:bold;

}


.b {

position:absolute;

top:9.3%;

left:92.8%;

}


.c {


position:absolute;

top:-0.5%;

left:89.65%;

font-size:180%;

text-align:center;

font-family: Helvetica;

color:white;

background: linear-gradient(90deg, red, #260db1, #1fc8e6, RGB(2, 153, 2));

width:8%;

height:4.5%;

border-style: solid;

border-radius: 5px;

border-width: 3.9px;

border-color: #F0FFFF;



}


.MFE21 {

position:absolute;

top:26.10%;

left:4.20%;

width:22.80%;

height:33%;

}

.mov {

font-size: 215%;

}


.MFE21-2 {

position:absolute;

top:63.20%;

left:4.20%;

width:22.80%;

height:31%;

}


.MFE22 {

position:absolute;

top:26.10%;

left:38.70%;

width:22.80%;

height:33%;

}


.MFE22-2 {

position:absolute;

top:63.20%;

left:38.70%;

width:22.80%;

height:31%;

}

.MFE23 {

position:absolute;

top:26.10%;

left:73%;

width:22.80%;

height:33%;

}


.MFE23-2 {

position:absolute;

top:63.20%;

left:73%;

width:22.80%;

height:31%;

}

 

Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Curso de Hacker Ético

LANÇAMENTO!

CLIQUE AQUI E CONFIRA!

* Este curso não é ministrado pela equipe do Clube do Hardware.