U
Utente cancellato 263979
Per ottenere la pagina responsive, devi come dice @fisica-all utilizzare le percentuali ovvero <div class="main_cont" style="width: 100%;></div>Premetto che ho studiato tutto in vari siti online, non in italiano, non avendo la disponibilità di acquistare/frequentare corsi riguardanti il tema.
Ho provato a creare una mia pagina web per gioco ma tuttavia c'è una "lacuna" che non riesco a recuperare.
Mi spiego meglio e vi mostro.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Style.css">
<title>Title</title>
</head>
<body>
<div class="topbar">
<ul>
<div class="logo">
<a title="Home" href="Index.html"><img src="Images/Logo.png" alt="Logo"></a>
</div>
<li title="Page1"><a href="Page1/Index.html">Page 1</a></li>
<li title="Page2"><a href="Page2/Index.html">Page 2</a></li>
<li title="Page3"><a href="Page3/Index.html">Page 3</a></li>
<li title="Page4"><a href="Page4/Index.html">Page 4</a></li>
<li title="Page5"><a href="Page5/Index.html">Page 5</a></li>
<li title="Page6"><a href="Page6/Index.html">Page 6</a></li>
</ul>
<div class="search">
<form>
<input type="text" placeholder="Search...">
</form>
</div>
</div>
<div class="main">
<div class="classRight">
<div class="subclassRight">
<h1>What is Lorem Ipsum?</h1>
<h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h2>
<div class="buttonRight">
<a class="button" href="../Page1/SubPage1/Index.html"><span>Click me</span></a>
</div>
</div>
<div class="codeRight">
<h3>HTML example:</h3>
<div class="codeRightIn">
<span> <!DOCTYPE html></span>
<br>
<span> <html></span>
<br>
<span> <title><span style="color: #999999;">HTML tutorial</span></title></span>
<br>
<span> <body></span>
<br>
<br>
<span> <h1><span style="color: #999999;">This is a heading.</span></h1></span>
<br>
<span> <p><span style="color: #999999;">This is a paragraph.</span></p></span>
<br>
<br>
<span> </body></span>
<br>
<span> </html></span>
</div>
</div>
</div>
<div class="divLeft">
<div class="divLeftIn">
<h3>CSS example:</h3>
<div class="codeLeftIn">
<font> body  {</font>
<br>
<span>     background-color</span><font id="boldFont">:</font> <i> red</i><font id="boldFont">;</font>
<br>
<font> }</font>
<br>
<br>
<font> h1  {</font>
<br>
<span>     color</span><font id="boldFont">:</font> <i> red</i><font id="boldFont">;</font>
<br>
<span>     text-align</span><font id="boldFont">:</font> <i> center</i><font id="boldFont">;</font>
<br>
<font> }</font>
<br>
<br>
<font> p  {</font>
<br>
<span>     font-family</span><font id="boldFont">:</font> <i> Ubuntu</i><font id="boldFont">;</font>
<br>
<span>     font-size</span><font id="boldFont">:</font> <i> 20px</i><font id="boldFont">;</font>
<br>
<font> }</font>
</div>
</div>
<div class="classLeft">
<h1>What is Lorem Ipsum?</h1>
<h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h2>
<div class="buttonLeft">
<a class="button" href="../Page2/SubPage2/Index.html"><span>Click me</span></a>
</div>
</div>
</div>
</div>
</body>
</html>
*, *::after {
box-sizing: inherit;
outline: none;
}
html {
font-size: 100%;
box-sizing: border-box;
}
body {
background-color: #000000;
color: #bbbbbb;
margin: 0;
padding: 0;
}
topbar {
display: flex;
background-color: #0e0e0e;
box-shadow: 0px 5px 15px #000000;
top: 0;
}
.logo {
margin-left: 60px;
background-color: #1b1b1b;
box-shadow: 0px 0px 1px grey;
box-shadow: 0px 5px 15px #000000 ;
margin-right: 40px;
}
.logo a {
float: left;
}
.logo a img {
display: block;
margin-top: 15px;
padding-left: 10px;
padding-right: 10px;
}
.topbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #0f0f0f;
width: 100%;
display: flex;
justify-content: center;
}
.topbar li {
float: left;
}
.topbar li a {
display: block;
text-decoration: none;
text-align: center;
color: #bbbbbb;
padding: 25px;
font-weight: bold;
}
.topbar a:hover {
color: #da0e1e;
}
.topbar .search {
margin-right: 100px;
float: right;
}
.topbar input[type=text] {
float: right;
padding: 25px;
margin-top: 2px;
width: 100px;
color: #646464;
background-color: #272727;
border-radius: 15px;
border-style: none;
transition: width 0.2s ease-out;
}
.topbar input[type=text]:focus {
width: 160px;
color: #ffffff;
}
.main {
font-family: 'Ubuntu', sans-serif;
background-color: #1b1b1b;
color: #bbbbbb;
margin-top: 75px;
}
.classRight {
display: flex;
justify-content: center;
padding-bottom: 50px;
}
.subclassRight {
margin-top: 60px;
float: left;
margin-left: 50px;
text-align: center;
line-height: 0.5;
}
.subclassRight h1 {
color: #da0e1e;
font-size: 80px;
}
.subclassRight h2 {
font-size: 25px;
text-align: center;
}
.codeRight {
float: right;
margin-left: 300px;
margin-top: 50px;
background-color: #101010;
padding: 20px;
padding-bottom: 60px;
border-radius: 20px;
}
.codeRight h3 {
font-size: 25px;
}
.codeRightIn {
background-color: #151515;
padding: 10px;
padding-right: 180px;
border-left: 3px solid grey;
border-radius: 30px;
}
.codeRightIn span {
color: #da0e1e;
line-height: 1.5;
}
.divLeft {
display: flex;
justify-content: center;
background-color: #101010;
padding-bottom: 30px;
}
.divLeft:hover {
background-color: #050505;
}
.classLeft {
margin-top: 80px;
float: right;
margin-left: 30px;
text-align: center;
line-height: 0.5;
}
.classLeft h1 {
color: #da0e1e;
font-size: 80px;
}
.codeLeft {
float: left;
margin-right: 200px;
margin-top: 50px;
background-color: #202020;
padding: 20px;
padding-bottom: 40px;
border-radius: 20px;
}
.codeLeft h3 {
font-size: 25px;
}
.codeLeftIn {
background-color: #101010;
padding: 10px;
padding-right: 210px;
border-left: 3px solid grey;
border-radius: 30px;
}
.codeLeftIn span {
color: #da0e1e;
line-height: 1.5;
}
.codeLeftIn font {
color: #bbbbbb;
line-height: 1.5;
}
.codeLeftIn i {
font-style: normal;
color: orange;
line-height: 1.5;
}
#boldFont {
font-weight: bold;
}
.buttonRight {
border-radius: 100px;
background-color: #101010;
border: 1px solid gray;
text-align: center;
padding: 20px;
width: 190px;
margin-left: 110px;
}
.buttonRight a {
color: #da0e1e;
}
.buttonRight span {
display: inline-block;
position: relative;
transition: 0.5s;
}
.buttonRight span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
color: #da0e1e;
}
.buttonRight:hover span {
padding-right: 25px;
color: orange;
}
.buttonRight:hover span:after {
opacity: 1;
right: 0;
}
.buttonLeft {
border-radius: 100px;
background-color: #101010;
border: 1px solid gray;
text-align: center;
padding: 20px;
width: 190px;
margin-left: 110px;
}
.buttonLeft a {
color: #da0e1e;
}
.buttonLeft span {
display: inline-block;
position: relative;
transition: 0.5s;
}
.buttonLeft span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
color: #da0e1e;
}
.buttonLeft :hover span {
padding-right: 25px;
color: orange;
}
.buttonLeft :hover span:after {
opacity: 1;
right: 0;
}
Quando in pratica provo a ridimensionare il browser (non a schermo intero) i contenuti della pagina vengono "nascosti", oppure quando provo ad ingrandire/diminuire lo zoom della pagina (CTRL + rotella del mouse) questi tendono a compenetrarsi.
Da totale ignorante in materia, c'è qualcosa che manca/dovrei aggiustare/dovrei ancora inserire?
Sicuramente non mi sarò espresso bene ma spero abbiate capito, grazie in anticipo.
Per eliminare certi div che su uno schermo più piccolo non riescono ad adattarsi puoi utilizzare la proprietà media di css ovvero:
CSS:
@media only screen and (max-width: 800px) {
div .il_tuo_div_da_nascondere{
display: none;
}
}