Tvorba webu pomocou div a css

ruso · Napísal **ruso**: 30.06.2010 20:36

Ahoj,

som amatera a potreboval by som poradit pri tvorbe statickej stranky, pri ktorej by som chcel vyuzit CSS layout (tak sa to vola?). Jedna sa o jednoduchu stranku na ktorej vrchu by bolo logo a pod nim textovy obsah. Chcel by som aby to bolo formatovane v DIVoch (?) podobne ako to je na prilozenom obrazku:

Kto by vedel a bol by ochotny pomoct?

shaggy · Napísal **shaggy**: 30.06.2010 22:31

A otázka znie ako?

ruso · Napísal autor témy **ruso**: 30.06.2010 22:44

shaggy píše:

A otázka znie ako?

Ako taku stranku spravit? Ako polohavat tie DIVy. Ked som to skusal hadze mi ich za sebou, ako dosiahnut ich umiestnenie na stranke, aby som mal div kde chcemmat logo tam a div s obsahomniekde inde?

Denco1 · Napísal **Denco1**: 30.06.2010 23:25

www.jakpsatweb.cz

shaggy · Napísal **shaggy**: 30.06.2010 23:49

Dovolil som si ten dencov príspevok trochu opraviť (zmenil som CODE na URL), ale inak s nim plne súhlasím.
Zisti si, na čo v css slúžia paddingy, margin, neskôr možno využiješ aj float + samozrejme všetky ostatné css vlastnosti, tu som ti vymenoval len tie, ktoré by si mal využiť v tomto prípade.

ruso · Napísal autor témy **ruso**: 01.07.2010 8:25

Pozeral som si priucky aj nejake tutorialy, ale nepochopil com jednej veci, ako si jednotlive boxy (DIV) naformatujem na stranke tak aby som ich mal na miestach tam kam ich chem mat (podla obrazka v prilohe). Ono ich hadze pod seba za radom ak ma rozumiete co myslim.

don jebot · Napísal **don jebot**: 01.07.2010 8:32

ak to chces mat cele na stred pouzi obalovy <div> potom logo so s urcitou sirkou a nakoniec obsah ziadni problem ... tomu obsahovemu divu nastav 100% sirku (bude pocitana od sirky obaoveho divu )

ruso · Napísal autor témy **ruso**: 01.07.2010 8:46

Nasiel som este nejake anglicke tutorialy a asi uz tomu zacinam rozumiet, ide len o rozlozenie obdlznikov ak tomu dobre rozumiem. Skusim sa s tym pohrat, to bude asi najlepsie. Zatial dakujem za rady.

Roko · Napísal **Roko**: 01.07.2010 11:56

v css vies nastavovat pozicie hociktorym elementom. ak trebars potrebujes mat div na urcitej pozicii, vies si ho tam posunut cez absolutne a relativne poziciovanie.

logo ma fixnu sirku a dlzku, cize to si bezproblemovo nastavis cez absolutne pozicie, nasledne div obsah vies, o kolko ma byt vzdialeny od vrchneho okraja, cize ten vies tiez poziciovat absolutne.

aspon ja by som to urcite robil takto:

index.php:

Kód:

<html>
<head>
<?php include ('stylesheet.php'); ?>
</head>
<body>
<div class="logo"><img...></div>
<div class="body">bla bla</div>
</body>
</html>

stylesheet.php:

Kód:

body { background-imafe: url('backgroudn.jpg'); }

.logo {
position: absolute;
left: 50px;
top: 50px;
}

