[openlabs]ho fatto uno skin, vi piace?

02-01-2004, 16.24.00

Come da titolo ho provato a realizzare uno skin.
Provate a vedere se vi piace:
http://lordunderdark.altervista.org/openlabs/
:D
E' ancora vuoto ma i moduli e i blocchi sono ancora da fare!

02-01-2004, 16.54.01

veramente molto carino...
lo farei pero' un pochino piu' grande largo e centrato visto che avanza quasi mezza pagina suula destra...in mezzo ci metterei ovviamente tutte le news...come sponsor poi metteri tutti i siti che trattano degli stessi argomenti

02-01-2004, 17.09.22

io pensavo di mettere negli sponsor i bannerini di AV(PPC e PPV) in modo da ottenere AC per il mysql. E creare un'altra sezione con gli affiliati.
Al centro ci andranno le news ma anche le faq, i download, le recensioni, i link...ecc.
Per le dimensioni credo siano giuste (800 * 600) ma col mac si vede diverso (risoluzioni + alte tipo 1152 * 870).

EDIT: sono riuscito a centrarlo

02-01-2004, 17.34.30

ok, ore che e' centrato va molto meglio!!! stavo pensando senno di poter fare la tebbella in % invece che in px, cosi che sia possibile visualizzarlo a qualsiasi risoluzione, stando pero' attenti a non compromettere la leggibilita' ...

03-01-2004, 01.29.52

Non farlo con le tabelle ma con i div! In questo modo puoi modificare la struttura del sito in pochissimo tempo e rendi il tutto incredibilmente accessibile (senza css i div vengono messi uno sotto all'altro).

Se ho tempo butto giu' qualcosina anch'io.

03-01-2004, 13.45.52

Originalmente inviato da CoD

Non farlo con le tabelle ma con i div! In questo modo puoi modificare la struttura del sito in pochissimo tempo e rendi il tutto incredibilmente accessibile (senza css i div vengono messi uno sotto all'altro).

Se ho tempo butto giu' qualcosina anch'io.

sono daccordo...

so do i

04-01-2004, 23.24.55

Ecco un esempio di cosa si puo' fare con i div:

http://cod.altervista.org/temp/prova.htm

se avete firebird o un qualunque altro browser che puo' cambiare i css noterete che ci sono 3 possibili scelte.

La 1 e' come la vedete all'inizio
La 2 e' con i div uno sotto all'altro e con la barra attaccata all'intestazione (per eventuali effetti come una barra inglobata nel logo o altro)
La 3 mostra anche le scritte per non vedenti.

Ovviamente e' solo per dimostrare la flessibilita' dei div, non ha la pretesa di essere una proposta decente :P :D

P.S.: sono troppo stanco per testarlo con IE... pero' su firebird e linx funziona!

05-01-2004, 10.58.59

funziona benissimo anche con opera...per me e' meglio il primo stile

05-01-2004, 11.36.19

Si' certo, anche perche' il secondo e' veramente.... bruttino

Era per divertirmi un po' a cambiare il sito solo usando il css.

Se poi si mette l'immagine dell'intestazione come background del div e non come tag img si ottengono almeno due vantaggi:

- i non vedenti non sentiranno "immagine" seguita dal testo in ALT, ma direttamente il testo contenuto nel div (che si puo' nascondere con un bel display:none;) e non si sentiranno "tagliati fuori"

- si possono cambiare le immagini semplicemente cambiando css (come su csszengarden per intenderci) e questo e' notevole se pensi ad un css per stampante

Inoltre se mai volessimo tradurre il sito in altre lingue possiamo spostare tutto il div della barra di navigazione a destra per le lingue da destra a sinistra e creare un sito speculare :D

05-01-2004, 11.47.30

Dudo... il sito di COD non era la versione definitiva... devi immagirnarne solo la struttura...

ne parliamo poi ok...

05-01-2004, 19.05.29

Rettifico: con ie 6 da' problemi (il box model di ie... grrr)

Questo e' il nuovo indirizzo:

http://cod.altervista.org/temp/prova.php

e va anche con IE 6

EDIT: ho aggiunto un quarto css che mette il div blu a destra

06-01-2004, 11.27.09

scusa cod ma come mai l'hai fatto in php?

06-01-2004, 12.16.24

Perche' IE 6 da' problemi con la DTD di XHTML 1.0...

oddio che frase assurda sembra uno di quegli sketch sui programmatori

Hai presente:

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

ecco se la metti IE 6 sballa tutto il box model e i link nella barra di navigazione "salteranno" letteralmente su e giu' al passaggio del mouse.

Cosi' ho messo un riconoscimento: se hai IE 6 la DTD non la metto e costringo il browser a passare al quirk mode (cioe' si inventa lui che sistema usare).

E' un piccolo hack e di fatto e' l'unica cosa in php di quella pagina

06-01-2004, 12.49.09

benissimo! :D
con safari 1 su mac va perfettamente!
mi spieghi come usare i div?oppure sai 1 bella guida?

06-01-2004, 16.39.07

Beh... i div sono semplici divisioni dele pagine.

Dentro puoi metterci di tutto, anche altri div.

Nella pagina che avete visto ad esempio i div principali sono due:

HeadLogo e Main

dentro a Main ho messo altri tre div:

NavBar, MainBody e Footer

Se ti prendi i vari css e li guardi magari ci capisci: ho cercato di commentarli in maniera decente.

In realta' sono molto semplici:
usando position: absolute posso mettere i div dove voglio io, li posiziono con top e left e li dimensiono con width e height.

E basta (a parte il colore di sfondo ovviamente)

Non c'e' molto di piu' da sapere... credo.

Discussione: [openlabs]ho fatto uno skin, vi piace?

LinkBack

Strumenti discussione

Display

Regole di scrittura