,,float: left;" nie działa

pytanie zadane 10 lipca 2015 w HTML i CSS przez Tom::catch_Jerry(); Użytkownik (950 p.)

Witam,

Dla poniższego kodu html zdjęcia w przeglądarce wyświetlają się jedno pod drugim, zamiast jedno obok drugiego.

Niniejszy kod:

<!DOCTYPE HTML>
<html lang="pl">
<head>
     <meta charset="utf-8"/>
     <title>Znani matematycy</title>
	 <meta name="description" content="Biografie i sylwetki znanych matematyków" />
	 <meta name="keywords" content="matematyka, matematyk, biografie" />
	 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	 <link rel="stylesheet" href="styl.css" type="text/css"/>
	 <style>
	        #box
			{
			    width: 1200px;
				margin-left: auto;
				margin-right: auto;
			}
	        #nagłówek
		    {
			    text-align: center;
				align:center;
			    background-color:black;
				color:white;
				padding: 10px;
			}
			#L.E.
			{
			    float: left;
				width:250px;
				min-height: 300px;
				padding:10px;
			}
			#J.N.
			{
			    float: left;
				width:250px;
				min-height: 300px;
				padding:10px;
			}
			#S.B.
			{
			    float: left;
				width:250px;
				min-height: 300px;
				padding:10px;
			}
			#H.S.
			{
			    float: left;
				width:250px;
                min-height: 300px;
				padding:10px;
			}
			#stopka
			{
			    clear: both;
				width:1200px;
				background-color: black;
				color: white;
				text-align: center;
				padding:10px;
			}
	 </style>
</head>
<body>
    <div id="box">
	    <div id="nagłówek">
		    <h1>Znani matematycy</h1>
	        Biografie, życiorysy, sylwetki
		</div>
	    <br/><br/><br/>
	    <div id="L.E.">
		    <img width="219" height="283" src="images/Leonhard_Euler.jpg"/><br/>
            <a href="https://pl.wikipedia.org/wiki/Leonhard_Euler" title="Zobacz na Wikipedii!" target="_blank">Leonhard Euler(1707-1783)</a>
		</div>
		<br/><br/><br/>
	    <div id="J.N.">
		    <img width="250" height="166" src="images/John_Forbes_Nash,_Jr..jpg"/><br/>
            <a href="https://pl.wikipedia.org/wiki/John_Forbes_Nash" title="Zobacz na Wikipedii!" target="_blank">John Nash(1928-2015)</a>
		</div>
		<br/><br/><br/>
	    <div id="S.B.">
		    <img width="174" height="240" src="images/Stefan_Banach.jpg"/><br/>
            <a href="https://pl.wikipedia.org/wiki/Stefan_Banach" title="Zobacz na Wikipedii!" target="_blank">Stefan Banach(1892-1945)</a>
		</div>
		<br/><br/><br/>
		<div id="stopka">Znani matematycy &copy; Wszelkie prawa zastrzeżone</div>
	</div>
</body>
</html>

Plik styl.css:

body
{
    background-color: lightgray;
}
a:link
{
 color:blue;
}
a:visited
{
 color:blue;
}
a:hover
{
 color:red;
}
h1
{
 font-size: 50px;
}

Pytanie: dlaczego float: left; nie działa?

4 odpowiedzi

odpowiedź 10 lipca 2015 przez Eimens Maniak (69,240 p.)
wybrane 10 lipca 2015 przez Comandeer

Najlepsza

<div id="L.E."> Powinno być tak <div id="LE">...</div>

Bez kropek one dużo zmieniają! i dlatego ci nie działa A już napewno nie Ł Ó Ż Ź ...

align:center; <-- co to znaczy ?

Poprawione: http://codepen.io/ReVieR/pen/jPxzoB

1. Bez polskich znaków w <div Id="...">

2. wywal <br />

3. Nie używaj kropek w <div Id="...">

4. Zapoznaj się z filmami o CSS Zelenta :)

https://www.youtube.com/watch?v=RJEKMbD_kEk&list=PLOYHgt8dIdow6b2Qm3aTJbKT2BPo5iybv

komentarz 10 lipca 2015 przez Comandeer Guru (602,340 p.)

Ale to jest całkiem poprawny identyfikator. Polecam sprawdzić do specyfikacji CSS i HTML jakie znaki są dopuszczane w identyfikatorach.

Faktycznie, kropka w selektorze CSS ma odpowiednie znaczenie, ale można to obejść: #L\.E\.

komentarz 10 lipca 2015 przez Eimens Maniak (69,240 p.)

Z tego co napisał to może nie mieszajmy mu w głowie :) Polecam zapoznać się najpierw z podstawami css'a.

komentarz 10 lipca 2015 przez Tom::catch_Jerry(); Użytkownik (950 p.)

Udało się, gdy wywaliłem kropki z id wszystkich divów.

Dziękuję bardzo!

odpowiedź 10 lipca 2015 przez Berike Początkujący (420 p.)
edycja 10 lipca 2015 przez Berike

po DIV'ach, które są obok siebie zapomniałeś dodać

<div style="clear: both;"></div>

dlatego może nie działać

komentarz 10 lipca 2015 przez Tom::catch_Jerry(); Użytkownik (950 p.)

Wybacz, ale nie rozumiem ;)

komentarz 10 lipca 2015 przez Berike Początkujący (420 p.)

już zedytowałem bo się nie wyświetliło, poza tym robisz błąd linkując w ten sposób. Zuważ, że linki nie są traktowane jako linki tylko tekst. Proponowałbym zastnaowić się dalczego tak się dzieje. Spróbój użyć