Pagina 1 di 4 1 2 3 ... ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 38
  1. #1

    Modificare il testo del menù, perchè è troppo chiaro sullo sfondo dell'header!

    Ciao ragà una mano in questo css per dare uno sfondo al testo dei link del menu e renderli più scuri al passaggio del mouse.
    Cioè lo sfondo del testo sopra i bottoni linkabili del menù è troppo chiaro ovvero bianco, siccome lo sfondo dell'header sotto è bianco non si nota la scritta linkabile se non al passaggio del mouse, lì sono riuscita a mettere al bottone linkabile uno sfondo blu scuro.
    Quindi il mio problema è individuare il testo scritto sopra ai bottoni del menù e farlo più scuro, è possibile individuarlo nel css che posto? voi che avete un'occhio più professionale di me? perchè io ci sto impazzendo! Grazie davvero!
    codice:
    @charset "utf-8";/*
    Template Name: Chillaid
    Author: <a href="https://www.os-templates.com/">OS Templates</a>
    Author URI: https://www.os-templates.com/
    Copyright: OS-Templates.com
    Licence: Free to use under our free template licence terms
    Licence URI: https://www.os-templates.com/template-terms
    File: Layout CSS
    */
    
    
    @import url("fontawesome-free/css/fontawesome-all.min.css");
    @import url("framework.css");
    
    
    /* Rows
    --------------------------------------------------------------------------------------------------------------- */
    .row0, .row0 a{}
    .row1, .row1 a{}
    .row2, .row2 a{}
    .row3, .row3 a{}
    .row4, .row4 a{}
    .row5, .row5 a{}
    
    
    
    
    /* Header
    --------------------------------------------------------------------------------------------------------------- */
    #header{}
    
    
    #header #logo{margin:22px 0 0 0;}
    
    
    
    
    /* Page Intro
    --------------------------------------------------------------------------------------------------------------- */
    #pageintro{padding:200px 0 280px;}/* 280px => 80px for #introblocks negative margin */
    
    
    #pageintro article, #pageintro article p{display:block; max-width:75%; margin:0 auto; text-align:center;}
    #pageintro article p{max-width:65%; line-height:2rem;}
    #pageintro .heading{margin-bottom:20px; font-size:4rem;}
    #pageintro footer{margin-top:50px;}
    
    
    
    
    /* Content Area
    --------------------------------------------------------------------------------------------------------------- */
    .container{padding:80px 0;}
    
    
    /* Content */
    .container .content{}
    
    
    .sectiontitle{display:block; max-width:55%; margin:0 auto 80px; text-align:center;}
    .sectiontitle *{margin:0;}
    
    
    .elements{}
    .elements-three li, .elements-four li{margin-bottom:50px;}
    .elements-three li:nth-last-child(-n+3), .elements-four li:nth-last-child(-n+4){margin-bottom:0;}/* Removes bottom margin from the last line of items - margin is restored in the media queries when items stack */
    .elements-three li:nth-child(3n+1), .elements-four li:nth-child(4n+1){margin-left:0; clear:left;}/* Removes the need to add class="first" */
    .elements article{display:block; padding:30px 15px; border-radius:50px 0; text-align:center;}
    .elements article *{margin:0 0 15px 0; padding:0; line-height:1;}
    .elements article i{width:60px; height:60px; line-height:60px; margin-bottom:30px; font-size:1.6rem; text-align:center; border-radius:50%;}
    .elements article .heading{font-size:1.2rem; font-weight:700;}
    .elements article p{margin:0; line-height:normal;}
    
    
    /* Introblocks */
    #introblocks{display:block; position:relative; margin:-160px 0 130px 0; z-index:1;}/* 160px => 80px + container padding */
    
    
    /* Services */
    #services{}
    #services .elements article{border-radius:0;}
    
    
    /* Shout */
    .shout{}
    .shout figure{display:block; max-width:546px;/* same width as the image - contains the caption */}
    .shout figure img{}
    .shout figure figcaption{display:block; position:relative;}
    .shout figure figcaption a{display:block; position:relative; padding:15px; border:solid; border-width:0 1px 1px 1px;}
    .shout figure figcaption a::after{position:absolute; top:12px; right:15px; width:30px; height:30px; line-height:30px; font-family:"Font Awesome\ 5 Free"; font-weight:900; content:"\f105";/* fa-angle-right */ text-align:center; border-radius:50%;}
    
    
    /* Team Members */
    .team{}
    .team li:last-child{margin-bottom:0;}/* Used when elements stack in small viewports */
    .team figure{display:block; text-align:center;}
    .team figure *{margin:0; padding:0;}
    .team figure a{}
    .team figure img{}
    .team figure figcaption{padding:20px 10px; line-height:1; border:solid; border-width:0 1px 1px 1px;}
    .team figure strong{display:block; margin-bottom:8px; font-size:1.4rem; font-weight:400;}
    .team figure em{display:block; font-style:normal; font-size:.8rem;}
    
    
    /* Easy Pie Charts */
    .pr-charts{}
    .pr-charts .pr-chart-ctrl{display:block; float:left; width:25%; min-height:200px;}
    .pr-charts .pr-chart-ctrl .pr-chart{display:block; position:relative; width:100%; margin:0 0 20px 0; text-align:center;}
    .pr-charts .pr-chart-ctrl .pr-chart canvas{display:block; margin:0 auto; padding:0; vertical-align:top;}
    .pr-charts .pr-chart-ctrl .pr-chart i{position:absolute; top:0; left:0; width:100%; height:200px; line-height:200px; font-size:18px; font-style:normal;}/* Must have same height & line height as set in the javascript size element to vertical align centre */
    .pr-charts .pr-chart-ctrl p{margin:0; padding:0; text-transform:uppercase;}
    
    
    /* Testimonials */
    #testimonials{}
    #testimonials article{text-align:center;}
    #testimonials article *{margin:0; padding:0;}
    #testimonials article figure{display:inline-block; margin-bottom:20px;}
    #testimonials article figure img{float:left; margin-right:15px; border-radius:50%;}
    #testimonials article figure figcaption{float:left; margin-top:30px; font-size:1.4rem; text-align:left;}
    #testimonials article figure figcaption .heading{font-size:1.4rem;}
    #testimonials article figure figcaption em{display:block; margin-top:-5px; font-size:.8rem; font-style:normal;}
    #testimonials article blockquote{margin-bottom:20px; padding:20px; border-radius:25px 0;}
    #testimonials article blockquote::before{top:15px; left:15px; font-size:30px; line-height:30px;}
    
    
    /* Latest */
    #latest{}
    #latest > li:last-child{margin-bottom:0;}/* Used when elements stack in small viewports */
    #latest article{}
    #latest article figure{}
    #latest article figure img{}
    #latest article .meta{display:block; margin:0 0 15px 0; padding:5px 10px;}
    #latest article .meta li{display:block; float:left; width:50%; font-size:.8rem;}
    #latest article .meta li:last-child{text-align:right;}
    #latest article .meta li i{margin-right:5px;}
    #latest article .excerpt{display:block; max-width:85%; margin:0 auto; padding:15px 0 15px 15px; border-left:1px solid;}
    #latest article .excerpt time{display:block; margin-bottom:8px; text-transform:uppercase; font-size:.8rem; font-style:normal; line-height:1;}
    #latest article .excerpt .heading{margin:0; padding:0; font-size:1.2rem;}
    
    
    /* Comments */
    #comments ul{margin:0 0 40px 0; padding:0; list-style:none;}
    #comments li{margin:0 0 10px 0; padding:15px;}
    #comments .avatar{float:right; margin:0 0 10px 10px; padding:3px; border:1px solid;}
    #comments address{font-weight:bold;}
    #comments time{font-size:smaller;}
    #comments .comcont{display:block; margin:0; padding:0;}
    #comments .comcont p{margin:10px 5px 10px 0; padding:0;}
    
    
    #comments form{display:block; width:100%;}
    #comments input, #comments textarea{width:100%; padding:10px; border:1px solid;}
    #comments textarea{overflow:auto;}
    #comments div{margin-bottom:15px;}
    #comments input[type="submit"], #comments input[type="reset"]{display:inline-block; width:auto; min-width:150px; margin:0; padding:8px 5px; cursor:pointer;}
    
    
    /* Sidebar */
    .container .sidebar{}
    
    
    .sidebar .sdb_holder{margin-bottom:50px;}
    .sidebar .sdb_holder:last-child{margin-bottom:0;}

  2. #2

    segue css menu

    segue

    codice HTML:
    /* Contact Details--------------------------------------------------------------------------------------------------------------- */#ctdetails{}
    #ctdetails figure > ul{}#ctdetails figure > ul li{position:relative; margin:0 0 35px 0; padding:15px 15px 15px 80px; line-height:1;}#ctdetails figure > ul li:last-child{margin:0;}/* Used when elements stack in small viewports */#ctdetails figure > ul li i{position:absolute; top:15px; left:15px; width:45px; height:45px; line-height:45px; font-size:16px; text-align:center; border-radius:50%;}#ctdetails figure > ul li span{display:block; padding:4px 0 0 0;}#ctdetails figure > ul li strong{display:block; margin:0 0 8px 0; text-transform:capitalize;}
    #ctdetails article{margin-bottom:0;}/* Used when elements stack in small viewports */#ctdetails input, #ctdetails button{border:1px solid;}#ctdetails input{display:block; width:100%; padding:15px; margin-bottom:20px;}#ctdetails button{padding:8px 18px 10px; text-transform:uppercase; font-weight:400; cursor:pointer;}
    
    /* Footer--------------------------------------------------------------------------------------------------------------- */#footer{padding:80px 0;}
    #footer .heading{margin-bottom:50px; font-size:1.2rem;}#footer .logoname{margin-bottom:50px;}#footer p + .faico{margin-top:30px;}
    #footer .linklist li{display:block; margin-bottom:15px; padding:0 0 15px 0; border-bottom:1px solid;}#footer .linklist li:last-child{margin:0; padding:0; border:none;}#footer .linklist li::before, #footer .linklist li::after{display:table; content:"";}#footer .linklist li, #footer .linklist li::after{clear:both;}
    #footer .latestimg{}#footer .latestimg > li{display:inline-block; float:left; width:30%; margin:0 0 5% 5%;}#footer .latestimg > li:nth-last-child(-n+3){margin-bottom:0;}/* Removes bottom margin from the last three items - margin is restored in the media queries when items stack */#footer .latestimg > li:nth-child(3n+1){margin-left:0; clear:left;}/* Removes the need to add class="first" */#footer .latestimg > li img{width:100%;}/* Force the image to resize to take the full space - may have to be changed for tablets, depends on personal preference */#footer .latestimg > li a.imgover{display:block;}
    
    /* Copyright--------------------------------------------------------------------------------------------------------------- */#copyright{padding:20px 0;}#copyright *{margin:0; padding:0;}
    
    /* Transition FadeThis gives a smooth transition to "ALL" elements used in the layout - other than the navigation form used in mobile devicesIf you don't want it to fade all elements, you have to list the ones you want to be faded individuallyDelete it completely to stop fading--------------------------------------------------------------------------------------------------------------- */*, *::before, *::after{transition:all .3s ease-in-out;}#mainav form *{transition:none !important;}
    
    /* ------------------------------------------------------------------------------------------------------------ */
    
    
    /* Navigation--------------------------------------------------------------------------------------------------------------- */nav ul, nav ol{margin:0; padding:0; list-style:none;}
    #mainav, #breadcrumb, .sidebar nav{line-height:normal;}#mainav .drop::after, #mainav li li .drop::after, #breadcrumb li a::after, .sidebar nav a::after{position:absolute; font-family:"Font Awesome\ 5 Free"; font-weight:900; font-size:10px; line-height:10px;}
    /* Top Navigation */#mainav{}#mainav ul{text-transform:uppercase;}#mainav ul ul{position:absolute; width:180px; text-transform:none; z-index:9999;}#mainav ul ul ul{left:180px; top:0;}#mainav li{display:inline-block; position:relative; margin:0 15px 0 0; padding:0;}#mainav li:last-child{margin-right:0;}#mainav li li{width:100%; margin:0;}#mainav li a{display:block; padding:30px 0;}#mainav li li a{border:solid; border-width:0 0 1px 0;}#mainav .drop{padding-left:15px;}#mainav li li a, #mainav li li .drop{display:block; margin:0; padding:10px 15px;}#mainav .drop::after, #mainav li li .drop::after{content:"\f0d7";}#mainav .drop::after{top:35px; left:5px;}#mainav li li .drop::after{top:15px; left:5px;}#mainav ul ul{visibility:hidden; opacity:0;}#mainav ul li:hover > ul{visibility:visible; opacity:1;}
    #mainav form{display:none; width:100%; margin:0; padding:0;}#mainav form select, #mainav form select option{display:block; cursor:pointer; outline:none;}#mainav form select{width:100%; padding:5px; border:none;}#mainav form select option{margin:5px; padding:0; border:none;}
    /* Breadcrumb */#breadcrumb{padding:150px 0 30px;}#breadcrumb ul{margin:0; padding:0; list-style:none; text-transform:uppercase;}#breadcrumb li{display:inline-block; margin:0 6px 0 0; padding:0;}#breadcrumb li a{display:block; position:relative; margin:0; padding:0 12px 0 0; font-size:12px;}#breadcrumb li a::after{top:4px; right:0; content:"\f0da";}#breadcrumb li:last-child a{margin:0; padding:0;}#breadcrumb li:last-child a::after{display:none;}#breadcrumb .heading{margin:0; font-size:2rem;}
    /* Sidebar Navigation */.sidebar nav{display:block; width:100%;}.sidebar nav li{margin:0 0 3px 0; padding:0;}.sidebar nav a{display:block; position:relative; margin:0; padding:5px 10px 5px 15px; text-decoration:none; border:solid; border-width:0 0 1px 0;}.sidebar nav a::after{top:10px; left:5px; content:"\f0da";}.sidebar nav ul ul a{padding-left:35px;}.sidebar nav ul ul a::after{left:25px;}.sidebar nav ul ul ul a{padding-left:55px;}.sidebar nav ul ul ul a::after{left:45px;}
    /* Pagination */.pagination{display:block; width:100%; text-align:center; clear:both;}.pagination li{display:inline-block; margin:0 2px 0 0;}.pagination li:last-child{margin-right:0;}.pagination a, .pagination strong{display:block; padding:8px 11px; border:1px solid; background-clip:padding-box; font-weight:normal;}
    /* Back to Top */#backtotop{z-index:999; display:inline-block; position:fixed; visibility:hidden; bottom:20px; right:20px; width:36px; height:36px; line-height:36px; font-size:16px; text-align:center; opacity:.2;}#backtotop i{display:block; width:100%; height:100%; line-height:inherit;}#backtotop.visible{visibility:visible; opacity:.5;}#backtotop:hover{opacity:1;}
    
    /* Tables--------------------------------------------------------------------------------------------------------------- */table, th, td{border:1px solid; border-collapse:collapse; vertical-align:top;}table, th{table-layout:auto;}table{width:100%; margin-bottom:15px;}th, td{padding:5px 8px;}td{border-width:0 1px;}
    
    /* Gallery--------------------------------------------------------------------------------------------------------------- */#gallery{display:block; width:100%; margin-bottom:50px;}#gallery figure figcaption{display:block; width:100%; clear:both;}#gallery li{margin-bottom:30px;}
    
    /* Font Awesome Social Icons

  3. #3

    segue il css del menu

    segue css menu

    codice HTML:
    .faico{margin:0; padding:0;list-style:none;}
    .faico li{display:inline-block;margin:8px 5px 0 0; padding:0; line-height:normal;}
    .faico li:last-child{margin-right:0;}
    .faico a{display:inline-block;width:36px; height:36px; line-height:36px; font-size:18px;text-align:center;}
    
    
    .faico a{color:inherit;background-color:#282E39;}
    .faico a:hover{color:#FFFFFF;}
    
    
    .faicon-dribble:hover{background-color:#EA4C89;}
    .faicon-facebook:hover{background-color:}#653b98
    .faicon-google-plus:hover{background-color:#DB4A39;}
    .faicon-linkedin:hover{background-color:#0E76A8;}
    .faicon-twitter:hover{background-color:#00ACEE;}
    .faicon-vk:hover{background-color:#4E658E;}
    
    
    
    
    /*------------------------------------------------------------------------------------------------------------*/
    
    
    
    
    
    
    /* Colours
    ---------------------------------------------------------------------------------------------------------------*/
    body{color:#A5A6AA;background-color:#282E39;}
    a{color:#97A9BD;}
    a:active,a:focus{background:transparent !important;}/* IE10 + 11 Bugfix -prevents grey background */
    hr, .borderedbox{border-color:#D7D7D7;}
    label span{color:#FF0000;background-color:inherit;}
    input:focus, textarea:focus,*:required:focus{border-color:#97A9BD !important;}
    
    
    .overlay{color:#FFFFFF;background-color:inherit;}
    .overlay::after{color:inherit;background-color:rgba(40,46,57,.7);/* #282E39 */}
    .overlay.light::after{background-color:rgba(151,169,189,.7);/*#97A9BD */}
    
    
    .gradient{color:#474747;background:linear-gradient(to bottom, #F4F4F4 55%, #FFFFFF 50%,#FFFFFF 100%);}/* Overlap dark to make a hard transition */
    @media screen and (max-width:750px){/*Only the colours height has been changed */
    	.gradient{background:linear-gradient(tobottom, #F4F4F4 24%, #FFFFFF 19%, #FFFFFF 100%);}
    }
    
    
    .btn, .btn.inverse:hover{color:#FFFFFF;background-color:#97A9BD; border-color:#97A9BD;}
    .btn:hover, .btn.inverse{color:inherit;background-color:transparent; border-color:inherit;}
    
    
    .imgover:hover::before{background-color:rgba(151,169,189,.5);/*#97A9BD */}
    .imgover,.imgover:hover::after{color:#FFFFFF;}
    
    
    .logoname a{color:#FFFFFF;}
    .logoname::first-letter, .logonamespan{color:#97BDAB;}
    
    
    
    
    /* Rows */
    .row0, .row0 a{}
    .row1{color:#FFFFFF;background-color:#000000;}
    .row2{color:#474747;background-color:#F4F4F4;}
    .row3{color:#474747;background-color:#FFFFFF;}
    .row4{color:#A5A6AA;background-color:#000000;}
    .row5, .row5 a{color:#A5A6AA;background-color:#282E39;}
    .coloured{color:#FFFFFF;background-color:#97A9BD;}
    
    
    
    
    /* Header */
    #header #logo a{color:inherit;}
    
    
    
    
    /* Page Intro */
    #pageintro{color:#FFFFFF;}
    
    
    
    
    /* Content Area */
    .elements article{color:#474747;background-color:#FFFFFF; box-shadow:0px 0px 15px rgba(0,0,0,.3);}
    .elements article:hover{color:#FFFFFF;background-color:#97A9BD;}/* Default */
    .elements article a i{color:#FFFFFF;background-color:#97A9BD;}/* Default */
    .elements article:hover ai{color:#97A9BD; background-color:#FFFFFF;}/* Default */
    
    
    /* ###### DELETE THE FOLLOWING IF ONLYTHE DEFAULT COLOUR IS REQUIRED ###### */
    #introblocks .elements liarticle{color:#FFFFFF; background-color:#97A9BD;}/* Blue */
    #introblocks .elements li article ai{color:#97A9BD; background-color:#FFFFFF;}/* Blue */
    #introblocks .elements liarticle:hover{color:#474747; background-color:#FFFFFF !important;}
    #introblocks .elements li article:hovera i{color:#FFFFFF !important; background-color:#97A9BD;}
    #introblocks .elements li:nth-child(2)article, #introblocks .elements li:nth-child(2) article:hover ai{background-color:#A197BD;}/* Purple */
    #introblocks .elements li:nth-child(2)article a i{color:#A197BD;}/* Purple */
    #introblocks .elements li:nth-child(3)article, #introblocks .elements li:nth-child(3) article:hover ai{background-color:#BDA697;}/* Brown */
    #introblocks .elements li:nth-child(3)article a i{color:#BDA697;}/* Brown */
    #introblocks .elements li:nth-child(4)article, #introblocks .elements li:nth-child(4) article:hover ai{background-color:#97BDAB;}/* Green */
    #introblocks .elements li:nth-child(4)article a i{color:#97BDAB;}/* Green */
    /* ###### END DELETE ###### */
    
    
    .shout figure figcaptiona{color:inherit; background-color:inherit; border-color:#D7D7D7;}
    .shout figure:hover figcaption a,.shout figure figcaption a::after{color:#FFFFFF;background-color:#97A9BD; border-color:#97A9BD;}
    .shout figure:hover figcaptiona::after{color:#97A9BD; background-color:#FFFFFF;}
    
    
    .team figure figcaption{color:#474747;background-color:#FFFFFF; border-color:#D7D7D7;}
    
    
    #testimonials articleblockquote{color:#474747; background-color:#FFFFFF;}
    #testimonials articleblockquote::before{color:rgba(0,0,0,.05);}
    #testimonials articleblockquote::after{border-top-color:#FFFFFF;}
    
    
    #latest article .meta, #latest article.meta *{color:#FFFFFF; background-color:#282E39;}
    #latest article.excerpt{border-color:#D7D7D7;}
    
    
    
    
    /* Contact Details */
    #ctdetails figure > ulli{color:inherit; background-color:#FFFFFF;}
    #ctdetails figure > ul li:hovera{color:#FFFFFF;}
    #ctdetails figure > ul li:hover,#ctdetails figure > ul li a i{color:#FFFFFF;background-color:#97A9BD;}/* Default */
    #ctdetails figure > ul li:hover ai{color:#97A9BD; background-color:#FFFFFF;}/* Default */
    
    
    /* ###### DELETE THE FOLLOWING IF ONLYTHE DEFAULT COLOUR IS REQUIRED ###### */
    #ctdetails figure > ul li:hover,#ctdetails figure > ul li a i{color:#FFFFFF;background-color:#A197BD;}
    #ctdetails figure > ul li:hover ai{color:#A197BD; background-color:#FFFFFF !important;}
    #ctdetails figure > ulli:nth-child(2):hover, #ctdetails figure > ul li:nth-child(2) ai{background-color:#BDA697;}
    #ctdetails figure > ulli:nth-child(2):hover a i{color:#BDA697;}
    #ctdetails figure > ulli:nth-child(3):hover, #ctdetails figure > ul li:nth-child(3) ai{background-color:#97BDAB;}
    #ctdetails figure > ulli:nth-child(3):hover a i{color:#97BDAB;}
    /* ###### END DELETE ###### */
    
    
    #ctdetails input, #ctdetailsbutton{border-color:transparent;}
    #ctdetails input{color:#474747;background-color:#FFFFFF;}
    #ctdetails button{color:#FFFFFF;background-color:#97A9BD;}
    #ctdetails button:hover{color:inherit;background-color:transparent; border-color:inherit;}
    
    
    
    
    /* Footer */
    #footer .heading{color:#FFFFFF;}
    #footer hr, #footer .borderedbox,#footer .linklist li{border-color:rgba(255,255,255,.1);}
    
    
    
    
    /* Navigation */
    #mainav li a{color:inherit;}#97A9BD
    #mainav .active a, #mainav a:hover,#mainav li:hover > a{color:#052952; background-color:inherit;}
    #mainav li li a, #mainav .active lia{color:#FFFFFF; background-color:rgba(151,169,189,.5);border-color:rgba(151,169,189,.5);/* #97A9BD */}
    #mainav li li:hover > a, #mainav.active .active > a{color:#FFFFFF; background-color:#052952;}
    #mainav form select{color:#474747;background-color:#FFFFFF;}
    
    
    #breadcrumb a{color:inherit;background-color:inherit;}
    #breadcrumb li:last-childa{color:#052952;}
    
    
    .container .sidebar nava{color:inherit; border-color:#052952;}
    .container .sidebar nava:hover{color:#052952;}
    
    
    .pagination a, .paginationstrong{border-color:#D7D7D7;}
    .pagination .current *{color:#FFFFFF;background-color:#052952;}
    
    
    #backtotop{color:#FFFFFF;background-color:#052952;}
    
    
    
    
    /* Tables + Comments */
    table, th, td, #comments .avatar,#comments input, #comments textarea{border-color:#D7D7D7;}
    th{color:#FFFFFF;background-color:#373737;}
    tr, #comments li, #commentsinput[type="submit"], #commentsinput[type="reset"]{color:inherit;background-color:#FBFBFB;}
    tr:nth-child(even), #commentsli:nth-child(even){color:inherit; background-color:#F7F7F7;}
    table a, #commentsa{background-color:inherit;}
    
    
    
    
    /*------------------------------------------------------------------------------------------------------------*/
    /*------------------------------------------------------------------------------------------------------------*/
    /*------------------------------------------------------------------------------------------------------------*/
    /*------------------------------------------------------------------------------------------------------------*/
    /*------------------------------------------------------------------------------------------------------------*/
    
    
    
    
    /* Media Queries
    ---------------------------------------------------------------------------------------------------------------*/
    @-ms-viewport{width:device-width;}
    
    
    
    
    /* Max Wrapper Width - Laptop, Desktopetc.
    ---------------------------------------------------------------------------------------------------------------*/
    @media screen and (min-width:1140px){
    	.hoc{max-width:1140px;}
    }
    
    
    @media screen and (min-width:978px) and(max-width:1140px){
    	.hoc{max-width:95%;}
    }
    
    
    
    
    /* Mobile Devices
    ---------------------------------------------------------------------------------------------------------------*/
    @media screen and (max-width:978px){
    	.hoc{max-width:90%;}
    
    
    	#header{padding:30px 0;}
    	#header #logo{margin-top:0;}
    
    
    	#mainav{}
    	#mainav ul{display:none;}
    	#mainav form{display:block;margin-top:2px;}
    
    
    	#breadcrumb{}
    
    
    	.container{}
    	#commentsinput[type="reset"]{margin-top:10px;}
    	.pagination li{display:inline-block;margin:0 5px 5px 0;}
    
    
    	#footer{}
    
    
    	#copyright{}
    	#copyrightp:first-of-type{margin-bottom:10px;}
    }
    
    
    @media screen and (max-width:750px){
    	.imgl, .imgr{display:inline-block;float:none; margin:0 0 10px 0;}
    	.fl_left, .fl_right{display:block;float:none;}
    	.group .group > *:last-child,.clear .clear > *:last-child, .clear .group > *:last-child,.group .clear > *:last-child{margin-bottom:0;}/* Experimental -Needs more testing in different situations, stops double margin whenstacking */
    	.one_half, .one_third, .two_third,.one_quarter, .two_quarter, .three_quarter{display:block; float:none;width:auto; margin:0 0 30px 0;}
    
    
    	#header{text-align:center;}
    	#header #logo{margin:0 0 15px 0;}
    
    
    	#pageintro article, #pageintro articlep{max-width:none;}
    	#pageintro .heading{font-size:2rem;}
    
    
    	.sectiontitle{max-width:none;}
    	.shout figure, .team li, #latest >li{margin:0 auto 50px;}
    	.team li, #latestli{max-width:348px;}/* Restrict the width to the one_third gridelement */
    	.elements-threeli:nth-last-child(-n+3), .elements-fourli:nth-last-child(-n+4){margin-bottom:50px;}
    	.elements-three li:last-child,.elements-four li:last-child, .shoutfigure:last-child{margin-bottom:0;}
    
    
    	#ctdetailsfigure{margin-bottom:80px;}/* Gives good separation between the twoelements */
    
    
    	#footer{padding-bottom:50px;}/* Notneeded - just looks better */
    	#footer .latestimg > li, #footer.latestimg > li:nth-last-child(-n+3){display:inline-block;float:none; width:auto; margin:0 5% 5% 0;}
    	#footer .latestimg >li:last-child{margin-bottom:0;}
    	#footer .latestimg > liimg{width:auto;}
    }
    
    
    @media screen and (min-width:451px) and(max-width:900px){
    	.pr-charts .pr-chart-ctrl{width:50%;margin-bottom:50px;}
    	.pr-charts.pr-chart-ctrl:nth-child(n+3){margin-bottom:0;}
    }
    
    
    @media screen and (max-width:450px){
    	.pr-charts .pr-chart-ctrl{width:100%;margin-bottom:50px;}
    	.pr-charts.pr-chart-ctrl:last-child{margin-bottom:0;}
    
    
    	#testimonials article figureimg{float:none; margin:0 0 20px 0;}
    	#testimonials article figurefigcaption{float:none; margin:0; text-align:center;}
    }
    
    
    
    
    /* Other
    ---------------------------------------------------------------------------------------------------------------*/
    @media screen and (max-width:650px){
    	.scrollable{display:block; width:100%;margin:0 0 30px 0; padding:0 0 15px 0; overflow:auto;overflow-x:scroll;}
    	.scrollable table{margin:0; padding:0;white-space:nowrap;}
    
    
    	.inline li{display:block;margin-bottom:10px;}
    	.pushright li{margin-right:0;}
    
    
    	.font-x2{font-size:1.6rem;}
    	.font-x3{font-size:1.8rem;}
    }

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,771
    è possibile individuarlo nel css che posto?
    Ciao, data la verbosità del codice sarebbe opportuno postare direttamente un link della pagina in questione, se ti è possibile, oppure un esempio online su qualche playground, così che si possa verificare il codice sulla pagina in azione, altrimenti è difficile aiutarti.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  5. #5

  6. #6
    Quote Originariamente inviata da Difficile64 Visualizza il messaggio
    visto?

  7. #7
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,771
    visto?
    Ho visto ora ma fatico a capire quale risultato intendi ottenere.

    Dal momento che stai usando degli sfondi trasparenti o semitrasparenti per le voci del menù, il testo dei menu può confondersi con lo sfondo della pagina. Piuttosto che cercare di capire come correggere il colore dei testi, a mio parere dovresti applicare uno sfondo più opaco che delimiti i vari sottomenu.

    Potresti fare così:

    nel file /layout/styles/layout.css alla riga 214 hai questa regola
    codice:
    #mainav ul ul {
        position: absolute;
        width: 180px;
        text-transform: none;
        z-index: 9999;
    }
    che definisce i sottomenu. Prova ad aggiungere qui un background.
    Potrebbe essere una cosa del genere:
    codice:
    #mainav ul ul {
        position: absolute;
        width: 180px;
        text-transform: none;
        z-index: 9999;
        background: rgba(90,100,110,.8);
    }
    .
    In questo modo garantisci la leggibilità del testo a prescindere da ciò che può esserci al di sotto di quei menu.

    Vedi se può andare bene come soluzione.
    Ultima modifica di KillerWorm; 19-02-2022 a 19:48
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  8. #8
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Ho visto ora ma fatico a capire quale risultato intendi ottenere.

    Dal momento che stai usando degli sfondi trasparenti o semitrasparenti per le voci del menù, il testo dei menu può confondersi con lo sfondo della pagina. Piuttosto che cercare di capire come correggere il colore dei testi, a mio parere dovresti applicare uno sfondo più opaco che delimiti i vari sottomenu.

    Potresti fare così:

    nel file /layout/styles/layout.css alla riga 214 hai questa regola
    codice:
    #mainav ul ul {
        position: absolute;
        width: 180px;
        text-transform: none;
        z-index: 9999;
    }
    che definisce i sottomenu. Prova ad aggiungere qui un background.
    Potrebbe essere una cosa del genere:
    codice:
    #mainav ul ul {
        position: absolute;
        width: 180px;
        text-transform: none;
        z-index: 9999;
        background: rgba(90,100,110,.8);
    }
    .
    In questo modo garantisci la leggibilità del testo a prescindere da ciò che può esserci al di sotto di quei menu.

    Vedi se può andare bene come soluzione.
    Ho provato! ma pare rimanere invariariato!

  9. #9
    Allora a questo punto è meglio lasciar perdere il font testo e io pensavo di mettere allora uno sfondo meno trasparente al sotto menu ecco per intendersi un pò come quando ci clicchi diventa più scuro ma non troppo....
    se noti l'index pare essere giusta coi toni trasparenti, il problema nasce con tutte le altre pagine che hanno uno sfondo bianco.
    Ultima modifica di Difficile64; 19-02-2022 a 20:03

  10. #10
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,771
    il problema nasce con tutte le altre pagine che hanno uno sfondo bianco.
    appunto per questo. Dal momento che non sai quale sfondo avrai sulla pagina, è preferibile non sovrapporre dei testi che non abbiano sfondo o con sfondo troppo trasparente.

    Ho provato! ma pare rimanere invariariato!
    Beh, invariato non è possibile. Assicurati di aver aggiornato correttamente il file e magari cancella la cache.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.