Odpowiedź:
Zdjęcie w załączniku.
Niestety, lecz kodu nie mogę Ci przesłać przez załącznik,
dlatego wysyłam go w wyjaśnieniem
Wszystkie te trzy pliki, wsadź do jednego foldera i wszystko będzie dobrze.
Proszę o feedback, jeśli coś nie działa :)
Wyjaśnienie:
plik index.html
<!DOCTYPE html>
<html>
<head>
<title>podróże</title>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<h1>Podróże po stolicach Europy</h1>
<div id="container">
Na stronie znajdziesz informacje o stolicach europejskich:
<br><br>
<div id="text">
• poznasz najważniejsze zabytki i obiekty tych miast,
<br>
• zobaczysz ciekawe miejsca na fotografiach,
<br>
• poznasz ciekawostki historyczne tych miast.
<div id="table">
<div class="komory">
<b>Państwo</b>
</div>
<div class="komory">
<b>Stolica</b>
</div>
<div class="komory">
Austria
</div>
<div class="komory">
Wiedeń
</div>
<div class="komory">
Dania
</div>
<div class="komory">
Kopenhaga
</div>
<div class="komory">
Francja
</div>
<div class="komory">
Paryż
</div>
<div class="komory">
Grecja
</div>
<div class="komory">
Ateny
</div>
<div class="komory">
Polska
</div>
<div class="komory">
Warszawa
</div>
</div>
</div>
<div id="image">
<img src="wieza_eiffel.jpg" width="450px">
</div>
</div>
</body>
</html>
plik style.css
#container
{
font-size: 21px;
width: 1000px;
margin-top: 35px;
}
#text
{
margin-left: 40px;
width: 450px;
float: left;
height: 600px;
}
#image
{
margin-left: 50px;
width: 460px;
float: left;
height: 600px;
}
#table
{
width: 300x;
height: 300px;
margin-top: 100px;
margin-left: 60px;
border-style: 1px solid;
}
.komory
{
width: 144px;
border-style: solid;
float: left;
height: 29px;
text-align: center;
}
