HAI BISOGNO DI INFORMAZIONI?
+39 06452216038
LIVE SUPPORT
Parla con un operatore

Hosting Per Te - HelpDesk

LIVE SUPPORT
Parla con un operatore
 
 Categorie Notizie
(16)Domini (3)dominio (47)Blog (75)Sicurezza (60)Wordpress (1)Cross-Site (1)vulnerabilità (9)wordpress (1)zero day (8)sicurezza (1)sitelock (25)News (2)google (1)indicizzazione (1)mobilegeddon (11)seo (21)Hosting (4)hosting (1)multi (1)reseller (1)rivenditore (1)provider (25)Email (35)Server (4)email (2)imap (1)imapsync (2)migrazione (1)posta (2)affiliazione (2)guadagnare (84)Ecommerce (4)e-commerce (2)ecommerce (4)VPN (1)wi-fi (1)backup (3)server (34)marketing (2)ppc (1)search-engine-optimization (1)seo pay-per-click (1)domini (2)gTLD (2)IP (1)IP-condiviso (1)IP-dedicato (2)cloud (1)virtuale (3)vps (21)Blogging (4)blog (2)blogging (46)CMS (3)cms (1)sito di successo (1)campagne e-mail (1)criptare dati (2)ssl (1)plugin e-commerce (1)newsletter (1)rivenditori (1)server vps smtp (1)SMTP (1)design responsivo (1)responsive design (1)responsive web design (2)hacking (5)malware (1)phishing (1)server upgrade (2)prestashop (2)campagna e-mail (3)e-mail marketing (1)contenuti sito (1)struttura pagina web (1)call-to-action (1)promozione sito (1)ottimizzare sito (1)cookie law (1)psicologia web design (1)vendita siti (1)website flipping (1)titolo (1)alternativa google analytics (2)monitoraggio (1)keyword (1)programmazione (1)facebook marketing (1)colori (2)clienti (1)privacy whois (1)crimini informatici (1)Cyber crime (1)search console di google (1)supporto managed (1)hacker (1)copyright (1)referrer spam (1)Split testing A/B (1)freelance (4)magento (1)Linux (2)Windows (1)upgrade piani hosting (1)Google SpeedTest (1)landing page (1)seo friendly (1)struttura link (1)errori wordpress (2)psicologia dei prezzi (2)metodi di pagamento (1)effetti sonori (3)APP (1)webmaster (1)fatturazione elettronica (1)sito web (1)backup wordpress (1)fan facebook (1)Exchange ActiveSync (1)POP3 (1)firma e-mail (1)web agency (1)ergonomia (1)editor (3)adwords (1)quality score (1)errori ecommerce (25)startup e business (1)errori azienda (1)sql injection (1)monetizzare (1)regole successo (1)nameserver (2)mailing list (2)responsive email (3)pec (3)bootstrap (1)Bing (1)Bing Ads (1)Foundation (4)framework (1)statistiche mobile (1)adwords per mobile (1)about page (1)chi siamo (1)seo vs ppc (1)errori webmaster principianti (25)SEO (1)PDF e SEO (1)ottimizzare pdf (70)strumenti (1)relazionarsi con i clienti (1)FAQ (1)tld srl (1)traffico (1)keywords (1)parole chiave (1)trend estero (5)statistiche (1)K.I.S.S. (1)plugin sicurezza wordpress (2)certificato ssl (1)template (1)black hat (1)Creative Common Zero (1)blog ecommerce (1)Google Smart Goals (2)web design (1)facebook ads (1)SFTP (1)FTP (2).htaccess (1)statistiche e-commerce (1)url brevi (2)cloud computing (1)HDD (1)grafici (1)librerie js (2)antivirus (1)framework css (1)Google Panda (2)Internet of Things (2)ransomware (1)TeslaCrypt (2)tecnologia (1)telelavoro (1)mobile friendly (1)proxy (2)cryptolocker (1)Processore AMD (1)rapporto clusit 2016 (2)truffe online (1)plugin monitoraggio (2)bug linux (1)ranking tools (1)social network (1)deep web (1)tor (1)plugin sottoscrizioni (1)link building (3)plugin wordpress (1)design (1)siti di successo (1)ottimizzare immagini (2)widget (1)sito monopagina (1)VPS Economici (1)trend del marketing (1)realtà aumentata (1)ip dinamico (1)progettazione sito (1)Redirect 301 e 302 (1)notifiche push (1)velocità sito (1)ottimizzazione contenuti (1)guadagnare con un blog (1)costi e-commerce (1)social media (1)frode amichevole (1)e-commerce wordpress (4)drupal (4)joomla (1)travel blog (3)php (1)chargeback (1)e-mail (1)plug-in video wordpress (1)sito sportivo (1)plug-in seo (1)drupal vs magento (1)portfolio (1)plug-in portfolio (1)sottodomini di terzo livello (1)sicurezza e-commerce (1)pubblicità su facebook (1)visualizza numero utenti (1)affiliate marketing (1)cartella nascosta android (1)creare app (2)Infiniband (1)Intel LGA 3647 (1)furto di dati sensibili (1)marketing diretto (1)record DNS (2)ddos (1)Mobile shopping (1)Malware su Skype (1)virus (1)youtube (1)seo immagini (1)web marketing (1)vendita online (1)food blogger (1)Plesk Onyx (1)Bug Fedora ed Ubuntu (1)Micro SSD (1)IoT (1)Chip Kaby Lake (1)primo e-commerce (1)blog di fitness (2)plug-in WordPress (1)SPF e DKIM (1)Cyber sicurezza (1)file robots.txt (1)AMD Naples (1)Vulnerabilità REST API WordPress (1)trasferimento da Blogger a WordPress (1)plug-in WordPress per musicisti (1)Crittazione (2)CPU (1)Legge antibufale (1)Strumenti di marketing (1)CPU AMD (1)nda (1)Let's Encrypt (1)Hosting Linux o Windows (1)progress bar (1)blog di cucina (1)PrestaShop oppure WooCommerce (1)carte di credito (1)librerie javascript (1)DDR5 (1)plugin monetizzazione (1)Wireless (2)drag and drop (1)web server (1)Curricula digitali (1)name server (2)Autenticazione a due fattori (1)Trend Tech (1)business online (1)Keylogger (1)infopreneur (1)E-book (1)WanaKiwi (1)file LNK (1)hub (1)router (1)switch (1)pdf (1)hosting provider gratuito (1)Shopify (1)Usabilità web (1)temi (1)confronto file (1)quiz (1)mockup (1)hosting provider (2)chat (1)ristoranti (1)database (1)spam (1)tool (1)Javascript (1)automazione (1)forum (1)compressione (2)webserver (1)Caching (1)video (1)Normative (1)Collaborazione (1)unicorn (2)robots.txt (1)funnel (1)redirect (1)Markdown (2)Google Tag Manager (1)apache (1)Ajax (1)wamp (1)xampp (1)browser (1)OSCommerce (1)Blockchain (1)sottodominio (1)sviluppo Web (1)Moduli (1)TLD (1)Google Analytics (1)plugin (1)e-mail professionale (1)amazon (1)cache (1)multilingua (1)traduzioni (1)Bitcoin (1)script (2)CSS (1)exFAT (1)FAT32
Feed RSS
Notizie
nov
25

