Jump to content

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

Certificat TVA pentru Auto SH de ...

Sectorul 4 ridica masini abuziv?

Motorul se supraincalzeste?
 avarie usoara

Rotoare, statoare și alte ge...

Achizitie logan nou (ce cutie, ce...

La multi ani @micutu82!
 Olivia Newton-John va ramane prin...

Refuz comanda rapida ?!

Certion - proiecte la mare ș...

Pe Windows 10 am dat o scanare a ...
 Nedumerire Bticino Living Now Sma...

personal cloud? Cum si ce?

Efect advers brahiterapie

Recomandare laptop gaming
 

HTML/CSS - imagine si text in acelasi rand

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

#1
pinguinul666

pinguinul666

    Senior Member

  • Grup: Senior Members
  • Posts: 4,562
  • Înscris: 06.10.2015
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

<link ref='stylesheet" type="text/css" href=" < locul unde se afla > " />

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


/* myStyle ---foaie de stil css */

.special
{
font-weight: bold;
background: #F2F2F2;
border: #00BFFF;
border-width: 7px;
border-style: groove;
display:block;
float:left;

margin: 0 50px 50px 50px;
padding: 10px 10px 10px 10px;
line-height: 0.5em;
}


.tux
{
background: #848484;
border: #0101DF;
border-style: groove;
border-width: 7px;
display: block;
float: center;
padding: 7px;
width: 230px;
margin: 0px 0 0 400px;
}




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

Attached Files


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


#2
neagu_laurentiu

neagu_laurentiu

    Guru Member

  • Grup: Senior Members
  • Posts: 39,589
  • Înscris: 30.07.2003
Le pui intr-un tabel (si marginile invizibile).

#3
mberila

mberila

    Active Member

  • Grup: Members
  • Posts: 1,310
  • Înscris: 20.11.2005
foloseste
float: left;

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

#4
roxlol

roxlol

    Junior Member

  • Grup: Members
  • Posts: 231
  • Înscris: 25.02.2016
Lăsați prostiile gen:gedit...etc.
Lucrează cu :pinegrow.

#5
colombo2003

colombo2003

    Senior Member

  • Grup: Senior Members
  • Posts: 6,310
  • Înscris: 16.07.2008
@neagu_laurentiu: table...? Posted Image
@initiator: de ce nu pui imaginea de la pct 3 (pinguinul) dupa imaginea de la pct 4 ??? Intreb si eu, nu dau cu paru'!

#6
Stan_Patzitul

Stan_Patzitul

    Senior Member

  • Grup: Senior Members
  • Posts: 2,733
  • Înscris: 26.08.2009

View Postroxlol, on 14 mai 2017 - 12:20, said:

Lăsați prostiile gen:gedit...etc.
Lucrează cu :pinegrow.
Pinegrow zice ca e pe bani. Noi ie saraci, nu ne dedam la din astea....

#7
roxlol

roxlol

    Junior Member

  • Grup: Members
  • Posts: 231
  • Înscris: 25.02.2016

View PostStan_Patzitul, on 14 mai 2017 - 13:55, said:

Pinegrow zice ca e pe bani. Noi ie saraci, nu ne dedam la din astea....
O fi pe bani,doar ca exista și full (gratis)
Doar sa ști unde sa cauți.

#8
pinguinul666

pinguinul666

    Senior Member

  • Grup: Senior Members
  • Posts: 4,562
  • Înscris: 06.10.2015

View Postmberila, 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.

View PostStan_Patzitul, on 14 mai 2017 - 13:55, said:

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

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.

#9
floyd69

floyd69

    Member

  • Grup: Members
  • Posts: 383
  • Înscris: 15.12.2010
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!

#10
mberila

mberila

    Active Member

  • Grup: Members
  • Posts: 1,310
  • Înscris: 20.11.2005
asezarea in pagina cu ajutorul tabelelor era la moda prin 1998

View Postpinguinul666, on 14 mai 2017 - 14:45, said:

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

sigur nu merge?
ti-am facut un demo.

#11
unbrutus

unbrutus

    Guru Member

  • Grup: Senior Members
  • Posts: 16,252
  • Înscris: 23.02.2017

View Postroxlol, on 14 mai 2017 - 14:37, said:

O fi pe bani,doar ca exista și full (gratis)
Doar sa ști unde sa cauți.
de ce sa cauti cand exista zeci de alternative mai bune si gratis, de la google insisi de ex, Brackets, Notepad++ etc

View Postpinguinul666, on 14 mai 2017 - 14:45, 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.

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.
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

#12
Bogdan__26

Bogdan__26

    Junior Member

  • Grup: Junior Members
  • Posts: 39
  • Înscris: 26.01.2016
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.


#13
Flat

Flat

    Bugetar Esențial

  • Grup: Senior Members
  • Posts: 29,675
  • Înscris: 23.06.2006
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

#14
Bogdan__26

Bogdan__26

    Junior Member

  • Grup: Junior Members
  • Posts: 39
  • Înscris: 26.01.2016

View PostFlat, on 15 mai 2017 - 08:23, said:

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

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.

#15
pinguinul666

pinguinul666

    Senior Member

  • Grup: Senior Members
  • Posts: 4,562
  • Înscris: 06.10.2015

View Postfloyd69, on 14 mai 2017 - 19:09, said:

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!


1) ce inseamna SEO?

2) de ce nu cu tabele?

3) ce sugestie ai, atunci?

multumesc

View Postmberila, on 14 mai 2017 - 19:31, said:

asezarea in pagina cu ajutorul tabelelor era la moda prin 1998



sigur nu merge?
ti-am facut un demo.


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.

View Postunbrutus, on 14 mai 2017 - 21:15, said:

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


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


aaaa.....acu ma uit :P

#16
unbrutus

unbrutus

    Guru Member

  • Grup: Senior Members
  • Posts: 16,252
  • Înscris: 23.02.2017

View PostBogdan__26, on 15 mai 2017 - 10:36, 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.
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.

View PostFlat, on 15 mai 2017 - 08:23, said:

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
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.

View PostFlat, on 15 mai 2017 - 08:23, said:

puristii spun
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.


#17
mberila

mberila

    Active Member

  • Grup: Members
  • Posts: 1,310
  • Înscris: 20.11.2005

View Postpinguinul666, on 15 mai 2017 - 16:35, 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.


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.

#18
pinguinul666

pinguinul666

    Senior Member

  • Grup: Senior Members
  • Posts: 4,562
  • Înscris: 06.10.2015
Va multumesc mult la toti!

Sunt super sugestiile si am ceva de rumegat!  :)

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