HTML/CSS - imagine si text in acelasi rand

sal

sunt in curs de invatare CSS/HTML, deci incep cu lucruruile elementare, cum ar fi sa creez un simplu site in mod manual, scriind textul intr-un editor de text simplu gen gedit
deci fara ajutorul instrumentelor soft mai evoluate, cu GUI.

in screenshot-ul atasat, se vede o simpla pagina web cu 4 elemente principale:
1) mult text simplu (lorem ipsum) - placeholder pt informatie si text
2) un link catre site-ul CentOS  (e primul sus, cu logo-ul CentOS)
3) o imagine (png) cu Linux TUX  (cea cu fundal gri, pinguinul mare), are contur albastru inchis
4) o casuta cu contur albastru deschis, cu niste linkuri in ea, numita "links of interest"  (cea cu linkurile catre Linux Mint, Google, CentOS).

Pagina e un singur document .xhtml scris in gedit.
Controlul CSS e realizat printr-o foaie de still externa numita myStyle.css si linkuita in documentul html prin elementul link:

Quote

Am atasat si foaia .css, ca sa vedeti codul CSS.

Portiunea numita "special" este pentru elementul nr. 4 de sus (acele linkuri succesive, cu contur albastru deschis).
Portiunea numita "tux" este pt elementul nr. 3 de mai sus (pinguinul mare, cu contur albastru inchis).

Apoi, in documentul html insusi, am utilizat <div> ... </div> pentru fiecare in parte, respectiv pt pinguin si pt casuta cu linkuri, si am invocat acele declaratii.

O redau si aici, daca nu vreti sa deschideti atasamentul:

Quote

Dilema: se poate ca imaginea pinguinului si casuta albastru-deschis cu linkurile "Links of Interest"  (deci elementele 3 si 4) sa fie pe acelasi rand - sa zicem casuta cu linkurile in stanga, imaginea pe acelasi rand, la o oarece distanta de casuta cu linkurile (i.e. 100px) ?

Sa nu fie text intre ele, doar spatiu alb ...

Daca da...cum?

Am incercat la ambele cu atributul de position (toate cele 4 atribute le-am incercat), dar nu am reusit


Multumesc

Edited by pinguinul666, 14 May 2017 - 11:14.

Le pui intr-un tabel (si marginile invizibile).

foloseste

float: left;

https://www.w3school...class_float.asp

Lăsați prostiile gen:gedit...etc.
Lucrează cu :pinegrow.

@neagu_laurentiu: table...?
@initiator: de ce nu pui imaginea de la pct 3 (pinguinul) dupa imaginea de la pct 4 ??? Intreb si eu, nu dau cu paru'!

roxlol, on 14 mai 2017 - 12:20, said:

Pinegrow zice ca e pe bani. Noi ie saraci, nu ne dedam la din astea....

Stan_Patzitul, on 14 mai 2017 - 13:55, said:

O fi pe bani,doar ca exista și full (gratis)
Doar sa ști unde sa cauți.

mberila, on 14 mai 2017 - 11:47, said:

are dreptate dl laurentiu, la faza cu tabelul ...e super, si e instant.

Referitor la ideile unora, cu float, nu merge la elemente diferite - cum am eu, adica acea cutie cu linkuri si imaginea.

Stan_Patzitul, on 14 mai 2017 - 13:55, said:

da, eu am o chestie cu lucrurile open-source.

pe langa asta, invat si cum sa folosesc LAMP (Linux - Apache - PH - MySQL) pt a gazdui pagini.

Așezarea elementelor în pagină cu ajutorul tabelelor, e o opțiune pe care n-ar trebui să o iei în calcul, dacă ești interesat de SEO și vrei să perseverezi în domeniu. Succes!

asezarea in pagina cu ajutorul tabelelor era la moda prin 1998

pinguinul666, on 14 mai 2017 - 14:45, said:

sigur nu merge?
ti-am facut un demo.

roxlol, on 14 mai 2017 - 14:37, said:

de ce sa cauti cand exista zeci de alternative mai bune si gratis, de la google insisi de ex, Brackets, Notepad++ etc

pinguinul666, on 14 mai 2017 - 14:45, said:

Folosesti table doar cand ai un... tabel... sau o tabela, nu stiu cum e corect si nu conteaza.
In rest, te chinui cu div. Faptul ca nu iti iese tie nu inseamna ca nu merge.
Si iti dau cel mai bun sfat posibil pt tine: jsfiddle.net

