Come realizzare questa barra con css?

[Mich_]

Allora quelli che stai realizzando sono dei titoli.
Vanno realizzati mediante il tag <hX> (nel tuo caso direi che sono <h2>).

Per poter inserire i bordi a sin e dx, e` necessaria della marcatura supplementare.
In alternativa devi usare una immagine fissa per tutti (ma vedo che non tutti sono della stessa larghezza).
[[ il codice che hai proposto non e` valido con i CSS2: una cosa del genere (ma sintassi diversa) sara` possibile con i CSS3, che pero` non sono ancora sufficientemente supportati (pero` qualche browser gia` li implementa) ]]

Io partirei con una marcatura del genere:
<h2><span class="sx">&amp;nbsp;</span>Latest News<span class="dx">&amp;nbsp;</span></h2>

CSS:

h2 {
  background: url(../img/bar_tot.png) repeat-x;    /* niente apici o virgolette dentro quelle parentesi */
  width: 100%;          /* o anche in px, se il caso */
  text-align: right;
  text-transform: capitalize;
  height: ...px;            /* se il caso */
}
h2 .sx {
  width: ???px;          /* come l'immagine */
  height: 100%;
  background: url(../img/bar_tot_left.png) no-repeat;
}
h2 .dx {
  width: ???px;          /* come l'immagine */
  height: 100%;
  background: url(../img/bar_tot_right.png) no-repeat;
}

[Alejandro]

Mmm guarda com'era strutturato prima il css:

/*
	TOP 10 USERS
*/

.top10users {
    width: 300px;
}

.top10users .top {
    background-image: url('../img/top_10_users.png');
    background-position: top left;    
    background-repeat: no-repeat;
    height: 23px;
}

.top10users .middle {
    background-color: #f1f1f1;
    color: black;
    border-left: 1px solid #aeaeae;
/*    border-right: 1px solid #aeaeae;	*/
    padding-left: 0px;
    padding-right: 0px;
    width: 299px;   
}

ossia mi sembra che il mio programmatore abbia creato una classe per ogni blocco tipo: latest reviews, latest news, top10users, ecc.

Mi sa che il tutto cozzerebbe con creare uno stile per H1, H2 ecc o sbaglio? Certo che se il css è così a blocchi devo ripetere il codice per ogni barra una marea di volte no?

[Mich_]

La pagina di cui hai postato il link e` strutturata molto male.
A parte il linguaggio vecchio (HTML 4.0 transitional), l'uso di tabelle per formattare, la formattazione fatta tramite un misto di attributi HTML, CSS inline, CSS esterni, ci sono gravi mancanze semantiche.

Per sistemare il tutto, converrebbe riscrivere completamente il codice, usando un linguaggio piu` moderno (ad esempio XHTML 1.0 Strict), una strutturazione semantica ed eliminando la formattazione mediante attributi HTML, che molte volte va in conflitto con i CSS.

Metter mano a quella pagina cercando di fare piccole modifiche e` una cosa difficile, che personalmente ritengo di scarso interesse.

[Alejandro]

Originariamente inviato da Mich_
La pagina di cui hai postato il link e` strutturata molto male.
A parte il linguaggio vecchio (HTML 4.0 transitional), l'uso di tabelle per formattare, la formattazione fatta tramite un misto di attributi HTML, CSS inline, CSS esterni, ci sono gravi mancanze semantiche.

Per sistemare il tutto, converrebbe riscrivere completamente il codice, usando un linguaggio piu` moderno (ad esempio XHTML 1.0 Strict), una strutturazione semantica ed eliminando la formattazione mediante attributi HTML, che molte volte va in conflitto con i CSS.

Metter mano a quella pagina cercando di fare piccole modifiche e` una cosa difficile, che personalmente ritengo di scarso interesse.

Figurati che quelle pagine sono in php.

A questo punto siccome le pagine sono poche (circa 10) mi conviene riscriverle da zero vero?
Tanto la pagina ha una struttura semplice. Ogni blocco che vedi: menu, topbar, highlights, latest news, ecc è un include di file .php
Quindi il codice della pagina in se è corto. Però poi dovrei cambiare un pò la logica di questi div e class su ogni blocco.

Da dove iniziare? Sinceramente io ho una conoscenza base dell'html tramite dreamweaver. Conta che tutte le pagine sono .php all'interno tu dici di usare XHTML 1.0?

[ant_alt]

Originariamente inviato da Alejandro
Mi sa che il tutto cozzerebbe con creare uno stile per H1, H2 ecc o sbaglio? Certo che se il css è così a blocchi devo ripetere il codice per ogni barra una marea di volte no?

è stato creato un selettore per ogni barra semplicemente perchè il testo è contenuto nell'immagine, potresti semplificare (e ottimizzare lo spazio occupato) facendo una sola barra vuota e scrivere il testo nel codice html

se il problema è che non riesci a "sincronizzare" bene il reapeat
dai un'occhiata a questo
http://www.stripegenerator.com/

[Mich_]

Originariamente inviato da Alejandro
Figurati che quelle pagine sono in php.

A questo punto siccome le pagine sono poche (circa 10) mi conviene riscriverle da zero vero?
Tanto la pagina ha una struttura semplice. Ogni blocco che vedi: menu, topbar, highlights, latest news, ecc è un include di file .php
Quindi il codice della pagina in se è corto. Però poi dovrei cambiare un pò la logica di questi div e class su ogni blocco.

Da dove iniziare? Sinceramente io ho una conoscenza base dell'html tramite dreamweaver. Conta che tutte le pagine sono .php all'interno tu dici di usare XHTML 1.0?