In questo articolo esploreremo alcune utili funzionalità CSS. Creeremo un layout per un sito web che includerà un newsfeed ed una chat.

 

 

01 – Impostazione dell’HTML per il newsfeed

Innanzitutto dobbiamo impostare un semplicissimo markup per il nostro newsfeed.
Creiamo un div  .container contenente una lista non ordinata. Attribuire al tag <ul> la classe .feed e poi creare una lista di 10 elementi ognuno contenente un div .card.

Infine creare un altro elemento <li> tra l’elemento 5 e l’elemento 6 con classe .nested.

<body>

 <div class=”container”>

 <ul class=”feed”>

 <li><div class=”card”>Card 1</div></li>

 <li><div class=”card”>Card 2</div></li>

 <li><div class=”card”>Card 3</div></li>

 <li><div class=”card”>Card 4</div></li>

 <li><div class=”card”>Card 5</div></li>

    <li class=”nested”>

 <ul>

 <li><div class=”card”>Card A</div></li>

 <li><div class=”card”>Card B</div></li>

 <li><div class=”card”>Card C</div></li>

 </ul>

 </li>

 <li><div class=”card”>Card 6</div></li>

 <li><div class=”card”>Card 7</div></li>

 <li><div class=”card”>Card 8</div></li>

 <li><div class=”card”>Card 9</div></li>

 <li><div class=”card”>Card 10</div></li>

 </ul>

</div>

</body>

 

 

 

