Jump to content

Palīdziet savaldīt tabulu HTML

abi

abi,
in Programmēšana

 Share

Recommended Posts

abi

abi

Ierakstīts
Ierakstīts (labots)

Tā nu ir sanācis ka savajadzējās express tempā ieburties html. Par visu pilnīgi tumša bilde, var droši ieteikt ko palasīties, ar ko sākt. Priekšzināšanas absolūta nulle.

 

Patreiz vajag ieteikumu kā nocentrēt šo tabulu pa vidu teksta kolonnai (ne lapai). Lieta tāda ka, pašas "target lapas/u" platums ir par nezināmu lielumu platāks un dažāds, tāpēc pirmajā rindkopā ir piespiedu kārtā lietots ierobežojums 88 zīmes un tas ir OK visur, kur vēlos to pielietot. Pašu tabulu vajag nocentrēt pa vidu  augstāk esošam tekstam, bet nezinu kā norādīt ka pati tabula atrodas iekšā, ne vien lapā, bet arī 88 zīmes platā kolonnā. Kā piektā riteņa variantu ieliku vienkārši atkāpi no kreisās malas 40 px, taču tad vienā "target lapā" ir gandrīz pa vidu, bet citā tomēr ir pamanāma nobīde no centra. Nekas jau traks, bet ja jau nu esmu sācis ar šo čakroties, tad gribētos tomēr izveidot universālu šablonu, lai vēlāk nav simtiem reižu jāķēpājas ar katru šablona kopiju atsevišķi.

Vēl būtu labi ja kāds varētu pateikt kā piespiest Android ierīces šo tekstu attēlot ar pareizu šriftu, nevis Arial.

 

Pats kods te:

 

<html>
<body>

<p style="max-width: 88ch; margin: 10px 0px 0px; font-size: 1.2rem; font-weight: 400; color: rgb(103, 104, 104); font-family: Helvetica Neue, Liberation; line-height: 1.3; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: -0.02em; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255);">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p><br>

<table cellspacing="1" cellpadding="5" width="500" style="margin: 0px 40px 0px; border-collapse: collapse; border: double 2px rgb(103, 104, 104); color: rgb(103, 104, 104); font-family: Helvetica Neue, Liberation; font-size: 1.2rem; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: -0.02em; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-align: justify;">

<tbody><tr><td valign="top" style="border-collapse: collapse; border: double 1px rgb(103, 104, 104); vertical-align: bottom;"><b><i>Saturs</i></b></td><td valign="top" align="center" style="border-collapse: collapse; border: double 1px rgb(103, 104, 104); vertical-align: bottom;"><b><i>Apraksts</i></b></td></tr><tr><td valign="top" style="border-collapse: collapse; border: double 1px rgb(103, 104, 104); vertical-align: bottom;">pirmais</td><td valign="top" align="center" style="border-collapse: collapse; border: double 1px rgb(103, 104, 104); vertical-align: bottom;">garšīgs</td></tr>
<td colspan="2" width="100" valign="top" height="0px" style="letter-spacing: -0.02em; border-collapse: collapse; border: double 1px rgb(103, 104, 104); vertical-align: bottom;" >Tā lūk sanāca</td>
</tbody></table><br>

</body>
</html>

Labots - abi
Link to comment
Share on other sites
  • Replies 93
  • Created
  • Last Reply

Top Posters In This Topic

  • TOoMoOT

    5

  • AndrisBB

    5

  • LagerLV

    6

  • abi

    49

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

abi
abi

Sorry, pats tīri nejauši tiku galā. Vajadzēja vien visur ierakstīt šādi: { font: 70px "Helvetica Neue", serif !important; color: red !important }     Iepriekš bija šādi, starpību pat g

Posted Images

LagerLV

LagerLV

(labots)

Nu varētu palīdzēt... Bet tad var lūdzu detalizētāk, varbūt ar bildi problēmu un vēl...

 

Man caur šito visu ko ievēmi tagad jāiet cauri?? :haha:

Labots - LagerLV
Link to comment
Share on other sites
abi

abi

  • Author
(labots)

