word-wrap: break-word

#1
alex2300

Posted 12 June 2011 - 09:53

Junior Member

Grup: Members
Posts: 226
Înscris: 16.04.2009

Am un tabel cu 2 coloane: prima contine o imagine si a doua un text.
Pentru text am folosit "word-wrap: break-word;" in cazul in care textul e ceva de genul "aaaaaaaaaaaaaaaaaaaaaaa ..."
Totul merge OK, dar daca adaug o imagine (in dreapta sau stanga), paragrafele care sunt afectate de word-wrap afiseaza imaginea pe un rand si textul pe alt rand.

Am atasat si o imagine:

Untitled.jpg 167.03K 50 downloads

P.S. Ce e cu verde e OK

Back to top

#2
secretalex92

Posted 13 June 2011 - 15:24

Active Member

Grup: Members
Posts: 1,496
Înscris: 28.12.2008

alex2300, on 12th June 2011, 10:53, said:

Am un tabel cu 2 coloane: prima contine o imagine si a doua un text.

De ce nu faci trei coloane, si in a 3 pui imaginea ? Sau pt coloana a 2 pui textul intr-un div, care are anumite limite, iar daca le depaseste pui word-wrap : break-word; si gata

Edited by secretalex92, 13 June 2011 - 15:25.

Back to top

#3
cnandrei

Posted 13 June 2011 - 15:40

Junior Member

Grup: Members
Posts: 30
Înscris: 19.04.2009

alex2300, on 12th June 2011, 10:53, said:

Am un tabel cu 2 coloane: prima contine o imagine si a doua un text.
Pentru text am folosit "word-wrap: break-word;" in cazul in care textul e ceva de genul "aaaaaaaaaaaaaaaaaaaaaaa ..."
Totul merge OK, dar daca adaug o imagine (in dreapta sau stanga), paragrafele care sunt afectate de word-wrap afiseaza imaginea pe un rand si textul pe alt rand.

Am atasat si o imagine:
Attachment

Untitled.jpg

P.S. Ce e cu verde e OK

Salut,

in primul rand proasta alegerea cu tabel, tag-ul <table> si in al doilea rand <table> nu stie atributul: "word-wrap: break-word" mai precis il interpreteaza eronat in sensul ca depinde de un delimitator de genul spatiu (daca vei despartii acel sir al tau de "a-uri" continuu in mai multe sirulete o sa vezi ca stie sa-ti faca wrap).
Recomandarea mea e sa foslosesti <div>-uri pentru ca acest tag stie cam orice. Am pus mai jos un script cu cele 2 metode ca sa vezi diferenta.

Spor

<!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>Untitled Document</title>
<style>
table, tr, td{ border:#F00 1px solid;
word-wrap:break-word;
	}
#wrap{
	width:300px;
	float:left;
	word-wrap:break-word;
	border:#F00 1px solid;}
