Sign In
Create Account
Cum pot sa le aliniez (img+text)?
Last Updated: May 18 2014 10:16, Started by
colombo2003
, May 16 2014 19:16
·
0
0
#1
Posted 16 May 2014 - 19:16
|
Am o poza (format png) pe care vreau sa o folosesc ca un icon (spre exemplu cum sunt steguletele tarilor la cursul valuar). Pe care o introduc cu <img>
Si mai am doua randuri de text; pe primul sa se afiseze Minim: X iar al doilea Maxim: Y. Valorile X si Y (ca si textul de dinaintea lor) le calculez si afisez printr-un javascript. Problema mea e la afisarea in pagina a acestor trei elemente. Nu reusesc de fel. Am incercat sa pun totul intr-un div. Am incercat ca textul sa il introduc cu <p>. Am incercat si cu <span>. Am incercat chiar si cu... <table> si nimic. Fie reusesc cumva sa fac imaginea sa fie inalta cam cat cele doua randuri, dar ea imi fuge mult in stanga. Si nu reusesc sa o apropii de text. SAU, imaginea si textul se apropie, par ok, arata bine, dar imaginea e mai sus, iar textul e mai jos. Si din css, daca incerc sa dau margins sau padding la <p>-ul care contine textul si valorile numerice (am incercat si cu valori pozitive si cu valori negative in px), tot nu se intampla nimic. SAU, randul al doilea imi fuge sub poza, si se aliniaza sub marginea din stanga a pozei, si astfel textul apare "rupt" (primul rand in continuarea pozei, iar al doilea sub poza si nu sub al doilea rand, tot dupa poza). In css, am incercat in fel si chip, atat pentru div-ul mare, cat si pentru img si p, sa pun la fiecare float: left, sa pun display: block (dar am incercat si inline), text-align:center, am incercat si margini (si padding). Am pus si width:100% (ca sa nu imi mai intre ce urmeaza, ca text, dupa zona despre care vorbim ca nu reusesc sa o centrez si aliniez. Si nu stiu ce sa ii mai fac... Va rog, aveti vreun sfat de ce si cum as putea sa mai incerc? Multumiri. Codul arata cam asa: Javascript function calculeaza() {
...
...
document.write("Minim: " + min + "<br>");
document.write("Maxim " + max + "<br>");
}
...
... urmeaza declaratii de alte functii (cu sau fara parametru/ii) pentru diverse calcule, pe care le folosesc/apelez in calculeaza()
...
}
calculeaza();
Html ... <body> ... ... <div> <img... /> <script scr="..."></script> </div> ... ... </body> </html> PS. Zona in care vreau sa le afisez, este de fapt o coloana, cea mai din stanga (sub zona de antet si meniu). Ca informatii, astea nu se schimba niciodata la navifarea de la o pagina la alta. In stanga acestei coloane, este o a doua coloana (aici se schimba informatiile de la o pagina la alta, in functie de optiunile din meniu), si, si mai in dreapta, o alta coloana, identinca cu prima (ca latime si cu informatii care nu variaza). Si, ultima zona, footer-ul. Nu cred totusi ca are importanta acesta structura a site-ului cu problema reusitei de aliniere. |
Back to top
#2
Posted 16 May 2014 - 20:25
|
Eu nu prea am inteles mare lucru din ceea ce vrei tu sa faci. Poti sa fii mai concis in ceea ce doresti sa faci? Niste mazgaleli prin paint cred ca ar fi fost cu mult mai informative decat ceea ce ai incercat tu acolo sa explici.
|
#3
Posted 16 May 2014 - 20:31
|
Ai incercat si:
... <body> ... ... <div> <div> <img... /> </div> <div> <script scr="..."></script> </div> </div> ... ... </body> </html> |
#4
Posted 16 May 2014 - 21:19
|
function calculeaza() {
... document.getElementById("minim").innerHTML="Minim: " + min ; document.getElementById("maxim").innerHTML="Minim: " + max ; } <div> <img... /> <p id="minim">Minim: 3,3</p> <p id="maxim">Maxim: 2,2</p> </div> http://www.w3schools...ename=tryjs_dom Edited by pcezar, 16 May 2014 - 21:20. |
#5
Posted 16 May 2014 - 21:36
|
Un exemplu numai in HTML si CSS:
<!DOCTYPE html> <html> <head> <title>Aliniere img + text</title> <link href="style.css" rel="stylesheet"/> </head> <body> <div id="steag"> <div id="steag_img"> <img src="Images/Romania flag1.png" alt="Romania flag.png" width: "40" height: "27" /> </div> <div id="steag_text"> <span>Minim: 5</span> <span>Maxim: 15</span> </div> </div> </body> </html> #steag {
margin-top: 10px;
margin-left: 10px;
width: 200px;
height: 60px;
}
#steag_img {
float: left;
margin: 0 0 0 10px;
padding: 7px 0 0 0;
width: 60px;
height: 50px;
}
#steag_text {
float: left;
width: 89px;
height: 50px;
}
Rezultatul in cea de-a doua imagine. Attached Files
Edited by poadol, 16 May 2014 - 21:54. |
#6
Posted 16 May 2014 - 23:26
   Am incercat ambele variante, dar... Si unde si cum apelez scriptul...? am incercat sa il poun in <head>, dar degeaba. Am avut o zi grea si ma cam pregatesc de nani. Si maine e o zi, si, poate, cu mintea mai limpede, voi reusi ceva. Multumesc tuturor pentru efort si raspuns. Noapte buna SP! |
