|
(X)HTML, JavaScript, DHTML, XML, CSS Client scripting tehnologije, Dynamic HTML, Cascading Stylesheets, XML i standardi |
|
Alati teme | Način prikaza |
|
28. 02. 2010. | #1 |
profesionalac
Qualified
Datum učlanjenja: 19.05.2007
Poruke: 123
Hvala: 13
3 "Hvala" u 3 poruka
|
Pozicioniranje slike u odnosu na tekst
Zdravo.
Imam html strkuturu kao sto je ispod navedeno. Tekst se izvlaci iz baze (razlicita duzina), a na dnu se nalazi jpg slika koja zapravao predstavlja print iconu ciji se html nalazi u template fajlu, dakle ne unosi se zajedno sa tekstom, naravno. Sa obzirom da je tesko da obasnim sta tacno zelim da postignem, najbolje da pogledate slike. Prva slika pokazuje sta sam uspio da uradim i koji je problem. (slika ide preko teksta, zapravo nije zauzela svoj "prostor" i pomakla tekst u desnu stranu). Druga slika je ono sto želim da postignem. Zahvaljujem na pomoci. 1. http://img220.imageshack.us/img220/8494/trenutno.jpg 2. http://img90.imageshack.us/img90/853...jepotrebno.jpg Kôd:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test</title> </head> <body> <div id="text"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices lectus in dolor luctus nec molestie mauris aliquet. Nunc tincidunt massa sit amet metus tempus viverra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec sem sit amet nunc luctus laoreet et semper sapien. Nunc ac dolor et tellus aliquam euismod in sodales turpis. Pellentesque aliquet nisi et tellus congue tincidunt auctor massa ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget nisi mauris, eu euismod diam. Phasellus viverra odio non elit auctor egestas. Integer sed est tortor, id suscipit nibh. Nullam elementum tortor id neque mattis ut ultricies elit lobortis. Fusce quis purus risus. Pellentesque elementum ante eget elit mattis quis fringilla tellus tincidunt. Cras adipiscing tristique interdum. Curabitur quis lacus nec massa fermentum semper. Praesent nisl enim, semper in rutrum at, suscipit et nisl. Pellentesque quis mi nec purus faucibus consectetur. </p> <p> Integer in suscipit purus. Integer arcu lorem, dapibus quis vehicula posuere, vestibulum non leo. Etiam euismod iaculis ultrices. Sed semper neque vitae arcu varius sagittis. Proin tempor risus adipiscing turpis facilisis non pulvinar diam rutrum. Phasellus vitae sem ligula. Aliquam eleifend, tellus vel hendrerit dapibus, urna neque posuere nisi, id rhoncus metus massa eu massa. Pellentesque congue ullamcorper suscipit. Quisque vitae dictum augue. Nulla ut odio dui, ut tempor metus. Nam facilisis hendrerit magna, ac dignissim lacus facilisis at. Proin imperdiet mollis dolor, non pharetra nisi fermentum quis. Suspendisse cursus sagittis vestibulum. Aenean id tortor ligula. </p> <p> Aliquam erat volutpat. Fusce gravida dignissim ipsum ac feugiat. Aenean luctus turpis augue, vel vestibulum orci. Integer bibendum semper enim vitae interdum. Fusce consequat, augue sed tincidunt consequat, nibh orci tristique metus, sit amet convallis ipsum felis eu dui. Duis ac lacus quis tortor lacinia ultricies vitae quis velit. Nunc in lacus nisl, eget iaculis felis. Morbi interdum, purus vel dapibus accumsan, sem quam ultrices quam, vel commodo metus dui ut velit. Vestibulum sit amet ligula a est faucibus iaculis quis ac eros. Nulla facilisi. </p> </div> <div style="margin-top:-75px; float:left; width:50px; height:50px; position:relative; z-index:100"><img src="images/print-icon.jpg" alt="" width="50" height="50" /></div> </body> </html> |
28. 02. 2010. | #2 |
branislav mandic mando
Wrote a book
Datum učlanjenja: 30.10.2009
Lokacija: NS
Poruke: 1.241
Hvala: 261
486 "Hvala" u 189 poruka
|
""-75px"" ...izbaci (-) minus
__________________
... Ej, živote, teško ovo jebote, mani me se živote, ti ga nabijem! |
28. 02. 2010. | #3 |
profesionalac
Qualified
Datum učlanjenja: 19.05.2007
Poruke: 123
Hvala: 13
3 "Hvala" u 3 poruka
|
^ nije rijesilo problem. samo napravi ramzak od 75px od dna teksta do vrha slike.
|
28. 02. 2010. | #4 |
Ivan Dilber
Sir Write-a-Lot
|
stavi margin-bottom, tako da text ne moze da se prelomi ispod. A ovaj margin-top ti ne treba, taj razmak bolje regulisi preko stila za <p>, da bi bio siguran da je ujednacen
__________________
Leadership is the art of getting people to want to do what you know must be done. |
28. 02. 2010. | #5 |
branislav mandic mando
Wrote a book
Datum učlanjenja: 30.10.2009
Lokacija: NS
Poruke: 1.241
Hvala: 261
486 "Hvala" u 189 poruka
|
Hmm...ne znam kako to funkcionise da ti je slika iz template a tekst iz baze...Ta slika je deo templeta?
Obicno i jedno i drugo treba da ide iz baze ako je sadrzaj u pitanju. Ali vidim da za image nisu odredjene sve margine top, right, bottom, left sto se obicno cini kad ga zoves iz baze. npr: style"=margin: 5px 10px 5px 10px; float left... Edit: aha, ukapirao sam...ikona iz template!
__________________
... Ej, živote, teško ovo jebote, mani me se živote, ti ga nabijem! Poslednja izmena od 3banchi : 28. 02. 2010. u 14:02. |
28. 02. 2010. | #6 |
profesionalac
Qualified
Datum učlanjenja: 19.05.2007
Poruke: 123
Hvala: 13
3 "Hvala" u 3 poruka
|
@3banchi
da, ikona je iz template. bukvalno print icona. @ivanhoe mislim da te nisam najbolje shvatio, prvnestveno ovaj dio da mi ne treba margin-top i da stavim stil za p tag (koji mozda i nekada nece biti, ako onaj ko bude unosio bude korstio br tag (shift+enter u editoru)). stavljao sam margin-bottom, nazalost ne rjesava mi problem. hvala obojici na ucescu i dosdasnjoj pomoci. |
28. 02. 2010. | #7 |
Ivan Dilber
Sir Write-a-Lot
|
aaaa, nisam dobro pogledao primer, tebi slika ide preko texta? ja sam mislio da se ne prelama lepo ispod..
moraces da stavis sliku ispred texta da bi floating radio normalno. Pri tome nikako neces moci da postignes ovo sto hoces da ti text budeo ceo u jednom delu (pretpostavljam da je to text iz nekog CMS-a, posto kazes da ne znas kakav je), a da se slika nadje u sredini. da bi to uradio moras da ukljucis malo programiranja: ili da prilikom generisaja strane ubacis sliku gde treba (npr. odbrojis 1000 karaktera texta, pa ubacis sliku, ili nadjes 2. <p> tag pa stavis ispred njega, ili tako nesto), ili da koristis javascript, kojim ces opet da uradis istu foru, da sliku ubacis gde treba.
__________________
Leadership is the art of getting people to want to do what you know must be done. |
28. 02. 2010. | #8 |
profesionalac
Qualified
Datum učlanjenja: 19.05.2007
Poruke: 123
Hvala: 13
3 "Hvala" u 3 poruka
|
^ i meni to izgleda kao jedino rješenje, samo sto kakav ce tekst biti ne znam. ova ikona bi uvijek trebala da bude na dnu teksta. nisam siguran da cu moci pronaci pravilo gdje da uvijek smjestam ikonu.
hvala. |
04. 03. 2010. | #9 |
Mladen Milentijevic
Professional
Datum učlanjenja: 20.06.2007
Lokacija: Sweden
Poruke: 224
Hvala: 43
21 "Hvala" u 21 poruka
|
Zainteresovalo me ovo pitanje i evo vec nekoliko dana odvojim po malo vremena da probam da ga resim ali bezuspesno. Ako dodjes do resenja na ovaj html markup molim te postavi to resenje ovde.
|
04. 03. 2010. | #10 |
Dejan Ranisavljevic
Certified
|
inace se to radi kao sto ivanhoe rece, tebi sto predstoji je jedino neki hack ako hoces da zadrzis takvu semanticnost, probaj ovo:
Kôd:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test</title> <style> #text p:last-child { margin-left: 60px; } #image { margin-top: -75px; } </style> </head> <body> <div id="text"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices lectus in dolor luctus nec molestie mauris aliquet. Nunc tincidunt massa sit amet metus tempus viverra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec sem sit amet nunc luctus laoreet et semper sapien. Nunc ac dolor et tellus aliquam euismod in sodales turpis. Pellentesque aliquet nisi et tellus congue tincidunt auctor massa ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget nisi mauris, eu euismod diam. Phasellus viverra odio non elit auctor egestas. Integer sed est tortor, id suscipit nibh. Nullam elementum tortor id neque mattis ut ultricies elit lobortis. Fusce quis purus risus. Pellentesque elementum ante eget elit mattis quis fringilla tellus tincidunt. Cras adipiscing tristique interdum. Curabitur quis lacus nec massa fermentum semper. Praesent nisl enim, semper in rutrum at, suscipit et nisl. Pellentesque quis mi nec purus faucibus consectetur. </p> <p> Integer in suscipit purus. Integer arcu lorem, dapibus quis vehicula posuere, vestibulum non leo. Etiam euismod iaculis ultrices. Sed semper neque vitae arcu varius sagittis. Proin tempor risus adipiscing turpis facilisis non pulvinar diam rutrum. Phasellus vitae sem ligula. Aliquam eleifend, tellus vel hendrerit dapibus, urna neque posuere nisi, id rhoncus metus massa eu massa. Pellentesque congue ullamcorper suscipit. Quisque vitae dictum augue. Nulla ut odio dui, ut tempor metus. Nam facilisis hendrerit magna, ac dignissim lacus facilisis at. Proin imperdiet mollis dolor, non pharetra nisi fermentum quis. Suspendisse cursus sagittis vestibulum. Aenean id tortor ligula. </p> <p> Aliquam erat volutpat. Fusce gravida dignissim ipsum ac feugiat. Aenean luctus turpis augue, vel vestibulum orci. Integer bibendum semper enim vitae interdum. Fusce consequat, augue sed tincidunt consequat, nibh orci tristique metus, sit amet convallis ipsum felis eu dui. Duis ac lacus quis tortor lacinia ultricies vitae quis velit. Nunc in lacus nisl, eget iaculis felis. Morbi interdum, purus vel dapibus accumsan, sem quam ultrices quam, vel commodo metus dui ut velit. Vestibulum sit amet ligula a est faucibus iaculis quis ac eros. Nulla facilisi. </p> </div> <div id="image"><img src="images/print-icon.jpg" alt="" width="50" height="50" /></div> asdas ads </body> </html> |
|
|
Slične teme | ||||
Tema | Početna poruka teme | Forum | Odgovori | Poslednja poruka |
IT prednosti ex-Jugoslavije u odnosu na Istocnu Evropu i Indiju na globalnom trzistu | mungos | e-Business | 41 | 24. 10. 2010. 13:10 |
Tekst poslije slike u novi red... (ajde da se malo blamiram) | blackshtef | Sva početnička pitanja | 8 | 01. 07. 2008. 18:35 |
Pozicioniranje layera | Tane | (X)HTML, JavaScript, DHTML, XML, CSS | 10 | 26. 11. 2007. 01:25 |
Pozicioniranje na pretrazivacima | rookey | Sva početnička pitanja | 8 | 18. 08. 2007. 22:12 |
css pozicioniranje div-a | Tane | Sva početnička pitanja | 2 | 07. 08. 2007. 00:12 |