☰

» »

Trdovratne težave v HTML/CSS-ju

Trdovratne težave v HTML/CSS-ju

«
1
2

joker16_7 ::

Po več urah iskanja ustreznih funkcij za izvedbo željenega se obračam na vas. Izdelujem intranet platformo s preoblikovanjem HTML/CSS3 templata. Moji trenutni težavi sta:

1) kljub uporabi UTF-8 encodinga ne morem pravilno prikažati šumnikov v Internet Explorerju (uspel sem rešiti težavo s prenastavitvijo samega prikaza strani v nastavitvah IE-ja, vendar to ni ustrezna rešitev, saj bo platformo uporabljalo več ljudi na več PC-jih) - P.S.: sprememba fonta ne pride v poštev

2) homepage vsebuje okenčke, ki so izdelani kot image (img) z neko fiksno višino/širino, vendar nikakor ne morem narediti, da bi se naslovi znotraj slik prelomili v novo vrstico, če so predolgi (prisilno sem ročno rešil težavo s funkcijo "br" vendar iščem univerzalno rešitev, ki bo delovala po celotni strani brez posebnega definiranja pri vsaki "sliki" posebej)



Hvala za vaš čas! :)
"Ambition is the path to success. Persistence is the vehicle you arrive in."
Bill Bradley

smacker ::

Za prelom nastavi fiksno širino okna in vklopi text wraping (wrap-all): http://stackoverflow.com/questions/1381...
Glede šumnikov pa rabiš charset v headerju nastavljen na UTF8 + html file na disku v istem encodingu ;) Ko spremeniš encoding datoteke, se zna zgodit da boš moral pretipkat vse šumnike - lahko si pomagaš z "replace all" funkcijo.

Vzdevek ::

Mislim, da pri tebi ni problem UTF-8 kodiranje, ker šumnike prikazuje. Mislim, da pisava nima šumnikov, če uporabljaš Google Fonts glej za Latin Extended.

joker16_7 ::

Vzdevek je izjavil:

Mislim, da pri tebi ni problem UTF-8 kodiranje, ker šumnike prikazuje. Mislim, da pisava nima šumnikov, če uporabljaš Google Fonts glej za Latin Extended.


Ista pisava v Mozilli ne povzroča težav in šumniki delujejo. Problem je samo v IE - kar pa je privzeti brskalnik IT oddelka v podjetju. UTF-8 je nastavljen pravilno.
"Ambition is the path to success. Persistence is the vehicle you arrive in."
Bill Bradley

Zgodovina sprememb…

joker16_7 ::

Že stestirane funkcije, ki niso delovale za izvedbo preloma teksta:
- white-space: normal
- white-space: pre-wrap
- word-break: break-word
- word-break: break-all

Če kdo ve, da bi katera od zgornjih morala delovati naj me opozori na kaj naj bom pozoren pri vgradnji.
"Ambition is the path to success. Persistence is the vehicle you arrive in."
Bill Bradley

blackbfm ::

lahko bi dal link do strani

prelom vrstice lahko naredis rocno z

<br>

Zgodovina sprememb…

  • spremenilo: blackbfm ()

joker16_7 ::

... Izdelujem intranet platformo s preoblikovanjem HTML/CSS3 templata. ...

Brez zamere, ampak bolj težko dam link do strani :)

... prisilno sem ročno rešil težavo s funkcijo "br" vendar iščem univerzalno rešitev ...

Vidim, da prejšnja izjava ni bila naključna...
"Ambition is the path to success. Persistence is the vehicle you arrive in."
Bill Bradley

Zgodovina sprememb…

slodreamer ::

na kvadratu overflow:hidden; ?

joker16_7 ::

slodreamer:
Tega pa ne razumem. Lahko prosim pojasniš kaj si mislil s tem?
"Ambition is the path to success. Persistence is the vehicle you arrive in."
Bill Bradley

