Height nel css e problema messaggi

Height nel css e problema messaggi postato il 25/05/2012 19:57:20 nel forum programmazione, gdrcd, open source, hosting e modificato da astro991 il 26/05/2012 01:45:44

1) Utilizzando gdrcd 5.1, nel file css ho scritto

div.msgs{
margin:5px auto;
padding:10px;
width:180px;
background-color:blue;
border:solid 0px #444;
-moz-border-radius:5px; /* Bordi arrotondati */
-webkit-border-radius:5px;
-khtml-border-radius: 5px;
border-radius:5px;
}

e ottengo questo: http://img651.imageshack.us/img651/102/immagineve.png ↗

ho provato a metterci il comando height, ma cambia dimensione solo la parte sotto l'immagine della busta, non quella sopra. Ho provato anche con vertical-align, ma anche in questo caso nulla. Ho pure provato a modificare margin, ma nada.

Io vorrei ridurre la distanza tra la busta e il margine superiore..sapete dirmi come fare?

dimenticavo: il file css in cui ho fatto tutto è il file main.css

--------------------

2) se provo a scrivere un nuovo messaggio, il box in cui scrivere il testo è molto più piccolo rispetto al normale (è passato ad essere alto solo 2 riche di testo).

Vi riporto qui di seguito l'into file main.css con le modifiche, così forse potete aiutarmi meglio:

img {
border: none;
}

/** * Skin advanced
* @author Blancks
*/

/** * Parametri di default nella pagina
*/
body{padding:0; margin:0; color:purple; font-family:times; font-size:14px; background:url("imgs/sfondo.png") top left repeat;}

body.transparent_body{background-color:transparent; background-image:none;}

div, ul, li{margin:0; padding:0;}

.blank{clear:both;}

a, a:visited{
color:#0000ff;
text-decoration:none;
}

a:hover{
color:green;
font-weight:bolder;
text-decoration:underline;
}

div.form_field table{
margin:5px auto;
}

input, textarea, select{
width:80%;
margin-bottom:10px;
}

input[type='submit']{
width:auto;
margin:5px 0 15px 0;
}

textarea{
height:100;
}

div.form_label{
font-size:13px;
font-weight:bolder;
margin-top:5px;
}

div.form_info{
font-size:12px;
margin-bottom:15px;
}

select.day, select.month, select.year{
width:60px;
display:inline-block;
}

/** * Stile dei messaggi d'avviso dell'engine */
div.warning, div.error{
background-color:#cf8888;
font-size:12px;
text-align:center;
margin:15px;
font-weight:bolder;
padding:10px;
border:solid 1px #800;
color:#970b0b;
}

div.link_back{
text-align:center;
background-color:;
padding:2px;
}

/** * Logout */
div.logout_box{
margin:20px auto;
padding:10px;
text-align:center;
background-color:;
border:solid 0px #333;
-moz-border-radius:5px; /* Bordi arrotondati */
-webkit-border-radius:5px;
-khtml-border-radius: 5px;
border-radius:5px;
}

div.logout_box a{
text-decoration:underline;
font-style:italic;
}

/** * Titoli delle sezioni
*/
div.innertube h2, div.output h2, div.page_title h2{
font-size:16px;
font-weight:bolder;
border-bottom: 0px solid gold;
padding-bottom: 4px;
margin-top:0;
}

/** * Stile dei contenitori grigi con i bordini arrotondati
*/
div.menu, div.presenti, div.output{
margin:5px auto;
padding:10px;
width:180px;
background-color:;
border:solid 0px #444;
-moz-border-radius:5px; /* Bordi arrotondati */
-webkit-border-radius:5px;
-khtml-border-radius: 5px;
border-radius:5px;
}

div.presenti{
height:320px;
}

div.pagina_info_location{
margin:5px auto;
padding:10px;
width:180px;
background-color:;
border:solid 0px #444;
-moz-border-radius:5px; /* Bordi arrotondati */
-webkit-border-radius:5px;
-khtml-border-radius: 5px;
border-radius:5px;
height:200px;
}

