• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Nie wiem jak przenieść diva w inne miejsce.

Aruba Cloud - Virtual Private Server VPS
0 głosów
300 wizyt
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ź

+1 głos
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>

 

komentarz 4 grudnia 2016 przez Mateusz Bogumił Obywatel (1,380 p.)
O kurde :/ A ja tego nie zauważyłem. Dzięki Ci wielkie :-)

Podobne pytania

0 głosów
1 odpowiedź 961 wizyt
pytanie zadane 22 września 2018 w HTML i CSS przez lach Nowicjusz (120 p.)
0 głosów
1 odpowiedź 381 wizyt
pytanie zadane 29 marca 2024 w HTML i CSS przez LIIK0 Nowicjusz (140 p.)

93,335 zapytań

142,331 odpowiedzi

322,415 komentarzy

62,670 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...