I have a Bootstrap 4 based web page with 1 row which has 3 columns. I want the 1st and 3rd columns to have a fixed position and the 2nd column to be scrollable.
<div class="container" style="align-content:center;background-color:red;">
<div class="form-row" style=" margin: 0px;" >
<div class="col-lg-4" style="background-color:white;" >
<div style="position:fixed;">
Alapus berihal aralori nog abosiman to lere sot. Tec rihew elicip eho ma gub? Atiyi fe emanoto urigifie cep corike? Ino oraled efoponay to cinit opotare. Tadedo pet rico ocodum yetej tupe ime havi bod huwese, esofahe esereho hihuriet ner ge. Laha rig hikede ri totonic porac. Ebacep yiribos toriel delu riti iter. Cepit atobiteg tavet icut ariyase cilayon.
</div>
</div>
<div class="col-lg-6" style="background-color:red;" >
Vani vo teco laf. Eninegit uge no rayo no so sucic: Bomage rob tas? Rep sogesas mosen penude za hoyetob pin. Ilil ditolun lisafic etatem aber wah epasa pimev asic lowieso, letadol suriso la semu. Qalonur toru ha osilo herera cacal ciyod non isi? Ler cat yisegi. Ale ren geneva; lac pogeba adi nome layedir.
Vani vo teco laf. Eninegit uge no rayo no so sucic: Bomage rob tas? Rep sogesas mosen penude za hoyetob pin. Ilil ditolun lisafic etatem aber wah epasa pimev asic lowieso, letadol suriso la semu. Qalonur toru ha osilo herera cacal ciyod non isi? Ler cat yisegi. Ale ren geneva; lac pogeba adi nome layedir.
Vani vo teco laf. Eninegit uge no rayo no so sucic: Bomage rob tas? Rep sogesas mosen penude za hoyetob pin. Ilil ditolun lisafic etatem aber wah epasa pimev asic lowieso, letadol suriso la semu. Qalonur toru ha osilo herera cacal ciyod non isi? Ler cat yisegi. Ale ren geneva; lac pogeba adi nome layedir.
Vani vo teco laf. Eninegit uge no rayo no so sucic: Bomage rob tas? Rep sogesas mosen penude za hoyetob pin. Ilil ditolun lisafic etatem aber wah epasa pimev asic lowieso, letadol suriso la semu. Qalonur toru ha osilo herera cacal ciyod non isi? Ler cat yisegi. Ale ren geneva; lac pogeba adi nome layedir.
Vani vo teco laf. Eninegit uge no rayo no so sucic: Bomage rob tas? Rep sogesas mosen penude za hoyetob pin. Ilil ditolun lisafic etatem aber wah epasa pimev asic lowieso, letadol suriso la semu. Qalonur toru ha osilo herera cacal ciyod non isi? Ler cat yisegi. Ale ren geneva; lac pogeba adi nome layedir.
</div>
<div class="col-lg-2" style="background-color:yellow;" >
<div style="position:fixed;">
Cegeh na rasi nitora sep lim ded so rar? Po tosula iwe ciyirif; iro seri la nenegac ralala meralak, nomir na lerorer! Lita resonop eropem enulose mi rer ne tacacal yumo calos. Dic teril satec yel wupip rar: Keye hipoce egol ecimi ra cienet. Yohicem niran sor naqetar odecafel eso ronu tunerig sos: Musedu roy tegovi hu reru inaca. Lo onobeda ategat de. Ikikosen polie re uweme ronepo. Mitif reqepu sel. Fubiel pac madotil pip, nedupa rotolin re deciso riciho; tenabir rakira nay asaluti yer reci penede iepaso.
</div>
</div>
</div>
</div>
The content of the 3rd column exceeds the column. If I remove position:fixed, the content stays within the column, but the column becomes scrollable. If I use position:sticky, I don't know what to set the top attribute to without using javascript. Does anyone know how I can keep the content of the column fixed while keeping it within the column?
You just have to do something like this :
<div class="col-md-3 h-100">...</div>
<div class="col-md-3 h-100 scrolling-content">...</div>
<div class="col-md-3 h-100">...</div>
And in you css :
.scrolling-content {
overflow: scroll;
}
You can use this code
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Demo</title>
<style type="text/css">
body {
margin: 0;
}
.box {
overflow: scroll;
}
</style>
</head>
<body>
<div class="container" style="align-content: center; background-color: red;">
<div class="form-row row" style=" margin: 0px;">
<div class="col-md-4" style="background-color: white;">
Alapus berihal aralori nog abosiman to lere sot. Tec rihew elicip eho ma gub? Atiyi fe emanoto urigifie cep corike? Ino oraled efoponay to cinit opotare. Tadedo pet rico ocodum yetej tupe ime havi bod huwese, esofahe esereho hihuriet ner ge. Laha rig
hikede ri totonic porac. Ebacep yiribos toriel delu riti iter. Cepit atobiteg tavet icut ariyase cilayon.
</div>
<div class="col-md-6 box" style="background-color: red;">
Vani vo teco laf. Eninegit uge no rayo no so sucic: Bomage rob tas? Rep sogesas mosen penude za hoyetob pin. Ilil ditolun lisafic etatem aber wah epasa pimev asic lowieso, letadol suriso la semu. Qalonur toru ha osilo herera cacal ciyod non isi? Ler cat
yisegi. Ale ren geneva; lac pogeba adi nome layedir. Vani vo teco laf. Eninegit uge no rayo no so sucic: Bomage rob tas? Rep sogesas mosen penude za hoyetob pin. Ilil ditolun lisafic etatem aber wah epasa pimev asic lowieso, letadol suriso la
semu. Qalonur toru ha osilo herera cacal ciyod non isi? Ler cat yisegi. Ale ren geneva; lac pogeba adi nome layedir. Vani vo teco laf. Eninegit uge no rayo no so sucic: Bomage rob tas? Rep sogesas mosen penude za hoyetob pin. Ilil ditolun lisafic
etatem aber wah epasa pimev asic lowieso, letadol suriso la semu. Qalonur toru ha osilo herera cacal ciyod non isi? Ler cat yisegi. Ale ren geneva; lac pogeba adi nome layedir. Vani vo teco laf. Eninegit uge no rayo no so sucic: Bomage rob tas?
Rep sogesas mosen penude za hoyetob pin. Ilil ditolun lisafic etatem aber wah epasa pimev asic lowieso, letadol suriso la semu. Qalonur toru ha osilo herera cacal ciyod non isi? Ler cat yisegi. Ale ren geneva; lac pogeba adi nome layedir. Vani
vo teco laf. Eninegit uge no rayo no so sucic: Bomage rob tas? Rep sogesas mosen penude za hoyetob pin. Ilil ditolun lisafic etatem aber wah epasa pimev asic lowieso, letadol suriso la semu. Qalonur toru ha osilo herera cacal ciyod non isi? Ler
cat yisegi. Ale ren geneva; lac pogeba adi nome layedir.
</div>
<div class="col-md-2" style="background-color: yellow;">
Cegeh na rasi nitora sep lim ded so rar? Po tosula iwe ciyirif; iro seri la nenegac ralala meralak, nomir na lerorer! Lita resonop eropem enulose mi rer ne tacacal yumo calos. Dic teril satec yel wupip rar: Keye hipoce egol ecimi ra cienet. Yohicem niran
sor naqetar odecafel eso ronu tunerig sos: Musedu roy tegovi hu reru inaca. Lo onobeda ategat de. Ikikosen polie re uweme ronepo. Mitif reqepu sel. Fubiel pac madotil pip, nedupa rotolin re deciso riciho; tenabir rakira nay asaluti yer reci penede
iepaso.
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Related
can anyone help me figure out what's wrong with the code? links not working, if you click on it nothing happens. I thought I left some tags open but I checked with https://validator.w3.org and there are no such errors! What could be the problem?
I have seen the other questions and answers related to this topic but they did not help me.
note: navigate to "i miei lavori" page or "my work" page
link:
minimal reproducible example
html
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width">
<title>i miei lavori - Andrea</title>
</head>
<body>
<div class="specchietto-menu">
<button class="pulsanti-menu" name="btnchisono" onclick="chisonoPage()">chi sono</button>
<button class="pulsanti-menu" style="color:blue;" name="btnlavori" onclick="lavoriPage()">i miei lavori</button>
<button class="pulsanti-menu" name="btncuriosita" onclick="curiositaPage()">curiosità</button>
</div>
<div class="choose-language">
<button class="btn-language" onclick="changeLanguage()"><img src="images/english-language.jpg" alt=""></button>
</div>
<br>
<div class="scrollTop"><i class="fa fa-angle-double-up" style="font-size:36px"></i></div>
<div class="contenitore">
<p class="presentazione-lavori">Lavori svolti per svago anni fà</p>
<br>
<div class="specchietto-articolo">
<!-- Firewall", un trojan per mIRC -->
<p class="titolo-articolo">"Firewall", un trojan per mIRC</p>
<p class="articolo"><img src="images/mirc-logo-mini.jpg" style="float:left;">Correva l'anno 2000, avevo da poco avuto accesso a internet, avevo una connessione 56k flat 12/24 con Libero#Sogno, ero affascinato da alcuni degli script di mIRC, il celebre programma di chat, molto gettonato in rete in quegli anni e ne provai alcuni, così per curiosità mi misi a leggere il codice sorgente degli script ".ini", fu così che iniziò il mio viaggio nel mondo della programmazione.
</p>
<p class="articolo">La mia prima creazione fù un trojan che chiamai "firewall", per ovvie ragioni di ingegneria sociale di cui parlerò più avanti. Il Trojan era composto da uno script che era caricato nel mio client, che inviava i comandi da eseguire sul client della vittima che avrebbe dovuto caricare lo script malevolo sul proprio mIRC ma le fondamenta del trojan era la direttiva "onNotice", un evento che veniva generato quando si riceveva un messaggio particolare, il notice appunto. Di default questi messaggi erano nascosti, il client li riceveva, li elaborava ma l'utente era ignaro di averlo ricevuto, per questo motivo lo scelsi. Lo script che era caricato nel mio client mIRC non faceva altro che inviare un "notice" criptato alla vittima, bastava aprire un canale privato con l'utente target per avere accesso alle funzioni.
</p>
<p class="articolo">C'erano funzioni standard per cambiare nick alla vittima, scrivere messaggi al suo posto e disconnetterla dal server con messaggi particolari, di solito quando c'era una disconnessione del client appariva un messaggio di questo genere "connection reset by peer", al posto di "peer" erano disponibili vari nomi tra cui Babbo Natale(connection reset by Babbo Natale), divertente!. Potevo scrivere messaggi su canali e chat private al posto del malcapitato e potevo cambiarli nick ma la feature più potente era poter eseguire qualsiasi direttiva sulla macchina vittima. La cosa più difficile di questo sistema era convincere la vittima a caricare lo script sul proprio client, da qui il nome che ho scelto per il trojan, "Firewall", c'era molta ignoranza informatica in quegli anni ma molti degli internauti sapeva cosa era un firewall e lo avrebbe caricato più facilmente.
</p>
<p class="articolo">Detto questo ci fù solo una vittima di questo trojan, un mio amico di chat che si fidò ciecamente di me e lo convissi molto facilmente a installare "Firewall". Tuttavia il divertimento durò poco, li cambiai nick un paio di volte, scrissi qualche parolaccia, feci coming-out al posto suo su dei canali pubblici e lo disconnettei diverse volte ma ero così orgoglioso del mio lavoro che per vantarmi li dissi tutto e subito e così dandomi della merda disinstallò lo scrip. Rimane ad oggi l'unica vittima di Firewall. Condividerei il codice sorgente ma è andato perduto negli anni.
</p>
<p style="font-size:80%;">Windows 98, mIRC scripting</p>
<!-- Convertitore da .wav a .mp3 -->
<br>
<p class="titolo-articolo">Convertitore da .wav a .mp3</p>
<p class="articolo"><img src="images/mp3-mini.jpg" style="float:left">Erano i primi anni 2000, avevo circa 16/17 anni ed era consuetudine rivoltare i CD musicali nel computer per poter creare le proprie playlist. Windows Media Player in quegli anni creava file wav quando si eseguivano queste operazioni e si sa che il formato wav è molto pesante rispetto agli mp3 e gli HD non erano molto capienti. Così sentii la necessità di un convertitore, cercai in internet e trovai una libreria per convertire, aprii il mio VB6 con cui smanettavo da poco tempo e scrissi qualche linea di codice. Il programma prevedeva una navigazione nelle cartelle di sistema per scegliere quali file convertire, una volta selezionati si avviava la conversione e venivano creati i files mp3 con gli stessi nomi degli originali. È stato veramente semplice utilizzare la libreria, bastava impostare alcune configurazioni e richiamare la funzione di conversione con i dovuti parametri.
</p>
<p style="font-size:80%;">Windows ME, Visual Basic 6</p>
<!-- Sondaggio scolastico -->
<br>
<p class="titolo-articolo">Sondaggio scolastico</p>
<p class="articolo"><img src="images/sondaggio-mini.jpg" style="float:left">Frequentavo il II anno del Liceo Scientifico del mio paese, il Preside aveva fatto distribuire dei fogli che avrebbero costituito un sondaggio ma non ricordo i temi trattati. Era complicato analizzare i dati delle risposte di tutti gli alunni a mano così mi chiese se potevo scrivere un programma che raccogliesse i dati e li elaborasse.
</p>
<p class="articolo">Allora non ero a conoscenza dell'esistenza di SQL ne sapevo a cosa servisse Access di Microsoft così mi venne in mente di immagazzinare i dati nelle celle dei fogli Excel, usai le librerie di Visual Basic 6 per accedere ai fogli di calcolo, MSDN era la mia fonte principale di informazione per sviluppare.
</p>
<p class="articolo">Mi divertii molto a creare questa applicazione, credevo che avrei ricevuto dei compensi scolastici, crediti formativi o un'incremento dei voti in matematica(in cui andavo già bene) ma l'unica cosa che ricevetti è stato l'incremento della mia esperienza(ben venga sempre) e un grazie dal Preside.
</p>
<p style="font-size:80%;">Windows XP, Visual Basic 6, Excel</p>
<!-- Formattatore files .csv -->
<br>
<p class="titolo-articolo">Formattatore files .csv</p>
<p class="articolo"><img src="images/csvicon-mini.jpg" style="float:left">È stato molto semplice sviluppare questa applicazione. Avevo bisogno di formattare dei files csv composti da tantissime righe, era impossibile farlo a mano così lessi qualche tutorial del C++ e da lì a poco mi misi a scrivere righe di codice. Leggendo i tutorial riuscii a capire anche i puntatori e feci qualche applicazione che li utilizzava ma era per solo scopo didattico. Ora per essere sincero non ricordo quasi nulla di questo fantastico linguaggio dal momento che è stata la prima e l'ultima volta che lo utilizzai.
</p>
<p style="font-size:80%;">GNU Linux Debian, C++</p>
<!-- Indicatori su piattaforma di trading -->
<br>
<p class="titolo-articolo">Indicatori su piattaforma di trading</p>
<p class="articolo"><img src="images/metatrader4icon-small.jpg" style="float:left">Negli anni 2012/2013 circa mi accanii nel trading online e utilizzavo la piattaforma Metatrader4, ore e ore di studio di molta analisi tecnica. Una volta acquisite le conoscenze cercai di supplire alla mancanza di indicatori per il volume di scambi nel forex e non solo. Di indicatori ed oscillatori ce ne erano molti ma mi accorsi che mancava qualcosa e mi misi a lavoro. Sinceramente ora non ricordo bene cosa facessero questi indicatori, nel codice sorgente di alcuni di essi c'è una valore Delta che non ricordo proprio cosa sia. Comunque questi indicatori come già detto misuravano il volume di scambi e quindi un bilanciamento tra domanda e offerta e ce ne sono alcuni che mi servivano per gestire il money management. Di questi ho il codice sorgente, perdonatemi se qualche file risulta poco leggibile ma quando l'ho scritto dovevo programmare da un decennio circa.</p>
<br>VSA CumulativeDelta 0.1.mq4
<br>VSA PriceDelta Correlation v.0.1.mq4
<br>VSA PriceVolume Correlation v.0.4.mq4
<br>VSA Volume Percentage v.1.5.mq4
<br> MM RiskControl v2.1.mq4
<p style="font-size:80%;">Windows XP, MetaTrader4 Language</p>
<!-- Alla ricerca dell'olio essenziale -->
<br>
<p class="titolo-articolo">Alla ricerca dell'olio essenziale</p>
<p class="articolo"><img src="images/olioessenziale-mini.jpg" style="float:left">Avevo acquistato da poco una enciclopedia degli olii essenziali, ancora la possiedo, è ben fatta, ci sono descrizioni dettagliate di molti olii, nelle descrizioni ci sono le proprietà e gli antichi usi nella erboristeria popolare e molte altre informazioni, inoltre ci sono delle sezioni in cui puoi ricercare l'olio essenziale per proprietà, ad esempio se cerchi la voce antinfiammatorio puoi trovare nell'elenco l'olio di eucalipto. Perchè non portare in digitale questo sistema e magari migliorarlo anche?
</p>
<p class="articolo">Così mi misi a lavoro, scelsi Gambas per sviluppare l'applicazione, aveva tutte le caratteristiche di cui avevo bisogno, e come database mi sono appoggiato a mySQL. Oltre che un'interfaccia per inserire gli olii e le loro proprietà c'era la parte più importante dell applicazione che consisteva nell'inserire una o più proprietà nella barra di ricerca. Così venivano fuori per primi gli olii che possedevano tutte quelle proprietà, mentre secondariamente erano elencati gli olii che possedevano solo alcune delle proprietà cercate.
</p>
<p class="articolo">Tra le svariate reinstallazioni, backup incompleti e pc bruciati l'applicazione è andata perduta, mi sarebbe piaciuto poterla condividere in rete.
</p>
<p style="font-size:80%;">GNU Linux Debian, Gambas</p>
<br>
<p class="presentazione-lavori">Lavori svolti recentemente con Angular</p>
<!-- NGRX Store Demo -->
<br>
<p class="titolo-articolo">NGRX Store Demo</p>
<p class="articolo"><img src="images/logo-ngrx.jpg" style="float:left;">Questa demo mostra il funzionamento basilare di ngrx, cioè mostra l’uso di actions, reducers e selector. Inserendo i dati nel form viene aggiornato l’utente nello store.</p>
github
stackblitz
<br><br><p style="font-size:80%;">GNU Linux Debian 10, TypeScript, Angular, NGRX</p>
<!-- NGRX Entity Demo -->
<br>
<p class="titolo-articolo">NGRX Entity Demo</p>
<p class="articolo"><img src="images/logo-ngrx.jpg" style="float:left;">Questa demo è stata sviluppata per mostrare il funzionamento delle entity in ngrx, ovviamente usa anche actions, reducers e selectors. È possibile aggiungere gli utenti tramite il form che verranno presentati e ordinati secondo l’età.</p>
github
stackblitz
<p style="font-size:80%;">GNU Linux Debian 10, TypeScript, Angular, NGRX</p>
<!-- NGRX Effects and Entity Demo -->
<br>
<p class="titolo-articolo">NGRX Effects and Entity Demo</p>
<p class="articolo"><img src="images/logo-ngrx.jpg" style="float:left;">In questa demo utilizzo per la prima volta gli Effects che vanno prima a modificare i dati mock per simulare un cambiamento nel database, se l’ aggiornamento dei dati mock ha successo si andranno a modificare anche i dati nello store, in caso contrario viene lanciata l’action di errore di inserimento. Dall’ interfaccia ui è possibile aggiungere gli utenti che saranno listati in ordine di età.</p>
github
stackblitz
<p style="font-size:80%;">GNU Linux Debian 10, TypeScript, Angular, NGRX</p>
<!-- NGRX Chain of Responsibility Demo -->
<br>
<p class="titolo-articolo">NGRX Chain of Responsibility Demo</p>
<p class="articolo"><img src="images/logo-ngrx.jpg" style="float:left;">In questa demo viene affrontato il discorso del pattern della delegazione di responsabilità.Sostanzialmente il componente conteiner si occupa di quasi tutta la logica e il resto dei componenti sono solo di presentazione, ad eccezione del componente per dare il rating nel quale c’è una funzione per la visualizzazione delle stelle di rating e per l’emissione del nuovo rating che scalando la gerarchia dei componenti arriverà fino al componente conteiner che farà il dispatch dell’ azione di inserimento rating. I dati da osservare hanno lo stesso funzionamento, al cambiare dei dati nello store, essi vengono passati tramite le proprietà di input ai componenti figli.</p>
github
stackblitz
<p style="font-size:80%;">GNU Linux Debian 10, TypeScript, Angular, NGRX</p>
<!-- rxjs combineLatest Demo -->
<br>
<p class="titolo-articolo">rxjs combineLatest Demo</p>
<p class="articolo"><img src="images/logo-RxJS.jpg" style="float:left;">Non c’ è molto da dire su questa demo, mostra l’uso dell’ operatore rxjs combineLatest, combina due observable e restituisce un observable di array di oggetti.</p>
github
stackblitz
<br><br><p style="font-size:80%;">GNU Linux Debian 10, TypeScript, Angular</p>
<!-- Change Detection Strategy Default Demo -->
<br>
<p class="titolo-articolo">Change Detection Strategy Default Demo</p>
<p class="articolo"><img src="images/Logo-Angular.jpg" style="float:left;">La CD di default praticamente viene sempre eseguita, qualsiasi pulsante viene cliccato, quindi si renderizzano i componenti ma individua i cambiamenti dell’ oggetto solo nel caso si clicchi “Change Object Reference”.</p>
github
stackblitz
<br><p style="font-size:80%;">GNU Linux Debian 10, TypeScript, Angular</p>
<!-- Change Detection Strategy OnPush Demo -->
<br>
<p class="titolo-articolo">Change Detection Strategy OnPush Demo</p>
<p class="articolo"><img src="images/Logo-Angular.jpg" style="float:left;">Nel caso della CD OnPush, che si usa solo per i componenti children, le proprietà di #Input vengono renderizzate solo nel caso in cui l’oggetto cambi referenza, nel caso in cui viene modificata solo la proprietà dell’ oggetto il dato non viene renderizzato perché la CD non individua cambiamenti.</p>
github
stackblitz
<p style="font-size:80%;">GNU Linux Debian 10, TypeScript, Angular</p>
<!-- Angular Security Sanitization Demo -->
<br>
<p class="titolo-articolo">Angular Security Sanitization Demo</p>
<p class="articolo"><img src="images/Logo-Angular.jpg" style="float:left;">Questa è una demo per provare una feature di sicurezza in Angular, il contenuto interpolato non è interpretato e viene renderizzato completamente mentre usando innerHTML il contenuto viene interpretato e sanificato.</p>
github
stackblitz
<br><p style="font-size:80%;">GNU Linux Debian 10, TypeScript, Angular</p>
<!-- Angular Animations Owl Carousel Demo -->
<br>
<p class="titolo-articolo">Angular Animations Owl Carousel Demo</p>
<p class="articolo"><img src="images/Logo-Angular.jpg" style="float:left;">Questa è una demo di un owl carousel, tipo quelle che si vedono su ebay o amazon, per gli oggetti visti di recente oppure per gli oggetti correlati.</p>
github
stackblitz
<br><br><br><p style="font-size:80%;">GNU Linux Debian 10, TypeScript, Angular</p>
<!-- CarsMarketPlace -->
<br>
<p class="titolo-articolo">Cars Market Place</p>
<p class="articolo"><img src="images/maserati_mc20_img1.jpg" style="float:left;">Questo è il primo progetto che ho realizzato con Angular, senza contare "helloworld" e altre ormai insignificanti demo. Non avrei voluto pubblicarlo su github perchè essendo la prima esperienza con Angular il codice non è il massimo, le best pratice non sono tutte rispettate e ci sono altre questioni, un refactor non è pensabile, insomma come prima esperienza va piu che bene ma non bisogna fare molto caso alla forma, non è neanche completato del tutto, inoltre voglio ribadire che non sono un designer quindi il design non è apprezzabile.</p>
<p class="articolo">Con firefox sul mio pc il design è corretto ma con stackblitz su firefox è sballato, problema di stackblitz, usa Chrome per visualizzare la demo in stackblitz. Loggati con user e password "StanfRei"</p>
<p class="articolo">È un e-commerce in "stile e-bay" l'utente può comprare e vendere auto ma la funzione di vendita è stata disattivata in questa demo. La gallery presenta le auto in vendita da vari utenti, con il prezzo pieno e scontato e il rating di altri compratori, c'è il pulsante per osservare l'auto o rimuovere l'interesse. Sul lato sinistro ci sono le auto viste di recente, solo in caso di login effettuato. Le altre sezioni disponibili sul menu, se effettuato l'accesso, sono 'Observed Cars' e 'UserProfile', in quest' ultima è possibile inserire lo sconto per le auto messe in vendita dall' utente loggato. Tramite le card delle auto nella Gallery è possibile raggiungere sezioni dove è possibile comprare l' auto e dare un rating, oppure vedere le auto simili a quella selezionata. Come puoi aver capito ci sono delle guardie che limitano gli accessi a delle sezioni dell' app. Usa i dati mock, se si usasse un backend reale e ci fossero degli errori, sarebbero visualizzati a schermo, vengono intercettati dall' error interceptor e passati a un servizio, iniettato e gestito dal componente navbar.</p>
github
stackblitz
<br><p style="font-size:80%;">GNU Linux Debian 10, (NodeJS), TypeScript, Angular</p>
</div>
</div>
<div class="contenitore-email">
<p style="text-align:right">andreadicioccio1983#gmail.com</p>
</div>
<script>
function chisonoPage(){ window.open('chisono.html', '_self'); }
function lavoriPage(){ window.open('lavori.html', '_self'); }
function curiositaPage(){ window.open('curiosita.html', '_self'); }
let scrollTopBtn = document.querySelector('div.scrollTop')
scrollTopBtn.addEventListener('click', () => {
window.scrollTo({top:0, behavior: 'smooth'})
})
checkLanguage()
function checkLanguage(){
language = getLanguage()
if(language == "italian"){
}else if(language == "english"){
window.location = "lavori-en.html"
}else{
window.location = 'home.html'
}
}
function changeLanguage(){
setLanguage("english")
window.location = "lavori-en.html"
}
function getLanguage(){
storage = window.localStorage
language = storage.getItem("language")
console.log(language)
return language
}
function setLanguage(language){
storage = window.localStorage
storage.setItem("language", language)
}
</script>
</body>
css
*{
font-family: 'Poppins';
z-index: -1;
}
body{
background-color:white;
text-align:center;
margin: 0;
}
p {
font-size:1em;
text-align:justify;
}
.scrollTop{
position: fixed;
right: 50px;
bottom: 50px;
z-index: 0;
}
.scrollTop:hover{
cursor: pointer;
}
.specchietto-menu{
text-align:center;
}
.pulsanti-menu{
background-color:white;
border:solid 1px lightgrey;
font-size:1em;
height:2em;
width:7em;
margin-top: 10px;
}
.pulsanti-menu:hover{
cursor: pointer;
}
div.contenitore{
text-align:center;
}
.choose-language{
position: absolute;
right: 5px;
top: 10px;
z-index: 0;
}
.btn-language{
background-color: white;
border: 0;
}
.presentazione-lavori{
font-size: 26px;
text-align:center;
}
div.specchietto-articolo{
text-align:left;
width:465px;
position: relative;
display: inline-block;
}
p.titolo-articolo {
font-size:24px;
text-align:center;
}
p.articolo{
padding: 5px;
}
.contenitore-email{
text-align:right;
background-color:white;
width: 100%;
/*position: static;*/
/*right: 0px;
left: 0px;*/
}
#media screen and (max-width: 450px) {
.pulsanti-menu{
font-size: small;
width: 100px;
}
.choose-language{
position: absolute;
right: 5px;
top: 50px;
}
.presentazione-lavori{
font-size: 20px;
}
p.titolo-articolo{
font-size: 18px;
}
.specchietto-articolo{
width:100% !important;
}
p.articolo{
font-size: small;
}
}
It's because of the z-index in your css. Links with negative z-index are unclickable, its better to remove the z-index: -1 from your *-selector.
Or you can add an additional selector for the <a>-Tags to your style:
a {
z-index: 1;
}
I'm looking to write a shell script that minify less html files, but I'm having a problem.
I would like to delete the space on each side of a specific html tag, these tags being read from a file. With "perl", I can't do it, nothing happens, with sed in 2 commands I almost get what I want. In the example below, the space between some tags is removed, but not all, at the level of the "section" tags there is a problem, "h2" too, however the pattern matches ...
for tag in $tag_file ; do
# perl -e '$comHtml=<>; $comHtml=~s/ *(<${tag} *.* *>) */\1/g; print $comHtml' < tmp_html
sed -i -r -e "s: *(<${tag} *.* *>) *:\1:gI" ./tmp_html
sed -i -r -e "s: *(</${tag} *.* *>) *:\1:gI" ./tmp_html
done
here, $tag_file contains the specific tag got from a file, for example $tag_file = html \n head \n section \n ...
Entry html :
<!doctype html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>La gazette de L-INFO</title> <link rel="stylesheet" type="text/css" href="./styles/gazette.css"> </head> <body> <nav> <ul> <li>Accueil</li> <li>Toute l'actu</li> <li>Recherche</li> <li>La rédac'</li> <li>jbigoude <ul> <li>Mon profil</li> <li>Nouvel article</li> <li>Se déconnecter</li> </ul> </li> </ul> </nav> <header> <img src="./images/titre.png" alt="La gazette de L-INFO" width="780" height="83"> <h1>Le site de désinformation n°1 des étudiants en Licence Info</h1> </header> <main> <section class="centre"> <h2>À la Une</h2> <img src="images/hacker.jpg" alt="Un mouchard dans un corrigé de Langages du Web"><br> Un mouchard dans un corrigé de Langages du Web <img src="images/hymne.jpg" alt="Votez pour l'hymne de la Licence"><br> Votez pour l'hymne de la Licence <img src="images/melenchon.jpg" alt="L'amphi Sciences Naturelles bientôt renommé amphi Mélenchon"><br> L'amphi Sciences Naturelles bientôt renommé amphi Mélenchon </section> <section class="centre"> <h2>L'info brûlante</h2> <img src="images/walkingdead.jpg" alt="Il avait annoncé 'Je vais vous défoncer' l'enseignant relaxé"><br> Il leur avait annoncé "Je vais vous défoncer" l'enseignant relaxé <img src="images/pingouins.jpg" alt="Des pinguoins dans l'amphi B"><br> Toute une famille de pingouins découverte dans l'amphi B <img src="images/macron.jpg" alt="Emmanuel Macron obtient sa Licence d'Info en EAD"><br> Emmanuel Macron obtient sa Licence Info en EAD </section> <section class="centre"> <h2>Les incontournables</h2> <img src="images/arnaque.jpg" alt="Arnaque au devoir corrigé de TLSP"><br> Une arnarque au corrigé de TL mise à jour <img src="images/calendrier.jpg" alt="Le calendier des Dieux de la Licence bientôt disponible"><br> Le calendier des Dieux de la Licence bientôt disponible <img src="images/sondage.jpg" alt="Allez-vous réussir votre année ?"><br> Résultat de notre sondage : allez-vous réussir votre année ? </section> <section> <h2>Horoscope de la semaine</h2> <p>Vous l'attendiez tous, voici l'horoscope du semestre pair de l'année 2019-2020. Sans surprise, il n'est pas terrible...</p> <table id="horoscope"> <tr> <td>Signe</td> <td>Date</td> <td>Votre horoscope</td> </tr> <tr> <td>♈ Bélier</td> <td>du 21 mars<br>au 19 avril</td> <td rowspan="4"> <p>Après des vacances bien méritées, l'année reprend sur les chapeaux de roues. Tous les signes sont concernés. </p> <p>Jupiter s'aligne avec Saturne, péremptoirement à Venus, et nous promet un semestre qui ne sera pas de tout repos. Février sera le mois le plus tranquille puisqu'il ne comporte que 29 jours.</p> <p>Les fins de mois seront douloureuses pour les natifs du 2e décan au moment où tomberont les tant-attendus résultats du module d'<em>Algorithmique et Structures de Données</em> du semestre 3.</p> </td> </tr> <tr> <td>♉ Taureau</td> <td>du 20 avril<br>au 20 mai</td> </tr> <tr> <td>...</td> <td>...</td> </tr> <tr> <td>♓ Poisson</td> <td>du 20 février<br>au 20 mars</td> </tr> </table> <p>Malgré cela, notre équipe d'astrologues de choc vous souhaite à tous un bon semestre, et bon courage pour le module de <em>Système et Programmation Système</em>.</p> </section> </main> <footer>© Licence Informatique - Janvier 2020 - Tous droits réservés</footer> </body> </html>
output html :
<!doctype html><html lang="fr"><head><meta charset="UTF-8"><title>La gazette de L-INFO</title><link rel="stylesheet" type="text/css" href="./styles/gazette.css"></head><body><nav><ul> <li>Accueil</li> <li>Toute l'actu</li> <li>Recherche</li> <li>La rédac'</li> <li>jbigoude <ul> <li>Mon profil</li> <li>Nouvel article</li> <li>Se déconnecter</li></ul> </li> </ul></nav><header> <img src="./images/titre.png" alt="La gazette de L-INFO" width="780" height="83"><h1>Le site de désinformation n°1 des étudiants en Licence Info</h1></header><main><section class="centre"><h2>À la Une</h2> <img src="images/hacker.jpg" alt="Un mouchard dans un corrigé de Langages du Web"><br> Un mouchard dans un corrigé de Langages du Web <img src="images/hymne.jpg" alt="Votez pour l'hymne de la Licence"><br> Votez pour l'hymne de la Licence <img src="images/melenchon.jpg" alt="L'amphi Sciences Naturelles bientôt renommé amphi Mélenchon"><br> L'amphi Sciences Naturelles bientôt renommé amphi Mélenchon </section> <section class="centre"> <h2>L'info brûlante</h2> <img src="images/walkingdead.jpg" alt="Il avait annoncé 'Je vais vous défoncer' l'enseignant relaxé"><br> Il leur avait annoncé "Je vais vous défoncer" l'enseignant relaxé <img src="images/pingouins.jpg" alt="Des pinguoins dans l'amphi B"><br> Toute une famille de pingouins découverte dans l'amphi B <img src="images/macron.jpg" alt="Emmanuel Macron obtient sa Licence d'Info en EAD"><br> Emmanuel Macron obtient sa Licence Info en EAD </section> <section class="centre"> <h2>Les incontournables</h2> <img src="images/arnaque.jpg" alt="Arnaque au devoir corrigé de TLSP"><br> Une arnarque au corrigé de TL mise à jour <img src="images/calendrier.jpg" alt="Le calendier des Dieux de la Licence bientôt disponible"><br> Le calendier des Dieux de la Licence bientôt disponible <img src="images/sondage.jpg" alt="Allez-vous réussir votre année ?"><br> Résultat de notre sondage : allez-vous réussir votre année ? </section> <section> <h2>Horoscope de la semaine</h2><p>Vous l'attendiez tous, voici l'horoscope du semestre pair de l'année 2019-2020. Sans surprise, il n'est pas terrible...</p> <table id="horoscope"> <tr> <td>Signe</td> <td>Date</td> <td>Votre horoscope</td> </tr> <tr> <td>♈ Bélier</td> <td>du 21 mars<br>au 19 avril</td> <td rowspan="4"> <p>Après des vacances bien méritées, l'année reprend sur les chapeaux de roues. Tous les signes sont concernés. </p> <p>Jupiter s'aligne avec Saturne, péremptoirement à Venus, et nous promet un semestre qui ne sera pas de tout repos. Février sera le mois le plus tranquille puisqu'il ne comporte que 29 jours.</p> <p>Les fins de mois seront douloureuses pour les natifs du 2e décan au moment où tomberont les tant-attendus résultats du module d'<em>Algorithmique et Structures de Données</em> du semestre 3.</p> </td> </tr> <tr> <td>♉ Taureau</td> <td>du 20 avril<br>au 20 mai</td> </tr> <tr> <td>...</td> <td>...</td> </tr> <tr> <td>♓ Poisson</td> <td>du 20 février<br>au 20 mars</td> </tr> </table> <p>Malgré cela, notre équipe d'astrologues de choc vous souhaite à tous un bon semestre, et bon courage pour le module de <em>Système et Programmation Système</em>.</p> </section></main><footer>© Licence Informatique - Janvier 2020 - Tous droits réservés</footer></body></html>
The main issue with your perl line is your quoting; you used single quotes, which means you don't have to escape the Perl variables, but it also means the shell variable ${tag} will be interpreted by Perl (where it's empty) not the shell. You can access shell variables more easily from Perl by either passing them as arguments or environment variables. You also didn't use the -i switch for in-place editing, so you just printed the changes to STDOUT.
With ojo installed, you can do this with a proper HTML parser and thus not be susceptible to edge cases:
env tag=$tag perl -0777 -pi -CS -Mojo -e '$_ = x($_);
$_->find($ENV{tag})->each(sub {
$_->content($_->content =~ s/\A *//r =~ s/ *\z//r);
my ($p, $n) = ($_->previous_node, $_->next_node);
$p->content($p->content =~ s/ *\z//r) if defined $p and ($p->type eq "text" or $p->type eq "raw");
$n->content($n->content =~ s/\A *//r) if defined $n and ($n->type eq "text" or $n->type eq "raw");
})' tmp_html
The -0777 switch ensures the file will be operated on in one step rather than by line, -pi wraps the code in a loop which will assign the input to $_ and then update that file in-place with the resulting value of $_, and -CS ensures it will be decoded from UTF-8 to parse and encoded back after.
The x function from ojo creates a Mojo::DOM object, which can then find every instance of the requested tag and operate on it (which includes its contents and closing tag).
The substitution operations: s/\A *//r and s/ *\z//r remove all space characters from the beginning or end of the string respectively, and return the modified string (/r prevents it from operating in place, so you can use this with Mojo::DOM's content method). To instead remove any whitespace characters (including newlines), use s/\A\s*//r and s/\s*\z//r.
After some communication with OP I hope that I properly understood the problem.
HTML tags is stored in separate file one per line (tag_file.txt), in separate file we have HTML webpage code (file.html).
The code should strip spaces in HTML webpage code (file.html) around tags [opening,closing] specified in tag file (tag_file.txt).
NOTE: processing done with perl script without shell's assistance (shortens processing time)
use strict;
use warnings;
use feature 'say';
my $tag_file = 'tag_file.txt';
my $html_file = 'file.html';
open my $fh_tag, '<', $tag_file # open tag file
or die "Couldn't open $tag_file: $!";
my #tags = <$fh_tag>; # read tags into array
chomp #tags; # remove eol from tag lines
close $fh_tag; # close tag file
open my $fh_html, '<', $html_file # open html file
or die "Couldn't open $html_file: $!";
my $html = do { local $/; <$fh_html> }; # read whole file into variable
close $fh_html; # close html file
# now make substitution for each read tag
for my $tag (#tags) { $html =~ s!\s*(</?$tag\s*.*?>)\s*!$1!g; }
say $html;
Content of tag_file.txt
html
head
body
section
Problem: I am not able to display characters correctly in Japanese, Chinese, Russian and so forth on the webpage. I am able to get some characters to display correctly in the Spanish version. However, for other languages, it breaks. I am not sure how to approach this. I am also using Mura CMS for the website and was not able to find a way to render the characters through their.
I am seeing the following on the webpage.
<p><strong>Spanish</strong><br />
ATENCIÓN: si habla español, tiene a su disposición servicios gratuitos de asistencia lingüística. Llame al 1-321-268-6111. (TTY: 1-800-955-8771)</p>
<p><strong>French Creole</strong><br />
ATANSYON: Si w pale Kreyòl Ayisyen, gen sèvis èd pou lang ki disponib gratis pou ou. Rele 1-321-268-6111. (TTY: 1-800-955-8771)</p>
<p><strong>Vietnamese</strong><br />
CHÚ Ý: N?u b?n nói Ti?ng Vi?t, có các d?ch v? h? tr? ngôn ng? mi?n phí dành cho b?n. G?i s? 1-321-268-6111. (TTY: 1-800-955-8771)</p>
<p><strong>Portuguese</strong><br />
ATENÇÃO: Se fala português, encontram-se disponíveis serviços linguísticos, grátis. Ligue para 1-321-268-6111. (TTY: 1-800-955-8771)</p>
<p><strong>Chinese</strong><br />
??????????????????????????????1-321-268-6111. (TTY: 1-800-955-8771)</p>
<p><strong>French</strong><br />
ATTENTION: Si vous parlez français, des services d'aide linguistique vous sont proposés gratuitement. Appelez le 1-321-268-6111. (TTY: 1-800-955-8771)</p>
<p><strong>Tagalog</strong><br />
PAUNAWA: Kung nagsasalita ka ng Tagalog, maaari kang gumamit ng mga serbisyo ng tulong sa wika nang walang bayad. Tumawag sa 1-321-268-6111. (TTY: 1-800-955-8771)</p>
<p><strong>Russian</strong><br />
????????: ???? ?? ???????? ?? ??????? ?????, ?? ??? ???????? ?????????? ?????? ????????. ??????? 1-321-268-6111. (TTY: 1-800-955-8771)</p>
<p><br />
<strong>Arabic</strong></p>
<p style="text-align: right;">??????: ??? ??? ????? ???? ?????? ??? ????? ???????? ??????? ?????? ?? ???????. ???? ???? 1-123-862-1116 (??? ???? ???? ?????. (TTY: 1-800-955-8771)</p>
<p><strong>Italian </strong><br />
ATTENZIONE: In caso la lingua parlata sia l'italiano, sono disponibili servizi di assistenza linguistica gratuiti. Chiamare il numero 1-321-268-6111. (TTY: 1-800-955-8771)</p>
<p><strong>German</strong><br />
ACHTUNG: Wenn Sie Deutsch sprechen, stehen Ihnen kostenlos sprachliche Hilfsdienstleistungen zur Verfügung. Rufnummer: 1-321-268-6111. (TTY: 1-800-955-8771)</p>
<p><strong>Korean</strong><br />
??: ???? ????? ??, ?? ?? ???? ??? ???? ? ????. 1-321-268-6111. ??? ??? ????. (TTY: 1-800-955-8771)</p>
I have padding set on a div for the main text on my pages, but have it set to disappear at 700px with a media query. For some reason, it's not working and I don't know why. Below is a code pen and my code. Thank you!
Code Pen: http://codepen.io/caguilera0001/pen/EgWzgz
#contentOne {
height: 100%;
/*** change to 100% once all is put in ***/
width: 100%;
background-color: #4484CE;
z-index: 1;
}
#blue {
background-color: #4484CE;
width: 100%;
height: 40px;
}
#gray {
width: 100%;
height: 100%;
/*** change to 100% once all is put in ***/
background-color: #D9D9D9;
}
#title {
padding-top: 30px;
padding-left: 114px;
font-size: 32px;
font-weight: bold;
color: #000;
margin: 10px;
}
#text {
padding-top: 30px;
padding-left: 114px;
margin: 10px;
padding-right: 98px;
height: 100%;
}
#media all and (max-width: 700px) {
#text {
padding-left: none;
padding-right: none;
}
#title {
line-height: 1em;
}
}
<div id="main">
<div id="contentOne">
<div id="blue">
<!-- this is blue for navbar -->
</div>
<!-- end blue -->
<div id="gray">
<!-- this is gray for main/content one -->
<div id="title">Attendance Office</div>
<div id="text">
<p><strong>(323)993-3408</strong>
</p>
<p><strong>The Attendance Office is open from 7:00am to 3:30 pm.</strong> We are here to help you with absences, contact information update, enrollment, check-outs, etc.<strong> </strong>
</p>
<p>Attendance at school is extremely important. By state law, a student who has more than 3 unexcused absences is determined to be in violation of the truancy laws.</p>
<p>The following is a listing of the only reasons that are excusable:</p>
<ul type="disc">
<li>Due to his or her illness</li>
<li>Due to quarantine under the direction of a county or cit health officer</li>
<li>For the purpose of having medical, dental, optometric or chiropractic services rendered</li>
<li>For the purpose of attending the funeral services of a member of his or her immediate family</li>
<li>For the purpose of jury duty in the manner provided by law</li>
<li>Due to the illness or medical appointment during school hours of a child whom the pupil is the custodial parent</li>
<li>With Prior Principal Approval, for justifiable personal reasons including, but not limited to, an appearance in court, attendance at a funeral service past the allowable day(s), observance of a holiday or ceremony of his/her religion, attendance
at religious retreats or attendance at an employment conference when the pupil's absence has been requested in writing, prior to the absence, by the parent/guardian and approved by the principal.</li>
<li>With Prior Principal Approval, for the purpose of serving as a member of a precinct board for an election pursuant to Section 12302 of the Election Code.</li>
<li>Pupils who are members of religions that observe religious holidays that fall on school days may be excusable from school by making prior arrangements, as specified by the school principal and with written parental/guardian request.</li>
</ul>
<p><strong>PLEASE NOTE THAT THE ABOVE REASONS ARE THE ONLY REASONS THAT WILL <u>NOT</u> TRIGGER A TRUANCY LETTER. </strong>
</p>
<p><strong>BELOW ARE SOME EXAMPLES OF UNEXCUSED ABSENCES: </strong>
</p>
<p>Three or more of the following excuses will trigger a Truancy letter:</p>
<ul type="disc">
<li>Running errands for family</li>
<li>Vacations or trips</li>
<li>Unverified illness</li>
<li>Family emergency</li>
<li>Transportation problems</li>
<li>Inclement weather</li>
<li>Babysitting</li>
<li>Absent from class without school or parent/guardian permission</li>
<li>Absence uncleared for more than 10 school days despite due diligence efforts to obtain an explanation from the parent/guardian</li>
<li>Unexcused tardy for 30 minutes or more</li>
<li>No note from parent/guardian</li>
</ul>
<p><strong>Leaving School Early:</strong>
<br />
<br />Students upon arriving on campus are not to leave school for any reason without permission. Students needing to leave early must be picked up by a parent/guardian/adult that is on the emergency card. Only those listed in the emergency card are
able to pick up students out of school and <u>must present a picture ID every time</u>.
<br />
<br />
<strong>To Enroll a Student in Bancroft Middle School:</strong>
<br />
<br />You will need the following items completed prior to registration:
<br />Last report card
<br />Parent/guardian picture ID
<br />Birth certificate
<br />Immunization records (must be up to date)
<br />Address verification (Utility bill, Gas, Water, or Light only) in Parent's name. (You cannot use telephone bill)
<br />
<br />
<strong>PARENTS/GUARDIANS ARE REQUIRED TO REPORT TO THE ATTENDANCE OFFICE, IN WRITING, A CHANGE OF ADDRESS OR CONTACT INFORMATION WITHIN 30 CALENDAR DAYS OF THE CHANGE. PROOF OF THIS CHANGE IS ALSO REQUIRED. FAILURE TO DO SO MAY BE CAUSE FOR FORFEITURE OF THE RIGHT TO A CONTINUING ENROLLMENT PERMIT. STUDENTS WILL BE TRANSFERRED TO THE SCHOOL OF RESIDENCE IF FALSE OR INACCURATE RESIDENCE INFORMATION IS DISCOVERED.</strong>
</p>
<p><strong> </strong>Click here for the Attendance Policy
</p>
<p> </p>
<p> </p>
<p><strong>La oficina de asistencia está abierta está abierta de 7:00am a 3:30 pm.</strong> Estamos aquí para servirle con respecto a ausencias, actualización de información de emergencia, inscripciones, dadas de baja, etc.<strong> </strong>
</p>
<p>Asistencia a clases es extremadamente importante. Por las leyes del estado un estudiante que tiene más de 3 ausencias sin excusa es considerada una violación de las leyes de asistencia.
<br /> La siguiente lista provee las únicas razones para ausencia excusada:</p>
<ul>
<li>Enfermedad o lesión del alumno</li>
<li>Cuarentena</li>
<li>Servicios médicos, dentales, oftalmológicos o quiroprácticos</li>
<li>Asistencia a funeral de un miembro de la familia directo, P.ej. madre, padre, abuelo, abuela, hermano, hermana, o cualquier familiar que viva en el mismo domicilio que el alumno (un día si es en el Estado, tres días fuera del Estado)</li>
<li>Obligación de jurado</li>
<li>Enfermedad o tratamiento médico de un niño cuya patria potestad sea del alumno.</li>
</ul>
<p>Las Razones Personales Justificables de una ausencia son aquellas que se presentan por escrito, por parte del padre de familia, y <u>son aprobadas por el director</u>. Las ausencias que encuadran en esta categoría, incluyen entre otras:</p>
<ul>
<li>Servicio militar activo en zona de combate (miembro directo de la familia -máximo tres días)</li>
<li>Comparecencia en un tribunal o Asistencia a servicios funerarios (extensión de días)</li>
<li>Asistencia a un retiro religioso (que no exceda cuatro horas por semestre)</li>
<li>Industria del entretenimiento (no más de cinco días de ausencia consecutiva o un máximo de cinco ausencias por año escolar)</li>
<li>Exclusión o exención médica</li>
<li>Conmemoración religiosa, feriado cultural, ceremonia y secular histórica.</li>
<li>Instrucción religiosa (asistir a jornada escolar mínima no más de cuatro días por mes escolar)</li>
<li>Suspensión revocada mediante el proceso de apelaciones</li>
<li>Participación en una organización no lucrativa de artes escénicas (máximo cinco por año escolar)</li>
<li>Servicios de salud mental previamente coordinados (Tratamiento Diurno de Salud Mental)</li>
<li>“Día de Llevar a Nuestros Hijos e Hijas a la Escuela ®”</li>
</ul>
<p><strong>POR FAVOR NOTE QUE LAS RAZONES MECIONADAS ARRIBA SON LAS UNICAS RAZONES QUE <u>NO</u> CREARAN UNA CARTA DE AUSENCIAS INJUSTIFICADAS. </strong>
</p>
<p><strong>ABAJO ESTA LA LISTA DE EJEMPLOS DE AUSENCIAS NO JUSTIFICADAS: </strong>
</p>
<p>Tres o más de este tipo de ausencias hará una carta de ausencias no excusadas:</p>
<ul type="disc">
<li>Hacer diligencias para el padre/tutor</li>
<li>Vacaciones o viajes</li>
<li>Enfermedades sin verificación</li>
<li>Problema de transporte</li>
<li>Inclemencias del clina</li>
<li>Cuidar de niños menores</li>
<li>Ausencia a clase sin permiso de la escuela o padre/tutor</li>
<li>Ausencia sin nota de padre/tutor</li>
</ul>
<p><strong>Salir temprano de la escuela:</strong>
<br />
<br />Ya que los estudiantes entran a la escuela no pueden salir por ninguna razón sin permiso de la escuela. Los estudiantes que necesiten salir temprano deberán ser recogidos por un padre/tutor/adulto que este listado en la tarjeta de emergencia.
Solamente aquellos listados en la tarjeta de emergencia podrán pasar por el estudiante y <u>deben presentar identificación fon fotografía cada vez</u> que vengan por el estudiante.
<br />
<br />
<strong>Para inscribir a un estudiante a Bancroft Middle School:</strong>
<br />
<br />Usted tendrá que presentar los siguientes documentos antes de inscripción:
<br />Última boleta de calificaciones
<br />Identificación con fotografía del padre/tutor
<br />Certificado de nacimiento
<br />Cartilla de vacunas (actualizada)
<br />Comprobante de domicilio (factura de gas, agua o luz solamente) en el nombre del padre/tutor. (No se aceptan facturas de teléfono)
<br />
<br />
<strong>ES REQUERIDO QUE LOS PADRES/TUTORES REPORTEN POR ESCRITO A LA OFICINA DE ASISTENCIA CUANQUIER CAMBIO DE DIRECCION O CONTACTO DENTRO DE LOS 30 DIAS DEL CAMBIO. COMPROBANTE DE DOMICILIO ES REQUERIDO. EL NO HACER ESTO PUEDE CAUSAR LA PERDIDA DE ESPACIO EN LA ESCUELA Y EL ESTUDIANTE SERA TRANSFERIDO A SU ESCUELA DE RESIDENCIA SI SE NCUENTRA QUE LA INFORMACION PROVEEIDA ES FALSA O INCORRECTA.</strong>
</p>
<p>Clic aquí para la política de asistencia
</p>
</div>
<!-- end text-->
</div>
<!-- end gray -->
</div>
<!-- end content one -->
</div>
<!-- end main -->
none is not a valid value for padding.
#text{
padding-left: none;
padding-right: none;
}
Should be:
#text{
padding-left: 0;
padding-right: 0;
}
I want to put a transparent background image in the body and in the footer I want the image from background not to be transparent. It is possible?
Your question is worded in a confusing manner, but this might be what you're looking for: https://jsfiddle.net/8za9xb3d/2/
HTML:
<div class="background">
<main>Text</main>
<footer>Text</footer>
</div>
CSS:
.background * {
padding: 25px;
}
main {
background: white;
}
.background {
background: url('https://images.unsplash.com/photo-1464245254346-067e4f8baaf2?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=1199&h=674&q=80&cs=tinysrgb');
overflow: hidden;
}
footer {
background: rgba(0, 0, 0, .5);
color: white;
}
#bg {-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
background: url("http://i.imgur.com/8yHeARi.jpg") no-repeat center center fixed ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: alpha(opacity=60);
opacity: 0.6;
}
<div id="bg">
<article><font color="black"><h2>De ce bicicleta?</h2><p> 1. Antreneaza inima. Activitatea fizica desfasurata pe bicicleta conduce la o mai buna oxigenare a tuturor organelor si muschilor. Astfel, inima pompeaza mai mult sange si oxigen catre tesuturi. De aceea, mersul pe bicicleta intra in categoria metodelor de recuperare medicala pentru persoanele cu afectiuni cardiace.</p>
<p> 2. Scade riscul de aparitie a astmului. Efortul fizic imbunatateste si capacitatea respiratorie. Specialistii afirma ca mersul pe bicicleta este un mijloc de prevenire a afectiunilor respiratorii, cum sunt astmul sau bronsita.</p>
<p> 3. Imbunatateste capacitatile intelectuale. Datorita unei mai bune oxigenari a creierului pe care o "produce" pedalajul, capacitatile intelectuale sunt imbunatatite, iar starea psihica se amelioreaza. Responsabile sunt endorfinele, substante pe care le elibereaza creierul in timpul activitatii fizice, cunoscute ca "hormonii fericirii".</p>
<p> 4.Specialistii afirma ca persoanele care merg periodic pe bicicleta imbatranesc mai greu decat cele care nu au acest obicei. in plus, efectele imbatranirii sunt cu 50 la suta mai mici la cele care pedaleaza de trei ori pe saptamana.</p>
<h4>Actiunea MountainBike</h4><p> O plimbare pe munte, sau pe drumuri grele de tara, cu bicicleta sportive, este oricand una incantatoare. In afara de privelistile ce ti se ofera, mai intra in calcul si sentimentul pe care ti-l provoaca aceasta calatorie, pe carari si drumuri dificile, unde atat omul trebuie sa se controleze pe el insusi, dar trebuie sa aiba un control total si asupra bicicletei sale.
Aceste calatorii si intreceri ciclistice off-road, sunt din ce in ce mai apreciate si in tara noastra, unde acest sport are din ce in ce mai multi practicanti.
Nu este usor sa incepi o astfel de cursa, dar pe masura ce te aventurezi pe drum, si pe masura ce simtul competitiei pune stapanire pe tine, ramai doar tu cu bicicleta ta. Asta este tot ce conteaza.
Chiar daca participi la o cursa, trebuie sa existe acea placere maxima a calatoriei, altfel nu vei putea niciodata sa castigi. Ca in orice sport, trebuie sa ai inclinatie, sa iti placa ce faci, dar sa ai si foarte mult antrenament in spate.
Oricat de usor ar parea sa participi la astfel de curse, nu este niciodata asa!</p>
<h3>Ce este un MTB?</h3><p> Un mountain bike este un tip de bicicleta foarte performanta, folosita la doua tipuri de curse, si anume coborare si cross.
Numele nu reprezinta chiar acest lucru. Mai potrivit ar fi fost `bicicleta off-road`, dar denumirea a ramas de mountain bike, deoarece la inceput bicicleta a fost folosita pentru a cobori muntii folosind cararile, iar cross-ul a aparut mai tarziu (de fapt, bicicletele folosite pentru cele doua tipuri de curse nu sunt foarte diferite).
Ca sport de coborare, acest tip de ciclism este originar din Clubul Morrow, o organizatie de 10 ciclisti ce au inceput sa coboare pe cararile muntilor, in 1974, in Cupertino, California.
In acei ani, bicicletele off-road se mai numeau si "klunker," si erau biciclete foarte rapide cu roti de cauciuc foarte groase. Dar biciclistii clubului Morrow, condusi de Russ Mahon, au inceput sa faca tot felul de teste cu bicicletele, teste ce implicau coborari abrupte, frane bruste si alte asemenea procedee pretentioase.
Mahon si alti ciclisti din clubul sau au participat la Campionatul de Ciclocros al Coastei de Vest, desfasurat in Mill Valley, California, pe 1 Decembrie 1974. Bicicletele lor neobisnuite au captat atentia a trei ciclisti din tinutul Marin, Joe Breeze, Gary Fisher si Charlie Kelly.
Acestia trei, impreuna cu Steve Ritchey, au creat mountain bike-ul. Au inceput prin a strange ciclisti off-road de prin toate zonele si prin a organiza competitii din ce in ce mai dese.</p>
</font></article>
</div>