div.gargoyle{
margin:5px auto;
padding:10px;
width:180px;
background-color:;
background:url("imgs/gargoyle.jpg");
border:solid 0px #444;
-moz-border-radius:5px; /* Bordi arrotondati */
-webkit-border-radius:5px;
-khtml-border-radius: 5px;
border-radius:5px;
text-align:justify;
height:241px;
}

div.msgs{
margin:5px auto;
padding:10px;
width:180px;
background-color:;
border:solid 0px #444;
-moz-border-radius:5px; /* Bordi arrotondati */
-webkit-border-radius:5px;
-khtml-border-radius: 5px;
border-radius:5px;
height:40px;
}

div.output{
position:absolute;
top:0;
bottom:0;
right:0px;
left:0px;
width:auto;
overflow:auto;
text-align:center;
background:url("") no-repeat top center;
}

/** * Informazioni con anteprima luogo
*/
div.info_image{
text-align:center;
}

div.box_stato_luogo{
padding-top:2px;
margin-bottom:15px;
color:white;
}

div.meteo, div.meteo_date{
padding-top:5px;
text-align:center;
font-size:12px;
color:purple;
}

/** * Frame Messaggi
*/
iframe.iframe_messaggi{
height: 70px;
width: 180px;
}

div.pagina_messaggi{
text-align:center;
font-size:15px;
}

div.pagina_messaggi a, div.pagina_messaggi a:visited{
text-decoration:none;
color:#ff0000;
}

div.messaggio_forum_nuovo a, div.messaggio_forum_nuovo a:visited{
font-weight:bolder;
font-style:italic;
color:#ff0000;
}

/** * Menù di gioco
*/
select#gotomap{
display:block;
width:160px;
margin:0 auto 15px auto;
}

div.link_menu{
padding:0 0 0 0px;
font-size:18px;
float:left;
}

div.link_menu a{
display:block;
padding:5px;
text-align:left;
}

div.link_menu a:hover{
background-color:;
text-decoration:none;
-moz-border-radius:5px; /* Bordi arrotondati */
-webkit-border-radius:5px;
-khtml-border-radius: 5px;
border-radius:5px;
}

/** * Mappa cliccabile */

/** * Posizionamento mappa cliccabile
*/
div.mappaclick_map{
margin:20px auto;
}

/** * Link testuali sulla mappa */
div.mappaclick_map a{
font-size:15px;
font-weight:bolder;
color:black;
}

/** * stile della tooltip di descrizione sulla mappa
*/
div#descriptionLoc{
position:absolute;
width:200px;
background-color:#cfcfcf;
padding:20px;
font-size:12px;
border:solid 1px #666;
font-family:Verdana,Sans;
text-align:left;

-moz-border-radius:5px; /* Bordi arrotondati */
-webkit-border-radius:5px;
-khtml-border-radius: 5px;
border-radius:5px;

display:none;/*NON TOCCARE* Di configurazione: nasconde la tip in partenza */
z-index:9999;/*NON TOCCARE* Di configurazione: mostra la tooltip sopra gli altri link */
}

/** * Stili relativi all'elenco delle mappe in basso
*/
div.mappaclick_more{
padding-top:10px;
}

div.mappaclick_more a{
background-color:#cfcfcf;
padding:8px;
margin-right:10px;
-moz-border-radius:5px; /* Bordi arrotondati */
-webkit-border-radius:5px;
-khtml-border-radius: 5px;
border-radius:5px;
}

/** * Messages center
*/
div.elenco_record_gioco{
padding:20px;
}

div.elenco_record_gioco table{
width:100%;
background-color:;
-moz-border-radius:5px; /* Bordi arrotondati */
-webkit-border-radius:5px;
-khtml-border-radius: 5px;
border-radius:5px;
}

div.elementi_elenco{
padding-top:5px;
text-align:center;
}

div.titoli_elenco{
font-size:13px;
font-weight:bolder;
}

img.colonna_elengo_messaggi_icon{
width:30px;
height:30px;
}

div.controlli_elenco{
width:60px;
}

div.controllo_elenco{
width:20px;
float:left;
}

div.controllo_elenco input[type='image']{
width:15px;
}

