Moderatori: Gattinara, ModiMaccanici
che fili?faxus ha scritto:Come parere, è alquanto da rivedere.fenix ha scritto:... e sto da qualche giorno costruendo appunto un sito base per rendere fruibile ad un amico i file inerenti il progetto...
Solo due cose dovresti fare subito:
1) Togli quei doppi fili che risalgono al web giurassico.
2) Togli la musichetta all'apertura, se no ti tolgo il saluto e in pubblico dirò che non ti conosco
il cms mi impedirebbe di essere libero da locale e con altervista dovrei usare wordpress che odioGattinara ha scritto:Il tuo costrutto connatura numerabili arcaismi (oltre a quelli menzionati da Faxus), tra i quali:
Prima ancora di lavorare sull'HTML ti converrebbe figliare una bozza grafica matura.
- struttura a tabelle
- CSS in corpo tag
- mappatura immagini
- plugin obbligatorio per la visione dei video
- navigazione dispersiva
Oltre questo (ed altro) mi permetto un appunto sul DOCTYPE.
Sono tra coloro che, prima della sua definitiva dipartita, "tifavano" per l'XHTML2 (principalmente a causa della sintassi rigorosa secondante la mia natura precisina) ma, a più di un lustro dal suo decesso, trovo poco ragionevole costruire siti in XHTML1 (oltretutto nel tuo codice sono presenti sviste non compatibili con tale DOCTYPE).
Per orchestrare quello che definisci "un sito base" occorrono, per l'appunto, dei fondamenti: non conviene partire alla cieca, improvvisando.
Se sei interessato a studiare ed a testare passo passo l'evoluzione di una struttura sei, naturalmente, il benvenuto ma, se il tuo scopo è avere in tempi brevi un sito funzionale (nonché responsive), ti suggerisco l'utilizzo di un CMS.
Ok, ho fatto casino, mi son sparite tutti i li nella versione desktop e tablet, son rimasti solo quando scendono al di sotto della barra del nav.Gattinara ha scritto:Io li ho inseriti nella /* struttura principale */, ma non è necessario secondarmi, puoi metterli dove preferisci; sono solita creare una struttura ordinata per il fatto che, in presenza di CSS ingombranti, risulta maggiormente agevole orientarsi (niente di più :)
Edit: in presenza di dubbi puoi usare come riferimento il CSS della bozza.
Codice: Seleziona tutto
/* reset */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
article, aside, canvas, details, embed,
figure, figcaption, footer, header,
nav, output, section,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: top;
font-weight: normal;
font-style: normal;
}
/* compatibilità novelli tag HTML5 su vetusti browsers */
article, aside, details, figcaption, figure, footer, header, nav, section {
display: block;
}
html {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #F5F4F4;
text-align: center;
font-size: 16px;
line-height: 19px;
color: #000;
-webkit-text-size-adjust: none; /* corregge il bug del font-size maggiorato-random su iOS */
}
/* testi */
strong, b {
font-weight: bold;
}
em, i {
font-style: italic;
}
p {
padding: 0 0 8px;
}
/* immagini */
img {
max-width: 100%;
max-height: 100%;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
-ms-interpolation-mode: bicubic;
}
/* link */
a {
outline: none;
text-decoration: none;
}
a img {
border: 0;
}
.class a:link {
color: #000;
}
.class a:active {
color: #59BCBC;
}
.class a:visited {
color: #000;
}
.class a:hover {
color: #59BCBC;
}
.tel a[href^=tel] {
text-decoration: none; /* evita il text-decoration underline su mobile */
}
/* effetti */
body {
-moz-transition: all .2s linear;
-webkit-transition: all .2s linear;
transition: all .2s linear;
}
/* form */
input, textarea, select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
-moz-border-radius: 0;
-webkit-border-radius:0;
border-radius: 0;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow:none; /* disabilita i gradienti di default negli input */
}
input {}
select {}
label {}
/* intestazioni e testi */
h1, h2, h3, h4, h5, h6 {
text-align: center;
text-transform: uppercase;
color: #000;
}
h1 {
font-size: 28px;
line-height: 30px;
}
h2 {
font-size: 26px;
line-height: 28px;
}
h3 {
font-size: 20px;
line-height: 22px;
}
h4 {
font-size: 18px;
line-height: 20px;
}
h5, h6 {
font-size: 16px;
line-height: 18px;
}
/* comuni */
.clear {
clear: both;
}
/* navigazione */
nav {
width: 100%;
height: 75px;
background: #FFF;
font-size: 12px; /* era 18px */
letter-spacing: 2px; /* spazio tra i caratteri */
text-transform: uppercase; /* forza il maiuscolo */
}
.griglia {
position: relative;
width: 80%;
margin: 0 auto;
}
#logo {
position: absolute;
top: 0;
left: 0;
width: 148px;
height: 98px;
z-index: 999;
}
ol, ul {
list-style: none; /* elimina il marcatore */
}
#menu {
position: absolute;
top: 20px;
right: 78px;
width: 370px; /* era 370px*/
height: 35px;
text-align: left;
}
#menu li {
line-height: 35px;
padding: 0 15px 0;
border-right: 1px solid #000; /* bordo separatore */
float: left; /* affianca le voci */
display: block;
}
#menu li a {
color: #000;
}
#menu li a:active, #menu li a:hover {
color: #59BCBC;
}
#menu li:first-child {
padding-left: 0; /* elimina il padding sinistro nella prima voce del menu */
}
#menu li:last-child {
border-right: 0; /* eliminala il bordo destro nell'ultima voce del menu */
}
#social {
position: absolute;
top: 31px;
right: 0;
width: 64px;
height: 13px;
}
#social img {
width: 100%;
height: 100%;
}
#twitter, #facebook, #google {
height: 13px;
float: left;
background-size: 100% 100%;
display: block;
}
#twitter {
width: 17px;
background: url(../img/loghi/logo-twitter-bg.svg) no-repeat; /* stato hover */
margin-right: 9px;
}
#facebook {
width: 15px;
background: url(../img/loghi/logo-facebook-bg.svg) no-repeat; /* stato hover */
margin-right: 8px;
}
#google {
width: 15px;
background: url(../img/loghi/logo-google-bg.svg) no-repeat; /* stato hover */
}
/* struttura interna */
.griglia {}
/* struttura principale */
aside {}
footer {}
header {}
section {}
/* mobile */
@media only screen
and (min-width : 300px)
and (max-width : 479px) {
.banner h1 {
line-height: 22px;
font-size: 18px;
}
}
@media only screen
and (min-width : 240px)
and (max-width : 479px) {
}
@media only screen
and (min-width : 480px)
and (max-width : 767px) {
.banner h1 {
line-height: 24px;
font-size: 20px;
}
}
@media only screen
and (min-width : 768px)
and (max-width : 1023px) {
.banner {
height: 350px;
}
.banner h1 {
width: 80%;
line-height: 32px;
margin-left: 10%; /* respiro laterale */
}
}
@media only screen
and (min-width : 300px)
and (max-width : 767px) {
.banner {
height: 220px;
margin-top: 106px;
}
.banner h1 {
bottom: 20px;
width: 90%;
letter-spacing: normal; /* riduce l'ingombro orizzontale del testo */
margin-left: 5%; /* respiro laterale */
}
/* navigazione */
#menu {
top: 75px;
right: 0;
width: 100%;
height: 105px;
border-bottom: 1px solid #59BCBC;
}
#menu li {
height: 34px;
line-height: 34px;
background: #F1F1F2;
text-align: right;
padding: 0;
border-right: 0; /* elimina il bordo destro nelle voci del menu */
border-top: 1px solid #59BCBC; /* aggiunge il bordo al top nelle voci */
float: none; /* evita l'affiancamento delle voci */
}
#menu li a {
color: #59BCBC;
display: block;
padding: 0 25px 0 0; /* spazio a destra */
}
#menu li a:hover, .menu li a:active {
color: #59BCBC;
background: #FFF;
}
nav {
font-size: 16px;
}
#social {
right: 25px;
}
/* struttura principale */
.griglia {
width: 100%;
margin: 0;
}
#logo {
left: 25px;
}
.banner {
position: relative;
height: 400px;
background-repeat: no-repeat;
background-position: top center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
.banner h1 {
position: absolute;
bottom: 40px;
width: 100%;
font-size: 25px;
letter-spacing: 1px;
color: #FFF;
}
/* background*/
.home {
background-image: url(../img/home/banner.jpg);
}
}
@media only screen
and (min-width : 300px)
and (max-width : 1024px) {
nav {
font-size: 14px;
}
#social {
top: 28px;
width: 92px;
height: 19px;
}
#twitter, #facebook, #google {
height: 19px;
}
#twitter {
width: 25px;
margin-right: 12px;
}
#facebook {width: 22px; margin-right: 11px;}
#google {width: 22px;}
}
@media only screen
and (min-width : 768px)
and (max-width : 1024px) {
/* navigazione */
#menu {
right: 125px;
}
/* struttura interna */
.griglia {
width: 92%;
}
}
@media only screen
and (min-width : 1024px)
and (max-width : 1279px) {
.banner {
height: 320px;
}
.banner h1 {
bottom: 30px;
font-size: 22px;
}
}
Codice: Seleziona tutto
.banner {
position: relative;
height: 400px;
background-repeat: no-repeat;
background-position: top center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
.banner h1 {
position: absolute;
bottom: 40px;
width: 100%;
font-size: 25px;
letter-spacing: 1px;
color: #FFF;
}
/* background */
.home {
background-image: url(../img/home/banner.jpg);
}
Se è per questo basta una parentesi non chiusa per svaccare un intero layout.ilario_seb ha scritto:Aaaaah! ecco perché non riuscivo a capire come mai non funzionava, avevo sbagliato "solo" il posto, incredibile come sbagliare di una riga precluda il corretto funzionamento finale.
Non crederlo: sono piacevolmente impressionata dal fatto che tu stia evitando di clonare il codice di partenza (sbattendoci la crappa direttamente).ilario_seb ha scritto:Wow, piano piano sta crescendo, mi sto emozionando, anche se son consapevole che alla fine il mio contributo è molto marginale
Wordpress è un buon CMS: quali sono i moventi della tua avversione?fenix ha scritto:il cms mi impedirebbe di essere libero da locale e con altervista dovrei usare wordpress che odio
Fenix, con tutto il rispetto: non posso fornirti formule magiche che, all'immediato, renderanno il tuo sito Android compatibile.fenix ha scritto:per quanto riguarda la tabella la metto per suddividere lo spazio
avevo pensato ad un sito su una sola pagina senza pagine multiple
non so come inserire i video per mostrarli in loco se non usare il comando plugin
il programma per realizzarlo e stato usato dreamwever cs3 l'unico che ho
qualche volta ho usato iweb .. ma i menu li facevo con corel in forma swf ...
a me serve che si veda su supporto android ... già i plugin ho provato con l'emulatore non li trova!
grazie...
Anche qui:fragrua ha scritto: Il dominio scomparso era http://www.fenixpoint.net" onclick="window.open(this.href);return false;
ma poi ne conservammo una memorabile copia qui:
https://www.imaccanici.org/fenixpoint/indexx.htm" onclick="window.open(this.href);return false;
Visitano il forum: Nessuno e 20 ospiti