Back to top

Autore Topic: Width al 100% di un titolo  (Letto 1868 volte)

Offline GreenAngel

  • Appassionato
  • ***
  • Post: 330
  • GreenAngel (l'oasi verde nel web)
    • Mostra profilo
Width al 100% di un titolo
« il: 21 Gen 2007, 04:49:06 »
Ciao a tutti...
sono alle prese con un layout...mio di sana pianta...

Non riesco tramite css a stabilire un width al 100% per il titolo di un articolo... (Vedi foto allegata).E' la scitta BENVENUTI in maiuscolo che rimane grande per quanto è la larghezza del contenuto. Io invece vorrei che il bacground arrivasse in fondo...al 100%...
Ho fatto svariati tentativi ma senza alcun esito.

Potrebbe essere un discorso di eredità ?
Però non saprei proprio chi potrebbe essere il padre ?!?!?!  ;D

Posto il css per eventuali ragguagli...

P.S. Ho evidenziato con dei cancelletti ######### il pezzo incriminato....per facilitarvi la lettura...  ;)

Grazie.
GreenAngel

Codice: [Seleziona]
/* _________________________________ IMPOSTAZIONI PREDEFINITE _________________________________ */
/* Di seguito la configurazione standard usata quando nessun altro stile è stato definito.*/

/* Stile per il tag body del vostro sito web, controlla la famiglia dei font lo sfondo della pagina, ecc..*/
body {
color            : #000000;
margin-top       : 0px;
margin-left      : 0px;
margin-right     : 0px;
margin-bottom    : 0px;
padding          : 0px;
background-color : #FFFFFF;
font-family      : Verdana, Garamond, Arial;
font-size        : 12px;
}

 /* formatta tutti gli articoli (divisi). Questo viene applicato a tutto solo se nessun altro stile è stato definito. */
p {
}

 /* formatta tutti gli articoli. Questo settaggio predefinito è usato se nessuno stile è stato definito. */
td {
}

 /* formatta tutti gli articoli. Questo settaggio predefinito è usato se nessuno stile è stato definito.*/
tr {
}

/* formatta tutte le voci UL (lista non ordinata). Questo settaggio predefinito è usato se nessuno stile è stato definito.*/
ul {
}

/* formatta tutte le voci LI (lista ordinata). Questo settaggio predefinito è usato se nessuno stile è stato definito.*/
li {
list-style       : none;
   margin           : 2px;
  padding-left     : 16px;
background-image : url(../images/trattino.gif) ;
background-repeat: repeat-y;
background-position: left;
}

/* stile generale dei collegamenti*/
a:link, a:visited {
color            : #0F790F;
  text-decoration  : none;
  font-weight      : bold;
}

a:hover {
  color            : Blue;
  text-decoration  : none;
  font-weight      : bold;
}

/* linea orizzontale del vostro template*/
hr {
color            : #999999;
height           : 4px;
width            : 100%;
}

hr.separator {
}


/* _________________________________ IMPOSTAZIONI FORM _________________________________ */
.button {
font-size         : 11px;
  border            : 1px solid #AABBBF;
  background-color  : #FFFFFF;
  color             :#006400;
  background-image  : url(../images/button.gif);
  padding           : 2px;
}

.inputbox {
background-image   :url(../images/inputback.gif);
border             : 1px solid #666;
}

/* formattazione riguardanti le voci ricerca: campo di testo, bottone ricerca, ecc...*/
.search {
}

.search_box {
  float: right;
  background    : transparent url(../images/inputback.gif);
  color    : #333333;
font-size: 9px;
  height: 14px !important; /* viene interpretato da Firefox */
height /**/: 20px; /* viene interpretato da Internet Explorer */
  margin-bottom: 4px;
}


/* _________________________________ SETTAGGIO NAVIGAZIONE/MENU _________________________________ */
/* Questo stile controlla le voci del menu principale */
a.mainlevel{
/*
text-align       : center;
  display          : block;
  line-height      : 22px;
  height: 20px;
  font-size        : 12px;
  width            : auto;
  background       : url(../images/boff.jpg);
*/
}

a.mainlevel:link {
/*
text-align       : center;
  display          : block;
  font-size        : 12px;
  font-weight      : normal;
  padding          : 0px 0px 0px 0px;
  color            : #333333;
  width            : auto;
  */
}

a.mainlevel:visited {
}

a.mainlevel:hover {
/*
text-align       : center;
  display          : block;
  background       : url(../images/bon.jpg);
  font-size        : 12px;
  font-weight      : normal;
  text-decoration  : none;
*/
}

/* Questo stile serve alla voce attiva del menu, anche nella posizione principale e sotto menu */
#active_menu {
/*
text-align       : center;
  color            : #333333;
  background       : url(../images/bon.jpg);
  font-weight      : bold;
*/
}

