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: 12550
  • 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: 12550
  • 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 [Link mogu videti samo ulogovani korisnici] 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 1846 korisnika na forumu :: 72 registrovanih, 12 sakrivenih i 1762 gosta   ::   [ Administrator ] [ Supermoderator ] [ Moderator ] :: Detaljnije

Najviše korisnika na forumu ikad bilo je 6018 - dana 19 Dec 2025 13:41

Korisnici koji su trenutno na forumu:
Korisnici trenutno na forumu: 015, 10x10.9, 9k38, ALEKSICMILE, aleph_one, B61, Ba4e, Bozjidar87, Cirkon, darionis, Darth Wader, dekan.m, Delta976, Despot Đurađ, DezurniOperativni, dmarx1, DonRumataEstorski, dukajov, Dzuki, ElvisP, FileFinder, Georgius, goxin, goxsys, Hans Gajger, Hardenberg, Jager715510, Jaz, jeen yuhs, Jezekijel, Jovan1983, Klonfer83, kubura91, Laluvr, LostInSpaceandTime, Manjane, MarkoW, Maruti, Matija, mercedesamg, Mercury, MIKI63, Milovan Dinic, milutin134, Mirage 2000N, mnn2, moldway, NikMilitari, Nobunaga, nobutado, opt1, Orijen, Paklenica, peradetlić, Povratak1912, proka89, raster12, Resad76, rodoljub, sap, saputnik plavetnila, savaskytec, Shajlok, Stanlio, Uros Cuore Sportivo, vathra, Vatreni Zmaj, vidra1, VJ, Walkers, wizzardone, zeo