Nie wiem jak przenieść diva w inne miejsce.

pytanie zadane 4 grudnia 2016 w HTML i CSS przez Mateusz Bogumił Obywatel (1,380 p.)

Witam. Stworzyłem jedną stronę wzorując się w jakimś stopniu na stronie pana Zelenta z bodajże 3 odcinka z kursu html. Udało mi się ją stworzyć tak bym był z niej zadowolony. Postanowiłem, że zrobię jeszcze jedną bardzo podobną, ale trochę trudniejszą stronę by się uczyć. Poprosiłem siostrę by mi narysowała w paincie jak by chciała by wyglądała jej strona. Zrobiła to, a ja robiłem tą stronę, aż do tego momentu. Niestety już nie wiem co mam zrobić, by przenieść diva "picture", by był obok diva "info". Kolory są zrobione tylko roboczo, bym widział jakich rozmiarów są divy, jak coś :D Bardzo proszę o pomoc. Sądzę, że trzeba coś zrobić z float: left, ale niestety nie wiem gdzie ://

HTML

<html lang="pl">
<head>
	<meta charset="utf-8"/>
	<link rel="stylesheet" href="style.css" tyle="text/css" />
	<link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Lato&amp;subset=latin-ext" rel="stylesheet">
</head>
<body>
	<div id="container">
		<div class="rectangle">
		<div id="logo">WerGwiazdka</div>
		<div id="time">12:00:00 </div>
		<div style="clear: both;"></div>
	<div id="info">
		<div id="like">like</div>
		<div id="Im">O zalozycielu WergWiazdki</div>
		<div id="list">Lista WerGwiazdek</div>
		<div id="text">caly teskt bla bla bla bla bla adsasf bla bla bla bla</div>
	<div id="picture">
</body>
</html>

CSS

body
{

    background: url(tlo.jpg);
    color: black;
    text-align: center;
    line-height: 1.4;
    margin: 0;
    overflow-y: scroll;
    background-size: 1024px 720px;
	color: #ffffff;
	font-family: 'Lato', sans-serif;
	font-size: 20px;
}

#container
{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

.rectangle
{
    width: 960px;
	margin: 20px;
}

#logo
{
	float: left;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 70px;
	width: 600px;
	margin-bottom: 20px;
}

#time
{
	font-family: 'Josefin Sans', sans-serif;
	font-size: 70px;
	margin-bottom: 20px;
}

#info
{
	width: 1000px;
	height: 500px;
	float: left;
}

#like
{
	width: 300px;
	height: 150px;
	float: left;
	background-color: black;
}

#Im
{
	height: 150px;
	width: 400px;
	margin-left: 350px;
	background-color: black;
}

#list
{
	background-color: white;
	width: 300px;
	height: 300px;
	margin-top: 10px;
	float: left;
}

#text
{
	background-color: black;
	height: 300px;
	width: 440px;
	margin-top: 10px;
	margin-left: 310px;

}

#picture
{
	background-color: green;
	height: 200px;
	width: 200px;
	margin-left: 900px;
}

komentarz 4 grudnia 2016 przez kon.bed21 Obywatel (1,610 p.)

Pamiętaj by na początku pliku HTML w pierwszej linijce był <DOTYPE html!>

1 odpowiedź

odpowiedź 4 grudnia 2016 przez Olaf Siwiński Mądrala (7,060 p.)
wybrane 4 grudnia 2016 przez Mateusz Bogumił

Najlepsza

Ogólnie to nie wiem jak chcesz przenieść diva picture obok diva info kiedy jeden znajduje się w druugim. Pamiętaj o zamykani znacznika <div></div>. Sprawdź to i zobacz czy o to chodzi.

<html lang="pl">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="style.css" tyle="text/css" />
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Lato&subset=latin-ext" rel="stylesheet">
</head>
<body>
<div id="container">
<div class="rectangle">
<div id="logo">WerGwiazdka</div>
<div id="time">12:00:00 </div>
<div style="clear: both;"></div>
<div id="info">
  <div id="like">like</div>
  <div id="Im">O zalozycielu WergWiazdki</div>
  <div id="list">Lista WerGwiazdek</div>
  <div id="text">caly teskt bla bla bla bla bla adsasf bla bla bla bla</div>
</div>
  <div id="picture"></div>
</body>
</html>