• Regolamento Macrocategoria DEV
    Prima di aprire un topic nella Macrocategoria DEV, è bene leggerne il suo regolamento. Sei un'azienda o un hosting/provider? Qui sono anche contenute informazioni per collaborare con Sciax2 ed ottenere l'accredito nella nostra community!

Guida Da PhotoShop a XHTML/CSS [Guida Completa]

welictus3

Utente Attivo
2 Gennaio 2009
435
5
34
Napoli
www.napolix.net
Miglior risposta
0
#24
Riferimento: Da PhotoShop a XHTML/CSS [Guida Completa]

io mi sono perso nel creare la struttura xD
Codice:
Applichiamo una prima formattazione per azzerare i margini e il padding di ogni elemento, centriamo il div container e impostiamone la larghezza a 770 pixel (pari a quella delle guide più esterne del design in Photoshop):

*{ margin: 0; padding: 0; }
#container { 
margin: 0 auto; 
width: 770px;
}
Aggiungiamo dei colori di sfondo temporanei ai div principali, in modo da renderci conto di come si presentano e, contemporaneamente al settaggio della larghezza, impostiamo anche lo scorrimento a sinistra della sidebar e del div content:

#content {
float: left;
width: 545px;
}
#sidebar{ 
float: left;
width: 225px;
background: #74C7F5; 
}
In questo modo il div content si disporrà a sinistra e il div sidebar a destra; questo avviene perché nel codice XHTML abbiamo il content prima del sidebar, se così non fosse dovremmo adottare un'altra soluzione.

Coloriamo lo sfondo dell'header, lo sfondo di quella che sarà la barra di navigazione e il div footcontainer:

#header {background: #092F85;}
#nav{background: #93D459;}
#footcontainer{background: #4F4F4F;}
Ecco l'esempio.
ste cose dove le devo scrivere? è da moooolto tempo che non faccio lavori del genere, e calcolando che prima se creavo qualche home la facevo con webpage maker, ora di css non ci capisco niente... grazie per le future risposte :emoji_slight_smile:
 

Tony10

Utente Master
5 Marzo 2010
2.101
6
43
Napoli
Miglior risposta
0
#25
Riferimento: Da PhotoShop a XHTML/CSS [Guida Completa]

io mi sono perso nel creare la struttura xD
Codice:
Applichiamo una prima formattazione per azzerare i margini e il padding di ogni elemento, centriamo il div container e impostiamone la larghezza a 770 pixel (pari a quella delle guide più esterne del design in Photoshop):

*{ margin: 0; padding: 0; }
#container { 
margin: 0 auto; 
width: 770px;
}
Aggiungiamo dei colori di sfondo temporanei ai div principali, in modo da renderci conto di come si presentano e, contemporaneamente al settaggio della larghezza, impostiamo anche lo scorrimento a sinistra della sidebar e del div content:

#content {
float: left;
width: 545px;
}
#sidebar{ 
float: left;
width: 225px;
background: #74C7F5; 
}
In questo modo il div content si disporrà a sinistra e il div sidebar a destra; questo avviene perché nel codice XHTML abbiamo il content prima del sidebar, se così non fosse dovremmo adottare un'altra soluzione.

Coloriamo lo sfondo dell'header, lo sfondo di quella che sarà la barra di navigazione e il div footcontainer:

#header {background: #092F85;}
#nav{background: #93D459;}
#footcontainer{background: #4F4F4F;}
Ecco l'esempio.
ste cose dove le devo scrivere? è da moooolto tempo che non faccio lavori del genere, e calcolando che prima se creavo qualche home la facevo con webpage maker, ora di css non ci capisco niente... grazie per le future risposte :emoji_slight_smile:
segnalo per necroposting..
 

welictus3

Utente Attivo
2 Gennaio 2009
435
5
34
Napoli
www.napolix.net
Miglior risposta
0
#29
Riferimento: Da PhotoShop a XHTML/CSS [Guida Completa]

Devi inserirle in un file css che poi richiami nella homepage.
anche se ormai c'ero arrivato da solo grazie della risposta ^^
--------------- AGGIUNTA AL POST ---------------
scusate ancora il disturbo ma non riesco a far incastrare bene il tutto, e poi vorrei togliere quel pezzo grigio da sotto, cosa devo modificare? (per vedere come sta venendo cliccate qui , dubito sia spam dato che è un template per un sito di una pizzeria xd)
 
2 Maggio 2009
12.657
40
59
25
Nella tua mente...
Miglior risposta
0
#30
Riferimento: Da PhotoShop a XHTML/CSS [Guida Completa]