Pievienoju ekrānuzņēmumu kā atveras lapā, vajag lai tabula centrējas pa sarkanajām līnijām nevis pa visu kilometru plato lapu. Speciāli pieliku zem tabulas to pašu rindiņu kas pirms, bet bez 88 zīmju platuma ierobežojuma. Ceru ka tā būs labāk saprotams

 

 

Lapa ar tabulu.png

Labots - abi
Link to comment
Share on other sites
LagerLV

LagerLV

(labots)

Nu ja tev principā vienalga uz jebkādu responsīve dizainu (tad kad vienādi centriska tā tabula būs gan uz telefona gan uz datora ekrāna), tad vari table elementa stylā pielikt margin-left: 150px;

Un tad apmēram arī būs.

Bet tā ieteiktu tev atdalīt html no css, būs vieglāk lasāms, separation of concerns.

Edit: ā tagad tu editoji to last postu sapratu ka gribi starp tām līnījām.

Nu tad pieliec vēl margin-top: 150px; :haha:

Jebšu īsāk: margin: 150px 0px 0px 150px;

Labots - LagerLV
Link to comment
Share on other sites
abi

abi

  • Author
(labots)

Pagaidām es viņus vienu no otra neatšķiru. ?

 

Tai vietā patreiz man ir – margin: 0px 40px 0px; – tas taču ir tas pats, vai ne?

 

Es biju domājis kaut kā norādīt ka tabula atrodas un ir centrēta 88 zīmju kolonnā, tik netiku galā ar transskripciju, nu tipo iebāzt viņu visu iekš <p> – </p>; <span> – </span> vai kā cita vairāk piemērota

Labots - abi
Link to comment
Share on other sites
abi

abi

  • Author
(labots)

Izmainīju uz – margin: 150px 0px 0px 150px; 

Praktiskais rezultāts reālajā dzīvē ir šāds: 

Tāpēc arī vēlos izštukot universālu centrēšanu lai turpmākajā dzīvē būtu vien copy/paste, nevis katreiz piedzīt parametrus/pārbaudīt kā izskatās

 

1.

2.jpg

2.

1.jpg

Labots - abi
Link to comment
Share on other sites
LagerLV

LagerLV

(labots)

Par to marginu un kā pareizi - https://www.w3schools.com/cssref/pr_margin.asp

Pārlasiju postu 2x vēl, es pareizi sapratu ka tu gribi kautkā norādīt lai tā tabula un teksts būtu kopīgs, tipo kā zemāk bildē? Un lai tas viss platumā nebūtu vairāk kaa 88ch?

Nu ja pareizi nesapratu tad ļaušu kādam citam biedram atšifrēt šito.

Capture.PNG.96622f53fee52546a0c7d0bdcdbb3077.PNG

Labots - LagerLV
  • Patīk 1
Link to comment
Share on other sites
abi

abi

  • Author
(labots)

Jā, apmēram tā, varbūt ne tieši kopīgs, bet vienkārši var norādīt konkrētu piespiedu platumu lapas daļai kurā atrodas tabula un tad lai viņa arī centrējas izejot vien no norādītā platuma. Nu, piemēram, visas lapas platums ir kaut kādas ~200 zīmes, bet es norādu ka tabula atrodas apgalalā kura platums ir 100 zīmes un tā centrējas izejot no šī platuma, nevis kopējā.

 

Ar tām  – margin – fiksētām atkāpēm no lapas malām var piedzīt vienai no web lapām tabulu precīzi pa vidu konkrētam tekstam, bet tieši tas pats kods ielikts citā web lapā būs ar kādu centimetra, redzamu nobīdi no centra. Ja lietot margin, sanāk katrai web lapai taisīt savu šablonu. Tas jau nekas traks nebūtu ja vien lapu skaits nebūtu simtos.

Labots - abi
Link to comment
Share on other sites
LagerLV

LagerLV

(labots)

Nu tad tu vari izmantot <div> elementu lai "sakopotu" elementus kopā vienā lielā kastē, un tad noteikt tās kastes izmēru.

piem: https://pastebin.com/i7JEpdGQ

