Il mio primo sito da zero

69GiGi96

Utente Attivo
337
24
CPU
Intel Pentium E5200 2.5ghz
Scheda Madre
Pegatron 2A73h
HDD
HDD Samsung ST500DM005 HD502HJ
RAM
4x1Gb DDR2 400Mhz
GPU
Integrata g33/g31 chipset family
Audio
Integrata
Monitor
Samsung SynMaster 923NW
PSU
Liteon PS-5301-08HF 300W
Case
HP compaq
OS
Windows 7 Pro x64
Salve ragazzi, come da titolo (nel mio tempo libero) vorrei realizzare un sito web da zero.
E ho bisogno di tanto aiuto. In internet non trovo sempre cio che voglio (devo imparare a cercare) :sisi:
Spero di poter postare di volta in volta i vari problemi che trovo.

L'idea è: home + 2/3pagine per ora + forum. Il tutto responsive

HOME: son partito da sfondo verde+rettangolo nero da 1200x900 sul quale ho messo delle tiles piazzate con la posizione assoluta (temo che sia il primo errore).

Per risoluzioni inferiori al 1200 (e ad altri breakpoints) ho pensato di nascondere alcune tiles e riorganizzare il layout.. Ma non so come fare.
Posto un' immagine che spero valga più di mille parole. A sx la vista da desktop e a dx l idea che ho per uno dei vari "mobile".
Senza titolo-1.jpg
Per nascondere una tile aggiungo una classe nascondi e display none nel css.
1-Come faccio però a far adattare il rettangolo nero al suo contenuto? Insomma, credo sia una cosa senza senso nascondere le tiles per adattarmi alla larghezza del dispositivo e poi restare con questo coso nero che va oltre i limiti :)
2-Come faccio poi a cambiare l ordine delle tiles? Spero che dall immagine si capisca
Grazie mille! :D

EDIT:
Dopo un'oretta di ricerche e scopiazzamenti mi son reso conto che un layout fisso è molto molto semplice.
Un pò meno uno fluido/responsive (sono la stessa cosa, credo
retard.gif
)
Sono riuscito a fare ben poco. Il risultato è questo:
HTML (body):
Codice:
<div class="grid">
            <div id="tilepiccola" class="tile">testoprova</div>
            
            <div id="tilegrande" class="tile">testoprova</div>
            </div>
CSS:
Codice:
.grid{ /*non ho idea del macello che ho creato qui*/
    min-width: 30%;
    max-width: 100%;
    text-align: justify;
    padding:10px;
    margin: 10px auto;
    padding-left: 20px; 
    padding-top: 20px;
    border-radius: 5px; 
    background-color: #3a3a3a; 
}

.tile {
    background-color: #2a2a2a; 
    position: relative;   
}

#tilepiccola {  
    width: 270px; 
    height: 270px; 
} 
 
#tilegrande {  
    width: 560px; 
    height: 560px; 
} 
 
#tileorizzontale {
    width: 560px; 
    height: 270px; 
} 

#tileverticale {  
    width: 270px; 
    height: 560px; 
}

Già con il bordo inferiore non mi trovo. E' diverso da quello superiore. Ma poi ci penserò, credo di aver fatto macelli con .grid

Le due tile che ho inserito non si trovano una di fianco all'altra (come vorrei) ma una sopra l'altra.
Come faccio a mettere le varie tiles nella posizione che voglio?
E soprattutto come le sposto a mio piacimento a seconda dello schermo?
Devo creare delle posizione fisse a seconda dei breakpoint? Per ogni tile un id diverso?

Cioè, creo una media query dove dico: se 320px<widht<480 allora tilepiccola posizionata in "xy"; togli tilegrande etc etc e cosi via per gli altri breakpoint?
O sto chiedendo l'impossibile?
 
Ultima modifica:

69GiGi96

Utente Attivo
337
24
CPU
Intel Pentium E5200 2.5ghz
Scheda Madre
Pegatron 2A73h
HDD
HDD Samsung ST500DM005 HD502HJ
RAM
4x1Gb DDR2 400Mhz
GPU
Integrata g33/g31 chipset family
Audio
Integrata
Monitor
Samsung SynMaster 923NW
PSU
Liteon PS-5301-08HF 300W
Case
HP compaq
OS
Windows 7 Pro x64
Incomincia mettendo il sito su altervista o simili, avere il sito da vedere aiuta molto :D
Grazie mille per la risposta! All' inizio ho fatto così, poi ho provato di volta in volta l html in offline senza farne l upload :)
La versione desktop è "pronta" (mancano i contenuti delle tiles. Per quelle mobile se tutto va bene non dovrei aver problemi
 
Ultima modifica:

Entra

oppure Accedi utilizzando

Hot: E3 2021, chi ti è piaciuto di più?

  • Ubisoft

    Voti: 17 18.3%
  • Gearbox

    Voti: 1 1.1%
  • Xbox & Bethesda

    Voti: 66 71.0%
  • Square Enix

    Voti: 3 3.2%
  • Capcom

    Voti: 5 5.4%
  • Nintendo

    Voti: 14 15.1%
  • Altro (Specificare)

    Voti: 8 8.6%

Discussioni Simili