a#active_menu:hover {
  text-align       : center;
  color            : #333333;
}

ul#mainlevel-nav {
/*
list-style        : none;
  padding           : 0;
  margin            : 0;
  font-size         : 0.8em;
*/
}

ul#mainlevel-nav li{
/*
display           : block;
  background-image  : none;
  padding-left      : 0px;
  padding-right     : 0px;
  float             : left;
  margin            : 0;
  width             : auto !important;
  width             : 15%;
  font-size         : 11px;
  line-height       : 21px;
  white-space       : nowrap;
  border-right      : 1px solid #cccccc;
*/
}

ul#mainlevel-nav li a {
  /*
  width             : 100%;
  display           : block;
  padding-left      : 15px;
  padding-right     : 15px;
  text-decoration   : none;
  color             : #333333;
  background        : transparent;
  */
}


#mainlevel-nav a:link {
}

#mainlevel-nav a:visited{
}

#mainlevel-nav a:hover {
}

/* Questo lo stile dei sottomenu */
a.sublevel{
}

a.sublevel:link {
}

a.sublevel:visited {
}

a.sublevel:hover {
}

/* Imposta lo stile per la navigazione del footer (" Fine >>") non appare come collegamento (solo quando pochi articoli sono presenti).*/
.pagenavbar {
}

/* Stile per la navigazione del footer (" Fine >>") quando si trasforma in collegamento*/
.pagenavbar:link {
}

.pagenavbar:visited {
}

/* come implica il nome, questo è un testo di formattazione per i link " End >>" */
.pagenav {
}

a.pagenav:visited {
}

a.pagenav:hover {
}

/* Stile per il collegamento "Leggi tutto" mostrato quando è presente un lungo articolo */
a.readon:link,, a.readon:visited {
color            :Black;
  font-size        : 10px;
  white-space      : normal;
  font-weight      : normal;
  padding-bottom   : 4px;
  padding-left     : 4px;
  padding-right    : 4px;
  padding-top      : 4px;
  float            : left;
  line-height      : 10px;
  text-decoration  : none;
  border           : 1px solid #AABBBF;
  background-color : #FFFFFF;
  background-image : url(../images/button.gif); 
}

a.readon:hover {
color            :Blue;
  font-size        : 10px;
  white-space      : normal;
  font-weight      : normal;
  padding-bottom   : 4px;
  padding-left     : 4px;
  padding-right    : 4px;
  padding-top      : 4px;
  float            : left;
  line-height      : 10px;
  text-decoration  : none;
  border           : 1px solid #AABBBF;
  background-color : #FFFFFF;
  background-image : url(../images/button.gif); 
}

/* Stile per il collegamento path che indica il percorso delle pagine */
.pathway {
  font-size        : 10px;
  color            : Black;
  padding-left     : 14px;
}

a.pathway:link, a.pathway:visited {
  color            : #006400;
  font-size        : 10px;
  padding-left     : 0px;
}

a.pathway:hover {
  font-size        : 10px;
  padding-left     : 0px;
}

/* Stile per il bottone “[indietro]” */
.back_button {
text-align         : center;
padding            : 10px;
}

/* Stile per il bottone “Prec.” */
.pagenav_prev {
}

/* Stile per il bottone “Pross.” */
.pagenav_next {
}

/* Stile per l'ultima lista di notizie - di default, Ultime Notizie è situato nel modulo user1 */
.latestnews ul {

}

.latestnews li {
}

/* Stile per gli articoli più popolari - di default, più popolari è situato nel modulo user2 */
.mostread ul{
}

.mostread li{
}





/* _________________________________ Settaggio per menu D4J TransMenu orizzontale in alto _________________________________ */
a.mainlevel_trans:link, a.mainlevel_trans:visited {
   display: block;
   font-size: 11px;
   font-weight: normal;
   color: White;
   text-align: left;
   padding-top: 5px;
   padding-left: 18px;
   height: 20px !important;
   height: 25px;
   width: 100%;
   text-decoration: none;
}

a.mainlevel_trans:hover {
   display: block;
   font-size: 11px;
   font-weight: normal;
   color: Yellow;
text-align: left;
}

a.sublevel_trans:link,a.sublevel_trans:visited{
   display: block;
   font-size: 11px;
   font-weight: normal;
   color: Black;
   text-align: left;
}

a.sublevel_trans:hover {
   display: block;
   font-size: 11px;
font-weight: bold;
   color: #006400;
   text-align: left;
}

/* _________________________________ SETTAGGIO CONTENUTO PAGINA _________________________________ */
a.category:link, a.category:visited  {
font-size        : 11px;
  font-weight      : bold;
}

a.category:hover {}

/* Formattazione dei collegamenti nella sezione Blog */
.blogsection {
}

/* Il testo "Leggi tutto" nella sezione Blog */
.blog_more {
padding-left       : 10px;
}

/* settaggio per i collegamenti del Blog */
a.blogsection:link {
}

/* come sopra, ma setta il formato dei collegamenti visitati */
a.blogsection:visited {
}

/* come sopra, ma per i collegamenti modificati al passaggio del mouse */
a.blogsection:hover {
}

/* Titolo del componente usato per mostrare il contenuto.*/
.componentheading {
letter-spacing   : 1px;
  background       : url(../images/header1.jpg) repeat-x;
  font-size        : 12px;
  font-weight      : bold;
  height           : 22px;
  line-height      : 22px;
  text-transform   : uppercase;
  padding-left     : 10px;
  text-align       : left;
  color            : #FFF;
  width            : 100%;
  margin           : 2px;
}

/* ########################################################## */
/* ########################################################## */
/* E' questo il pezzo che dovrebbe cambiare i settaggi per il titolo */
/* ########################################################## */
/* ########################################################## */
/* Titolo del componente articoli, etc. da visualizzare.*/
.contentheading {
letter-spacing   : 1px;
  background       : url(../images/header.jpg) repeat-x;
  font-weight      : bold;
  height           : 22px;
line-height      : 22px;
text-transform   : uppercase;

/*

 

  padding-left     : 10px;
  text-align       : left;
  width            : 100%;
*/
 
  color            : #FFF;

  margin           : 2px;
padding-right: 100 px;
background-repeat: repeat-x;
}[/color]

/* Tabella che contiene tutte le informazioni non appartenenti agli articoli (componenti, lista categorie, modulo contatti, ecc...).*/
.contentpane {
}

/* Tabella che contiene l'attuale testo per un articolo.*/
.contentpaneopen {
}

/* Titolo degli articoli */
.contentpagetitle {
}

/* Titoli degli articoli che appaiono come collegamenti */
a.contentpagetitle:hover {
}

a.contentpagetitle:link {
}

a.contentpagetitle:visited {
}

/* Formatta la “DESCRIZIONE” delle sezioni, categorie (novità/collegamenti/ultime novità...) */
.contentdescription {
}

/* Formattazione della tabella dei Contenuti per pagine di contenuti o articoli multiple */
table.contenttoc {
}

/* come sopra, usato per formattare il td e le celle*/
table.contenttoc td {
}