img{
	background-color:#009;}
</style>
</head>

<body>
EXEMPLU CU TABEL:
<table>
<tr>
<td width="300">1111111111111111111111111111111111111111111111111111111111111111111111111111
1111</td>
<td><img src="o_imagine.jpg" alt="" width="40" height="40"/></td>
</tr>
</table>
<br />
<br />
EXEMPLU CU DIV:
<div>
<div id="wrap">
11111111111111111111111111111111111111111111111111111111111111111111111111111111
1111111
</div>
<div>
<img src="o_imagine.jpg" alt="" width="40" height="40"/>
</div>

</div>

</body>
</html>

Back to top

#4
alex2300

Posted 13 June 2011 - 15:59

Junior Member

Grup: Members
Posts: 226
Înscris: 16.04.2009

cnandrei, on 13th June 2011, 16:40, said:

Salut,

in primul rand proasta alegerea cu tabel, tag-ul <table> si in al doilea rand <table> nu stie atributul: "word-wrap: break-word" mai precis il interpreteaza eronat in sensul ca depinde de un delimitator de genul spatiu (daca vei despartii acel sir al tau de "a-uri" continuu in mai multe sirulete o sa vezi ca stie sa-ti faca wrap).
Recomandarea mea e sa foslosesti <div>-uri pentru ca acest tag stie cam orice. Am pus mai jos un script cu cele 2 metode ca sa vezi diferenta.

Spor

<!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>Untitled Document</title>
<style>
table, tr, td{ border:#F00 1px solid;
word-wrap:break-word;
	}
#wrap{
	width:300px;
	float:left;
	word-wrap:break-word;
	border:#F00 1px solid;}
img{
	background-color:#009;}
</style>
</head>

<body>
EXEMPLU CU TABEL:
<table>
<tr>
<td width="300">1111111111111111111111111111111111111111111111111111111111111111111111111111
1111</td>
<td><img src="o_imagine.jpg" alt="" width="40" height="40"/></td>
</tr>
</table>
<br />
<br />
EXEMPLU CU DIV:
<div>
<div id="wrap">
11111111111111111111111111111111111111111111111111111111111111111111111111111111
1111111
</div>
<div>
<img src="o_imagine.jpg" alt="" width="40" height="40"/>
</div>

</div>

</body>
</html>

Imi trebuie neaparat <table>. Fara el, cum as putea afisa imaginea din prima coloana? Fara table, textul trece sub imagine dupa cateva randuri.
Si oricum, nu tabelul are proprietatea "word-wrap: break-word", ci un <div> situat in <td>.
Cred ca o sa folosesc 3 coloane pana la urma.

Multumesc pentru raspunsuri!

Edited by alex2300, 13 June 2011 - 16:01.

Back to top

#5
secretalex92

Posted 13 June 2011 - 16:31

Active Member

Grup: Members
Posts: 1,496
Înscris: 28.12.2008

alex2300, on 13th June 2011, 16:59, said:

Imi trebuie neaparat <table>. Fara el, cum as putea afisa imaginea din prima coloana

Prin div-uri, mi se pare mai ok se imparti pg folosind div-uri decat tabele.

Back to top

#6
OriginalCopy

Posted 13 June 2011 - 16:31

I'm harmful, fear me please! :))

Grup: Senior Members
Posts: 27,268
Înscris: 10.08.2006

1995. Bine ai venit �n epoca de piatr� a web-ului, pe c�nd nici nu visam de "web semantic".

Acum c�nd �ncepem s�-l avem, ne facem nevoile pe el.

Da, se poate. Dar rom�nul e un petecar de fel.

Back to top

#7
alex2300

Posted 13 June 2011 - 17:30

Junior Member

Grup: Members
Posts: 226
Înscris: 16.04.2009

OriginalCopy, on 13th June 2011, 17:31, said:

1995. Bine ai venit �n epoca de piatr� a web-ului, pe c�nd nici nu visam de "web semantic".

Acum c�nd �ncepem s�-l avem, ne facem nevoile pe el.

Da, se poate. Dar rom�nul e un petecar de fel.

Pai layoutul e impartit deja prin divuri.
Eu am nevoie numai intr-un singur div de inca o impartire si am facut rapid prin tabel.

Care ar fi avantajul daca as folosi div-uri acolo in loc de <table>?

Back to top

#8
MarianG

Posted 13 June 2011 - 17:34

be that as it may

Grup: Moderators
Posts: 31,435
Înscris: 10.08.2005

dude - ai vazut cat de simplu se poate face vrei tu cu div-uri?

http://www.crunchgea...5_structure.png

Edited by MarianG, 13 June 2011 - 17:38.

Back to top

#9
cnandrei

Posted 13 June 2011 - 18:24

Junior Member

Grup: Members
Posts: 30
Înscris: 19.04.2009

Domnu meu,

niciodata dar niciodata sa nu mai folosesti combinatia dezastruoasa pe care ai ales-o (adica TABLE cu DIV sau orice alta combinatie posibila).
Ceea ce incerc sa zic si eventual sa intelegi este ca tu sa lucrezi curat. CURAT inseamana ca tu sa folosesti:
1. sa scrii cat mai putin cod;
2. sa respecti criteriile de validare W3C;
3. elemente actuale ale webdesign-ului.
Lista poate continua. N-o lua ca pe o jignire ci ca pe o lectie predata gratis.

Sa ai spor cu noile idei!

Back to top

#10
alex2300

Posted 13 June 2011 - 18:47

Junior Member

Grup: Members
Posts: 226
Înscris: 16.04.2009

OK. Multumesc tuturor

Oricum nu prea m-am axat pe design si pe html. Lucrez mai mult in PHP si de aceea mai am de lucrat cu design-ul

Back to top

Anunturi

Chirurgia endoscopică a hipofizei

"Standardul de aur" în chirurgia hipofizară îl reprezintă endoscopia transnazală transsfenoidală.

Echipa NeuroHope este antrenată în unul din cele mai mari centre de chirurgie a hipofizei din Europa, Spitalul Foch din Paris, centrul în care a fost introdus pentru prima dată endoscopul în chirurgia transnazală a hipofizei, de către neurochirurgul francez Guiot. Pe lângă tumorile cu origine hipofizară, prin tehnicile endoscopice transnazale pot fi abordate numeroase alte patologii neurochirurgicale.

www.neurohope.ro

word-wrap: break-word

#1 alex2300 Posted 12 June 2011 - 09:53

#2 secretalex92 Posted 13 June 2011 - 15:24

#3 cnandrei Posted 13 June 2011 - 15:40

#4 alex2300 Posted 13 June 2011 - 15:59

#5 secretalex92 Posted 13 June 2011 - 16:31

#6 OriginalCopy Posted 13 June 2011 - 16:31

#7 alex2300 Posted 13 June 2011 - 17:30

#8 MarianG Posted 13 June 2011 - 17:34

#9 cnandrei Posted 13 June 2011 - 18:24

#10 alex2300 Posted 13 June 2011 - 18:47

Anunturi

▶ 0 user(s) are reading this topic

Sign In

#1
alex2300

Posted 12 June 2011 - 09:53

#2
secretalex92

Posted 13 June 2011 - 15:24

#3
cnandrei

Posted 13 June 2011 - 15:40

#4
alex2300

Posted 13 June 2011 - 15:59

#5
secretalex92

Posted 13 June 2011 - 16:31

#6
OriginalCopy

Posted 13 June 2011 - 16:31

#7
alex2300

Posted 13 June 2011 - 17:30

#8
MarianG

Posted 13 June 2011 - 17:34

#9
cnandrei

Posted 13 June 2011 - 18:24

#10
alex2300

Posted 13 June 2011 - 18:47