tas <div> elements sakopo to heading <h1> tagu un paragrāfu <p> vienā blok veida elementā un tad es piemēroju tam blokam max izmēru 88ch.

Un ja tu gribi pabīdīt to bloku vairāk pa labi un tevi neinteresē responsive design, izmanto margin-left

Reku, nedaudz lasāmāku tavu vēmienu uztaisīju: https://pastebin.com/iqseyWpT

Labots - LagerLV
  • Patīk 1
Link to comment
Share on other sites
abi

abi

  • Author
(labots)

Tiku nu šitik tālu:

<div style="max-width: 88ch">
<table align="center" cellspacing="1" cellpadding="5" width="500" style="border-collapse: collapse; border: double 2px rgb(103, 104, 104); color: rgb(103, 104, 104); font-family: Helvetica Neue, Liberation; font-size: 1.2rem; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: -0.02em; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-align: justify"> .............

 

margin nav likts (kā nobīdīt ar margin biju sapratis jau pirms šīs diskusijas uzsākšanas), gaidīju ka pats iecentrēsies, to viņš arī ir izdarījis, tik 3. attēlā nobīde ir nedaudz pa labi no centra, bet 4. attēlā manāmi pa kreisi no centra. Kaut kas vēl ne tā, jebšu es cenšos panākt to kas principā nav iespējams/paredzēts. Varbūt šams domā ka tai vietā platums ir mazāks kā 88ch? Mēģināt norādīt min-width: 88ch, ch vietā pikt px/% vai kā tamlīdzīgi?

 

sorry par koda transkripciju, neesmu vēl sapratis kā Notepad++ ar to darboties

P.s. ar koda galvas daļu neiespringu, redzu ka web lapas pašas to daļēji nomaina uz kaut ko savu un, ja vienkārši standarta režīmā kaut ko rakstīsi, tad tādas daļas nemaz īsti nebūs.

 

 

 

3.

3.thumb.jpg.a57ab43a72f0f4b1edd6e054e12dedab.jpg

 

4.

4.thumb.jpg.b34d5e0a2a5c5efefa15b66e673f3142.jpg

Labots - abi
Link to comment
Share on other sites
abi

abi

  • Author

Tiku galā. Paldies par <div> ieteikumu, nezināju viņa nozīmi un baigi feini ka nu apguvu, taču kā redzams iepriekšējā postā problēmu tas neatrisināja. Izmēģinājos visādi apvienojot dažādos blokos līdz bija pilnīgi skaidrs ka <div> lietošana/nelietošana nav tur pie vainas. Problēma izrādas bija ielikta šeit:

 

<p style="max-width: 88ch; margin: 10px 0px 0px; font-size: 1.2rem; font-weight: 400; color: rgb(103, 104, 104); font-family: Helvetica Neue, Liberation; line-height: 1.3;  letter-spacing: -0.02em; orphans: 2; text-align: start; widows: 2; background-color: rgb(255, 255, 255);">

 

Vajadzēja vien start nomainīt ar justify un viss pēkšņi nostājās savās vietās :lol:

Link to comment
Share on other sites
abi

abi

  • Author
(labots)

Labs, nebiju pamanījis – lasīju kā windows, bet tā tas ir:

 

Definition and Usage
The widows property sets or returns the minimum number of lines for an element that must be visible at the top of a page (for printing or print preview).

The widows property only affects block-level elements.

Tip: widows:5 means that at least 5 lines must be visible below the page break.

Tip: See the orphans property to set or return the minimum number of lines for an element that must be visible at the bottom of a page.

 

 

Labots - abi
Link to comment
Share on other sites
abi

abi

  • Author
(labots)

Tikko pieteicos ieteiktajiem kursiem. Pašam smieklīgi, nebiju domājis ka vēl kādreiz dzīvē apmeklēšu skolu.

 

Lai nu kā, sapratu ka esmu cīnījies ar svešām vējdzirnavām šajā topikā. Lieta tāda ka man vajag izgatavot koda fragmentu kuru var copy/paste, ar zināmām izmaiņām, bliezt iekšā milzīgā daudzumā svešu, jau agrāk pilnībā noformētu mājaslapu, kam jau ir savs head, body un CSS, tam speciāli atvēlētā blokā. 

 

