| View previous topic :: View next topic |
| Author |
Message |
NOXX
Joined: 30 Aug 2007
Posts: 18
|
 Posted: 10.09.2007 15:35 Post subject: Postavljanje slike pomocu CSSa |
  |
|
Znaci koji je pravilan kod za postavljanje sklike s linkom pomocu CSSa?
Znaci kako cu odrediti tocnu poziciju na osi X i osi Y u pikselima i sto staviti u HEAD, a sto u BODY?
Hvala.
Zasto ovo ne radi?:
Head:
img1
{
position:absolute;
left:350px
top:200px
}
Body:
<img1 class="normal" img src="hotel1.gif" width="95" height="84" /> |
|
|
| Back to top |
|
 |
zytzagoo
mi3.crew
Joined: 25 Aug 2003
Posts: 1842
Location: Zagreb, Hrvatska
|
| Posted: 10.09.2007 17:49 Post subject: Re: Postavljanje slike pomocu CSSa |
|
|
U head ide:
| Code: | <style type="text/css">
#img1 { position:absolute; left:350px; top:200px; }
</style> |
A onda unutar <body> elementa stavis:
| Code: | | <img id="img1" class="normal" img src="hotel1.gif" width="95" height="84" /> |
Link u cijeloj prici nema veze trenutno, ako hoces da je slika link, stavis ju unutar <a> elementa.
Vjerojatno ti ne bi skodilo procitati neke od linkova navedenih u ovom topicu:
http://www.mi3dot.org/forum/viewtopic.php?t=3888 |
_________________
[+]I[+]am[+]my[+]own[+]religion[+] |
|
| Back to top |
|
|
NOXX
Joined: 30 Aug 2007
Posts: 18
|
| Posted: 10.09.2007 19:12 Post subject: |
|
|
Hvala puno.
Mozete izbrisati post.
Svakako cu procitati jos koji put. Ma toliko sam toga procitao o CSSu i HTMLu u zadnjih mjesec dana da sam ih poceo sanjati.
Sada polako izrađujem nekakvu stranicu uz pomoc literature i interneta, pa nekada ispalim kada zapnem i sve mi se pomjesa. Znam da sam na samom pocetku ali trudim se nauciti nesto novo svaki dan.
U svakom slucaju nadam se da vam nije problem odgovoriti na pokoje glupasto pitanje i pomoci pocetniku. |
|
|
| Back to top |
|
|
Jay-S
Guest
|
| Posted: 10.09.2007 20:10 Post subject: |
|
|
| NOXX wrote: | Hvala puno.
Mozete izbrisati post.
|
lol  |
|
|
| Back to top |
|
|
zytzagoo
mi3.crew
Joined: 25 Aug 2003
Posts: 1842
Location: Zagreb, Hrvatska
|
| Posted: 10.09.2007 22:52 Post subject: |
|
|
| Svaka cast na hrabrosti za postaviti pitanje, i sorry ako je reply zvucao "svisoka"... |
_________________
[+]I[+]am[+]my[+]own[+]religion[+] |
|
| Back to top |
|
|
NOXX
Joined: 30 Aug 2007
Posts: 18
|
| Posted: 11.09.2007 12:04 Post subject: |
|
|
moze jos jedno glupasto oko pozicioniranja 
Kako ovo smjestiti gdje zelim na stranici:
<iframe src="okvir.htm"></iframe>
hvala. |
|
|
| Back to top |
|
|
fun.ky
Joined: 05 Jan 2006
Posts: 365
Location: Mostar
|
| Posted: 11.09.2007 13:15 Post subject: |
|
|
pa staviš ga gdje želiš unutar html koda 
jel problem sto di ne prikaziva nikako taj iframe, ili što ga pokaziva na pogrešnom mijestu.
U svakom slučaju bilo bi dobro da postaviš html kod od stranice, zajedno sa slikom gdje bi želio da ti se prikaziva iframe |
_________________
There is no style definition for good music! |
|
| Back to top |
|
|
p4P3r
Joined: 20 Sep 2005
Posts: 656
|
| Posted: 11.09.2007 13:20 Post subject: |
|
|
Svakako ne bi bilo lose da puknes tu html kod stranice na kojoj sljakas da vidimo o cemu se zapravo radi...
Mozez napraviti div koji pomocu css-a pozicioniras i onda unutar njega ubacis ovaj dio koda. S time da odredis velicinu iframea <iframe src="okvir.html" height="150" width="150"></iframe>
HTML
<div id="iframe"> <iframe src="okvir.html"></iframe> </div>
CSS
#iframe { position: absolute; left:200px, top:200px; }
edit: jebiga, dok sam ja ovo napisao vec je stigao odgovor  |
_________________
http://www.centar-zdravlja.net // portal za zdravlje i ljepotu |
|
| Back to top |
|
|
NOXX
Joined: 30 Aug 2007
Posts: 18
|
| Posted: 11.09.2007 14:29 Post subject: |
|
|
evo ovo bi trebala postati prva stranica. Nisam jos stavio linkove na buttone i ostalo nego sam prvo htio da napravim da izgleda dobro, pa da je nakon toga napravim da funkcionira. 
<HTML>
<HEAD>
<TITLE>turizam</TITLE>
<META NAME="description" CONTENT="">
<META NAME="keywords" CONTENT="">
<meta http-equiv="Content-Type" content= "text/html; charset=windows-1250">
<style type="text/css">
h1.pos_abs
{
position:absolute;
left:30px;
top:200px
}
h2.pos_abs
{
position:absolute;
left:650px;
top:450px
}
h3.pos_abs
{
position:absolute;
left:30px;
top:680px
}
#iframe { position: absolute; left:800px, top:300px; }
#img1 { position:absolute; left:230px; top:200px; }
#img2 { position:absolute; left:334px; top:200px; }
#img3 { position:absolute; left:230px; top:294px; }
#img4 { position:absolute; left:438px; top:200px; }
#img5 { position:absolute; left:542px; top:200px; }
#img6 { position:absolute; left:646px; top:200px; }
#img7 { position:absolute; left:334px; top:294px; }
#img8 { position:absolute; left:438px; top:294px; }
#img9 { position:absolute; left:542px; top:294px; }
#img10 { position:absolute; left:646px; top:294px; }
#img11 { position:absolute; left:100px; top:450px; }
#img12 { position:absolute; left:204px; top:450px; }
#img13 { position:absolute; left:100px; top:544px; }
#img14 { position:absolute; left:308px; top:450px; }
#img15 { position:absolute; left:412px; top:450px; }
#img16 { position:absolute; left:516px; top:450px; }
#img17 { position:absolute; left:204px; top:544px; }
#img18 { position:absolute; left:308px; top:544px; }
#img19 { position:absolute; left:412px; top:544px; }
#img20 { position:absolute; left:516px; top:544px; }
#img21 { position:absolute; left:230px; top:695px; }
#img22 { position:absolute; left:334px; top:695px; }
#img23 { position:absolute; left:230px; top:789px; }
#img24 { position:absolute; left:438px; top:695px; }
#img25 { position:absolute; left:542px; top:695px; }
#img26 { position:absolute; left:646px; top:695px; }
#img27 { position:absolute; left:334px; top:789px; }
#img28 { position:absolute; left:438px; top:789px; }
#img29 { position:absolute; left:542px; top:789px; }
#img30 { position:absolute; left:646px; top:789px; }
</STYLE>
</HEAD>
<BODY>
<CENTER><img src="logo.gif" /></CENTER>
<CENTER><img src="butpovijest.gif" />
<img src="butcijene.gif" />
<img src="butkarta.gif" />
<img src="butkupovina.gif" />
<img src="butznamenitosti.gif" />/CENTER>
<h1 class="pos_abs"><img src="oblak1.gif" /></h1>
<h2 class="pos_abs"><img src="devil1111.gif" /></h2>
<h3 class="pos_abs"><img src="zvijezda1.gif" /></h3>
<img id="img1" class="normal" img src="hotel1.jpg" width="100" height="90" IMG BORDER="2" />
<img id="img2" class="normal" img src="hotel2.jpg" width="100" height="90" IMG BORDER="2" />
<img id="img3" class="normal" img src="hotel3.jpg" width="100" height="90" IMG BORDER="2" />
<img id="img4" class="normal" img src="hotel4.jpg" width="100" height="90" IMG BORDER="2" />
<img id="img5" class="normal" img src="hotel5.jpg" width="100" height="90" IMG BORDER="2" />
<img id="img6" class="normal" img src="hotel6.jpg" width="100" height="90" IMG BORDER="2" />
<img id="img7" class="normal" img src="hotel7.jpg" width="100" height="90" IMG BORDER="2" />
<img id="img8" class="normal" img src="hotel8.jpg" width="100" height="90" IMG BORDER="2" />
<img id="img9" class="normal" img src="hotel9.jpg" width="100" height="90" IMG BORDER="2" />
<img id="img10" class="normal" img src="hotel10.jpg" width="100" height="90" IMG BORDER="2" />
<img id="img11" class="normal" img src="klub1.jpg" width="100" height="90" IMG BORDER="2" />
<img id="img12" class="normal" img src="klub2.jpg" width="100" height="90" IMG BORDER="2" />
<img id="img13" class="normal" img src="klub3.jpg" width="100" height="90" IMG BORDER="2" />
<img id="img14" class="normal" img src="klub4.jpg" width="100" height="90" IMG BORDER="2" />
<img id="img15" class="normal" img src="klub5.jpg" width="100" height="90" IMG BORDER="2" />
<img id="img16" class="normal" img src="klub6.jpg" width="100" height="90" IMG BORDER="2" />
<img id="img17" class="normal" img src="klub7.jpg" width="100" height="90" IMG BORDER="2" />
<img id="img18" class="normal" img src="klub8.jpg" width="100" height="90" IMG BORDER="2" />
<img id="img19" class="normal" img src="klub9.jpg" width="100" height="90" IMG BORDER="2" />
<img id="img20" class="normal" img src="klub10.jpg" width="100" height="90" IMG BORDER="2" />
<img id="img21" class="normal" img src="apart1.jpg" width="100" height="90" IMG BORDER="2" />
<img id="img22" class="normal" img src="apart2.jpg" width="100" height="90" IMG BORDER="2" />
<img id="img23" class="normal" img src="apart3.jpg" width="100" height="90" IMG BORDER="2" />
<img id="img24" class="normal" img src="apart4.jpg" width="100" height="90" IMG BORDER="2" />
<img id="img25" class="normal" img src="apart5.jpg" width="100" height="90" IMG BORDER="2" />
<img id="img26" class="normal" img src="apart6.jpg" width="100" height="90" IMG BORDER="2" />
<img id="img27" class="normal" img src="apart7.jpg" width="100" height="90" IMG BORDER="2" />
<img id="img28" class="normal" img src="apart8.jpg" width="100" height="90" IMG BORDER="2" />
<img id="img29" class="normal" img src="apart9.jpg" width="100" height="90" IMG BORDER="2" />
<img id="img30" class="normal" img src="apart10.jpg" width="100" height="90" IMG BORDER="2" />
<iframe src="okvir.html" height="150" width="150">
-----------------------------------------------------------------------------------------------------------
.....Frame se pojavljuje ali odma uz lijevi rub a ne gdje bi trebao biti ( left:800px, top:300px; |
|
|
| Back to top |
|
|
p4P3r
Joined: 20 Sep 2005
Posts: 656
|
| Posted: 11.09.2007 16:17 Post subject: |
|
|
Hmmmm...
Prvo i osnovno, nema potrebe da za svaku sliku radis poseban css!
Drugo, mozes vrlo jednostavno napraviti poseban css dokument (moj.css) u koji ubacis kod. CSS pozoves tako da u head stavis | Code: | | <link rel="stylesheet" href="moj.css" type="text/css"> |
U taj moj.css mozes ubaciti i sve ostale stilove, u tvom slucaju h1, h2 i h3 koje isto tako mozes svesti u jedan stil...
CSS dokument naravno mora biti u root folderu.
Za slike napravi jedan css class i to;
| Code: | | .slika { position:static; margin:7px; border:2px solid #BROJBOJE;} |
U htmlu onda napravis | Code: | | <img src="hotel1.jpg" class="slika" width="100" height="90" /> |
Slike mozes cropati na dimenziju 100x90 i obrisati ovaj visak <width="100" height="90">, cime ces dodatno smanjiti velicinu dokumenta.
S ovim svime ces postici da je razmak izmedju slika 7px u svim smjerovima (ako sam dobro izracunao, razmak si stavljao od 14px) i da svaka ima border od 2px |
_________________
http://www.centar-zdravlja.net // portal za zdravlje i ljepotu |
|
| Back to top |
|
|
fun.ky
Joined: 05 Jan 2006
Posts: 365
Location: Mostar
|
| Posted: 11.09.2007 21:47 Post subject: |
|
|
hm.... 
da ti nebi html kod sredjivao samo cu ti reci da ti je problem kod pozicioniranja iframe-a što poslije "left: 800px" imaš "," (zarez) umjesto ";" (tačka zarez)
znači samo stavi
| Code: | #iframe {
position: absolute;
left: 800px;
top: 300px;
} |
i to je to što se tiče pozicioniranja iframe-a, a inače bi trebao promjenit cijeli pristup prikazivanju slika i ovo absolutno pozicioniranje ti nikako netreba, barem ne ovako kako ga koristiš.
Poz |
_________________
There is no style definition for good music! |
|
| Back to top |
|
|
|
Forum FAQ
Search
Memberlist
Forum ignore list
Register
Profile
Log in to check your private messages
Log in