jan_g ::

Saj lahko daš zgolj relevantni izsek css-ja in html-ja nekam (npr. na codepen), da ti najde nekdo rešitev za prelom.

slodreamer ::

na modrem elementu, v katerem je tekst, moraš mogoče nastavit 
overflow:hidden

vem da je to potrebno, če želiš ... za nadaljevanje teksta, v tvojem primeru nisem prepričan

sem pa našel še slednje

.wordwrap {
white-space: pre-wrap; CSS3
white-space: -moz-pre-wrap; Firefox
white-space: -pre-wrap; Opera 7
white-space: -o-pre-wrap; Opera
word-wrap: break-word; IE
}
drugače pa naredi fiddle https://jsfiddle.net/ pa ti lažje pomagamo :)

IcEk` ::

.text {
word-wrap: break-word;
text-align: center;
}

Zgodovina sprememb…

  • spremenil: IcEk` ()

blackbfm ::

overflow hidden mu bo odrezal besedilo

teac ::

Lahko pa uporabis flexbox, je veliko bolj prilagodljiv kot vanilla css.

blackbfm ::

da ne boste izumli tople vode, tekst bi se ze prevzeto mogu prelomt ce bi blo proper narejeno

dej pokazi ze strukturo/kodo, nihce ne more dat na blef nasveta kako to resit

joker16_7 ::

Evo, jsfiddle - https://jsfiddle.net/BroKeR/av11vjjj/
"Ambition is the path to success. Persistence is the vehicle you arrive in."
Bill Bradley

slodreamer ::

article a h2 {
width:100%;
}

blackbfm ::

joj kakšna solata od kode, ni čudno da se brskalniku meša.. prej na novo spišeš kot pa popravljaš

https://jsfiddle.net/evynffk2/

ni pixel perfect, je pa dovolj dobro za moje pojme, pa še povsod deluje.. za tiles z daljšimi vrsticami bi mogoče dodal mal manjši margin če te moti da vertikalno ni na sredini

amacar ::

Brez marginov se da lepo rešit, top + translate.
https://jsfiddle.net/0Lddzx91/

blackbfm ::

no, še boljše :)

joker16_7 ::

Ok, hvala. Težava rešena :) Uporabil sem funkcijo width: 100%

Sedaj pa ostaja samo še tale problem:
1) kljub uporabi UTF-8 encodinga ne morem pravilno prikažati šumnikov v Internet Explorerju (uspel sem rešiti težavo s prenastavitvijo samega prikaza strani v nastavitvah IE-ja, vendar to ni ustrezna rešitev, saj bo platformo uporabljalo več ljudi na več PC-jih) - P.S.: sprememba fonta ne pride v poštev

Kakšna ideja?
"Ambition is the path to success. Persistence is the vehicle you arrive in."
Bill Bradley

Zgodovina sprememb…

111111111111 ::

https://support.microsoft.com/en-gb/hel...

In spodaj imaš možne rešitve.

joker16_7 ::

- Disable the Auto-Select setting in Internet Explorer. (ne bo šlo, saj vsem uporabnikom ne moreš spreminjat nastavitev Explorerja)
- Provide the character set in the HTTP headers. (že nastavljeno na UTF-8)
- Move the META tag to within the first kilobyte of data that is parsed by MSHTML. Although we do not know how much data the parser reads at a time, this location will resolve the issue. (nimam pojma kaj naj bi to pomenilo :))
- Increase the size of the server's initial HTTP response. The initial size should be at least 1 KB. (nimam dostopa do serverja oz. administratorskih pravic)
- Make sure that the System Locale setting matches the character set of the META tag that is specified in the HTML page. (tudi tukaj gre za lokalno rešitev v okviru Winsev, kar ni univerzalna rešitev)
"Ambition is the path to success. Persistence is the vehicle you arrive in."
Bill Bradley

blackbfm ::