Pēc @LagerLV ieteikuma aizdomājos par savu CSS, lai labākajās tradīcijās nodalītu nost CSS no HTML, to arī izdarīju, un viss..., tests uz mana datora iet, ielikts svešā lapā neiet un arī izsauc traucējumus tās darbā. Pastudējis tēmu atradu ka man savu koda fragmentu vajag sākt ar :

 

<br style="display:none">

 

Tālāk domas dalās, tādu īstu atbildi neatradu, tauta saka ka CSS būtu pēc tā jāstrādā, bet citi saka ka neiet viss.

 

Es uzbliezu šādu un tas svešā lapā neiet + sabojā kopējo skatu. Saprotu ka mans CSS ir sācis iedarboties uz visu lapu. Jautājums – kā panākt lai mans CSS darbotos vien uz manu bloku?

 

<br style="display:none">

<style>
p {
  text-align: right;
  border: none;
  font-family:  "Helvetica Neue", Liberation;
  color: rgb(103, 104, 104);
  font-size: 1.2rem;
}
h1 {
  color: rgb(103, 104, 104);
  margin-left: 100px;
}
  </style>


<div style="max-width: 107ch">
  <h1><b><i>text text text text</i></b></h1>
  <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p><br>

Labots - abi
Link to comment
Share on other sites
abi

abi

  • Author
(labots)

style nomainīt ar code? Mēģināju, nesanāk, internetā arī nesapratu kā viņu lietot, mēģināšu identifikatoru. Varbūt problēma ir tajā ka viss, kas atrodas iekš style, attiecas uz visu lapu?

Labots - abi
Link to comment
Share on other sites
abi

abi

  • Author
(labots)

@ieleja  atvaino, nesapratu domu, manuprāt man <> zīmes ir vajadzīgajā skaitā.

 

 

Tiku šitik tālu, vienā vietā CSS nedarbojas (otrā target lapā un uz mans datora darbojas), nezinu kāpēc, te būs koda fragments, tūlīt sataisīšu kā tas svešā lapā izskatās

 

 

<br style="display:none">

<style>
#beduins {
  text-align: right;
  border: none;
  font-family: "Helvetica Neue", Liberation;
  color: rgb(103, 104, 104);
  font-size: 2.2rem;
}
#mansbloks {
  color: rgb(103, 104, 104);
  margin-left: 100px;
  font-family: "Helvetica Neue", Liberation;
  font-size: 3.2rem;
}
</style>


<div style="max-width: 107ch">
  <h1 id="mansbloks"><b><i>text text text text</i></b></h1>
  <p id="beduins" style="font-family: Helvetica Neue, Liberation; font-size: 2.2rem;"><i><b>text text text</b></i> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p><br>

 

5.

5.thumb.jpg.57c632c4f00503ff48a16d20ae7ddca1.jpg

 

6.6.thumb.jpg.feb7d564234af5b7dd3cc5244049a564.jpg

Labots - abi
Link to comment
Share on other sites
TOoMoOT

TOoMoOT

(labots)
1 stundu atpakaļ, abi teica:

to arī izdarīju, un viss..., tests uz mana datora iet, ielikts svešā lapā neiet

Ticu, ka spēlējoties ar identifikatoriem un klasēm tu līdz tam nonāksi. Galvenais ieteikums no manas puses-  kad testē CSS, aizmirsti par parastu refresh, jo tas turpina iezmantot cache saglabāyto veco css kodu. Tāpēc vajag izmantot 'Hard refresh', Chrome ctrl + shift + r (ja pareizi atceros) vai vienkārši ctrl + r. 

Labots - TOoMoOT
  • Patīk 1
Link to comment
Share on other sites
abi

abi

  • Author
(labots)

