progetto html

owen78xx · 16 Settembre 2018

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:
<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">

<title>Fotocopisteria Fronte Retro Foggia</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>

ne 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;
}

grazie

Skills07 · 17 Settembre 2018

ciao per creare un website responsive devi usare le css mediaqueries
ti lascio link per capire:

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

owen78xx · 17 Settembre 2018

Skills07 ha detto:
ciao per creare un website responsive devi usare le css mediaqueries
ti lascio link per capire:

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

ciao grazie per vaermi risposto non puoi spiegarmelo tu?grazie

Skills07 · 17 Settembre 2018

nel css vanno inseriti dei mediaqueries che servono per rimodellare la pagina a seconda della risoluzione a cui viene eseguita esempio.

se in una pagina a dimensione normale dichiari che un div ha come proprietà css colore rosso e dimensione 500px usando il mediaqueries

CSS:

@media only screen and (max-width: 600px) {
    divpippo {
          background-color: lightblue;
          width:300px;
    }
}

in soldoni questo media queries ti dice che se la dimensione massima dello schermo è 600px quel div avrà colore lightblue e dimensione 300px.

owen78xx · 17 Settembre 2018

Skills07 ha detto:
nel css vanno inseriti dei mediaqueries che servono per rimodellare la pagina a seconda della risoluzione a cui viene eseguita esempio.

se in una pagina a dimensione normale dichiari che un div ha come proprietà css colore rosso e dimensione 500px usando il mediaqueries

CSS:

@media only screen and (max-width: 600px) { divpippo { background-color: lightblue; width:300px; } }

in soldoni questo media queries ti dice che se la dimensione massima dello schermo è 600px quel div avrà colore lightblue e dimensione 300px.

ciao ho messo come width 1300px è quasi tutto lo schermo ma secondo te andrà bene per qualsiasi monitor e anche cellulari?adesso se restringo non si accavallano più.

Sysken · 17 Settembre 2018

Ciao @owen78xx,
dal momento che sei agli inizi ti consiglio di utilizzare il CSS del w3, contiene già classi responsive ed è estremamente facile da utilizzare dal momento che dovrai solo trovare l'elemento adatto alle tue esigenze, di seguito la guida ufficiale: https://www.w3schools.com/w3css/default.asp
Ecco un assaggio degli elementi del w3: https://www.w3schools.com/w3css/tryw3css_templates_parallax.htm
Questo invece è il CSS: https://www.w3schools.com/w3css/4/w3.css

owen78xx · 17 Settembre 2018

Sysken ha detto:
Ciao @owen78xx,
dal momento che sei agli inizi ti consiglio di utilizzare il CSS del w3, contiene già classi responsive ed è estremamente facile da utilizzare dal momento che dovrai solo trovare l'elemento adatto alle tue esigenze, di seguito la guida ufficiale: https://www.w3schools.com/w3css/default.asp
Ecco un assaggio degli elementi del w3: https://www.w3schools.com/w3css/tryw3css_templates_parallax.htm
Questo invece è il CSS: https://www.w3schools.com/w3css/4/w3.css

ciao grazie per avermi risposto,con l'aiuto delle varie guide riesco a far parecchie cose,secondo te il mio progetto tralasciando se è bello o meno ma i comandi vanno bene?uso molto il -margin-top si può usare?anche perchè non riesco con altro

Post unito automaticamente: 17 Settembre 2018

ciao grazie a tutti per avermi risposto,con l'aiuto delle varie guide riesco a far parecchie cose,secondo voi il mio progetto tralasciando se è bello o meno , i comandi vanno bene?uso molto il -margin-top si può usare?anche perchè non riesco con altro. un altra cosa strana vi chiedo se potete aiutarmi,praticamente nella pagina promozioni non riesco a visualizzare la lista cioè home dove siamo ecc ecc,invece nella pagina dove mi trovo riesco a visualizzare la lista,però nella pagina dove siamo ho caricato la foto negozio invece nella pagina promozioni senza la foto negozio non compare nemmeno la lista anche se è caricata correttamente sul foglio html,grazie

