Pomoc w ustawieniu divów

pytanie zadane 14 sierpnia 2016 w HTML i CSS przez niezalogowany
edycja 14 sierpnia 2016 przez HaKIM

Witam staram się zrobić stronę internetową podobną do piriform.com jednak tylko mocno się na niej wzoruję. Nie jestem grafikiem ale staram się o coś takiego:

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

	<meta charset="utf-8"/>
	<title></title>
	<meta name="description" content=""/>
	<meta name="keywords" content=""/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	
	<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<header>
	<h1>UPower</h1>
</header>

<nav>
<ol>
  <li><a href=""><img src="grafika\magazyn.ico" width="16" height="16"/></a></li>
  <li><a href=""></a></li>
</ol>
</nav>

<article>
<section>
	<p></p>
	<p></p>
	<p></p>
</section>
<section>
	<p></p>
	<p></p>
	<p></p>
</section>
<section>
	<p></p>
</section>
<div style="clear:both"></div> 
</article>

<footer>

</footer>

</body>
</html>

body
{
	margin: 0px;
	background-color: #EEE;
	width: auto;
	height: auto;
}

header
{
	text-align: center;
}

nav
{
	width: 150px;
	float: left;
}

article
{
	float: left;
}

section
{
	float: left;
}

footer
{
	clear:both;
}

h1
{
	
}

komentarz 14 sierpnia 2016 przez jpacanowski VIP (101,940 p.)

Nie jestem grafikiem

To widać... ;)

1	komentarz 14 sierpnia 2016 przez niezalogowany wiem :) moje rysunki na plastyce nigdy nie był lepiej oceniane niż 2- a jesteś w stanie mi pomóc??

1 odpowiedź

odpowiedź 15 sierpnia 2016 przez pablop76 VIP (123,180 p.)
wybrane 15 sierpnia 2016

Najlepsza

Witam. Skoro masz problem z zakodowaniem tej strony to odpuść sobie semantykę i zrób to (żeby zrozumieć podstawy) na samych divach. Rysunek jest ok. Wszystko widać jak na dłoni.

a więc:

<!DOCTYPE HTML>
<html  lang="pl">
<head>
    <meta charset="utf-8"/>   
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
 
<body>
 
<div id="baner">
    <h1>UPower</h1>
</div>
 
<div id="lewa_kolumna">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at velit interdum, euismod tellus in, posuere augue. In hac habitasse platea dictumst. Nulla eget odio nec lectus suscipit aliquet. Duis eget dolor ultricies, semper dui rhoncus, pulvinar ipsum. Cras lobortis mi in dui facilisis sodales. Duis purus urna, elementum at lacus tempor, ornare varius diam. Aliquam eget eros at sapien congue dictum at quis ligula. Donec ut fringilla diam. Donec sit amet nunc ultrices, pretium metus non, vestibulum quam. Cras risus nisi, vestibulum id orci vel, efficitur imperdiet nibh. Proin rhoncus suscipit urna, sed ultrices mi elementum in. Duis tortor ipsum, ultrices non diam vitae, congue convallis leo. Quisque sagittis magna quis magna porta blandit. 
</div>

<div id="prawa_kolumna">

	<div class="pojemnik">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit.Proin rhoncus suscipit urna, sed ultrices mi elementum in. Duis tortor ipsum, ultrices non diam vitae, congue convallis leo. Quisque sagittis magna quis magna porta blandit.Proin rhoncus suscipit urna, sed ultrices mi elementum in. Duis tortor ipsum, ultrices non diam vitae, congue convallis leo. Quisque sagittis magna quis magna porta blandit.Proin rhoncus suscipit urna, sed ultrices mi elementum in.
	</div>
	<div class="pojemnik">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit.Proin rhoncus suscipit urna, sed ultrices mi elementum in. Duis tortor ipsum, ultrices non diam vitae, congue convallis leo. Quisque sagittis magna quis magna porta blandit.Proin rhoncus suscipit urna, sed ultrices mi elementum in. Duis tortor ipsum, ultrices non diam vitae, congue convallis leo. Quisque sagittis magna quis magna porta blandit.Proin rhoncus suscipit urna, sed ultrices mi elementum in. 
	</div>
	<div class="pojemnik_3">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
	
</div>

<div id="stopka">stopka</div> 
</body>
</html>

body
{
	width: 904px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	border: 1px solid red;
}

#baner
{
	border: 1px solid yellow;
}
 
#lewa_kolumna
{
    float: left;
	width: 350px;
	border: 1px solid blue;

}
 
#prawa_kolumna
{
    float: left;
	width: 550px;
	border: 1px solid green;
}
 
.pojemnik
{
	float: left;
	width: 273px;
	border: 1px solid black;
}

.pojemnik_3
{
	clear: both;
	border: 1px solid gold;
}
#stopka
{
 clear: both;
 border: 1px solid magenta;
 width: 904px;
}