Problema con immagini

[gulliver.pro]

Salve, premetto di essere un neofita della programmazione, da più di un mese che studio e pratico il linguaggio html e css attraverso le guide di html.it e un video corso su udemy così da poter applicare quello che apprendo. come esercizio finale di CSS dovevo clonare il sito web della BBC (http://www.completewebdevelopercourse.com/clone/) andava tutto bene addirittura sono riuscito a fare gran parte del lavoro da solo ma nella sezione in basso dove c'è l'immagine dell'orologio e accanto l'immagine del play di colore nero mi blocco.
mi blocco perchè l'immagine che inserisco si adatta al box di larghezza di 220 px e se provo a cambiare l'altezza mi schiaccia l'immagine. ho provato in tutti i modi ma non sono venuto a capo di ciò.
La sintassi è questa:

<div id="bot-article-3">
                            
                                <img src="1-html/foto/bot-article-3.jpg">
                                
                                <h3 id="article-3-header"><a href="">Drone lands on moving car in Germany</a></h3>
                            
                                <p id="article-3-body">Roboticists in Germany have taught a drone how to land itself on a car travelling at 75 km/h (47mph).</p>
                                
                               
                                <p id="margin-customize"><span class="date-2">19 January 2016</span>  <a class="tech-link-2" href="">Technology</a></p>
                                <hr id="hr-article-2">
                                
                             <img class="black-play" src="1-html/foto/play.png">


CSS:

<div id="bot-article-3">
                            
                                <img src="1-html/foto/bot-article-3.jpg">
                                
                                <h3 id="article-3-header"><a href="">Drone lands on moving car in Germany</a></h3>
                            
                                <p id="article-3-body">Roboticists in Germany have taught a drone how to land itself on a car travelling at 75 km/h (47mph).</p>
                                
                               
                                <p id="margin-customize"><span class="date-2">19 January 2016</span>  <a class="tech-link-2" href="">Technology</a></p>
                                <hr id="hr-article-2">
                                
                             <img class="black-play" src="1-html/foto/play.png">


.black-play{
                
                height:15px;
                
                
            }

spero mi possiate dare un amano

[Vincent.Zeno]

ciao e benvenuto.
ricorda che:
-per postare codice, sul forum, questo va sempre racchiuso nel tag CODE
-l'iper marcatura nei thread tecnici non è gradita
(ho corretto il tuo post)
buon lavoro

[gulliver.pro]

grazie e scusami tanto

[KillerWorm]

Ciao, non riesco a riprodurre il problema in base al codice che hai postato.

Normalmente gli elementi <img> hanno dimensioni con valore auto di default. Ciò significa che, se non diversamente specificate, le dimensioni sono quelle originali dell'immagine. Se si specifica una sola delle due dimensioni (come ciò che hai indicato), in automatico l'immagine sarà ridimensionata mantenendo la sua proporzione tra altezza e larghezza.

Quindi, se tu hai specificato solo height, la sua width (se l'hai lasciata auto, di default) dovrebbe ridimensionarsi in proporzione.

Se ottieni un risultato diverso e inaspettato, evidentemente c'è qualche altra regola che influisce, ma che non hai riportato qui; per cui, senza vedere il resto del codice, è praticamente impossibile determinare quali siano le cause del problema.

Se il tuo elaborato è accessibile online, posta magari il link.
In alternativa, fornisci un esempio esatto e completo del problema.
Può essere utile usare uno dei vari servizi playground (uno tra tanti, CodePen), con cui poter riprodurre e rendere fruibile l'esempio.

[gulliver.pro]

Ciao scusami questo è il link di CodePen:
https://codepen.io/gulliverpro/project/editor/ZvmokP

si è creato un nuovo problema oltre a quello .
quando vado ad inserire un nuovo div in basso accanto all'articolo "urged to use...." la colonna di destra mi va a finire sotto ....

e giacchè se non chiedo troppo se potresti dirmi come sto andando se il mio linguaggio è pulito o se sto sbagliando qualcosa... Ti ringrazio tanto. Spero mi possa aiutare

[gulliver.pro]

penso di aver risolto con un position:absolute... ho fatto bene o c'è un altro modo?

[KillerWorm]

penso di aver risolto con un position:absolute... ho fatto bene o c'è un altro modo?

Ciao, non ho capito se hai risolto entrambi i problemi, ad ogni modo dal tuo Pen è comunque difficile capire ciò a cui fai riferimento in questa discussione, non vedo alcuna immagine dell'orologio e tanto meno il play.

In quel modo il Pen è dispersivo dal momento che stai includendo l'intero codice della pagina ma senza che siano caricate le opportune immagini. In questi casi sarebbe comunque preferibile usare un esempio ridotto al minimo possibile, con eventuali immagini o elementi fittizi, per riprodurre e poter identificare l'esatto problema, altrimenti diventa complicato e difficile poterti aiutare.

In alternativa, nel caso tu abbia pubblicato la pagina/sito online, potrebbe risultare utile anche postare il relativo link dal quale poter verificare esattamente la situazione attuale del problema in questione.

e giacchè se non chiedo troppo se potresti dirmi come sto andando se il mio linguaggio è pulito o se sto sbagliando qualcosa...

Nel codice del tuo Pen ci sono svariati errori di validazione.

Al momento ti posso giusto consigliare di passare il tutto su un validatore (ad esempio questo) quindi controllare i vari errori, HTML e CSS, e provvedere a correggerli uno ad uno.

Se poi hai bisogno di ulteriori indicazioni su eventuali errori che non riesci a correggere, puoi sempre rivolgerti su questo forum (non prima di aver fatto le tue opportune ricerche), aprendo magari singole discussioni (nelle rispettive sezioni) per ogni particolare argomento.

Per ora è tutto, buon proseguimento e buona permanenza sul forum

[gulliver.pro]

buongiorno.. allora, il problema delle immagini purtroppo non sono risucito a risolverlo ma ho messo online il sito e corretto quasi tutti gli errori di validazione. quasi tutti perchè non riesco ad eliminare questo errore:
Error: CSS: font-weight: Parse Error.
From line 478, column 31; to line 478, column 34
-weight: :bold;↩
COME POSSO FARE? IL LINK DEL SITO E' QUESTO:
http://gulliverpro980-com.stackstagi...web/index.html

[KillerWorm]

e corretto quasi tutti gli errori di validazione

Bene, ti sei dato da fare

L'errore del font-weight è abbastanza banale, forse è così banale che ti sfugge la causa; hai messo un carattere dei due punti di troppo tra la proprietà e il valore.

font-weight: :bold;

il problema delle immagini purtroppo non sono risucito a risolverlo

Ora che il tutto è fruibile online prova a chiarire meglio cosa non riesci a fare esattamente.

[gulliver.pro]

allora vi linko il sito: http://gulliverpro980-com.stackstagi...web/index.html

in basso sotto la scritta twitter suffers bla bla bla , accanto alla data vorrei mettere un orologio come fatto nella barra di destra.
e sotto all'articolo drone lands on moving car bla bla bla, accanto ai due sotto link "BBC reporter breaks 'world's safest' drone" vorrei mettere un play.
ma una volta inserite e ridimensionate le immagini con height:20px; mi da l'immagine ridimensionata solo in altezza mentre la larghezza me la da auto cioè per tutta la larghezza della colonna. ho provato tutti i modi e ho paura che ci sia un pò di interferenza tra direttive. spero mi sappiate aiutare voi