progetto html e css [Archivio] - Hardware Upgrade Forum

fabio78xz

16-09-2018, 18:15

salve sto da poco imparando l'html e sto costruendo un sito di fantasia,mi sono accorto che restringendo la finestra del browser tutti gli element immagini e testi si accavallano tra di loro nella struttura html ho scritto questo:
<html>
<head>
<meta charset="utf-8">

<title>Fotocopisteria Fronte Retro </title>

<link rel="stylesheet" href="css/file.css">

</head>

<body>

<header>

<div id="inizio">

<h2>Copisteria Fronte </h2>

<img class="email"src="img/email.png">

<p class="email2">ffff@libero.it</p>

<img class="telefono"src="img/telefono.png">

<p class="telefono2">333/0800889</p>

</div>

<hr>

<img class="negozio" src="img/negozio.jpg">

<img class="fotoc" src="img/fotoc.jpg">

<div id="lista">

<ul>
<a href="index.html">Home</a>
<a href="dove mi trovo.html">Dove mi trovo</a>
<a href="promozioni.html">Promozioni</a>
<a href="contatti.html">Contatti</a>
</ul>

</div>

</header>

</body>

</html>
nei css questo html

{
background-color:#E8EDFF;

}

body{
margin:0 auto;

}

header{
width:100%;
}

#inizio{
background:#1AA613;
width:100%;
height:70px;
padding:6px;
}

h2{
font-family: 'Gamja Flower', cursive;
color:white;
margin-left:30px;
}

.email{
float:right;
margin-top:-50px;
margin-right:500px;
}

.email2{
color:white;
float:right;
margin-top:-45px;
margin-right:390px;
font-size:20px;
}

.telefono{
float:right;
margin-right:240px;
margin-top:-50px;
}

.telefono2{
float:right;
margin-right:110px;
margin-top:-45px;
color:white;
font-size:20px;
}

hr{
border:solid 1px #A33BF3;
margin-top:-2px;
}

.fotoc{
width:350px;
height:400px;
margin-left:30px;

}

.negozio{
margin-top:1px;
}

#lista ul{
font-size:22px;
float: right;
margin-top:-420px;
margin-right:60px;
}

#lista a{
margin-left:22px;
text-decoration: none;
}

a:hover{
color:green;
font-size:21px;
border-bottom:1px solid;
}

.promozioni{
color:red;
font-family: 'Kaushan Script', cursive;
font-size:30px;
}

.faldoni{
width:400px;
}

ianclo

26-09-2018, 17:28

Ho visto che hai utilizzato i margini e il float-right per ottenere quello che stai cercando di fare.
Quello che ti consiglio è di utilizzare il float-left e di impostare una larghezza per tutti gli elementi contenuti nell'header.
Ad esempio l'h2 dagli un width di 250px e float-left, e così per tutto quello che si trova a destra, float-left e width adatta al contenuto.