.body {
position: absolute;
left: 50px;
top: 200px;

ruso · Napísal autor témy **ruso**: 01.07.2010 12:31

Vdaka, toto mi snad pomoze, vecer si to odskusam.

DARSON · Napísal **DARSON**: 01.07.2010 12:48

Roko, tvoj pripad pravdepodobne funguje, ale neni to spravna cesta. Ja by som to takto urcite nerobil. Absolutne polohy pouzivam, ak uz nemam inu moznost.

Ruso, ak mas skype napis mi. Moj nick mspiderv. Pomozem ti a vysvetlim comu nebudes rozumiet.

Roko · Napísal **Roko**: 01.07.2010 13:35

no tak napis tvoj nazor, nech sa priucim i ja

DARSON · Napísal **DARSON**: 01.07.2010 13:54

Tak za prve. Preco styl includujes pomocouc php? Je to zbytocne. Namiesto riadku...

Kód:

<?php include ('stylesheet.php'); ?>

... pouzi ...

Kód:

Za druhe. Pouzi taketo HTML.

Kód:

<html> 
<head> 
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head> 
<body> 
<div class="logo"><img...></div> 
<div class="body">bla bla</div> 
</body> 
</html>

a takyeto CSS...

Kód:

body {
     width: 960px;
     margin-top: 0px;
     margin-bottom: 0px;
     margin-left: auto;
     margin-right: auto;
}
.logo { 
     width: 960px;
     height: 120px;
} 

.body { 
     margin-top: 20px;
}

Vysledok bude rovnaky a nemusis riskovat s absolute polohovanim...

shaggy · Napísal **shaggy**: 01.07.2010 17:48

Roko - absolútne a relatívne pozicovanie je v tomto prípade úplne zbytočné. Tiež nechápem, prečo sem pletieš php a zbytočne mätieš začiatočníkov. Je problém sem dať kód bez toho php, myslím že by sa podstata nezmenila.

Súhlasím s tým, čo napísal DARSON - includovanie štýlov a celkovo používanie php súboru na štýly je veľmi divné.
A celkovo by som poprosil viac sebareflexie - ja tiež neradím ostatným v C#, pretože viem, že som začiatočník. Tvoja rada s absolútnym pozicovaním môže viac uškodiť ako pomôcť, ak sa raz človek niečo zle naučí, tak sa to odnaučí len veľmi ťažko.

ruso · Napísal autor témy **ruso**: 05.07.2010 9:53

Takze aj vdaka Vasim radam sa mi podarilo spravit strukturu webu tak ako to je na obrazku Obrazovka2. Teraz vsak nastal problem v div obsah, kde by som chcel rozmiestnit 4 obrazky (vyrezane z desingu stranky) tak aby tvorili stvorec, v ktorom bude obsah (mozno v dalsiom dive) a toto sa mi nedary dosiahnut. Chcel by som to tak ako je to na obrazku Obrazovka3, ale zatial sa mi podarilo len nieco neurcite ako je na obrazku Obrazovka1. Takze ako to mam dosiahnut teda?

Pridavam aj kod index, a css:

Kód:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
   <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
   <title>Airsoft klub</title>
   <meta http-equiv="Content-Language" content="sk-sk" />
   <meta http-equiv="imagetoolbar" content="no" />
   <meta name="MSSmartTagsPreventParsing" content="true" />
   <meta name="description" content="Description" />
   <meta name="keywords" content="Keywords" />
   <meta name="author" content="Martin"/>
   <style type="text/css" media="all">@import "css/style.css";</style>
   <style type="text/css" media="all">   body{background-image: url('images/bg.jpg');}</style>
</head>
<body>
<div id="container">
<div id="novinky">
novinky
</div>
<div id="logo">
logo
</div>
<div id="obsah">
obsah
</div>   
</div>    
</body>
</html>

Kód:

#container 
{
   width: 760px;
   margin: auto;   
}

#logo
{
   background: red;
   height: 200px;
}

#novinky
{
   background: yellow;
   float: right;
   height: 200px;
   width: 550px;
}

#obsah
{
   background: blue;
   height: 500px;
}

Este taka otazka, nepodarilo sa mi umiestnit obrazok pozadia na stranke tak, aby som mal prikaz backgrund umiestneny v style.css, ale musim ho mat v hlavicke html dokumentu, je to tak spravne?

camo · Napísal **camo**: 05.07.2010 17:55

To vyzerá na nejakú blbosť. Je úplne jedno kde je definícia pozície backgroundu. Podľa mňa si niečo zle napísal.... :roll:

ruso · Napísal autor témy **ruso**: 05.07.2010 19:44

camo píše:

To vyzerá na nejakú blbosť. Je úplne jedno kde je definícia pozície backgroundu. Podľa mňa si niečo zle napísal.... :roll:

ta v podstate som to napisal tak isto ako v hlavicke, ale to nieje aj tak podstatne, skor by som potreboval vediet ako dosiehnut efekt ze jeden div bude obklopeny vyrezmi tych obratzkov

DARSON · Napísal **DARSON**: 05.07.2010 20:06

@ruso - ak si este necital tieto clanky (myslim ze nie

), tak si ich URCTIE precitaj. Viem... je to trochu dlhe, ale mas tam vysvetleny cely postup ako nakodovat (previest do HTML+CSS) podobne stranky (layouty).

http://www.tutorials.cz/clanek1330-jak- ... out-1-cast

http://www.tutorials.cz/clanek1337-jak- ... out-2-cast

http://www.tutorials.cz/clanek1341-jak- ... out-3-cast

http://www.tutorials.cz/clanek1356-jak- ... out-4-cast

//EDIT - je to pisane ako pre blbcov, takze to urcite pochopis, nic sa neboj...

ruso · Napísal autor témy **ruso**: 05.07.2010 20:19

Vdaka, ten web nepoznam tak sa tam idem pozriet a skusim to prestudovat.

camo · Napísal **camo**: 05.07.2010 20:37

Takýto prístu:

Kód:

v podstate som to napisal tak isto ako v hlavicke

ani v CSS nebude stačiť, nehovoriac o nejakom programovaní.
Každá čiarka a každý apostrof.... je fatálny....

ruso · Napísal autor témy **ruso**: 05.07.2010 20:49

aby som to upresnil teda, takto som to mal zapisane v css subore:

Kód:

body
{
background-image: url('images/bg.jpg');
}

shaggy · Napísal **shaggy**: 05.07.2010 21:21

Dôležité je, v akom adresári je ten css súbor - pretože ak je v inom ako ten html súbor, tak ti logicky obrázok nefungoval.

camo · Napísal **camo**: 05.07.2010 21:22

Ide o toto:
http://www.jakpsatweb.cz/css/url-v-css.html

ruso · Napísal autor témy **ruso**: 05.07.2010 21:33

shaggy píše:

Dôležité je, v akom adresári je ten css súbor - pretože ak je v inom ako ten html súbor, tak ti logicky obrázok nefungoval.

mas pravdu, asi tam bude ten problem.
vedel by si ma naviest ako na to oramovat obsah obrazkami? vdaka

camo · Napísal **camo**: 05.07.2010 21:57

Čo tak trochu sa ponamáhať a Googliť?!
Snáď ti pomôže trochu toto: http://www.borber.com/blog/kulate-rohy- ... ed-corners

Tvorba webu pomocou div a css

Podobné témy