/** * Ambientazione/Regolamento */
div.user_ambientazione div.elementi_elenco, div.servizi_abilita div.elementi_elenco{
text-align:justify;
padding:5px;
}

div.user_ambientazione td.casella_titolo div.elementi_elenco, div.servizi_abilita td.casella_titolo div.elementi_elenco{
font-size:14px;
font-weight:bolder;
padding:2px 0 2px 10px;
color:#B8860B;
background-color:transparent;
}

/** * Capacità */
div.user_capacita div.elementi_elenco{
text-align:justify;
padding:5px;
}

div.user_capacita td.casella_titolo div.elementi_elenco{
font-size:14px;
font-weight:bolder;
padding:0 0 0 0px;
text-align:center;
color:#B8860B;
background-color:transparent;
}

/** * Razze */
div.user_razze div.elementi_elenco{
text-align:justify;
padding:5px;
}

div.user_razze td.casella_titolo div.elementi_elenco{
font-size:14px;
font-weight:bolder;
padding:0 0 0 0px;
text-align:center;
color:#B8860B;
background-color:transparent;
}

/** * Generico per elenchi, bacheche, regolamento, ambientazione etc */
div.capitolo_elenco{
font-weight:bolder;
font-size:14px;
text-align:left;
padding:5px 5px 5px 20px;
background-color:;
}

div.elementi_elenco{
min-height:20px;
}

td.casella_elemento, div.elementi_elenco{
font-size:14px;
background-color:#fff;
color:#000;
}

div.controllo_elenco input[type='image']{
height:15px;
width:15px;
display:block;
margin: 2px 5px;
}

div.elementi_elenco a{
font-weight:bolder;
}

div.elementi_elenco a:hover{
text-decoration:none;
}

/** * Stile tabelle nei moduli di gestione */
div.elenco_record_gestione table{
width:95%;
margin:10px auto;
}

/** * Accorgimenti Layout */

/** * Allineamento verticale delle colonne
*/
#framecontentLeft, #framecontentRight { display:table; }

/** * margine delle colonne */
div.innertube{
margin:0;
display:table-cell;
vertical-align:middle;
}

di certo, per entrambi i problemi devo lavorare sul file main.css...anche perché, se sostituisco quello con le modifiche con quello originale, il box in cui inserire il testo del messaggio torna alla grandezza normale.

Sapete dirmi cosa devo modificare per far tornare il box dei messaggi a grandezza normale? (p.s. la riduzione del box la vedo solo con IE, con FF no)

Grazie

p.s. Ho notato che non è solo il box per inserire il testo dei messaggi, ma qualunque box in cui devo inserire un testo (anche quello nelle bacheche)

Storie di Agarthi ↗
Un Varco si apre davanti a te, un mondo tra i mondi è a portata di mano. Lasciati alle spalle le certezze, inizia l'avventura!

quota

Pagine → 1

dany

SCRIVI

30/05/2012 16:14:29

Sul punto 1) tu hai messo un padding di 10 pixel al riquadro e quindi la busta all'interno sarà staccata dai bordi di 10 pixel per lato.

Se la dimensione dal bordo superiore è più alta e non riesci a correggerla nemmeno con un "height" ci possono essere due soluzioni: o la tua immagine ha effettivamente quella altezza (c'è mica una parte trasparente sopra la busta?) oppure potresti aver inserito un margine all'immagine che te la fa spostare.

Una cosa simile:

Mettendo il "margin-top" dentro il tag <img> del disegno otterresti proprio quell'effetto.

Se non riesci a trovare una soluzione, oltre al css, posta anche il codice.

Il punto 2), invece non l'ho capito XD

"Punta sempre alla luna, male che vada avrai vagabondato tra le stelle."

quota

astro991

SCRIVI

30/05/2012 17:48:08

Si, il secondo problema non è cosi semplice da capire...
allora...
se io clicco su "scrivi un nuovo messaggio" o su "rispondi" ad un post in bacheca, il riquadro in cui inserire il testo è molto più piccolo rispetto al normale. Se sostituisco il file "main" che ho postato sopra con quello originale, la grandezza del riquadro torna alla sua grandezza originaria...se rimetto quello da me modificato, ritorna ad essere piccolissimo...