Problēma ir redzama attēlā 5. – CSS nedod pelēko teksta krāsu un ir kaut kāds Arial tipa fonts, kā virsrakstā, tā tekstā, fonta izmērs arī ir mazāks. Taču vietne spēj parādīt Helvetica Neue fontu un pelēku fonta krāsu, tas redzams pirmajā teksta rindā kur pirmie 3 vārdi ir ieguvuši vajadzīgās aprises kodā aiz <p papildus norādot to pašu kas ir CSS

Labots - abi
Link to comment
Share on other sites
abi

abi

  • Author
(labots)
Pirms 30 minūtēm , TOoMoOT teica:

Tāpēc vajag izmantot 'Hard refresh', Chrome ctrl + shift + r (ja pareizi atceros) vai vienkārši ctrl + r. 

 

Es vienkārši spiežu F5, tas ir par maz? Arī ieteiktais Hard refresh, vietnē ar 5. attēlu neko neizlaboja. Ko darīt, atmest ar roku CSS un visu rakstīt aiz <p, vai meklēt kāpēc lapas CSS čubinās pa manu bloku? Man būs vien ~11-13 paragrāfi/tabulas katrā blokā. Sports sportam, bet vai ir vērts, tas kaut ko dos?

Labots - abi
Link to comment
Share on other sites
TOoMoOT

TOoMoOT

(labots) 
izveido folderī /index.html , stils.css

index.html:

<html>
<head>
  <link rel="stylesheet" href="stils.css">
<body>
<p>Paragraph </p><br>
<p class='klase'>This is paragraph with class </p>
<p class='klase' id = 'ir_definets'>This is paragraph with ID defined in stils.css </p>
<p class='klase' id = 'nav_definets'>This is paragraph with class and ID that isn't defined anywhere </p>

<p id = 'definets'>This is paragraph with no class and ID defined in stils.css </p>

 

stils.css:

p{
  color : #ff0000;
}

.klase{
  color: #00ff00;
}

#ir_definets{
  color: #0000ff; 
}

 

image.thumb.png.274823625b75f6a25ef51ad94b866eb6.png

Labots - TOoMoOT
  • Patīk 1
Link to comment
Share on other sites
abi

abi

  • Author
(labots)

Principā man vajag radīt "ejošu" šablonu un tad tajā no jau iepriekš sagatavotiem Word failiem pa rindiņai kopēt iekšā katram produktam/valodai atbilstošu saturu. Viss ir noformēts vienā stilā un vien 4 vietās var mainīties tabulas rindu skaits. Čakrs liels, bet labāk 1x izdarīt tā un tad vien copy/paste nekā vēlāk pa 10 reizēm ņemties ar viena nu tā paša labošanu katram produktam/valodai. Esmu jau vismaz 5x katram to darījis, aizņem tas ap 20 minūtēm vienam...., tupo pārkopēt saturu pa gabaliņiem uz HTML aizņem apmēram tikpat daudz laika.

 

 

Pirms 16 minūtēm , TOoMoOT teica:

izveido folderī /index.html , stils.css

 

Tas folderis nav jānosauc kaut kā savādāk , ne index, bet kaut kas unikāls, kas nevarētu sakrist ar lapā jau izmantotu folderi? Tie head/body atrodoties folderī būs kaut kas pilnīgi nodalīts no pašas lapas head/body?

 

STOP! man jau nav pieejas kaut kādu failu novietot lapas folderī, ir vien piekļuve kaut kādam blokam kurā varu kaut ko rakstīt un formatēt ar pašas web lapas piedāvāto primitīvo formatēšanas rīku klāstu, vai pāriet uz sadaļu html un iesviest tur gatavu koda daļu.

Labots - abi
Link to comment
Share on other sites
TOoMoOT

TOoMoOT

Pirms 11 minūtēm , abi teica:

lderis nav jānosauc kaut kā savādāk

Es to devu tikai kā piemēru, lai saprastu kā id un klašu stilus izmantotu.

Bet drusku vairāk iedziļinoties tavā problēmā sapratu, ka tev ir cita problēma. Prioritātes, kuru stilu piešķir pirmo.
Tevis dotais kods lokāli nostrādā. To jau arī pats rakstīji. Kāpēc tas stils tiek overwrite'ots, kad to kodu ievieto citā lapā, būs grūti uzminēt.


