Ricerca
Il rumore che ti circonda
Un aiuto per un menu html.
Ho il codice che posto sotto che ogni due righe di menu mi fa vedere una riga separatrice bianca. Ecco, io non riesco a indiduare dove sta questa impostazione, in modo da impostarla per ogni riga o semplicemente se volessi cambiare colore.
Codice:
#menu {
width: 10em;
font: 80% Arial, Helvetica, sans-serif;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
font-size: 1.1em;
display: inline;
margin: 0;
padding: 0;
}
#menu a:link, #menu a:visited {
display: block;
background-color: #05181E;
color: #fff;
margin: 0;
padding: 0.3em 0.6em 0.3em 1em;
text-decoration: none;
border-bottom: 1px solid #E2980;
border-left: 10px solid #41545F;
}
#menu a:hover, #menu a:focus, #menu a:active{
background-color: #41545F;
color: #FFFFFF;
border-left: 10px solid #EAD100;
ecco l'immagine di come appare a me
Ho il codice che posto sotto che ogni due righe di menu mi fa vedere una riga separatrice bianca. Ecco, io non riesco a indiduare dove sta questa impostazione, in modo da impostarla per ogni riga o semplicemente se volessi cambiare colore.
Codice:
#menu {
width: 10em;
font: 80% Arial, Helvetica, sans-serif;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
font-size: 1.1em;
display: inline;
margin: 0;
padding: 0;
}
#menu a:link, #menu a:visited {
display: block;
background-color: #05181E;
color: #fff;
margin: 0;
padding: 0.3em 0.6em 0.3em 1em;
text-decoration: none;
border-bottom: 1px solid #E2980;
border-left: 10px solid #41545F;
}
#menu a:hover, #menu a:focus, #menu a:active{
background-color: #41545F;
color: #FFFFFF;
border-left: 10px solid #EAD100;
ecco l'immagine di come appare a me
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: 100%; height: 100%;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
Come posso rappresentare l'immagine al 70% del broswer size?
#lightbox img{ width: 100%; height: 100%;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
Come posso rappresentare l'immagine al 70% del broswer size?
fdicarlo: circa 1 anno fa, Latina in lightbox outerimagecontainer fff imagecontainer loading hovernav prevlink nextlink imagedatacontainer imagedata 666 imagedetails caption numberdisplay bottomnavclose overlay 
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: 100%; height: 100%;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
Come posso rappresentare l'immagine al 70% del broswer size?
#lightbox img{ width: 100%; height: 100%;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
Come posso rappresentare l'immagine al 70% del broswer size?
fdicarlo: circa 1 anno fa, Latina in lightbox outerimagecontainer fff imagecontainer loading hovernav prevlink nextlink imagedatacontainer imagedata 666 imagedetails caption numberdisplay bottomnavclose overlay
background: #fff url(images/grass.jpg) bottom center repeat-x;
diventa
background: #fff url(images/grass.jpg) repeat-x bottom center;
...
gli stili sono il mio pane quotidiano
diventa
background: #fff url(images/grass.jpg) repeat-x bottom center;
...
gli stili sono il mio pane quotidiano
Un css per rendere più bello il tuo widget di Meemi in Wordpress - Un grazie a Morgana, che mi ha dato il codice per rendere il widget di Meemi in Wordpress veramente stiloso
Ecco il codice:
/*Meemi*/
#meme_widget {
background:#fff;
}
#top_meemi {
- Un grazie a Morgana, che mi ha dato il codice per rendere il widget di Meemi in Wordpress veramente stiloso Ecco il codice:
/*Meemi*/
#meme_widget {
background:#fff;
}
#top_meemi {
vincenzodb: circa 2 anni fa da Meemi WP, Tech-Blog in meemi-in-wordpress wordpress tech-blog meme_widget fff top_meemi - 2 risposte
Morgana
(2 anni fa)
vincenzodb
(2 anni fa)
thanks
Domanda a chi ne sa di più di web-programmazione.
Ho bisogno di centrare tutto il body di una pagina in modo che ampliando la finestra risulti sempre al centro, e non a sinistra.
Conosco il trucchetto di mettere nel css left:50% e il margin a metà della larghezza, e funziona, solo che così poi se la finestra è più piccola del body, invece di far apparire le barre, lo taglia nascondendo alcune porzioni.
C'è qualche altro metodo che non abbia questo inconveniente?
( per ora nel css il body è così:
body {
background:#fff;
font: 16px/1.95em "Lucida Grande","Lucida Sans Unicode",geneva,verdana,sans-serif;
padding-top:20px;
widht:1290px;
position:absolute;
}
e funziona, ma rimane tutto schiacciato a sinistra
)
Grazie
Ho bisogno di centrare tutto il body di una pagina in modo che ampliando la finestra risulti sempre al centro, e non a sinistra.
Conosco il trucchetto di mettere nel css left:50% e il margin a metà della larghezza, e funziona, solo che così poi se la finestra è più piccola del body, invece di far apparire le barre, lo taglia nascondendo alcune porzioni.
C'è qualche altro metodo che non abbia questo inconveniente?
( per ora nel css il body è così:
body {
background:#fff;
font: 16px/1.95em "Lucida Grande","Lucida Sans Unicode",geneva,verdana,sans-serif;
padding-top:20px;
widht:1290px;
position:absolute;
}
e funziona, ma rimane tutto schiacciato a sinistra
)Grazie
ilmacaco: circa 2 anni fa, 'Milano, Italy' in fff - 22 risposte
Un po come RTFM!!!
Anche io ho smanettato un po' prima di trovare il magico parametro AUTO... Sperando che sia Elettrico e non a Benzina!
@MiPnamic: Magaaaaaaaaaaaari... Sinceramente di vedere Tabelle usate a sproposito solo per fare del Layout un po' secca! Le Tabelle sono per i dati Tabellari!!!
Una pagina con le informazioni principali, e via
Takky
(2 anni fa)
KISS: Keep It Simple Stupid! Un po come RTFM!!!
Anche io ho smanettato un po' prima di trovare il magico parametro AUTO... Sperando che sia Elettrico e non a Benzina!
@MiPnamic: Magaaaaaaaaaaaari... Sinceramente di vedere Tabelle usate a sproposito solo per fare del Layout un po' secca! Le Tabelle sono per i dati Tabellari!!!
ilmacaco
(2 anni fa)
comunque a proposito di KISS, sto appunto rifacendomi il sito in modo che sia il più semplice possibile, ispirandomi a quello bellissimo fatto dal boss-master per @crocchetta Una pagina con le informazioni principali, e via
Nuovo su Meemi?
Iscriviti oggi!
Iscriviti oggi!
iscriviti gratis ed inizia a collezionare e condividere le tue emozioni