Ciao,
non riesco a posizionare una form dentro l'header: vorrei che la form stesse tutta a destra nell'header e lasciare spostato verso sinistra (come già è) la nav. Qualcuno potrebbe aiutarmi?
Codice HTML:
<!DOCTYPE html>
<html lang="it">
<head>
<title>Mr.Shoes sito di e-commerce per la vendita di scarpe</title> <!--definisce che cosa contiene la pagina, potrebbe essere usato senza il contenuto, quindi non è un semplice h1-->
<base href="."/> <!--identifica il path di partenza x risolvere gli URL relativi nel nostro caso alla cartella dove mi trovo-->
<link rel="stylesheet" type="text/css" href="style1.css"/> <!--relazione con il CSS-->
<meta charset="UTF-8"/> <!--usati dai motori di ricerca-->
<meta name="keyword" content="e-commerce, shop online, shoes, calzature"/>
<meta name="author" content="Federica Pecci, Enrico Salvucci, Chiara Varini"/>
</head>
<body>
<header>
<section>
<figure id="logo">
<img src="images/logo1.png" alt="Mr.Shoes"/> <!--logo locale-->
</figure>
</section>
<nav id="menu">
<ul id="navEsearch">
<li><a href="index.html">Home</a></li>
<li><a href="catalog.html">Catalogo</a></li>
<li><a href="about.html">Contattaci</a></li>
<li><a href="carrello.html">Carrello</a></li>
<li><a href="login.html">Login</a></li>
<li>
<form method="post" action="/search" id="search" >
<input type="search" autocomplete="on" placeholder="Cosa stai cercando?" id="testo"/>
<input src="images/handlens.png" type="image" value="" id="handlens"/>
</form>
</li>
</ul>
</nav>
</header>
<main> <!--parte centrale più importante-->
</main>
<footer>
<figure>
<img src="images/Flag_of_Italy.svg.png" alt="Bandiera italiana"/>
<figcaption>Italia</figcaption>
</figure>
<figure>
<img src="images/Copyright-Symbol.png" alt="Copiright symbol"/>
</figure>
<small><time datetime="2016">2016</time> Mr. Shoes, Creative Commons <a href="cookie.html">Politiche sulla privacy e sui cookie</a></small>
</footer>
</body>
</html>
Codice CSS:
body {
font-family:Helvetica, Arial, sans-serif;
width: 85%;
margin: 0 auto;
background-color: blanchedalmond;
}
body header {
top:0 px;
right: 10%; /*spazio dalla parte dx*/
left: 10%;
position: fixed;
background-color: white;
/*display: block;*/
overflow: auto;
opacity: 0.9;
}
#logo img{
width: 20%;
display: block; /*display e margin per centrare titolo*/
margin:0 auto;
}
header ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
header li {
float: left;
}
header li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 120%;
}
header li a:hover:not(.active) {
background-color: darkcyan;
}
header.active {
background-color: #4CAF50;
}
#search{
float: right; /*aggiunto ora*/
padding-left:150px;
}
#bordo{
/*border: solid yellow;*/
height: 20px;
weight: 30px;
}
#testo{
height: 34px;
border: solid #666666;
float: left;
}
#handlens{
height: 34px;
width: 9%;
border: none;
float: left;
}
Rispondi quotando
