Originariamente inviata da
reggio
*ma quanta manutenzione ... ho riscritto questo messaggio 3 volte...*
Purtroppo non dici nulla di nuovo 
ad ogni modo ci sono e ci saranno dei cambiamenti, in primis il cambio di amministrazione. Sono fiducioso che qualcosa migliorerà a livello di piattaforma.
Originariamente inviata da
reggio
Ciao @KillerWorm grazie per i link, perdona ma non riesco a sfruttarli,
Mi spiace che tu non riesca a sfruttarli ma ribadisco il consiglio di iniziare a "studiacchiare" qualche guida anche giusto per avere una infarinatura dei concetti riguardo l'ambito in cui vuoi mettere mano, altrimenti per chi vuol cercare di aiutarti diventa in salita dover spiegare da zero certi principi; della serie "aiutaci ad aiutarti".
Originariamente inviata da
reggio
Ho tentato con <DIV></DIV> , contenendo il codice in tabelle,
Bene per il div contenitore, mentre le tabelle (inutile dirlo) ad oggi (come buona pratica del web design) sarebbe meglio non usarle per la costruzione del layout (può essere utile dare uno sguardo all'articolo Dalle tabelle al layout table-less)
Originariamente inviata da
reggio
nei piccoli esempi
[...]
non mi funziona nulla ...
Nella tua pagina vedo che hai inserito il div contenitore ma non hai fatto il resto che ti ho indicato nel precedente post.
Originariamente inviata da
KillerWorm
dovresti intanto inserire entrambi, elemento video e fascia, dentro uno stesso contenitore (che potrebbe essere un semplice div con una specifica classe per poterlo impostare da CSS) quindi applicare position:relative al contenitore e position:absolute (anziché l'attuale fixed) alla fascia; in questo modo la fascia sarà posizionata in modo assoluto rispetto al contenitore.
Originariamente inviata da
reggio
Ma perchè se aggiungo i DIV, la sfocatura se ne frega?
Perdonami ma non mi è chiaro di quale "sfocatura" stai parlando.
Originariamente inviata da
reggio
Mi puoi fare la cortesia della "pappa pronta" & spiegata? (in linea) ...
Eccola...
Aggiungi una classe al div contenitore (quello con dentro il video e la fascia). Ricorda che, in programmazione, per classi e id (o in generale per i nomi delle variabili) è buona pratica attribuire dei nomi autoesplicativi; potresti quindi avere una cosa del genere:
codice:
<div class="contenitore-video">...</div>
In questo modo puoi "selezionare" questo elemento attraverso il css usando appunto la classe .contenitore-video (nota il punto iniziale che determina il fatto che si tratti di una classe)
Originariamente inviata da
reggio
in linea (questo mi pare mi semplifichi la vita e la comprensione del codice ...)
Permettimi di contraddirti, la presenza di CSS in linea rende il codice confuso. Il "css in linea" (cioè quello definito direttamente nei tag attraverso l'attributo "style") è meglio evitarlo quando possibile, è invece preferibile mantenere il CSS separato dalla struttura HTML, usando file esterni o tutt'al integrandolo con l'uso di tag <style> (preferibilmente inseriti dentro <head> e non a zonzo nel <body>).
Chiaramente queste sono delle buone pratiche per ottenere uno sviluppo e una gestione ottimale del codice.
Potrei consigliarti vari altri articoli sull'argomento ma prendi per buon quanto ti sto indicando.
Puoi quindi inserire un blocco <style>...</style> dentro l'elemento <head> del tuo documento, e definire qui tutte le regole. Se hai timore di confonderti, puoi usare dei commenti per le varie regole; fondamentalmente se usi dei nomi autoesplicativi sei già un passo avanti.
Applica magari una classe (autoesplicativa) anche per il div della fascia. Ora è "content", puoi capire da te che una cosa come "fascia-video" sicuramente aiuta ad evitare confusione.
La struttura HTML potrebbe quindi essere una cosa del genere:
codice HTML:
<div class="contenitore-video">
<video autoplay="" muted="" loop="">
<source src="..." type="video/mp4">
</video>
<div class="fascia-video">
...
</div>
</div>
Il CSS potrebbe essere una cosa del genere:
codice:
<style>
.contenitore-video { /* CONTENITORE in cui ci sarà il video e la fascia */
position: relative; /* Creo una relazione per il posizionamento assoluto della fascia */
width: 100%; /* Larghezza del contenitore (100% significa che si estende per tutto lo spazio disponibile dell'elemento padre) */
}
.contenitore-video *{ /* Reset del box model per tutti gli elementi dentro il contenitore */
box-sizing: border-box;
}
.contenitore-video > video { /* VIDEO */
display: block;
width: 100%; /* Larghezza del video (100% significa che si estende per tutto lo spazio disponibile del contenitore) */
}
.fascia-video { /* FASCIA sul video */
position: absolute; /* Posizione assoluta rispetto al contenitore */
bottom: 0; /* Posiziono in basso al contenitore */
width: 100%; /* Larghezza della fascia (100% significa che si estende per tutto lo spazio disponibile del contenitore) */
padding: 20px;
background: rgba(0, 0, 0, 0.5); /* Colore di sfondo con trasparenza */
color: #fff;
}
</style>
Chiaramente questo devi metterlo in <head> (come consigliato) e rimuovere le altre varie regole sparse nella struttura HTML, sia quelle definite in linea nei tag sia quelle dentro i blocchi <style> nel body, che diversamente andrebbero in conflitto con queste. Tutte le altre varie regole utilizzate (oltre queste) sarebbe meglio inserirle appunto in un tag <style> (questo o un altro) sempre dentro <head>.
Fai qualche prova e fai sapere.
Rispondi quotando