Tu vari lapā, kur tev nenostrādā stils caur Chrome uzspiest ctrl + shift + c . ar peli uzbraukt uz savu reģionu tā lai tas iezīmējas, tad labajā panelī redzēsi, kurš CSS ietekmē to.

BIlde:

image.png

  • Patīk 1
Link to comment
Share on other sites
abi

abi

  • Author
(labots)

Tieši tā, precīzāk nodefinēji.

 

Tas izskatās šādi, tik ko tas īsti nozīmē un, galvenais, ko darīt?

Viss #beduins ir izsvītrots, kā lai viņu aizsargā no tā

override.thumb.jpg.f5a33f124d261acb8706e50206fe3070.jpg

Labots - abi
  • Patīk 1
Link to comment
Share on other sites
abi

abi

  • Author

Ieteiktais Microsoft Expression Web 4 nu gan ir īstais monstrs, tieši kaut ko tādu arī gaidīju no Notepad++, tā biju pie sevis iedomājies ka tas strādās :) Skatos ka šis drusku savādāk ir kodu tulkojis no Worda, kādu kumosiņu paņemšu no tā, bet ja jau reiz esmu sācis ar Notepad++, tad gribētos tieši šo pasākumu ar viņu arī piebeigt.

Link to comment
Share on other sites
TOoMoOT

TOoMoOT

(labots)

Interesanti. p elementam vispārīgais css pārraksta tevis definēto id css. Tipiski tā nenotiek. 

Nepārzinu CSS baigi labi, tāpēc varu tikai minēt. 

1.)Pamēģini <style></style> pārnest iekšā <div>

2.)Ja (1)nedod rezultātu, vari pamēģināt šitādu variantu (!important aiz katras īpašības):

<style>
#beduins {
  text-align: right !important;
  border: none !important;
  font-family: "Helvetica Neue", Liberation !important;
  color: rgb(103, 104, 104) !important;
  font-size: 2.2rem !important;
}
#mansbloks {
  color: rgb(103, 104, 104) !important;
  margin-left: 100px !important;
  font-family: "Helvetica Neue", Liberation !important;
  font-size: 3.2rem !important;
}
</style>

 

!important ir sliktā prakse, bet....

 

Pēc izmaiņām neaizmirsti par hard refresh.

Labots - TOoMoOT
Link to comment
Share on other sites
basic

basic

Pirms 32 minūtēm , abi teica:

Viss #beduins ir izsvītrots, kā lai viņu aizsargā no tā

Jānovērš cēloņi. Stilu pielietošanai ir noteiktas prioritātes un pārlūks arī tev tos rāda pielietošanas secībā - pirmie pielietojas inline stili (tas izskaidro kapēc beduinam ir nosvītroti font-family un font-size), pēc tam stili, kas ir norādīti ar ID, pēc tam ar klasēm, selektoriem, vecākiem utt. Pievērs arī uzmanību izsaukuma zīmēm pie nosvītrotajiem stiliem - uzbrauc ar peli un dabūsi skaidrojumu, kas konkrētajam pārlūkam nepatīk.

  • Atbalstu 1
Link to comment
Share on other sites
TOoMoOT

TOoMoOT

Pirms 14 minūtēm , basic teica:

inline stili

Šito pat nepamanīju tavā kodā. Tas ir, ja tu esi <p> tagē iekšā ierakstījis style = "" atribūtu. To noteikti izņem!

Link to comment
Share on other sites
abi

abi

  • Author
(labots)

To es speciāli ieliku

pirms 5 stundām , abi teica:

Problēma ir redzama attēlā 5. – CSS nedod pelēko teksta krāsu un ir kaut kāds Arial tipa fonts, kā virsrakstā, tā tekstā, fonta izmērs arī ir mazāks. Taču vietne spēj parādīt Helvetica Neue fontu un pelēku fonta krāsu, tas redzams pirmajā teksta rindā kur pirmie 3 vārdi ir ieguvuši vajadzīgās aprises kodā aiz <p papildus norādot to pašu kas ir CSS

 

