DevProTalk

Forumi IT profesionalaca
web development, web design, e-business, SEO


Idite nazad   DevProTalk > Web development i web aplikacije > (X)HTML, JavaScript, DHTML, XML, CSS
Želite da se reklamirate ekskluzivno na ovoj poziciji? Javite se

(X)HTML, JavaScript, DHTML, XML, CSS Client scripting tehnologije, Dynamic HTML, Cascading Stylesheets, XML i standardi

Odgovori
 
Alati teme Način prikaza
Staro 28. 02. 2010.   #1
mb_sa
profesionalac
Qualified
 
Datum učlanjenja: 19.05.2007
Poruke: 123
Hvala: 13
3 "Hvala" u 3 poruka
mb_sa is on a distinguished road
Default 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>
mb_sa je offline   Odgovorite uz citat
Staro 28. 02. 2010.   #2
3banchi
branislav mandic mando
Wrote a book
 
Avatar 3banchi
 
Datum učlanjenja: 30.10.2009
Lokacija: NS
Poruke: 1.241
Hvala: 261
486 "Hvala" u 189 poruka
3banchi ima spektakularnu auru3banchi ima spektakularnu auru3banchi ima spektakularnu auru3banchi ima spektakularnu auru3banchi ima spektakularnu auru
Default

""-75px"" ...izbaci (-) minus
__________________
...
Ej, živote, teško ovo jebote,
mani me se živote, ti ga nabijem!
3banchi je offline   Odgovorite uz citat
Staro 28. 02. 2010.   #3
mb_sa
profesionalac
Qualified
 
Datum učlanjenja: 19.05.2007
Poruke: 123
Hvala: 13
3 "Hvala" u 3 poruka
mb_sa is on a distinguished road
Default

^ nije rijesilo problem. samo napravi ramzak od 75px od dna teksta do vrha slike.
mb_sa je offline   Odgovorite uz citat
Staro 28. 02. 2010.   #4
ivanhoe
Ivan Dilber
Sir Write-a-Lot
 
Avatar ivanhoe
 
Datum učlanjenja: 18.10.2005
Lokacija: Bgd
Poruke: 5.320
Hvala: 104
2.344 "Hvala" u 583 poruka
ivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svima
Pošaljite poruku preko Skype™ za ivanhoe
Default

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.
ivanhoe je offline   Odgovorite uz citat
Staro 28. 02. 2010.   #5
3banchi
branislav mandic mando
Wrote a book
 
Avatar 3banchi
 
Datum učlanjenja: 30.10.2009
Lokacija: NS
Poruke: 1.241
Hvala: 261
486 "Hvala" u 189 poruka
3banchi ima spektakularnu auru3banchi ima spektakularnu auru3banchi ima spektakularnu auru3banchi ima spektakularnu auru3banchi ima spektakularnu auru
Default

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.
3banchi je offline   Odgovorite uz citat
Staro 28. 02. 2010.   #6
mb_sa
profesionalac
Qualified
 
Datum učlanjenja: 19.05.2007
Poruke: 123
Hvala: 13
3 "Hvala" u 3 poruka
mb_sa is on a distinguished road
Default

@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.
mb_sa je offline   Odgovorite uz citat
Staro 28. 02. 2010.   #7
ivanhoe
Ivan Dilber
Sir Write-a-Lot
 
Avatar ivanhoe
 
Datum učlanjenja: 18.10.2005
Lokacija: Bgd
Poruke: 5.320
Hvala: 104
2.344 "Hvala" u 583 poruka
ivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svima
Pošaljite poruku preko Skype™ za ivanhoe
Default

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.
ivanhoe je offline   Odgovorite uz citat
Staro 28. 02. 2010.   #8
mb_sa
profesionalac
Qualified
 
Datum učlanjenja: 19.05.2007
Poruke: 123
Hvala: 13
3 "Hvala" u 3 poruka
mb_sa is on a distinguished road
Default

^ 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.
mb_sa je offline   Odgovorite uz citat
Staro 04. 03. 2010.   #9
Mladjo
Mladen Milentijevic
Professional
 
