Witam, mam problem z ozdobieniem mojej strony. Chciałbym aby wyglądała w następujący sposób:
Left content right
tło z obrazkami tło tło z obrazkami
Oto kod HTML
<body>
<div id="square">
<div id="left">
</div>
<div id="container">
</div>
<div style="float:left"></div>
<div id="right">
</div>
<div style="clear:both"></div>
</div>
A tutaj CSS
body
{
background:#606060;
font-family: 'Lato', sans-serif;
text-align: justify;
}
#square
{
width:100%;
}
#left
{
width:430px;
float:left;
height:100%;
background:#606060 url(przykładowy obrazek);
}
#container
{
width: 1000px;
margin-left: auto;
margin-right: auto;
float:left;
}
#right
{
float:left;
width:430px;
height:100%;
backgraund:#606060 url(przykładowy obrazek);
}
W taki sposób mam całą stronę w jednym kolorze, obrazki nie pojawiają się po jej bokach.
W czym jest problem? Z góry dziękuje za pomoc.
Pozdrawiam
EDIT
Wrzucam cały kod jednej z moich stron, div left wywala się w divie menu. Nie wiem jak to naprawić...
HTML
<DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible content="IE=edge,chrome=1"/>
<title>Wydobycie w Indonezji</title>
<meta name="description" content="Tutaj dowiesz sie wszystkiego na temat wydobycia ropy w Indonezji"/>
<meta name='keywords' content="rope,wydobycie,przemysł,industry"/>
<link rel="stylesheet" href="style1.css" type:"text/css" />
</head>
<body>
<div id="left">
</div>
<div id="container">
<div id="logo">
<a href="new 1.html">Wydobycie ropy w Indonezji oraz na świecie w latach 2009-2019</a>
</div>
<div id="menu">
<div class="option" ><a href="new 1.html">Indonezja</a></div>
<div class="option"><a href="part2.html">Wydobycie</a></div>
<div class="option"><a href="part3.html">Indonezja a reszta świata</a></div>
<div class="option"><a href="part4.html">Analiza i opracowanie</div>
<div class="option"><a href="part5.html">Bibliografia</a></div>
<div style="clear:both;"></div>
</div>
<div id="topbar">
<div id="topbarL">
<a href="new 1.html"> <img src="grafika/agh.png"></a>
</div>
<div id="topbarR">
<span class="bigtitle">O projekcie słów kilka</span>
<div style="height: 15px;"></div>
Strona została wykonana w ramie projektu na zajęcia z Technologii Informacyjnej w roku 2019/2020
</div>
<div style="clear:both;"></div>
</div>
<div id="content">
<span class="bigtitle">Indonezja</span>
<div class="dottedline"></div>
<h2>1.1 Identyfikacja państwa</h2>
Indonezja, oficjalnie Republika Indonezji wyspiarskie państwo unitarne położone
w Azji Południowo-Wschodniej oraz w Oceanii, którego stolicą jest Dżakarta z 32 mln mieszkańców. Położona między Oceanem Spokojnym a Indyjskim jest największym krajem wyspiarskim na świecie z ponad trzynastoma tysiącami wysp. Jest 14. pod względem powierzchni krajem i 7. wliczając tereny morskie. Jest 4. najludniejszym krajem na świecie z ponad 260-milionową po¬pulacją z największą liczbą wyznawców islamu na świecie.
<br>
<h2>1.2 Gospodarka Indonezji</h2>
Jest największą gospodarką regionu Azji Południowo-Wschodniej. Opiera się głównie na przemyśle (46% PKB w 2011), choć rolnictwo także odgrywa dużą rolę (38% zatrudnienia w 2011). Indonezja, jako jedna z największych gospodarek wschodzących, jest członkiem G2. Wchodzi także w skład regionalnych ugrupowań gospodarczych Azji Południowo-Wschodniej: ASEAN i APEC. Indonezja była członkiem OPEC, jednak
w styczniu 2009 zawiesiła członkostwo, gdyż w 2004 stała się importerem netto ropy naftowej i wciąż rośnie jej uzależnienie od importu tego surowca. W grudniu 2015r. po sześciu latach przerwy Indonezja ponownie stała się członkiem organizacji OPEC, stając się 13 członkiem Organizacji. Najbardziej zaludnioną wyspę na świecie, Jawę, zamieszkuje ponad połowa ludności kraju. Największe złoża ropy naftowej w Indonezji znajduje się na wyspach:
<ul>
<li>Sumatr</li>
<li>Jawa</li>
<li>Borneo</li>
</ul>
<br>
<h2>1.3 Główne firmy</h2>
Jedną z główną firmą zajmującą się wydobyciem ropy oraz gazu w Indonezji jest państwowy koncern: PT Pertamina z siedzibą w Dżakarcie. Został utworzony w sierpniu 1968 r. Przez połączenie Pertamina (z 1961 r.) I Perminy (z 1957 r.). Firma jest obecnie (2013) drugim co do wielkości producentem ropy naftowej w Indonezji po amerykańskim Chevron Pacific Indonesia.
W 2013 r. Pertamina po raz pierwszy nie zajęła miejsca. 122 na liście firm Fortune Global 500 o przychodach w wysokości 70,9 mld USD Pertamina jest również jedyną indonezyjską firmą, która znalazła się na liście. Według danych z 2013r. spółka ta wydobywa dziennie 432 tys. baryłek dziennie a celem było zwiększenie tego wydobycia do 700 tys. baryłek dziennie. Dopiero od 2001r. zniesiono monopol Pertaminy na sprzedaż paliw płynnych jednak dzięki rządowym dotacjom do paliw na tych stacjach do Pertaminy nadal należy większość stacji benzynowaych w Indonezji. (3) Na pierwszym miejscu jest Chevron Corporation (4) (5) to amerykańska międzynarodowa korporacja energetyczna . Chevron zajmuje się każdym aspektem przemysłu naftowego , gazowego
i energii geotermalnej. W 2010 r. Chevron Na lokalnym rynku działają również, zagraniczne firmy m.in. ExxonMobil oraz firmy prywatne m.in. Medco. Obszar wydobycia ropy naftowej jest rozległy, wydobycie odbywa się m.in. w prowincji Riau, u wybrzeży Kalimantanu Wschodniego, w Aceh cieśninie Makassar oraz bloku Cepu, cieśninie Makassar oraz bloku Cepu.
<div id="fotobar">
<div id="fotobarL">
<img src="grafika/logo.png">
<br>
<b style="font-size:11px; color:blue;">Logo jedej z największych firm wydobywczej w Indonezji</b>
</div>
<div id="fotobarR">
<img src="grafika/indo.png">
<br>
<b style="font-size:11px;color:blue;">Rozmieszczenie złóż w Indonezji</b>
</div>
</div>
<div style="clear:both;"></div>
</div>
<div id="footer">
© Wszelkie prawa zastrzeżone.
</div>
</div>
<div style="float:left"></div>
<div id="right">
</div>
CSS
body
{
background:#606060;
font-family: 'Lato', sans-serif;
text-align: justify;
}
#square
{
width:100%;
}
#left
{
width:200px;
float:left;
height:100%;
background-color: #606060;
background-image: url('grafika/ropa1.png');
}
#container
{
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#logo
{
color: white;
margin-top: 20px;
font-size: 44px;
letter-spacing: 3px;
font-weight: 900;
text-align:center;
}
#menu
{
background-color: #303030;
margin-top: 20px;
color: #ffffff;
padding: 10px;
}
#topbar
{
background-color: #128870;
color: white;
padding: 10px;
margin-top: 20px;
margin-bottom: 40px;
height: 160px;
}
#topbarL
{
float:left;
padding: 20px;
width: 138px;
text-align: center;
border-right: 2px dotted #cccccc;
}
#topbarR
{
float: left;
padding: 20px;
width: 760px;
font-size: 16px;
text-align: justify;
}
#content
{
padding: 40px;
width: 920px;
background-color: #dedede;
min-height: 580px;
text-align: justify;
}
#footer
{
clear: both;
color: white;
text-align: center;
padding: 20px;
font-size: 18px;
background-color: #606060;
width:1000px;
}
#fotobar
{
color:black;
padding: 10px;
margin-top: 20px;
margin-bottom: 30px;
height: 160px;
}
#fotobarL
{
float:left;
padding: 20px;
width: 409px;
text-align: center;
border-right: 2px dotted #000000;
color:black;
}
#fotobarR
{
float: right;
padding: 20px;
width: 409px;
text-align: center;
height:260px;
}
#tabela
{
border:2px solid black;
padding:10px;
margin-top:20px;
margin-bottom:20px;
text-align:center;
float:left;
margin-right:20px;
}
#tabela td
{
padding:10px;
border:1px black solid;
width:100px;
}
#wykres
{
text-align:center;
width:328px;
margin-top:100px;
margin-bottom:20px;
float:left;
}
#images
{
margin-top:20px;
margin-bottom:20px;
padding:10px;
}
#left
{
float:left;
padding:10px;
text-align:center;
margin-right:80px;
}
#right
{
float:left;
padding:10px;
text-align:center;
margin-left:80px;
}
#1
{
color:blue;
opacity:0.8;
}
.option
{
float: left;
min-width: 50px;
height: 25px;
font-size: 18px;
padding: 10px;
border-right: 2px dotted #444444;
opacity: 0.8;
}
.option:hover
{
background-color: #000000;
cursor: pointer;
margin-left:auto;
margin-right:auto;
}
.optionL
{
font-size:18px;
height:25px;
padding: 10px;
border-bottom: 2px dotted #444444;
margin-left:auto;
margin-right:auto;
}
.optionL:hover
{
background-color: #f36742;
color: white;
cursor: pointer;
}
.bigtitle
{
font-size: 32px;
font-weight: 900;
letter-spacing: 2px;
}
.dottedline
{
height: 5px;
margin-top: 15px;
margin-bottom: 20px;
border-bottom: 2px dotted #444444;
}
a{
text-decoration: none;
color:white;
}