Tāpat milzu izmēra fontu, lai varētu viegli atšķirt Helvetica no Arial utt. Tagad vismaz zināšu ka tie saucas inline stili un ir pirmie prioritātes sarakstā. No sākuma un vienīgais pilnīgi gatavais šablons sastāv tikai un vienīgi no inline stiliem, tik @LagerLV deva mājienu ka tajos ir iejaukts pa vidu arī CSS, tas nav кошерно un пошло поехало... sāku mēģināt to visu izvest uz CCS :lol:

Labots - abi
Link to comment
Share on other sites
abi

abi

  • Author
Pirms 28 minūtēm , TOoMoOT teica:

1.)Pamēģini <style></style> pārnest iekšā <div>

2.)Ja (1)nedod rezultātu, vari pamēģināt šitādu variantu (!important aiz katras īpašības):

<style>

 

Pirms 29 minūtēm , TOoMoOT teica:

Pēc izmaiņām neaizmirsti par hard refresh.

 

div un important + hard refresh problemātiskajā lapā nekādu rezultātu nedeva

Link to comment
Share on other sites
abi

abi

  • Author
(labots)

Tad faktiski sanāk kas, tie inline stili jau no paša sākuma arī bija pats efektīvākais risinājums. Ja neradīsies idejas kā CSS uzrakstīt tā lai web lapa viņu nepārraksta, tad būs arī pie tā jāpaliek.

 

Vēl ir viens aktuāls jautājums - viss tas skaistums ar inline stiliem only darbojas uz datora un svešā lapā korekti, bet Android telefonā fonts mainās uz Arial un tur nu man ne reizes nav izdevies ko savādāk panākt. Tas vispār ir kaut kā iespējams? Mēģināju kaut ko sagooglēt, bet tā arī īsti nesapratu, Android var, vai nevar ar citu fontu darboties bez iejaukšanās viņa paša uzstādījumos?

Labots - abi
Link to comment
Share on other sites
basic

basic

Pirms 10 minūtēm , abi teica:

...inline stili jau no paša sākuma arī bija pats efektīvākais risinājums

Tas noteikti nav pats efektīvākais risinājums. 

Pirms 12 minūtēm , abi teica:

Android var, vai nevar ar citu fontu

Jebkura ierīce var darboties tikai ar tiem fontiem, kas ir tajā uzstādīti. Tāpēc jau font-family stilā parasti raksta vairākus nosaukumus ar cerību - ja klientam nebūs viens, būs cits.

 

Vēl varu ieteikt - ja vajag ātri pamainīt kāda stila vērtību vai pievienot eksperimentam kādu jaunu, dari to pašā pārlūka stilu sarakstā, tad pārlūks izmaiņas parādīs momentāni, bez jebkādiem refrešiem.

Link to comment
Share on other sites
abi

abi

  • Author

Kā ar to variantu ka norāda emmm "atsauci/saiti" uz ārēju fonta "glabātuvi", Android to uztur? Virspusēji meklējot Helvetica Neue gan neatradu ārējās glabātuves sarakstā, laikam par prastu fonts, visiem jau tāpat uz PC ir.

Link to comment
Share on other sites
LagerLV

LagerLV

(labots)
Pirms 36 minūtēm , basic teica:

Jebkura ierīce var darboties tikai ar tiem fontiem, kas ir tajā uzstādīti.

Bulšits, ja runājam par web lapām.
Uzreiz teikšu ka neizlasīju visas posta atbildes, tā jau galva pilna lai domātu tagad pastiprināti :biggrin:

Bet autoram došu mājienu: Tu vari linkot fontus no citurienes, tāpat kā bildes. Izmanto: https://fonts.google.com/
Negribu visu uz paplātes dot, jo tā neiemācīsies tik efektīvi, tāpēc pats google kā linkot to fontu.

 

Pirms 36 minūtēm , basic teica:

Tāpēc jau font-family stilā parasti raksta vairākus nosaukumus ar cerību - ja klientam nebūs viens, būs cits.