1) preveri font, če uporabljaš google fonts moraš dodat latin extended subset
2) preveri encoding html datoteke, mora bit utf8
3) header (to praviš da je ok)

ko bo to vse štimal bodo šumniki normalno prikazani

joker16_7 ::

1) misliš pisavo nastavljeno v IE-ju?
2, 3)
<head>
		<title>Home</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link rel="stylesheet" href="assets/css/main.css" />
</head>

Mislim, da štima :)
"Ambition is the path to success. Persistence is the vehicle you arrive in."
Bill Bradley

Zgodovina sprememb…

blackbfm ::

nastavitve ieja nimajo veze, kakšen font imaš v cssju?

2 in 3 nista ista stvar.. odpri file v editorju in poglej v kakšnem encodingu je datoteka oz jo shrani kot utf8

joker16_7 ::

Takšne so nastavitve pisave:
font-family: "Source Sans Pro", Helvetica, sans-serif;
font-size: 16pt;
font-weight: 300;
line-height: 1.75;


Kar se meta charseta tiče je tako vidno, da je nastavljen na UTF-8. Kje pa piše v kakšnem encodingu je datoteka?
"Ambition is the path to success. Persistence is the vehicle you arrive in."
Bill Bradley

blackbfm ::

dodaj &subset=latin-ext v font import pa sporoči če deluje:

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro&subset=latin-ext');

joker16_7 ::

@import url... sem kompletno zamenjal s tvojim. Šumniki delujejo, vendar mi slog pisave povsem spremeni. Takole na oko je pisava predvsem neodebeljena in malenkost manjša.

Kakšna ideja? :)
"Ambition is the path to success. Persistence is the vehicle you arrive in."
Bill Bradley

blackbfm ::

ok, potem je manjkala še debelina pisav, sem ti skopiral zdaj iz jsfiddla in dodal latin-ext

@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,700,900&subset=latin-ext");

joker16_7 ::

DELA! :D HVALA! ;) Se opravičujem za Caps Lock.

V čem je bila finta? Kaj ta latin-ext spremeni?
"Ambition is the path to success. Persistence is the vehicle you arrive in."
Bill Bradley

GupeM ::

Pove google API-ju, katere znake ta pisava uporablja.

joker16_7 ::

Hvala tudi za to pojasnilo. Nice, še eno znanje v "bazi" več :)
"Ambition is the path to success. Persistence is the vehicle you arrive in."
Bill Bradley

Vzdevek ::

joker16_7 je izjavil:

Hvala tudi za to pojasnilo. Nice, še eno znanje v "bazi" več :)