#7
Posted 16 May 2014 - 23:46
|
Pentru Javascript cum doresti: http://www.w3schools.../js_whereto.asp
|
#8
Posted 17 May 2014 - 19:51
|
Am rezolvat! Sfatul lui poadol, cu doua div-uri intr-un alt div parinte a functionat.
Am mai adus niste mici modificari, la valorile din css, dar important este ca acum arata bine. Cu toate ca text-align: center nu a functionat, ci a trebuit sa le pozitionez pe fiecare in parte. Se vede ok pe PC (IE, Chrome, Mozilla, Opera si Safari), dar, nu stiu din ce motiv, pe Android, totul este centrat, dar incalecat (partea dreapta a steagului intra pe partea din stanga a textului sau invers; deci se incaleca la mijloc). Mai sap, dar pana la urma, cumva, mi-a iesit. Multumiri tututor celor care s-au obosit sa citeasca sa imi ofere o idee/solutie. PS. Rog sa nu se inchida inca. |
#9
Posted 17 May 2014 - 22:12
|
Probabil ai dimensiuni ale imaginii prea mari pentru Android.
Cand am realizat exemplul din postul 5, am avut la inceput dimensiuni mai mari ale imaginii si o afisa incalecata cu scrisul din dreapta. Plus: Attached Files
Edited by poadol, 17 May 2014 - 22:31. |
#10
Posted 17 May 2014 - 23:25
|
Mda, nu stiu ce sa zic. Am incercat ca mi-ai zis (sa micsorez imaginea) si nu a mers...
 Merci de pont. Mai sap! |
#11
Posted 18 May 2014 - 10:16
|
Atunci este alta problema acolo, se pare, din nefericire aici gasesti greu ajutor, pe latura respectiva - Android -.
|
|
Anunturi
Bun venit pe Forumul Softpedia!
▶ 0 user(s) are reading this topic
0 members, 0 guests, 0 anonymous users
-
- Change Theme
- English
- Mark Community Read
- Termene & conditii
- Confidentialitate
- Consimtamant
- Cookies
- Help
© 2001-2023 Softpedia. All rights reserved. Softpedia® and the Softpedia logo are registered trademarks of SoftNews Net SRL.
Ora implicita a Forumului Softpedia este ora standard a Romaniei (GMT+2). Mai multe informatii →
⚠ Postarile afisate pe Forumul Softpedia reprezinta o opinie subiectiva a membrilor care le-au publicat si nu a SoftNews Net SRL.