/* come sopra, usato per formattare il th delle "Tabelle di contenuto" ( normalmente l'indice degli articoli)*/
table.contenttoc th {
}

/* come sopra, usato per formattare i testi dei toc link*/
table.contenttoc td.toclink {
}

/* come sopra, usato per formattare lo stato dei testi dei toc link*/
a.toclink:link {
}

a.toclink:visited {
}

a.toclink:hover {
}

/* _________________________________ LISTA DELLE SEZIONI JOOMLA - MAMBO _________________________________ */
/* Questo per lo stile delle intestazioni nella pagina delle SEZIONI. Esempio: intestazione della “Data”, “titolo articolo”, “Autore” e “visite” */
.sectiontableheader {
font-size        : 11px;
font-weight      : normal;
text-transform   : uppercase;
letter-spacing   : 1px;
background       : #D8E0E4;
color            : #333333;
padding          : 4px;
}

.sectiontableentry1 {
  vertical-align   : top;
  padding          : 3px;
  background       : #E6EEF2;
  border-top       : 1px solid #FFFFFF;
  border-bottom    : 1px solid #999999;
}

.sectiontableentry2 {
  vertical-align   : top;
  padding          : 3px;
  border-top       : 1px solid #FFFFFF;
  border-bottom    : 1px solid #999999;
}

/* _________________________________ FORMATTAZIONE DEI MODULI JOOMLA - MAMBO _________________________________ */
/* Formattazione della tabella modulo */
table.moduletable {
width    : 100%;
}

/* Formattazione del titolo del modulo, e dei titoli del modulo (Annunci, Ultime notizie, I più letti e quello che c'è nella pagina */
table.moduletable th {
  font-size        : 11px;
  font-weight      : bold;
  text-align       : center;
  height           : 24px;
  line-height      : 24px;
  color            : #FFF;
  border-left      : 1px solid #FFF;
  border-right     : 1px solid #FFF;
  background-image : url(../images/header.jpg);
  }

/* Formattazione delle celle della tabella del modulo */
table.moduletable td {
}

/* _________________________________ VARIE _________________________________ */
/* Date , Autori*/

/* Per lo stile della data odierna nell'homepage */
.date {
  font-size        : 10px;
  color            : #333333;
  padding-right    : 10px;

  bottom: 100px;
}

/* Per lo stile della data del contenuto/articoli creata sotto il titolo dei contenuti */
.createdate {
color: Silver;
font-size: 9px;
}

/* Formattazione "Ultimo aggiornamento" alla fine dell'articoli/contenuti */
.modifydate {
color: Silver;
font-size: 9px;
}

/* Formattazione testo "Scritto da:...." */
.small {
color: Silver;
font-size: 9px;
}

/* Formattazione del testo del risultato della pagina cerca, per "Numero di Votanti" */
.smalldark {
color: Silver;
font-size: 9px;
}


/* _________________________________ Sondaggi _________________________________ */
/* Formatta il td della tabella sondaggi */
.poll {
}

/* configura la proprietà del bordo della tabella sondaggi */
.pollstableborder {
}

/* Collegamenti */
/* Per formattare i titoli dei collegamenti sotto la sezione “collegamenti nell'area visiva del sito” */
.weblinks{
}

/* come sopra, ma per i collegamenti che ricevono il passaggio del mouse */
a.weblinks:hover {
}

table.moduletable_sondaggi {
  font-size        : 8px;
  font-weight      : normal;
  color            : Black;
}

table.moduletable_sondaggi th {
  font-size        : 11px;
  font-weight      : bold;
  text-align       : center;
  height           : 24px;
  line-height      : 24px;
  color            : #FFF;
  border-left      : 1px solid #FFF;
  border-right     : 1px solid #FFF;
  background-image : url(../images/header.jpg); 
}

table.moduletable_sondaggi div {
  font-size        : 8px;
  font-weight      : bold;
  text-align       : center;
  height           : 24px;
  line-height      : 24px;
  color            : #FFF;
  border-left      : 1px solid #FFF;
  border-right     : 1px solid #FFF;
}