anche se ormai c'ero arrivato da solo grazie della risposta ^^
--------------- AGGIUNTA AL POST ---------------
scusate ancora il disturbo ma non riesco a far incastrare bene il tutto, e poi vorrei togliere quel pezzo grigio da sotto, cosa devo modificare? (per vedere come sta venendo cliccate qui , dubito sia spam dato che è un template per un sito di una pizzeria xd)
Togli questa parte di codice (la trovi in fondo):
PHP:
<div id="footcontainer"> </div>
E se vuoi togli anche l'id dal css:
Modifica questo CSS del tuo sito togliendo la riga
Codice:
[FONT=monospace]#footcontainer{background: #4F4F4F;}[/FONT]
 

welictus3

Utente Attivo
2 Gennaio 2009
435
5
34
Napoli
www.napolix.net
Miglior risposta
0
#31
Riferimento: Da PhotoShop a XHTML/CSS [Guida Completa]

Togli questa parte di codice (la trovi in fondo):
PHP:
<div id="footcontainer"> </div>
E se vuoi togli anche l'id dal css:
Modifica questo CSS del tuo sito togliendo la riga
Codice:
[FONT=monospace]#footcontainer{background: #4F4F4F;}[/FONT]
facendo come hai detto tu scompare anche la parte arancione nel footer...
 

YanoZ1

Utente Attivo
27 Maggio 2011
395
5
39
Siracusa
Miglior risposta
0
#32
Riferimento: Da PhotoShop a XHTML/CSS [Guida Completa]

come da regolamento ho scritto la fonte , non vorrei mai autoinfrazionarmi :emoji_relieved:
Ahahah. . . dovresti essere davvero stupido per non mettere la fonte e auto-infrazionarti!

xD
--------------- AGGIUNTA AL POST ---------------
Comunque ottima guida mi serviva proprio!

Un'informazione. . .ma PhotoShop è a pagamanento?
 
Ultima modifica:

Cacchy2

Utente normale
19 Febbraio 2011
50
0
0
Siena
Miglior risposta
0
#33
Riferimento: Da PhotoShop a XHTML/CSS [Guida Completa]

Bellissima guida!! Non so come fai ad avere il tempo di farne una così lunga :emoji_relieved:... comunue è molto bella e dettagliata! Sei un grande!
 

Jys

Nuovo utente
16 Maggio 2013
48
0
17
L'Aquila
Miglior risposta
0
#37
  • Jys

    Jys

Riferimento: Da PhotoShop a XHTML/CSS [Guida Completa]

Bella guida, molto dettagliata e sopratutto è facile da capire grazie agli screenshot. Bravo. ;)
 
Shoutbox
  1. #KiK #KiK: we mon friendz
  2. K keepout00: ue strunz
  3. Keep-out Keep-out: vbullettin state of mind
  4. Keep-out Keep-out: ci vorrebbe una skin un pò più old school, sarà che sono rimasto al 2009 ma con questa mi perdo ahah
  5. Keep-out Keep-out: hola
  6. Slimy Slimy: Buonasera
  7. Mavio Mavio: Habbo sta creando un nuovo "gioco", con nuovi aggiornamenti, a dirlo è stesso la pagina ufficiale di habbo su instagram
  8. INFINITY987 INFINITY987: muore
  9. UNI▼ERS▲L UNI▼ERS▲L: Che fine farà Habbo ora che il supporto di Adobe Flash Player cesserà?
  10. #KiK #KiK: weeeeee
  11. -Sicily94- -Sicily94-: https://www.sciax2.it/forum/threads/progetto-sicily-hotel-beta-test-serio.700314/
  12. eskereboyz eskereboyz: https://www.sciax2.it/forum/threads/account-habbo.700424/
  13. DarkKB DarkKB: @999k https://www.sciax2.it/forum/threads/new-luxworld.700391/
  14. 999k 999k: https://www.sciax2.it/forum/threads/ihabbon-project.700336/
  15. 999k 999k: Retro innovativi ne abbiamo?
  16. JaxosItalia JaxosItalia: https://www.sciax2.it/forum/threads/jaxos-hotel.700052/
  17. DarkKB DarkKB: https://www.sciax2.it/forum/threads/new-luxworld.700391/
  18. #KiK #KiK: Amiciiiii
  19. Mr. Aizen Mr. Aizen: Buondì
  20. F FulmineVerde: https://www.sciax2.it/forum/threads/aumentare-prestazioni-del-pc.700408/
  21. -Sicily94- -Sicily94-: https://www.sciax2.it/forum/threads/progetto-sicily-hotel-beta-test-serio.700314/
  22. TokosRetro TokosRetro: Salve
  23. -Marco -Marco: Ciao bellissimi!
  24. #KiK #KiK: Siiii
  25. Cristoforo58 Cristoforo58: Kaffeee?!1!1!11 @#KiK
Top