- 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".
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
)
Sono riuscito a fare ben poco. Il risultato è questo:
HTML (body):
CSS:
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?
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".
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
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>
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:
