immagini dai css

[/dev/null]

Ciao, mi sono messo ad approfondire le mie conoscenze dei CSS solo da un paio di giorni...
E' possibile mettere in un selettore delle regole che stampino immagini etc?

vorrei definire una classe "rettangolo" e poi far si' che ogni volta che metto nelle pagine html:

<div class="rettangolo">bla bla</div>

vorrei veder apparire un bel rettangolo che abbia un'immagine predefinita sugli angoli e una su ogni lato.

E' possibile definire una cosa del genere dentro un selettore? Altrimenti devo per forza occuparmi io di mettere quelle 8 immagini, ad esempio mettendo un altro div per ognuna di esse nel div "rettangolo"?

Grazie

[Mich_]

Guarda sul sito di http://www.csszengarden.com/ Le varie versioin sono fatte TUTTE con lo stesso codice HTML e CSS differenti.

Credo che troverai la risposta ai tuoi problemi.

In alternativa siti come constile.org contengono sia teoria che pratica.

[/dev/null]

Grazie per i links
Ho cercato un po' e mi e' sembrato di capire che non sia possibile fare cio' che voglio
Avrei bisogno di ottenere un effetto simile a questo: http://www.csszengarden.com/?cssfile...151.css&page=0 ... Vorrei avere a disposizione dei rettangoli come nella colonna di destra di quella pagina... Per farlo li' utilizzano due div: uno dove settano come sfono tutto il pezzo di cornice superiore, ed uno per quello inferiore...
Devo per forza usare uno "stratagemma simile"? Farcendolo in HTML con le tabelle viene piu' semplice

[Mich_]

Dipende da cosa vuoi ottenere.

Se hai una serie di caselle sempre della stessa dimensione che devono avere lo stesso bordo, puoi usare un'immagine come sfondo alla cella.
Pero` attento a cosa succede se aumenti o diminuisci le dimensioni dei caratteri: in csszengarden hanno probabilmente usato due <div> innestati per ovviare a questo problema.

In linea di massima i CSS sono piu` semplici delle tabelle (una volta che si sanno usare), e non introducono informazioni errate (cosa che invece fanno le tabelle).

[/dev/null]

Capito
Purtroppo no... i "rettangoli" che mi servono avrebbero dimensioni variabili...
Proprio per questo non posso fare come su quel sito, poiche' voglio fare in modo che i rettangoli abbiano una larghezza pari ad una percentuale della larghezza della pagina... E se, come loro, usassi una sola immagine per i due angoli ed il lato superiori si verificherebbero dei problemi ridimensionando (perderei l'angolo destro se lascio la dimensione dello sfondo invariato, oppure sgranerei entrambi gli angoli se metto la dimensione di sfondo in percentuale)...

Come faccio a far si' che solo il lato superiore (e non gli angoli) si ridimensioni? E per farlo devo usare 3 div, uno per ogni elemento?

[andrea.paiola]

cerca su Google e su html.it CSS bordi arrotondati o il corrispettivo inglese:
http://www.gdesign.it/pages/howto/ar...csscorners.php
http://pro.html.it/articoli/id_499/i...pag_2/pag.html
http://www.neuroticweb.com/recursos/...box/index.php?
http://www.fireandknowledge.org/arch...images-part-1/
(questo l'ho scoperto anche io adesso)
http://www.mezzoblue.com/archives/20...ndup/index.php
http://www.risorse.net/magazine/leggi.asp?id=93

il mio consiglio è di sperimentare... ho visto che i metodi sono molti e i risultati discordanti... qualcuno sa qual'è il metodo migliore?
<aggiungo:>http://www.vertexwerks.com/tests/sidebox/
http://virtuelvis.com/gallery/css/rounded/
http://www.alistapart.com/articles/customcorners/
</aggiungo>

[/dev/null]

Grazie
Ho visto che purtropppo tutti fanno come non avrei voluto... E cioe' usano un sacco di selettori, uno per immagine...

    <div class="uedge">
      <div class="redge">
        <div class="bedge">
          <div class="ledge">
            <div class="ulcorner">
              <div class="urcorner">
                <div class="blcorner">
                  <div class="brcorner">
                    <div class="innercontent">
                      

Il contenuto del box va qui..</p>
                      

Il box può essere di qualunque larghezza e altezza.</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

Per questo singolo caso mi sembra che le tabelle funzionino meglio dei div
Volevo fare una pagina che potesse cambiare completamente solo sostituendo un file (come fanno su csszengarden), e mettere 8 div per ogni campo in questo modo non mi sembra una soluzione molto elegante, ma sembra essere l'unica possibile



Ho anche un'altra domanda... Non so se e' meglio che apra un nuovo thread o meno... Intanto la posto qui', semmai correggetemi
E' possibile settare limiti da applicare a certe regole?

Faccio l'esempio pratico perche' cosi' si capisce poco...

Vorrei creare una "tabella" con i div che sia larga il 90% della finestra del browser, pero' dev'essere larga come minimo 300 pixels... (ad esempio se uno ha la finestra del browser larga 1000 pixels la tabella ne occupa 900... invece la finestra del browser e' larga solo 300 pixels o meno la tabella deve occuparne 300)...

Oppure voglio mettere un div fixato sul fondo della finestra, in modo che scrollando resti nella stessa posizione, ma che stia, rispetto alla pagina (e non al browser) ad almeno 100px dal fondo, cosi' che quando il browser ha raggiunto il fondo, tale menu' non sia attaccato al limite inferiore della finestra com'era in cima alla pagina, ma stia piu' sopra di 100px

[Mich_]

All'ultima domanda e` facile rispondere:

selettore {
min-width: 300px !important;
width: 90%;
}

Similmente per l'altezza.

Nota che min-width non eiste in IE, mentre il width e` effettivamente un min-width. Ci sono i trucchi per aggirare quest'ostacolo (tantek): li trovi anche in constile.org

Una lista degli attributi CSS2 la trovi anche qui: http://www.w3schools.com/css/css_reference.asp

[/dev/null]

Grazie ancora
Adesso mi meto all'opera

Del fatto che non vada con IE... Per adesso me ne sbatto tanto non ho nemmeno IE per poterlo testare
Prima cerco di farlo almeno per Firefox, Konqueror e Opera... Poi ampliero'

[/dev/null]

Rieccomi a rompervi
In poche ore sono riuscito a fare un po' tutto quel che mi serviva
Mi manca solo una cosetta per finire una paginetta che sara' la home, e' la domanda che ho posto prima :

Voglio mettere un div fixato sulla cima della finestra, in modo che scrollando resti nella stessa posizione rispetto la finestra, ma che stia, rispetto alla pagina (e non al browser) ad almeno 100px dalla cima, cosi' che quando il browser e' all'inizio della pagina tale menu' non sia attaccato al limite superiore della finestra, ma stia piu' in basso di 100px...

Semplificando ancora (non riesco a esprimere molto bene cio' che voglio )...
Ho in alto, in cima alla pagina, un centinaio di pixels occupati dal nome del sito... Ed ho un menu' fixed alla sinistra, che segue il browser... Vorrei che questo menu' stia alla posizione "top: 0px;", ma non vada mai a finire sopra il titolo (si deve in pratica fermare alla posizione "top: 100px;" quando il browser e' in cima alla pagina).
E' possibile fare cio' tramite i CSS o devo scomodare il javascript?