DevProTalk

DevProTalk (http://www.devprotalk.com/index.php)
-   (X)HTML, JavaScript, DHTML, XML, CSS (http://www.devprotalk.com/forumdisplay.php?f=8)
-   -   Pozicioniranje slike u odnosu na tekst (http://www.devprotalk.com/showthread.php?t=8495)

mb_sa 28. 02. 2010. 13:04

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>


3banchi 28. 02. 2010. 13:24

""-75px"" ...izbaci (-) minus

mb_sa 28. 02. 2010. 13:29

^ nije rijesilo problem. samo napravi ramzak od 75px od dna teksta do vrha slike.

ivanhoe 28. 02. 2010. 13:54

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

3banchi 28. 02. 2010. 13:59

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!

mb_sa 28. 02. 2010. 14:07

@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.

ivanhoe 28. 02. 2010. 16:08

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.

mb_sa 28. 02. 2010. 16:19

^ 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.

Mladjo 04. 03. 2010. 19:11

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.

dejanr 04. 03. 2010. 20:12

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 :)


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

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.