Ciao a tutti, ho un problema con CSS, praticamente vorrei creare un header stile applicazione, ossia senza bordi e "appiccicato" all'alto della pagina. Ho provato con tutto ma stranamente non funziona, ecco il mio CSS
codice:
* {
outline:none;
;
}
body {
background-image: url(../images/ktm.jpg);
width:100%;
margin:0;
background-attachment:fixed;
background-position:center;
}
button {
background-color:orange;
border: none;
padding: 25px 40px;
color: Black;
font-family: Arial Black;
cursor: pointer;
border-radius: 2px;
transition-duration: 0.4s;
box-shadow: -2px 2px 7px black;
font-size:150%;
}button:hover{
background-color: darkorange;
color: white;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
button:active{
transition-duration: 0.05s;
background-color: orange;
border-radius: 10%;
outline:none !important;
}
.logo {font-size: 150% ;
font-family: Lato, sans-serif;
background-color: orange;
color:red;
font-weight:900;
position:relative;
margin: 0;
text-align: center;
height: 60px;
}
p {font-family: Arial; font-size: 200%}
.finale2{font-family: "Arial Black"; font-size: 200%}
h3 {font-family: Arial Black}
input {
font-size: 200%;
background: orange;
border: none ;
width: 10%;
padding: 9px;
border-radius: 5px;
font-family: Arial Black;
color: white;
transition-duration: 0.1s;
box-shadow: -2px 2px 7px black;
}
input:hover{
box-shadow: -4px 4px 15px black;
}
input:focus{
box-shadow: -5px 5px 7px black;
border-radius: 10px;
}
.simbolo {
font-family: Arial Black;
font-size: 200%;
color:black;
}
#container {
margin: 10px;
}
e HTML:
codice:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MiscelaCalc</title>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link type="text/css" href="css/style.css" rel="stylesheet" />
</head>
<body>
<div id="container">
<div class="logo">
<header>
<p>MISCELA<span style="font-weight:100; color:white">CALC</span></p>
</header>
</div>
<h3>Inserisci qui la quantità di litri:</h3>
<input id="litri" type=number style="width:20%"> <span class="simbolo" style=font-size:300%;>L</span>
<h3>Inserisci ora la percentuale:</h3>
<input id="percentuale" type=number value=2 maxlength=2> <span class="simbolo" style=font-size:300%;>%</span><br>
<br>
<button onclick="myFunction()"><b>Clicca Qui</b></button>
<p id="finale"></p>
<p id="finale2" class="finale2"></p>
</div>
<script src="scripts/script.js"></script>
</body>
</html>
Il risultato infine è questo:
https://snag.gy/30H51Z.jpg
E vorrei appunto che l'header fosse senza margini .-.
Grazie a tutti in anticipo ma anche per il vostro tempo
Rispondi quotando