Ciao ragazzi, ho il seguente problema:
ho creato una pagina html e il relativo css ma pur avendo settato tutti i margini e i padding a 0 si aggiunge automaticamente una striscia bianca in fondo ma non capisco il perché...ho rimosso anche il link che fa riferimento a bootstrap e seppur minima c'è sempre.
Qualcuno sa aiutarmi?
Grazie
HTML
CSS
ho creato una pagina html e il relativo css ma pur avendo settato tutti i margini e i padding a 0 si aggiunge automaticamente una striscia bianca in fondo ma non capisco il perché...ho rimosso anche il link che fa riferimento a bootstrap e seppur minima c'è sempre.
Qualcuno sa aiutarmi?
Grazie
HTML
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="https//maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<link rel="stylesheet" href="css/save.css">
</head>
<body>
<!--Homepage -->
<div class="testo">
<div class="save">
<p>Save</p>
</div>
<div class="the">
<p>THE</p>
</div>
<div class="date">
<p>date</p>
</div>
<div class="normale">
<p id="nomi" style="word-spacing:20px;">...</p>
<p style="word-spacing:20px;">.....</p>
<p>Trapani, Sicilia</p>
<p style="margin-top:10px;border-top:2px solid;">....</p>
</div>
<button class="open-button" onclick="openForm()">Informazioni utili</button>
<div class="form-popup" id="myForm">
<div class="form-container">
<button type="button" class="close" onclick="closeForm()">×</button>
<h1>Informazioni utili
</h1>
<p>Tutte le informazioni che ti possono servire<br> <a href="infoutili.html" target="_blank">Leggi qui</a> o chiudi semplicemente.</p>
</div>
</div>
</div>
<script>
function openForm() {
document.getElementById("myForm").style.display = "block";
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
}
</script>
<!--Homepage-->
</body>
</html>CSS
CSS:
@charset "UTF-8";
/* ----------------------
0. Reset & Clearfix
1. Generali
2. Home Page
3. Info utili
4. Media query
*/
/* ---------------------- */
/* 0. Reset & Clearfix
/* ---------------------- */
html,body,header{
background:trasparent;
border:0;
outline:0;
padding:0;
margin:0;
}
.clearfix:after {
clear: both;
content: " ";
display: block;
font-size: 0;
height: 0;
line-height: 0;
visibility: hidden;
width: 0;
}
li {
list-style:none;
}
/* ---------------------- */
/* 1. General
/* ---------------------- */
@font-face {
font-family: 'Lihataja';
src: url('../font/Lihataja.eot');
src: url('../font/Lihataja.eot?#iefix') format('embedded-opentype'),
url('../font/Lihataja.woff') format('woff'),
url("../font/Lihataja.woff2") format("woff2"),
url('../font/Lihataja.ttf') format('truetype'),
url('../font/Lihataja.svg#Lihataja-Brush_1') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "BernardoModa";
src: url("../font/BernardoModa.eot"); /* IE9 Compat Modes */
src: url("../font/BernardoModa.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("../font/BernardoModa.otf") format("opentype"), /* Open Type Font */
url("../font/BernardoModa.svg") format("svg"), /* Legacy iOS */
url("../font/BernardoModa.ttf") format("truetype"), /* Safari, Android, iOS */
url("../font/BernardoModa.woff") format("woff"), /* Modern Browsers */
url("../font/BernardoModa.woff2") format("woff2"); /* Modern Browsers */
font-weight: normal;
font-style: normal;
}
body {
overflow-x:hidden;
}
h1 {
font-size: 40px;
font-weight:bold;
line-height:55px;
margin-top:30px;
font-family: 'Cormorant Garamond', serif;
}
p {
line-height:18px;
font-size:20px;
font-family: 'Cormorant Garamond', serif;
font-weight: lighter;
}
/* ---------------------- */
/* 2. Home Page
/* ---------------------- */
.testo{
width: 100%;
height:100%;
background-color: rgb(241,233,230);
margin: 0;
padding: 0;
color:#254117;
}
.save p{
margin: 0;
width: 400px;
margin-left: calc((100% / 2) - 200px);
font-family: 'Lihataja';
font-size:150px;
text-align: center;
padding-top:100px;
}
.the p{
width:380px;
text-align: center;
font-family:"BernardoModa" ;
font-size:30px;
margin-left: calc((100% / 2) - 150px);
margin-top:50px;
padding-top:50px;
font-size:50px;
}
.date p{
margin: 0;
font-family: "Lihataja";
font-size:150px;
text-align: center;
padding-top:80px;
}
.normale p{
width:450px;
text-align: center;
font-family:"BernardoModa" ;
font-size:30px;
margin:0;
margin-left: calc((100% / 2) - 225px);
line-height:1.8;
}
/* ---------------------- */
/* 3. Info utili */
/* ---------------------- */
.open-button{
background-color: #254117;
color: rgb(241,233,230);
padding: 16px 20px;
border: none;
border-style: outset;
border-radius: 12px;
cursor: pointer;
position: fixed;
bottom: 50px;
right: 35px;
width: 280px;
z-index: 1;
font-family:"BernardoModa" ;
font-size:20px;
}
.form-popup{
display: none;
position: fixed;
bottom: 50px;
right: 25px;
z-index:2;
}
.form-container{
max-width: 300px;
height: 150px;
padding: 10px;
background-color:rgb(241,233,230);
box-shadow: -10px -10px 5px;
}
.close{
color:#254117;
font-size: 16px;
background-color: transparent;
border: none;
float:right;
margin: 0;
padding: 0;
opacity:1;
}
.form-container h1{
max-width: 250px;
font-size:30px;
margin: 0;
margin-left: 25px
}
.form-container p{
max-width: 250px;
font-size:18px;
margin: 0;
margin-left: 25px
}
.form-container p a:link{
text-decoration: underline;
color:#254117;
}
.form-container p a:visited{
text-decoration: underline;
color:#254117;
}