Poti sa folosesti float sau poti sa incluzi link-urile si imaginea intr-un div parinte si sa le dai display: inline-block. Uite un exemplu: https://jsfiddle.net/44p82f04/1/. Asa cum zic colegii mai sus sa nu folosesti tabele pentru a structura continutul paginii ci foloseste div-uri. Iar pentru editor eu iti sugerez sublime, e ceea ce folosesc eu si sunt multumit. Mai sunt: atom, notepad++, Brackets etc, alege unul care iti place. Toate sunt free!

Edited by Bogdan__26, 14 May 2017 - 21:52.

dezavuez intreaga politica de a critica folosirea table, un fel de ura nejustificata a seo-ului pe o modalitate decenta de a aseza chestii in pagina
puristii spun ca in table trebuie sa fie doar tabel cu date. nu sunt de acord, chestie de semantica

e drept ca table e mai complicat de intretinut si redesenat, dar daca o faci cu grija si ai un design mai cartezian, de ce nu

Flat, on 15 mai 2017 - 08:23, said:

Un tabel pentru layout nu e chiar asa de rau dar daca nu obtii layout-ul dorit atunci vei folosi alt tabel si apoi altul si tot asa pana ce vei obtine rezultatul dorit. Este mult mai greu de citit si de mentinut. In plus separarea continutului fata de prezentare este unu lucru bun, pagina va avea dimensiuni mai mici, va fi mai usor de vizualizat si de mentinut. Un alt aspect e acela ca fisierele CSS permit browser-ului sa retina in memoria cache iar solicitările ulterioare sunt mult mai rapide. Este mult mai usor sa schimbi design-ul folosind css, este mult mai greu sa stilizezi un tabel, nu iti permite acea flexibilitate pe care ti-o acorda css-ul. Un alt argument ar fi accesabilitatea, incearca sa citesti o pagina web structurata cu tabele folosind un cititor de ecran sau alte dispozitive de acest gen.
Nu zic ca sunt rele sau altceva doar ca trebuie folosite cu prudenta si in functie de ceea ce vrei sa obtii. De ce sa ne complicam cand putem realiza acelasi lucru mult mai simplu si usor in plus web-ul a evoluat destul de mult in ultimii ani.

floyd69, on 14 mai 2017 - 19:09, said:

1) ce inseamna SEO?

2) de ce nu cu tabele?

3) ce sugestie ai, atunci?

multumesc

mberila, on 14 mai 2017 - 19:31, said:

dar acolo ai 2 elemente de acelasi tip ...adica 2 simple imagini patrate.

cand insa, ai text si imagine (deci 2 diferite), am remarcat ca nu functioneaza.

desigur, esti mai mult decat bine-venit sa repeti faza pe fisierul meu, sau macar ca mine - adica avand o casuta cu text si o imagine.

unbrutus, on 14 mai 2017 - 21:15, said:

aaaa.....acu ma uit

Bogdan__26, on 15 mai 2017 - 10:36, said:

s-au dat raspunsuri pertinente in care s-a explicat cat de cat de ce nu se folosesc tabele pt layout...
chiar nu se folosesc. E o greseala pt cineva in 2017 sa invete asa ceva.

Flat, on 15 mai 2017 - 08:23, said:

Nu prea conteaza ca nu esti tu de acord, tocmai aici e problema, SEO si semantica sint cruciale in 2017.
In plus, acum avem si FLEX si alte asemenea lucruri. numai daca traiesti in trecut mai folosesti tabel pt altceva decat pt tabele.

Flat, on 15 mai 2017 - 08:23, said:

daca prin puristi intelegi cam toata lumea care se pricepe...

https://www.w3school...ic_elements.asp

https://en.wikipedia...i/Semantic_HTML

Edited by unbrutus, 15 May 2017 - 16:51.

pinguinul666, on 15 mai 2017 - 16:35, said:

acelea nu sunt imagini patrate. sunt div-uri carora le-am dat culori de fundal diferite pt a-ti fi tie mai usor sa intelegi ce se intampla acolo.
uite aici, am adaugat o poza si niste text in div-uri.

Va multumesc mult la toti!

Sunt super sugestiile si am ceva de rumegat!