Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Poti receptiona semnal de la mai ...

Cabluri HDMI 2.1 de 4m-5m care sa...

zoom comparat cu Google Meet

Monitor/Display wireless?
 Chestie ciudata

De la un proiect scris in python ...

Audi A4 B9 quattro 190 CP!

Tepari la pariuri pe TikTok
 Banca imi cere justificativ fondu...

schema pcb ELECTRA CIM150 PAS

Probleme stomac

Sfat achizitie bicicleta oras
 Canalele Sky Showtime 1 și S...

Recomandare anvelope lexus rx

Extindere rețea wireless int...

Configuratie PC
 

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,312
  • Î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: 818
  • Î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,312
  • Î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,312
  • Î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,312
  • Î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

Neurochirurgie minim invazivă Neurochirurgie minim invazivă

"Primum non nocere" este ideea ce a deschis drumul medicinei spre minim invaziv.

Avansul tehnologic extraordinar din ultimele decenii a permis dezvoltarea tuturor domeniilor medicinei. Microscopul operator, neuronavigația, tehnicile anestezice avansate permit intervenții chirurgicale tot mai precise, tot mai sigure. Neurochirurgia minim invazivă, sau prin "gaura cheii", oferă pacienților posibilitatea de a se opera cu riscuri minime, fie ele neurologice, infecțioase, medicale sau estetice.

www.neurohope.ro

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