Buongiorno,
avendo più <div class="item"> con dentro delle immagini, come si seleziona in CSS l'immagine presente in quel div??? Il problema è che i div sono chiamati con una classe uguale a tutte le pagine, ma selezionandolo si modificano tutte le pagine. Come si seleziona solo un div che riguarda una pagina e non le altre???
puoi assegnare un id a quel contenitore specifico e lavorare su quello.
codice:<div id="mioItem" class="item">
oppure assegnare una seconda classe dove riscrivi tutte le regole che ti interessa modificare
codice:<div class="item mioItem">
Grazie mille.... come posso affiancare due immagini in una pagina?? Intendo metterne una e di fianco un altra...
ma stiamo parlando dello stesso contesto?
Sisi stesso contesto, ho due immagini, solo che la seconda è sotto alla prima, volevo un attimo capire come si facesse a mettere a destra e sinistra le immagini, perchè è da gg che cerco una soluzione....
"affiancare" e "mettere a destra e a sinistra" non sono la stessa cosa.Originariamente inviata da paultowery39
dove stanno 'ste immagini, dentro al div di cui sopra?
ci saranno sempre e solo due immagini? o c'è altro contenuto?
le immagini stanno dentro un div class picture, che sta dentro item..... e tutti gli item sono contenuti in un section id gallery.... no al momento ho solo due immagini, di cui la prima sempre a sinistra ma sotto la barra di navigazione, e la seconda sotto la prima, in basso....
ecco che non si parla più dello "stesso contesto"
vuoi affiancare due immagini... ma dove stanno?
hai in contenitore specifico per le singole immagini: div class picture.
le vuoi mettere entrambe nello stesso contenitore, o voi affiancare i due contenitori?
trattandosi di una galleria immagino che tu voglia affiancare i contenitori.
posta l'html e css interessati e descrivi meglio il risultato che vuoi raggiungere.
<!DOCTYPE html>
<html>
<head>
<title> Agenzia di viaggi da Alessandro</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="stylesheets/normalize.css">
<link rel="stylesheet" type="text/css" href="stylesheets/main.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1>Agenzia di viaggi da Alessandro</h1>
<!----- Menu di navigazione ----->
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="città.html">Città da visitare</a></li>
<li><a href="prezzi.html">Prezzi</a></li>
</ul>
</nav>
</header>
<main id="main-content">
<div class="container">
<section id="gallery">
<div class="itemcity">
<div class="picture">
<img src="images/city.jpg" alt="city">
</div>
</div>
<div class="itemcity2">
<div class="picture">
<img src="images/city 2.jpg" alt="city">
</div>
</div>
<div class="caption">
<p>Autore del sito: Alessandro Degliangioli</p>
</div>
</section>
</div>
</main>
<!---- Il footer si scrive dopo il main -------->
</body>
</html>
/************* GENERAL *****************/
body{
font-family: 'Montserrat';
}
/******* TITOLO ***********/
h1{
text-align: center;
color: #ffffff;
}
/******** INTESTAZIONE *******/
header{
background: #1a1aff;
padding: 20px 0 0 0;
}
/******* IMMAGINE INTESTAZIONE **********/
header img{
width: 100%;
}
/********** MENU DI NAVIGAZIONE *******/
nav{
text-align: center;
background: #ffad33;
}
nav ul{
text-transform: uppercase;
padding: 5px;
margin:0;
}
nav li{
display: inline-block;
padding:10px;
}
nav li a{
text-decoration: none;
color: black;
font-weight: bold;
font-style: italic;
}
/****************************** GALLERY *************************/
#gallery{
margin:0;
}
/******** IMMAGINE DELLA HOME, CONTENUTA NELLA GALLERY DEL FILE index.html *********/
#gallery img{
width: 100%;
}
/******* PRIMO ITEM, DOV'E' CONTENUTA LA FOTO DELLA PRIMA CITTA' **********/
#gallery .itemcity{
width: 35%;
}
#gallery .itemcity2{
width: 35%;
float: right;
}
Ecco, questi sono i codici che sto testando.... le immagini sono nel codice html nel div picture, contenuto nel div item, che è contenuto nella section gallery, come si può vedere dal codice html..... il problema di questo codice è che mettendo float al secondo item, l'immagine va a destra, ma non si va ad affiancare alla prima.....
Permessi di invio
Rispondi quotando