02 – Attribuire lo stile al newsfeed

Creare un background grigio da attribuire a <body>. Impostare quindi una larghezza massima di 800 px a .container ed un margin: 0 auto; per allineare al centro i contenuti.

Attribuire a .card un background bianco, 10 px di padding e margine ed un min-height di 300px.

Infine inseriremo un modulo Flexbox in .feed per rendere il tutto più fluido, con due card per ogni riga.

.feed {

display: flex;

flex-wrap: wrap;

}

.feed li {

flex: 1 0 50%;

}

 

 

03 – Risolvere i problemi di layout

Se provi a far scorrere la lista di elementi creata ti accorgerai che Card A – C creano problemi al layout. Anziché scorrere come tutte le altre card le due card rimangono unite come se fossero un unico blocco. La soluzione al problema si ha utilizzando display:contents

.feed ul,

.feed li {

display: contents;

}

A questo punto le card dovrebbero scorrere normalmente all’interno della pagina, hanno però perso l’impostazione sizing. Il problema si risolve facilmente aggiungendo una proprietà flex alla classe .card

.card {

flex: 1 0 40%;

}

 

 

04 – Queries

Per valutare se una proprietà o un valore CSS sono supportati dal browser occorre spostare gli stili in display:contents in una query

@supports (display: contents) {

.feed ul,

.feed li {

  display: contents;

}

.card {

  flex: 1 0 40%;

}

}

 

 

05 – Utilizzare ‘not’ per un risultato più pulito

Nel caso in cui display:contents non sia supportato dal browser è opportuno avere una soluzione alternativa.

@supports not (display: contents) {

.feed li {

  flex: 1 0 50%;

}

}

All’interno della query “not” possiamo aggiungere alcuni stili in maniera tale che gli elementi gestiti dalla classe .nested possano usufruire di quanto ereditato da display:contents

feed li.nested {

flex-basis: 100%;

}

.feed li.nested ul {

 display: flex;

 flex-wrap: wrap;

}

 

06 – Aggiungere una chat

A questo punto possiamo aggiungere una chat in fondo alla pagina. Aggiungere il seguente blocco subito dopo il tag <body>

<div class=”chat”>

 <div class=”messages”>

 <ul>

<li><div class=”message”>Messaggio 1</div></li>

<li><div class=”message”> Messaggio 2</div></li>

<li><div class=”message”> Messaggio 3</div></li>

<li><div class=”message”> Messaggio 4</div></li>

<li><div class=”message”> Messaggio 5</div></li>

<li><div class=”message”> Messaggio 6</div></li>

<li><div class=”message”> Messaggio 7</div></li>

<li><div class=”message”> Messaggio 8</div></li>

<li><div class=”message”> Messaggio 9</div></li>

<li><div class=”message”> Messaggio 10</div></li>

 </ul>

 </div>

 <input type=”text” class=”input”>

</div>

 

 

07 – Stili da attribuire alla chat

.chat {

 background: #fff;

 border: 10px solid #000;

 bottom: 0;

 font-size: 10px;

 position: fixed;

 right: 0;

 width: 300px;

 z-index: 10;

}

.messages {

 border-bottom: 5px solid #000;

 overflow: auto;

 padding: 10px;

 max-height: 300px;

}

.message {

 background: #000;

 border-radius: 5px;

 color: #fff;

 margin: 0 20% 10px 0;

 padding: 10px;

}

.messages li:last-child .message {

 margin-bottom: 0;

}

.input {

 border: none;

 display: block;

 padding: 10px;

 width: 100%;

}

 

08 – Nascondere la chat quando non in uso

La chat così com’è occupa troppo spazio ed occorre ridimensionarla quando non è in uso.

.messages {

 …

 max-height: 25px;

transition: max-height 500ms; }

 

 

Nel prossimo articolo riporteremo la seconda parte di questo tutorial illustrando altre interessanti funzionalità CSS.

L'articolo 5 interessanti funzionalità CSS. Ecco come utilizzarle – Prima parte sembra essere il primo su Blog Hosting Per Te.





Hosting Per Te
© 2015 - ARMADA
Partita IVA 00873530943
REA IS-38469
Tel +39 06452216038
Fax +39 0689280222
Il tuo IP: 3.231.229.89
Hosting Per Te Facebook   Hosting Per Te Twitter   Hosting Per Te Blog
ARMADA
Chiedi ad un nostro Operatore