Pa rekao sam ti brate zgoraj ;(( Glavno da dela

Zgodovina sprememb…

  • spremenil: Vzdevek ()

joker16_7 ::

Vzdevek:
Sorry, ampak moje znanje ni na takem nivoju, da bi razumel tak tip razlage. Jaz sem mislil, da me prepričuješ naj menjam font :)

Pojavila se je še ena HTML težava, ki je po več urah ne uspem rešiti, in sicer bi rad na stran nastavil nek neviden števec obiska strani. Po domače - v HTML kodo bi rad zapakiral nek feedback koliko ljudje dejansko uporablja mojo platformo in njene podstrani.

P.S.: Server nima podpore za PHP, zato je nujno potrebno rešitev nekako speljati v HTML/CSS-ju.
"Ambition is the path to success. Persistence is the vehicle you arrive in."
Bill Bradley

111111111111 ::

No go. Beri: javascript, jQuery, ampak boš to moral nekam zapisovat in klicat kakšno skripto, brez PHP, .NET ali neke baze ne bo šlo.

joker16_7 ::

javascript znotraj HTML-ja? To ne bi šlo?

Rabim namreč nekaj takega...
https://www.tutorialspoint.com/servlets...
"Ambition is the path to success. Persistence is the vehicle you arrive in."
Bill Bradley

amacar ::

V vsakem primeru boš rabil klic na nek servis/servlet v jeziku, ki ga podpira tvoj server.

joker16_7 ::

Dajmo najprej razmičistit eno osnovo. Intranet stran ne bo delovala na serverju, ampak neke vrste "server" disku. Na firmi ne poganjamo ničesar, temveč imamo zgolj skupni dostop do ogromnega diska za izmenjavo datotek. Zato tudi ne potrebujemo neke high-tech strani, kar pomeni da se stran gradi na podlagi predelanega HTML/CSS3 templata. V to kodo sedaj nameravam vstaviti recimo en javascript kot je tale:

http://www.comptechdoc.org/independent/...
"Ambition is the path to success. Persistence is the vehicle you arrive in."
Bill Bradley

smacker ::

Res dajmo razčistit eno osnovo: Javascript teče v brskalniku - torej pri odjemalcu. Linkan script šteje, kolikokrat je iz enega browserja bila obiskana spletna stran - torej kolikokrat je Janez prišel na stran. Če boš hotel met podatek o tem, koliko je bilo vseh obiskovalcev, boš to moral štet na strežniku (v podjetju ali na kakem zunanjem servisu).

technolog ::

Nauci se PHP, tak stevec mas skodiran v manj kot 10 vrsticah kode.

Ce to ne gre, bos pa rabil kak servis. http://www.reliablecounter.com/

joker16_7 ::

Ni fora, da se mi ne ljubi ali karkoli. Rešitev v PHP-ju se namreč nahaja na netu v milijon različicah. Ena odlična je tukaj:

http://www.stevedawson.com/scripts/text...

Težava je v tem, da tole ne bo laufalo na našem disku. Rešitev gotovo obstaja, vendar verjamem da je bolj komplicirana od tele solucije s PHP-jem.
"Ambition is the path to success. Persistence is the vehicle you arrive in."
Bill Bradley

smacker ::

Če majo clienti dostop do spleta, pol lahko uporabiš zunanji servis - zgoraj predlagani reliablecounter naprimer.
Nasvet: pomaga če pozorno prebereš kaj ti napišemo na forumu ;)

joker16_7 ::

Če ne bo šlo drugače, potem bom uporabil tale reliablecounter. Ravnokar testiram in niti ni slaba stvar :)
"Ambition is the path to success. Persistence is the vehicle you arrive in."
Bill Bradley

joker16_7 ::

P.S.: Ne dela :| Po skreiranem linku mislim, da niti ni čudno, saj on na vsak način hoče v kodi spredaj http, čeprav moja povezava do html datoteke zgleda nekako takole :C...
"Ambition is the path to success. Persistence is the vehicle you arrive in."
Bill Bradley

technolog ::

Probaj naslednjega. In naslednjega. Teh servisov je miljone.

smacker ::

Dela, samo ti ne znaš. Moraš dat HTTP - s tem pokličeš njihov strežnik, mu podaš pri klicu svojo stran, potem se na strežniku poveča števec in zgenerira slika z števcem. Slednje vrne kot rezultat in moraš ti prikazat na svoji strani.
Primer: http://www.reliablecounter.com/count.ph...
Daj si malo razčisti kako deluje splet, če si že plačan za to da delaš spletne strani: https://www.ntu.edu.sg/home/ehchua/prog...

Zgodovina sprememb…

  • spremenil: smacker ()

111111111111 ::

@joker16_7: Glej v eni fazi se bodo fantje navaličali. Prenehaj iskati instant rešitve in ubogaj smacker-ja. Razčisti kaj pomeni client-server, kaj so API-ji.

Lepo da se lotevaš, samo se lotevaš narobe, če ciljaš na daljnoročno znanje si čisto mimo usekal. ŽE osnovno spletno stran si moral zakomplicirat s števcem. V današnjem svetu pač ne bo šlo z HTML/CSS skozi. Ne bo. V firmi bi radi imeli web app, slej ko prej boš moral postaviti strežnik. :)

