Imparare html

**Fabioxx78** · 17-09-2021, 07:44

salve ragazzi sono un appassionato di informatica vorrei imparare bene html e css ho seguito dei corsi su youtbe è un mese e mezzo che sto studiando, ho capito bene la struttura dell'html ho imparato abbastanza bene i css, però non riesco a capire come posizionare gli oggetti, ieri per mettere uno sfondo su tutta la pagina con altezza 150px mettere sempre su questo sfondo una lista e tre icone ci avrò impiegato 4 o 5 ore ma solo per spostarli per crearli non ci metto nulla,e poi ho anche le idee confuse riguardo classi e id se ho 2 div con una class"uno" l'altro con class="due" in css se scrivo .uno img dovrebbe prendere solo l'immagine della classe uno?perchè alcune volte le prende tutte?insomma un casino gli oggetti non riesco a sistemarli sto impazzendo

**ninja72** · 17-09-2021, 08:51

In realtà "class" viene utilizzata per stilizzare piu elementi, contrariamente "id" si utilizza per l'univocità di un elemento (sempre per lo stile).
Tutto questo in css rientra in quello che viene definito "specificità", inoltre se vuoi che gli altri possano contribuire meglio al tuo codice non devi fare altro che condividerlo con il tag code.

**Fabioxx78** · 17-09-2021, 09:15

Originariamente inviata da ninja72

In realtà "class" viene utilizzata per stilizzare piu elementi, contrariamente "id" si utilizza per l'univocità di un elemento (sempre per lo stile).
Tutto questo in css rientra in quello che viene definito "specificità", inoltre se vuoi che gli altri possano contribuire meglio al tuo codice non devi fare altro che condividerlo con il tag code.

ok grazie sono nuovo magari posso allegare anche tutto in un file zip tanto sono solo siti per imparare nulla di privato

**Fabioxx78** · 17-09-2021, 09:22

[CODE]<!DOCTYPEhtml>
<htmllang="it">

<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<linkrel="stylesheet"href="stile.css">
<linkhref="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"rel="stylesheet"
integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJ kqJByhZMI3AhiU"crossorigin="anonymous">
<scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
crossorigin="anonymous"></script>

<title>Bar Pasicceria Rossi</title>
</head>

<body>

<divid="link">
<divclass="sfondo">
<imgsrc="immagini/sfondo.jpg">
</div>

<divclass="logo">
<imgsrc="immagini/logo.png">
</div>

<divclass="link">
<ul>
<li><ahref="index.html">Home</a></li>
<li><ahref="Bar.html">Bar</a></li>
<li><ahref="Pasticceria.html">Pasticceria</a></li>
<li><ahref="DoveSiamo.html">Dove Siamo</a></li>
</ul>
</div>

<divid="treimmagini">
<imgclass="face"src="immagini/face.png">
<imgclass="whatsapp"src="immagini/whatsapp.png">
<imgclass="instagram"src="immagini/instagram.png">
</div>
</div>
<br>



</body>

</html>
[CODE]

**Fabioxx78** · 17-09-2021, 09:23

l' hover rimane sempre blu poi se aggiungo immagini centrali và a ricoprire tutto il resto per inserire sfondo link e tre icone c'ho messo ore

codice:

#link {
display: flex;
flex-direction: row;
}

.sfondoimg {
position: absolute;
width: 100%;
height: 120px;
}

.logoimg {
position: absolute;
width: 19%;
left: 35px;
top: 30px;
}

.linkul {
position: absolute;
list-style-type: none;
right: 470px;
margin-top: 35px;
}

.linkli {
display: inline;
}

.linka {
font-size: 1.7rem;
margin-right: 30px;
color: rgb(253, 253, 253);
text-decoration: none;
}

a:hover {
background-color: rgb(105, 99, 99);
border-radius: 4px;
padding: 3px;
}

#treimmagini.face {
width: 50px;
position: absolute;
margin-left: 1300px;
margin-top: 50px;
}

#treimmagini.whatsapp {
width: 50px;
position: absolute;
margin-left: 1200px;
margin-top: 50px;
}

#treimmagini.instagram {
width: 50px;
position: absolute;
margin-left: 1100px;
margin-top: 50px;
}

#immaginicentraliimg {
margin-top: 150px;
padding-top: 150px;
width: 100%;
height: 600px;
object-fit: unset;
}

**ninja72** · 17-09-2021, 09:35

Potresti fare una cosa migliore, farti un account su github dove poter condividere i tuoi repository (progettini,test o altro), oltre a questo potresti utilizzare piattaforme (sempre per la condivisione del codice) come https://codepen.io/ oppure https://pastebin.com/ .
Anche qui si può condividere il codice tramite i tag CODE presente sulla barra.

ps. il file .zip lo sconsiglio per ovvi motivi. (sicurezza e praticità)

**ninja72** · 17-09-2021, 09:49

Il codice che hai postato non è formattato bene mancano degli spazi.

**Fabioxx78** · 17-09-2021, 10:03

Originariamente inviata da ninja72

Il codice che hai postato non è formattato bene mancano degli spazi.

forse ho incollato male ho notato la mancanza di spazi nei css allora apro qualcosa come mi hai detto magari è più semplice condividere

**Fabioxx78** · 17-09-2021, 10:11

https://codepen.io/fabio78xx/pen/mdwXdXJ

**ninja72** · 17-09-2021, 10:39

Ho già risposto ad un'altro ragazzo nella sezione "css" ad un problema simile, è impossibile ragionare su un layout con blocchi su position: absolute, cerca di lavorare a blocchi impostati su flexbox quando possibile, non voglio scoraggiarti ma penso che tu abbia bisogno di skillarti maggiormente su questi argomenti, che oltretutto sono vastissimi e sempre in costante aggiornamento.

ps. le immagini sono con percorso relativo e non assoluto.

Discussione: Imparare html

Strumenti discussione

Ricerca discussione

Visualizza

Imparare html

Permessi di invio