Skills07 · 18 Settembre 2018

ciao senza codice è difficile capire cosa tu stia facendo... devi postare il codice se vuoi un aiuto

owen78xx · 18 Settembre 2018

ciao riporto tutto, oggi ho un altro problema,praticamente quand vado nella pagina promozioni non mi esce più la lista cioè home dove siamo promozioni contatti,ho notato che solo se aggiungo la foto "negozio"allora mi esce anche la lista se non metto la foto non esce la lista?come mai?non fanno nemmeno parte dello stesso div

Codice:

<!DOCTYPE html>

<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 Retro</h2>

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


<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" alt="copisteria fronte retro">

<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>
 
 
 
<div id="testogrande">
 
<p class="centrale" <span id="blink">Entra nella galleria<br> e<br> guarda i miei lavori</span></p>

 <script>
var velocita = 1000; // 1000 = 1 secondo
var blink = setInterval(function () {
  var ele = document.getElementById('blink');
  ele.style.visibility = (ele.style.visibility == 'hidden' ? '' : 'hidden');
}, velocita);
</script>





</div>

</header>




</body>


</html>

Codice:

html{
background-color:#E8EDFF;

}

body{
margin:0 auto;
width:1320px;

}

header{
width:100%;
}

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

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


.fronte{
width:90px;
margin-left:300px;
margin-top:-120px;

margin-bottom:10px;
}



.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:25px;
}

.faldoni{
width:400px;
}

#testogrande p{
 font-family: 'Poor Story', cursive;
color:red;
font-size:35px;
float:right;
margin-top:-280px;
margin-right:130px;

}

.centrale{
text-align:center;
}

Skills07 · 18 Settembre 2018

domani lo provo e ti dico

owen78xx · 20 Settembre 2018

ragazzi aiutatemi altrimenti non posso andare avanti

Skills07 · 20 Settembre 2018

allora io quello che vedo è questo

ll tuo click su promozioni vuole una pagina promozioni che non hai allegato...
quindi o ci mostri il tuo problema o è difficile aiutare

owen78xx · 20 Settembre 2018

ti chiedo scusa hai ragione

Codice:

<!DOCTYPE html>

<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 Retro</h2>

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


<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>





<p class="promozioni">Al momento non ci sono promozioni torna a trovarci!</p>


<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>

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


</div>




</header>

</body>


</html>

Skills07 · 20 Settembre 2018

e l'output è questo

puoi spiegare che problema hai??

Post unito automaticamente: 20 Settembre 2018

penso di aver capito non ti esce il menu come nella prima pagina..
ecco a te il codice aggiornato

HTML:

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">


<title>Promozioni </title>


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



</head>






<body>




<header>

<div id="inizio">

<h2>Copisteria Fronte Retro</h2>

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


<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" alt="copisteria fronte retro">

<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>
 
 
 


<p class="promozioni">Al momento non ci sono promozioni torna a trovarci!</p>


</div>

</header>

owen78xx · 20 Settembre 2018

ciao però io non voglio metterci le foto che ho nel foglio index ma un altra foto ed è proprio quando cambio la foto che non esce più la lista,poi un altra cosa perchè si accavallano foto e testi se restringo la finestra del browser?ho risolto mettendo width:1320 però non mi piace voglio che prenda tutta la pagina

Cerca

progetto html

owen78xx

Nuovo Utente

Skills07

Head of Development

owen78xx

Nuovo Utente

Skills07

Head of Development

owen78xx

Nuovo Utente

Sysken

Nuovo Utente

owen78xx

Nuovo Utente

Skills07

Head of Development

owen78xx

Nuovo Utente

Skills07

Head of Development

owen78xx

Nuovo Utente

Skills07

Head of Development

owen78xx

Nuovo Utente

Skills07

Head of Development

owen78xx

Nuovo Utente

Ci sono discussioni simili a riguardo, dai un'occhiata!

Entra

Discussioni Simili