MyCity » Web dizajn / HTML » CSS Layout

CSS Layout

Napisano na dan: 11.5.2006

CSS Layout
Sledeća strana Pagination

Idi na vrh

Poslao: 11 Maj 2006 16:57
Idi na vrh
offline
  • bocke  Male
  • Moderator foruma
  • Glavni moderator Linux foruma
  • Veliki Pingvin
  • Guru
  • Pridružio: 16 Dec 2005
  • Poruke: 12533
  • Gde živiš: Južni pol

Do sada sam se igrao sa već napravljenim CSS template-ima... Juče sam pokušao da nešto napravim sam... S obzirom da sam se malo izgubio bez adekvatne literature, zamolio bih nekog da mi pomogne oko jednostavnog primera...

Recimo da je u pitanju dizajn u rezoluciji 800x600 (za početak, kasnije ćemo o relativnim merama). imam dva <div> elementa, gde jedan sadrži meni stranice, a drugi sam sadržaj. Da pojednostavimo, oba imaju pozadinu bele boje i border širine 1px srebrne (#CCCCCC) boje. Ako bih želeo napr:

da margina između menija (koji se nalazi sa leve strane) i ivice strane bude 50px, dužina menija 200px.
razmak između menija i sadržaja isto 50px
dužina sadržaja 450px i margina do krajnje desne ivice 50px.

Kako bi to odradio? Ima li neko vremena da odradi ovakav jednostavan primer. Jednostavno da svede sve na čiste osnove.

Da prebacim sad mere u procente:
50px=6.25%
200px=25%
450px=56.25%

Da li je moguće zameniti fiksne mere sa relativnim merama poput ovih?



Registruj se da bi učestvovao u diskusiji. Registrovanim korisnicima se NE prikazuju reklame unutar poruka.
Poslao: 11 Maj 2006 17:48
Idi na vrh
offline
  • Blood  Male
  • Ugledni građanin
  • Pridružio: 26 Jul 2003
  • Poruke: 384
  • Gde živiš: Beograd

ne trebaju ti procenti...
Nisam siguran da sam te u potpunosti skapirao sta zelis, ali evo sta smislim da sam skapirao, pa da ti odradim to.

Prvo pravih html koji ce se sadrzati od 3 diva, jedan glavni i dva sporedna za levu i desnu stranu sadrzaja. i jedan div za meni da bi se odalji od desne ivice za 50px

<html> <head> </head> <body> <div id="container"> <div id="menu"> <div class="menu">ovde ide menu</div> </div> <div id="content"> <p>Ovde ide neki content</p> </div> </div> </body> </html> css za ovo ide ovako: body { width: 100%; /* sledeci kod je za centriranje stranice na sredinu */ margin: auto; text-align: center; /* ovde je kraj koda za centriranje stranice */ } #container { width: 800px; height: 600px; text-align: left; } #menu { width: 200px; height: 450px; border: 1px solid #ccc; } #content { width: 100%; height: 450px; border: 1px solid #ccc; margin-left: 250px; /* ovako je udaljen 50px od menija */ margin-right: 50px; /* ovako je udaljen 50px od desne stranice */ } .menu { margin-left: 50px; }

To bi bilo to...

POzdrav!



Poslao: 11 Maj 2006 21:29
Idi na vrh
offline
  • bocke  Male
  • Moderator foruma
  • Glavni moderator Linux foruma
  • Veliki Pingvin
  • Guru
  • Pridružio: 16 Dec 2005
  • Poruke: 12533
  • Gde živiš: Južni pol

To je u principu to. Ovako sam ja to zamišljao:



Probao sam... Izgleda da treba malo tweakovati cifre da bi se prikazalo baš kako valja, ali to me je i zanimalo: način na koji to odraditi. Wink

Hvala.

Poslao: 19 Maj 2006 12:30
Idi na vrh
offline
  • Pridružio: 18 Apr 2003
  • Poruke: 342

napravis tabelu sa 5 columns (zaboravio sam kako se kaze na srpskom) Very Happy

i napravis jednu sliku ako ti je pozadina sajta bele boje, neka i ta slika bude bele boje, visina nije bitna, vazno je da sirina slike bude 50px!

i u prvu kolonu(column) u tabeli ubacis sliku, u drugu ubacis tabelu za meni, u trecu sliku, u cetvrtu ide sadrzaj, i u petu opet slika!

evo posto si se potrudio i nacrtao sliku napravio sam ti gotov code, samo copy & paste

<table width="900" border="0">   <tr>     <td width="6%" height="257"><img alt="www.tvojsajt.de" src="razmak.gif" width="50"></td>     <td width="29%" valign="top">ovde ide meni :D </td>     <td width="6%"><img src="razmak.gif" width="50" /></td>     <td width="53%" valign="top">ovde kucas sadrzaj :D:D:D </td>     <td width="6%"><img src="razmak.gif" alt="www.tvojsajt.de" width="50" /></td>   </tr> </table>

ne zaboravi da promenis www.tvojsajt.de u ime tvog sajta, i sliku da napravis i da joj das ime kao gore u sto pise "razmak.gif"

a tabela je dinamicna tako da moze da bude duga koliko ti treba Very Happy
pozdrav

MyCity » Web dizajn / HTML » CSS Layout

Ko je trenutno na forumu
 

Ukupno su 1204 korisnika na forumu :: 33 registrovanih, 6 sakrivenih i 1165 gosta   ::   [ Administrator ] [ Supermoderator ] [ Moderator ] :: Detaljnije

Najviše korisnika na forumu ikad bilo je 3466 - dana 01 Jun 2021 17:07

Korisnici koji su trenutno na forumu:
Korisnici trenutno na forumu: 357magnum, aleksmajstor, aramis s, babaroga, Ben Roj, bestguarder, Bobrock1, bojcistv, bokisha253, darcaud, Duh sa sekirom, E_Kurir, Frunze, Georgius, Krusarac, kybonacci, lord sir giga, mean_machine, Mercury, milenko crazy north, milos97, MiroslavD, mrav pesadinac, MrNo, NoOneEver Dreams, pein, proka89, samsung, Snorks, Vlada1389, wolf431, yufighter, YugoSlav