.sectiontableentry1_sondaggi {
  vertical-align   : middle;
  padding          : 3px;
  background       : #F6FFF7;
  border-top       : 1px solid #FFFFFF;
  border-bottom    : 1px solid #999999;
  font-size: 11px;
}

.sectiontableentry2_sondaggi {
  vertical-align   : middle;
  padding          : 3px;
  border-top       : 1px solid #FFFFFF;
  border-bottom    : 1px solid #999999;
  font-size: 11px;
}

/* _________________________________ Newsfeeds _________________________________ */
/* I titoli del newsfeed. NOTA: Questo non influenzerà il titolo di notizie del newsfeed! */
.newsfeedheading {
}

/* yeah.. le date sul newsfeed */
.newsfeeddate {
}

/* questo è il testo delle newsfeed */
.fase4rdf {
}

/* pagina Cerca */
/* Questo per formattare il campo con la “Chiave di Ricerca: il test ha dato 4 risultati” l'area che compare dopo l'inserimento di un valore da cercare. Compare sulla pagina principale con i risultati di ricerca */
table.searchintro {
}

/* _________________________________ TAB DELL'INTERFACCIA AMMINISTRATIVA (FRONTEND) DEL SITO JOOMLA - MAMBO _________________________________ */
/* Il seguente CSS agisce sull'interfaccia amministrativa del sito (frontend) quando ci si è autenticati */
.ontab {}/* Per lo stile dei bottoni "Tab" quando si editano i contenuti attraverso l'area amministrativa
(frontend). Questa classe .ontab è lo stile per le tabelle quando sono attive o quando sono state "cliccate" */
.offtab {} /* Come sopra, usato per lo stile dei bottoni "Tab" quando si edita il contenuto attraverso l'area
frontend. Questo è lo stile per il linguetta che NON è attivo o quando non è "cliccato" */
.tabpadding {} /* Questo stile è usato per configurare il formato della tab */
.tabheading {} /* Non ho capito per cosa venga usato. Non sono riuscito a trovare qualche informazione
relativa a questa classe fino a questo momento. */
.pagetext {} /* Questo stile è usato per formattare il contenuto del modulo di pubblicazione dei contenuti
(dove c'è l' HTMLArea e tutti i suoi forms + contenuti) nell'interfaccia della gestione del frontend */
[/color][/size]

[allegato eliminato da un amministratore]
GreenAngel (l'oasi verde nel web) http://www.greenangel.it

Offline $gÑ@ÞþØ

  • Esploratore
  • **
  • Post: 92
  • Sesso: Maschio
    • Mostra profilo
Re: Width al 100% di un titolo
« Risposta #1 il: 21 Gen 2007, 09:40:31 »
Ciao,

qual'è il sito? Controllo il codice HTML in modo da capirci meglio.

Bye
$gÑ@ÞþØ

« Ultima modifica: 26 Ago 2009, 18:09:41 da VMB »

Offline GreenAngel

  • Appassionato
  • ***
  • Post: 330
  • GreenAngel (l'oasi verde nel web)
    • Mostra profilo
Re: Width al 100% di un titolo
« Risposta #2 il: 21 Gen 2007, 15:57:10 »
Questo è l'estratto del codice della parte interessata...
Il sito è in locale...

Ho provato a mettere width=100% nella classe "contentpaneopen" ed il backgroound si è espanso un po...ma sempre fino alla larghezza massina del messaggio.... (vedi allegato)


Codice: [Seleziona]
    </style>
    <table class="contentpaneopen">

<tr>
<td class="contentheading" width="100%">
Benvenuti </td>
</tr>
</table>

<table class="contentpaneopen">
<tr>
<td width="70%" align="left" valign="top" colspan="2">

<span class="small">
Scritto da GreenAngel </span>
&nbsp;&nbsp;
</td>
</tr>

[allegato eliminato da un amministratore]
GreenAngel (l'oasi verde nel web) http://www.greenangel.it

 



Web Design Bolzano Kreatif