HTML, (div) robiłem wg filmiku (cz.2) I obraz nie chce mi się zmniejszyć mimo że daje width i height

pytanie zadane 22 lutego 2016 w HTML i CSS przez Biafra Nowicjusz (200 p.)

Wszystko oprócz tego działa robiłem jak w filmiku https://www.youtube.com/watch?v=2nWSCxIpHfc

Niestety zdjęcie w rubryce reklamy (ad) nie chce zmienić proporcji, zdjęcie jest dużo większe niż autor użył na filmiku. Zdjęcie jest w tym samym folderze co kod i ma nazwę ad1.jpg

Załączam kod:


<!DOCTYPE html>
<html lang="pl">



<head>
		<meta charset="utf-8"/>
		<title>Najlepsze seriale!</title>
		<meta name="description" content="Przed Tobą spis najlepszych seriali"/>
		<meta name="keywords"content="top 5, series, best, watch, movies" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

		<style>
		#container
		{
			width: 1000px;
			margin-left: auto;
			margin-right: auto;
		}
		#logo
		{
			background-color: black;
			color: white;
			text-align: center;
			padding: 15px;
		}
		
		#nav
		{
			float: left;
			background-color: lightgray;
			width: 120px;
			min-height: 620px;
			padding: 10px;
		}
		
		#content
		{
			float: left;
			padding: 30 px;
			width: 600px
		
		}
		
		#ad
		{
			
			float: left;
			width: 160px; 
			max-height: 620px; 
			padding: 10px;
			background-color: lightgray;
		
		}
		
		#footer
		{
			clear: both;
			background-color: black;
			color: white;
			text-align: center;
			padding: 20px;l
		
		}
		
		
		
		
		
		</style>

</head>

<body>
	
		<div id="container">
		
			<div id="logo">
				<h1>Najlepsze seriale - subiektywne TOP 5</h1>
			</div>
			
			<div id="nav">
				Games of Thrones <br/>
				Dexter<br/>
				Fargo<br/>
				Berserk<br/>
				House of Cards<br/>
			</div>
			
			<div id="content">
				<h2>Game of Thrones</h2> is an American fantasy drama television series created by showrunners David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels, the first of which is titled A Game of Thrones. It is filmed in a Belfast studio and on location elsewhere in Croatia, Iceland, Malta, Morocco, Northern Ireland, Spain, Scotland, and the United States, and premiered on HBO in the United States on April 17, 2011. The series has been renewed for a sixth season,[5] which will premiere on April 24, 2016.[6]
                The series is set on the fictional continents of Westeros and Essos, and interweaves several plot lines with a large ensemble cast. The first narrative arc follows a civil war among several noble houses for the Iron Throne of the Seven Kingdoms; the second covers the attempts to reclaim the throne by the exiled last scion of the realm's deposed ruling dynasty; the third chronicles the rising threat of the impending winter and the legendary creatures and fierce peoples of the North.
			</div>
			
			<div id="ad">
				<img src="ad1.jpg"/>
			</div>
			
			
			<div id="footer">
			Best series TOP 5 &copy; All rights reserved
			
			</div>
			
		
		
		
		
		
		
		
		
		</div>
	

	</body>




</html>

4 odpowiedzi

odpowiedź 22 lutego 2016 przez makoso Mądrala (7,380 p.)

Obrazki kochają swoje wymiary ;)

masz chyba dwa sposoby na rozwiązanie, ustawić to dla obrazka np tak:

#ad > img
        {             
            width: 160px; 
            max-height: 620px; 
         
        }

albo aby każdy obrazek dopasowywał się do rodzica

img{
    width:100%;
}

ale nie jestem pewien drugiego rozwiązania ;)

komentarz 23 lutego 2016 przez Biafra Nowicjusz (200 p.)

Dzięki wielkie za pomoc:)

Mam jeszcze 2 pytania:

1) Co oznacza ten zapis który pomógł? "#ad > img"

2) Czemu gdy dam ad width: 180px; to razem nav+content+ad daje mi wyrównanie width z #container skoro #container ma width 1000px a nav+content+ad ma razem (120+10 + 600+30 + 180+10) = 950 ?

Jak dam ad width wiecej niz 180px to segment "#ad" przeskakuje mi pod "#content"

komentarz 23 lutego 2016 przez makoso Mądrala (7,380 p.)

Z tłumaczenia jestem słaby ale:
1) #ad > img oznacza:

Każdy obrazek <img /> który znajduje się bezpośrednio wewnątrz obiektu o id="ad", gdybyś miał taką strukturę:

<div id="ad">
    <div>
        <img />
    </div>
</div>

to powyższy to ten selektor by nie zadziałał musiałbyś użyć zapisu:

#id > div > img{

} /* Lub tego: */
#id img{

}

ten drugi zadziała do wszystkich obrazków które będę "zakopane" wewnątrz obiektu o id="ad"

2) możesz sprawdzić ile zajmują poszczególne elemeny badając źródło i sprawdzając model pudełkowy, nie chce mi się liczyć ale pewnie któreś paddingi rozszerzają któregoś diva do większych rozmiarów, w chrome możesz to sprawdzić klikając ppm i wybierając "zbadaj" otworzy Ci się pole u dołu przeglądarki, po prawej stronie jak przewiniesz na dół będziesz miał model pudełkowy z wartościami wymiarów, obiekt który sprawdzasz wybierasz z kodu html widocznego po prawej stronie.

Mam nadzieję że troszkę pomogłem

odpowiedź 22 lutego 2016 przez Mlody89 Mądrala (6,920 p.)

odpowiedź 23 lutego 2016 przez Mateo Użytkownik (820 p.)

odpowiedź 23 lutego 2016 przez Mateusz11 Pasjonat (22,910 p.)

Ile wolnych linijek... xD

        #content
        {
            float: left;
            padding: 30 px;
            width: 600px           //Brak średnika! BŁĄD!
         
        }

        #footer
        {
            clear: both;
            background-color: black;
            color: white;
            text-align: center;
            padding: 20px;l              //Kl\olejny błąd po średniku znak :(
         
        }

komentarz 23 lutego 2016 przez Czort Nałogowiec (32,500 p.)

Wartość ostatniego atrybutu selektora nie musi kończyć się średnikiem.

1	komentarz 23 lutego 2016 przez Mateusz11 Pasjonat (22,910 p.) Tak, ale jak widać autor tematu jest dopiero na #2 odcinku HTML. Niech uczy się "że ten średnik tam musi być!". Dopiero jak będzie już więcej wiedział o programowaniu WWW, niech korzysta z tych środków :) .

komentarz 23 lutego 2016 przez Biafra Nowicjusz (200 p.)

Dzięki za pomoc :) (btw da sie dodac post do temtu, czy mozna tylko odpowiadac na odpowiedzi ;q ?)

Mam jeszcze 2 pytania:

1) Co oznacza ten zapis który pomógł? "#ad > img"

2) Czemu gdy dam ad width: 180px; to razem nav+content+ad daje mi wyrównanie width z #container skoro #container ma width 1000px a nav+content+ad ma razem (120+10 + 600+30 + 180+10) = 950 ?

komentarz 23 lutego 2016 przez Czort Nałogowiec (32,500 p.)

1) selektor wszystkich img, które są dziećmi elementu o id="ad"

2) pewnie zapomniałeś, że padding/margin jest z dwóch stron.

Co do pytania odnośnie forum - nie widzę sensu takiego zabiegu. Masz za to możliwość edytowania swojego postu, w którym można (a nawet należałoby) umieścić info co zmieniłeś w edycji. (przykład poniżej)

Edit:literówki