Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Info Coronavirus/Vaccinare vs Fake News

TRUMP: Un vis american -2017

Ozempic

Sectii ale politiei chineze in Ro...
 Viteza net Wifi de 5 ori mai mica...

Alegere cablu tv

2l combustibil plafonat in Ungaria?

Recomandare TV Oled-Led
 Rabla pentru electrocasnice si pr...

The SKA Project(Square Kilometre ...

Sfat achiziție bicicleta

Samsung Galaxy Tab S6 - Chrome nu...
 Intrebare despre pizza, marime si...

Recomandare televizor

Internet fix orange sau Vodafone.

Puls mare doar noaptea?
 

Cum pot sa le aliniez (img+text)?

- - - - -
  • Please log in to reply
10 replies to this topic

#1
colombo2003

colombo2003

    Senior Member

  • Grup: Senior Members
  • Posts: 6,310
  • Înscris: 16.07.2008
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.

#2
florin011

florin011

    Active Member

  • Grup: Members
  • Posts: 1,042
  • Înscris: 30.08.2013
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
poadol

poadol

    Guru Member

  • Grup: Senior Members
  • Posts: 14,104
  • Înscris: 13.12.2010
Ai incercat si:

...
<body>
...
...
<div>
 <div>
 <img... />
 </div>
 <div> 
 <script scr="..."></script>
 </div>
</div>
...
...
</body>
</html>




#4
pcezar

pcezar

    Member

  • Grup: Members
  • Posts: 791
  • Înscris: 21.08.2005
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
poadol

poadol

    Guru Member

  • Grup: Senior Members
  • Posts: 14,104
  • Înscris: 13.12.2010
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
colombo2003

colombo2003

    Senior Member

  • Grup: Senior Members
  • Posts: 6,310
  • Înscris: 16.07.2008
Posted Image Posted Image Posted Image

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
poadol

poadol

    Guru Member

  • Grup: Senior Members
  • Posts: 14,104
  • Înscris: 13.12.2010
Pentru Javascript cum doresti: http://www.w3schools.../js_whereto.asp

#8
colombo2003

colombo2003

    Senior Member

  • Grup: Senior Members
  • Posts: 6,310
  • Înscris: 16.07.2008
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
poadol

poadol

    Guru Member

  • Grup: Senior Members
  • Posts: 14,104
  • Înscris: 13.12.2010
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
colombo2003

colombo2003

    Senior Member

  • Grup: Senior Members
  • Posts: 6,310
  • Înscris: 16.07.2008
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
poadol

poadol

    Guru Member

  • Grup: Senior Members
  • Posts: 14,104
  • Înscris: 13.12.2010
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

Forumul Softpedia foloseste "cookies" pentru a imbunatati experienta utilizatorilor Accept
Pentru detalii si optiuni legate de cookies si datele personale, consultati Politica de utilizare cookies si Politica de confidentialitate