Jā tas ir viens no iemesliem... Bet principā ir divi iemesli: Ja klientam kaut kāda iemesla pēc nav tā fonta, vai arī ja serverim kaut kāda iemesla pēc nav tā fonta, tad ir jāiet uz fallback fontiem.

 

 

 

Ā, un par tiem kursiem kas tur augstāk linkoja...

Nu es galīgi neieteiktu iet uz turieni, ir daudz labāki resursi kur iemācīties to HTML, daudz ātrāk un ērtāk un jaunākas tehnoloģijas. Un tev nevajadzēs mācīties kkādu pascalu pēc tam :lol:

Autoram, vislabākais resurss priekš iesācēja: https://learn.freecodecamp.org

Ja nu kādi vēl īpaši jautājumi tad droši dm vai tago mani @abi :smile:

 

Labots - LagerLV
  • Patīk 1
Link to comment
Share on other sites
LagerLV

LagerLV

(labots)

Kāpēc lai neuzturētu?
 

Tur jau principā nav nekāda sakara ar operētājsistēmu, jāskatās ir uz browseri ja tu runā par cachingu.

Mūsdienās jau visi browseri cacho.

Vai arī ja tu runā par to vai citi fonti strādās uz androida, protams.

Labots - LagerLV
Link to comment
Share on other sites
abi

abi

  • Author
pirms 2 stundām , marrtins teica:

Pievērs uzmanību tabulas "margin: 0 auto;"

2 stundas pagāja līdz pieleca kas ar to bij domāts


pirms 1 stundas , LagerLV teica:

Kāpēc lai neuzturētu?

 

Tas atkal sanāk CSS, tas pats kas tiek piespiedu kārtā override, sanāk ka, ja grib citu fontu, tad tomēr ir jāizdomā kā panākt lai blokā darbojas mans CSS. Ar to pagaidām nav idejas kā tikt galā

  • Slikti! 1
Link to comment
Share on other sites
abi

abi

  • Author
(labots)

Šodien atmetu ar roku citam, vēlos kaut ar fontiem tikt skaidrībā. Tekošajā brīdi uztaisīju šādi:

 

<br style="display:none">

<head>
<link href="http://allfont.net/allfont.css?fonts=liberation-serif" rel="stylesheet" type="text/css"/>

</head>


<div style="max-width: 107ch; margin: 10px 0px 0px; font-size: 1.2rem; font-weight: 400; color: rgb(103, 104, 104); font-family: 'Liberation Serif'; line-height: 1.3;  letter-spacing: -0.02em; orphans: 2; text-align: justify; widows: 2; background-color: rgb(255, 255, 255);">
  <h1 id="mansbloks"><b><i>text text text text</i></b></h1>
  <p style="font-family: 'Liberation Serif'; font-size: 2.2rem;"><i><b>text text text</b></i> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p><br>

 

Uz PC rāda Liberation Serif fontu, uz Android viss ir iekš Arial. No Helvetica Neue uz brīdi atteicos jo tas esot maksas fonts ko legāli nevar pievilkt klāt pa saiti no citas vietas.

Cik nu es saprotu tad uz PC Liberation rāda vien tāpēc ka sistēmā tāds jau eksistē, bet problēma ir tur ka abās vietnēs kur šo koda gabalu lieku iekšā <head> tiek no viņu puses izsviests no koda. T.i. ielikt tu vari, bet kad vēlreiz apskaties, tad tā tur vairs nav. @ieleja  šī bija tā metode ar kuras palīdzību taisīji savu piemēru?

 

Labots - abi
  • Slikti! 1
Link to comment
Share on other sites

Izveido kontu, vai pieraksties esošajā, lai komentētu

Jums ir jābūt šī foruma biedram, lai varētu komentēt tēmas

Izveidot jaunu kontu

Piereģistrējies un izveido jaunu kontu, tas būs viegli!

Reģistrēt jaunu kontu

Pierakstīties

Jums jau ir konts? Pierakstieties tajā šeit!

Pierakstīties tagad!
 Share
Iet uz tēmu sarakstu
×
×
  • Izveidot jaunu...