joker16_7 ::

Evo brihte... :P

					<script LANGUAGE="JavaScript">
function nameDefined(ckie,nme)
{
   var splitValues
   var i
   for (i=0;i<ckie.length;++i)
   {
      splitValues=ckie[i].split("=")
      if (splitValues[0]==nme) return true
   }
   return false
}

function delBlanks(strng)
{
   var result=""
   var i
   var chrn
   for (i=0;i<strng.length;++i) {
      chrn=strng.charAt(i)
      if (chrn!=" ") result += chrn
   }
   return result
}
function getCookieValue(ckie,nme)
{
   var splitValues
   var i
   for(i=0;i<ckie.length;++i) {
      splitValues=ckie[i].split("=")
      if(splitValues[0]==nme) return splitValues[1]
   }
   return ""
}
function insertCounter() {
 readCookie()
 displayCounter()
}
function displayCounter() {
 document.write('<p align="center">')
 document.write("Obiskovalec št.: ")
 if(counter==1) document.write("")
 else document.write(counter+"")
 document.writeln('</p>')
 }
function readCookie() {
 var cookie=document.cookie
 counter=0
 var chkdCookie=delBlanks(cookie)  //are on the client computer
 var nvpair=chkdCookie.split(";")
 if(nameDefined(nvpair,"pageCount"))
 counter=parseInt(getCookieValue(nvpair,"pageCount"))
 ++counter
 var futdate = new Date()
 var expdate = futdate.getTime()
 expdate += 3600000 * 24 *30  //expires in 1 hour
 futdate.setTime(expdate)

 var newCookie="pageCount="+counter
 newCookie += "; expires=" + futdate.toGMTString()
 window.document.cookie=newCookie
}
</script>


... odličen javascript counter, ki deluje samo in izključno znotraj HTML kode.

<script LANGUAGE="JavaScript">insertCounter()</script>


Edina težava, ki ostaja je ta, da se ozira glede na lokalne cookije uporabnikov, kar pomeni, da bi bilo potrebno dodati še nekaj vrstic, ki bi izvedle zapisovanje in klicanje v in iz neke zunanje .txt datoteke.

Zna kdo priskočiti na pomoč? :)
"Ambition is the path to success. Persistence is the vehicle you arrive in."
Bill Bradley

Zgodovina sprememb…

111111111111 ::

joker16_7 je izjavil:



Edina težava, ki ostaja je ta, da se ozira glede na lokalne cookije uporabnikov, kar pomeni, da bi bilo potrebno dodati še nekaj vrstic, ki bi izvedle zapisovanje in klicanje v in iz neke zunanje .txt datoteke.

Zna kdo priskočiti na pomoč? :)


To je glavna težava, zakaj smo ti odsvetovali HTML/CSS in ti težimo s pojmi kot so API, PHP, .NET, SQL, MySQL, client-server, AJAX, jQuery.

Pa nočeš poslušat. Ne težimo ti zato, ker bi bili brihtni, ampak ker smo to že delali, eni so pač pripravljeni pomagati s kodo, drugi z nasveti. Veliko sreče pri pisanju v datoteko.
«
1
2

Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
»

[php] encoding niza

Oddelek: Izdelava spletišč		173791 (1706) BivšiUser2
»

Vodič: Uporaba Google Fonts

Oddelek: Izdelava spletišč		92520 (2131) čuhalev
»

Google font - (č,ž,š) delajo local, na hostu pa ne delujejo

Oddelek: Izdelava spletišč		82332 (2124) neoserv
»

[HTML 5] + [CSS] inline-block in neželeni presledki

Oddelek: Izdelava spletišč		91773 (1514) technolog
»

[PHP]Zamenjava šumnikov z html kodami

Oddelek: Programiranje		154061 (2339) mikesr

Več podobnih tem