Da qui non riesco a vedere come e` la struttura PHP. Pertanto mi e` difficile dare consigli.
Occorre sapere se la pagina e` una unica con delle parti cambiate o sono effettivamente varie pagine PHP diverse.

In linea di massima si deve avere un'idea del codice (X)HTML che si vuole avere (ad esempio una pagina realizzata in puro (X)HTML); a questo punto si deve sistemare il CSS (almeno per la parte comune e per i blocchi principali). Infine si inizia a sostituire i pezzi che cambiano con i comandi PHP, e si ricontrolla che il CSS sia sufficiente (a volte servono alcune correzioni in funzione delle parti inserite tramite PHP).

DreamWeaver in questo non credo che ti possa aiutare: di solito quel tipo di editor inseriscono oggetti inutili o formattano tramite attributi HTML, che da un lato sono contrari alla moderna programmazione, e alla sintassi XHTML, e dall'altro sono in conflitto con la formattazione CSS (e brwoser diversi risolvono i conflitti in modi diversi).

C'e` un lato positivo in questo: impari effettivamente ad usare il codice (X)HTML e sei tu che controlli quello che fai, senza un intermediario che inserisce oggetti a tua insaputa.

Ricorda che la semantica e` molto importante nel Web moderno. Quindi trova un manuale di sintassi (X)HTML, un manuale di sintassi CSS (in rete ce ne sono di ottimi), un manuale PHP.
Potrebbero anche servirti alcuni riferimenti che trovi tra i "link utili", ad esempio un modello di layout, un modello di menu (puoi partire da quelli di CSSplay)

Se hai dubbi ci sono i tutorial di HTML.it, oppure il forum: e` molto facile che le domande siano gia` state poste ed abbiano avuto risposta, quindi usa la ricerca del forum (non devi aspettare la risposta, che quando hai fretta arriva sempre troppo tardi).

[Alejandro]

Si mi armo di pazienza e mi sistemo bene queste pagine ed il loro relativo css.
Sopratutto mi serve allegerirlo molto. COme avrai notato la pagina è 220kb un pò troppo. E poi non ho tag H1,H2,H3,ecc molto importanti per google.
Una domanda, se non uso dreamweaver cosa mi suggerisci? NVU? Oppure sul serio tutto a manina in un txt?

I file rimarranno ovviamente php e non .html


ps OT sto vendendo delle suite macromedia ed il photoshop cs conosci un forum dove postarlo? /OT

[Mich_]

Una domanda, se non uso dreamweaver cosa mi suggerisci? NVU? Oppure sul serio tutto a manina in un txt?

Ci sono due livelli di risposta:
Se vuoi imparare a programmare, non c'e` niente di meglio che fare a mano. E` un po' lungo le prime volte, ma poi puoi dire di avere la cosa sotto il tuo controllo.
Se invece vuoi fare "veloce", puoi usare gli strumenti. Il mio consiglio e` che prima occorre saper fare le cose "a notepad" (== con un semplice editor di testi), e solo dopo si possono usare gli strumenti per accelerare il lavoro. Il problema e` che gli strumenti fanno un po' a modo loro e occorre avere la competenza per supervisionarli.

I file rimarranno ovviamente php e non .html

Certo, questo non cambia il problema.

ps OT sto vendendo delle suite macromedia ed il photoshop cs conosci un forum dove postarlo? /OT

Non saprei dirti. Se non e` cosa illegale, prova a chiedere (manda un messaggio privato) ai moderatori dei forum sui sistemi operativi (windows e sw se si tratta di sw che gira sotto win, linux o mac negli altri casi).

[Alejandro]

Grazie Mich,
sto notando che anche se ci sono poche pagine il lavoro sul css è tanto e va fatto con cura. Aprirò un altro post per chiedere aiuto sulla logica da usare perchè non posso stravolgere il sito.

Intanto mi sono letto tutto sull'XHTML

[Alejandro]

Caro Mich finalmente ho trovato il tempo per riprendere tutto il sito.

Allora sto provando innanzitutto ad allegerire le barre con il css.
Ho creato una barra più semplice senza immagini ai lati ma non ne sono soddisfatto. Cosa mi dici Qui puoi vedere il risultato dpcgamers.com/index2.php

Tu pensa che vorrei che questa barra assomigliasse alle altre ma avendo anche il tag H2 ed avendo il testo allineato a sx. Ho anche i due file dei bordi che sono:
bar_top_left.png
bar_top_right.png

Questo è il codice del blocco php nel top:

<div class="blocka" style="width: 300px;">
	<div class="top"><h2><span class="sx"></span>Latest News<span class="dx"></span></h2></div>

questo è il relativo css:

.blocka {
    width: 100%;
}

.blocka .top {
  background: url(../img/bar_top.png) repeat-x;    /* niente apici o virgolette dentro quelle parentesi */
  width: 100%;          /* o anche in px, se il caso */
  height: 23px;            /* se il caso */
  text-align: left;
  text-transform: capitalize;
  color:#FFFFFF;

}

.blocka .top .sx {
  width: 3px;          /* come l'immagine */
  height: 23px;
  background: url(../img/bar_top_left.png) no-repeat;
}

.blocka .top .dx {
  width: 3px;          /* come l'immagine */
  height: 23px;
  background: url(../img/bar_top_right.png) no-repeat;
}

Volevo creare una logica di barre, ossia ogni barra è uguale all'altra e differisce solo per dimensione e testo che sono parametri che vado ad inserire nel file.php e non nel css. Così anche il css sarà molto più leggero.

te l'ho aggiornato