Avatar Mladjo
 
Datum učlanjenja: 20.06.2007
Lokacija: Sweden
Poruke: 224
Hvala: 43
21 "Hvala" u 21 poruka
Mladjo is on a distinguished road
Default

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.
__________________
Mladen Milentijevic
Mladjo je offline   Odgovorite uz citat
Staro 04. 03. 2010.   #10
dejanr
Dejan Ranisavljevic
Certified
 
Datum učlanjenja: 07.06.2005
Lokacija: Novi Sad
Poruke: 87
Hvala: 12
10 "Hvala" u 6 poruka
dejanr is on a distinguished road
Pošaljite ICQ poruku za dejanr Pošaljite poruku preko MSN za dejanr
Default

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>
#text p:last-child mozes da zamenis klasom za taj poslednji paragraf jer ti last-child nece raditi u IE-u, good luck
dejanr je offline   Odgovorite uz citat
Odgovori



Pravila pisanja
Možete ne započinjati nove teme
Možete ne slati odgovore
Možete ne slati priloge
Možete ne izmeniti svoje poruke
vB kôd je Uključen
Smajliji su Uključen
[IMG] kod je Uključen
HTML kôd je Isključen
Pogledajte forum

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


Vreme je GMT +2. Trenutno vreme je 01:23.


Powered by vBulletin® Verzija 3.6.8
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Copyright © DevProTalk. All Rights Reserved.
Mišljenja, saveti, izjave, ponude ili druge informacije ili sadržaji nastali na Sajtu su vlasništvo onoga ko ih je kreirao, a ne DevProTalk.com, tako da ne morate da se oslanjate na njih.
Autori poruka su jedini odgovorni za ovakve sadržaje. DevProTalk.com ne garantuje tačnost, kompletnost ili upotrebnu vrednost informacija, stavova, saveta ili datih izjava. Ne postoje uslovi pod kojima bi mi bili odgovorni za štetu ili gubitak koji je posledica bilo čijeg oslanjanja na nepouzdane informacije, ili bilo kakve informacije nastale kroz komunikaciju između registrovanih članova.
Web sajt može sadržavati linkove na druge web sajtove na Internetu ili neke druge sadržaje. Ne kontrolišemo niti podržavamo te druge web sajtove, niti smo pregledali bilo kakve sadržaje na takvim sajtovima. Mi nećemo biti odgovorni za legalnost, tačnost ili prikladnost bilo kog sadržaja, oglasa, proizvoda, usluga ili informacije lociranim na ili distribuiranih kroz druge web sajtove, niti za bilo kakvu štetu nastalu kao posledica takvih informacija. DevProTalk.com drži i čuva druga prava vlasništva na web sajtu. Web sajt sadrže materijale zaštićene copyright-om, zaštitne znakove i druge informacije o pravu vlasništva ili softver. Članovi mogu poslatu informacije zaštićene pravima vlasništva njihovih nosilaca i ona ostaju zaštićena bez obzira da li su oni koji prenose te informacije to naveli ili ne. Osim informacija koje su u javnom vlasništvu ili za koje dobijete dozvolu, nemate pravo da kopirate, modifikujete ili na bilo koji način menjate, objavljujete, prenosite, distribuirate, izvršavate, prikazujete ili prodajte bilo koju informaciju zaštićenu pravima vlasništva. Slanjem informacija ili sadržaja na bilo koji deo DevProTalk.com, Vi automatski dozvoljavate i predstavljate garanciju da imate pravo da dozvolite DevProTalk.com ili članovima DevProTalk.com bespovratnu, kontinualnu, neograničenu, globalnu dozvolu da koriste, kopiraju, izvršavaju, prikazuju i distribuiraju takve informacije i sadržaje i da iz takvih sadžaja koriste bilo koji deo u bilo koje svrhe, kao i pravo i dozvolu da koriste gore navedene sadržaje. Svi zaštitni znakovi (trademarks), logotipi, oznake usluga, firme ili imena proizvoda koji se pominju na ovom web sajtu su vlasništvo kojim raspolažu njihovi vlasnici.