0

No logro hacer que el color que tiene mi menu a los lados sea #f2f2f2, sigue siendo blanco y no se que valor modificar. Intente hacer un div a todo el menu y modificarlo pero no funciona es igual, solo quiero modificar el color de el borde derecho e izquierdo.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Sitio Web</title>
    <link rel="stylesheet" href="css/menu.css">
    <link rel="stylesheet" href="css/fontello.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<header>
    <img src="imagenes/Logotipo.png" class="img-logo">
    <input type="checkbox" id="check">
    <label for="check" class="icon-menu"></label>

    <nav class="menu">
        <ul>
            <li><a href="#" style="background: #df6666; color: white;">Inicio</a></li>
            <li><a href="#">Acerca de</a></li>
            <li><a href="#">Servicios</a></li>
            <li><a href="#">trabajos</a></li>
        </ul>
    </nav>
</header>
<main>
    <div class="content-one">
        <div class="content-portada">
            <div class="content-text">
                <h4>It Doesn´t Take a Rocket <h3>Scientist</h3> </h4>
                <h2>IT TAKES A DESIGNER</h2>
            </div>
        </div>
    </div>
    <div class="content-two">
        <div class="content-details">
            <div class="content-item2">
            <label class="icon-heart"></label>
            <h4>Desing</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elit dolor, dictum id lacus in, pulvinar condimentum massa. Nunc dapibus, nunc sed suscipit fringilla, eros tortor bibendum risus, sed malesuada.</p>
            </div>
            <div class="content-item2">
            <label class="icon-laptop"></label>
            <h4>Bootstrap</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elit dolor, dictum id lacus in, pulvinar condimentum massa. Nunc dapibus, nunc sed suscipit fringilla, eros tortor bibendum risus, sed malesuada.</p>
            </div>
            <div class="content-item2">
            <label class="icon-support"></label>
            <h4>Support</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elit dolor, dictum id lacus in, pulvinar condimentum massa. Nunc dapibus, nunc sed suscipit fringilla, eros tortor bibendum risus, sed malesuada.</p>
            </div>
        </div>
    </div>
    <div class="content-three">
        <div class="content-module">
            <h3>LATEST WORKS</h3>
            <img class="img1" src="imagenes/dispositivo%20movil%20iphone%20png.png">
            <img class="img1" src="imagenes/dispositivo%20movil%20iphone%20png.png">
            <img class="img1" src="imagenes/dispositivo%20movil%20iphone%20png.png">
        </div>
    </div>
</main>
</body>
</html>

El código css del menú es este:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: arial;
}

.c{
    background: #f2f2f2;
}

header{
    width: 98%;
    height: 60px;
    background: #1e1e1e;
    position: fixed;
    z-index: 1;
    margin-left: 1%;
    margin-right: 1%;
}

.img-logo{
    width: 60px;
    margin-left: 10%;
    padding: 10px;
}

.img-logo:hover{
    cursor: pointer;
}

#check{
    display:none;
}


.icon-menu{
    display:none;
}

.menu{
    width: auto;
    float: right;
    margin-top: 19px;
    margin-right: 7%;
}

.menu ul{
    display: flex;
}

.menu ul li{
    list-style: none;
}

.menu ul li a{
    padding: 10px;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    color: #b7b7b7;
}

.menu li a:hover{
    color: white;
}

@media screen and (max-width:900px){
    .icon-menu{
        display: block;
        color:white;
        float: right;
        padding: 5px;
        font-size: 24px;
        border: 1px solid #7a7a7a;
        border-radius: 5px;
        margin-top: 10px;
        margin-right: 16px;
    }

    .menu{
        float: left;
        margin-top: -4px;
        width: 100%;
        background: #1e1e1e;
        height: 0px;
        overflow: hidden;/*con este solo se mostrara lo que tenga en altura*/
        transition: all 300ms;
    }

    .icon-menu:hover{
        background: #3f3f3f;
        cursor: pointer;
    }

    .menu ul{
        flex-direction: column;
    }

    .menu li a{
        display: block;
    }

    #check:checked ~ .menu{
    height: 174px;
} 

Este es el código css de todo mi contenido

main{
    position: relative;
    top: 60px;
}

.content-one{
    width: 98%;
    margin: auto;
}

.content-portada{
    width: 100%;
    height: 319px;
    background-image: url(../imagenes/notebook.jpg);
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
}

@media screen and (max-width:480px){
    .content-portada{
        background-size: 480px;
    }
}

.content-text{
    width: 400px;
    margin: auto;
    text-align: center;
    position: relative;
    top: 60px;
}

.content-text h4{
    color:white;
    font-size: 40px;
    font-weight: 100;
}

.content-text h2{
    color: white;
    font-size: 36px;
    font-weight: 100;
}

.content-text h3{
    color:white;
    font-size: 40px;
    font-weight: bold;
}

@media screen and (max-width:480px){
    .content-text{
        width: 90%;
    }
}

/*CONTENT TWO*/

.content-two{
    width: 100%;
    padding: 40px 0px;
    background: #f2f2f2;
}

.content-details{
    width: 80%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.content-item2{
    width: 220px;
    text-align: center;
    margin: 10px 20px;
}

.icon-heart, .icon-laptop, .icon-support{
    color:#e47171;
    font-size: 30px;
}

/*CONTENT THREE*/

.content.three{
    width: 100%;
    background: #f7f7f7;
}

.content-module{
    width: 80%;
    margin: auto;
    text-align: center;
    padding: 0px 40px;
}

.content-module h3{

}

.content-module img{
    margin-top: 40px;
    margin: 20px;
    transition: all 300ms;
}

.content-module img:hover{
    transform: rotate(-10deg);
    transition: all 300ms;
    cursor: pointer;
}

2 respuestas 2

0

Para el cambiar el color de fondo al header:

header {
    background-color: #f2f2f2 !important;
}

Para definir el color de los bordes a los laterales del menú.

.menu {
border-right: #f2f2f2 1px solid !important;
border-left: #f2f2f2 1px solid !important;
}
0

Solo debes modificar el css de tu header. Elimina los margenes y cambia el width a 100% asi:

*{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: arial;
    }
    
    .c{
        background: #f2f2f2;
    }
    
    header{
        width: 100%;
        height: 60px;
        background: #1e1e1e;
        position: fixed;
        z-index: 1;       
    }
    
    .img-logo{
        width: 60px;
        margin-left: 10%;
        padding: 10px;
    }
    
    .img-logo:hover{
        cursor: pointer;
    }
    
    #check{
        display:none;
    }
    
    
    .icon-menu{
        display:none;
    }
    
    .menu{
        width: auto;
        float: right;
        margin-top: 19px;
        margin-right: 7%;
    }
    
    .menu ul{
        display: flex;
    }
    
    .menu ul li{
        list-style: none;
    }
    
    .menu ul li a{
        padding: 10px;
        text-decoration: none;
        font-size: 18px;
        font-weight: bold;
        color: #b7b7b7;
    }
    
    .menu li a:hover{
        color: white;
    }
    
    @media screen and (max-width:900px){
        .icon-menu{
            display: block;
            color:white;
            float: right;
            padding: 5px;
            font-size: 24px;
            border: 1px solid #7a7a7a;
            border-radius: 5px;
            margin-top: 10px;
            margin-right: 16px;
        }
        
        .menu{
            float: left;
            margin-top: -4px;
            width: 100%;
            background: #1e1e1e;
            height: 0px;
            overflow: hidden;/*con este solo se mostrara lo que tenga en altura*/
            transition: all 300ms;
        }
        
        .icon-menu:hover{
            background: #3f3f3f;
            cursor: pointer;
        }
        
        .menu ul{
            flex-direction: column;
        }
        
        .menu li a{
            display: block;
        }
        
        #check:checked ~ .menu{
        height: 174px;
    } 
    

    
    main{
        position: relative;
        top: 60px;
    }
    
    .content-one{
        width: 98%;
        margin: auto;
    }
    
    .content-portada{
        width: 100%;
        height: 319px;
        background-image: url(../imagenes/notebook.jpg);
        background-position: center center;
        background-size: 100%;
        background-repeat: no-repeat;
    }
    
    @media screen and (max-width:480px){
        .content-portada{
            background-size: 480px;
        }
    }
    
    .content-text{
        width: 400px;
        margin: auto;
        text-align: center;
        position: relative;
        top: 60px;
    }
    
    .content-text h4{
        color:white;
        font-size: 40px;
        font-weight: 100;
    }
    
    .content-text h2{
        color: white;
        font-size: 36px;
        font-weight: 100;
    }
    
    .content-text h3{
        color:white;
        font-size: 40px;
        font-weight: bold;
    }
    
    @media screen and (max-width:480px){
        .content-text{
            width: 90%;
        }
    }
    
    /*CONTENT TWO*/
    
    .content-two{
        width: 100%;
        padding: 40px 0px;
        background: #f2f2f2;
    }
    
    .content-details{
        width: 80%;
        margin: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .content-item2{
        width: 220px;
        text-align: center;
        margin: 10px 20px;
    }
    
    .icon-heart, .icon-laptop, .icon-support{
        color:#e47171;
        font-size: 30px;
    }
    
    /*CONTENT THREE*/
    
    .content.three{
        width: 100%;
        background: #f7f7f7;
    }
    
    .content-module{
        width: 80%;
        margin: auto;
        text-align: center;
        padding: 0px 40px;
    }
    
    .content-module h3{
        
    }
    
    .content-module img{
        margin-top: 40px;
        margin: 20px;
        transition: all 300ms;
    }
    
    .content-module img:hover{
        transform: rotate(-10deg);
        transition: all 300ms;
        cursor: pointer;
    }
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Sitio Web</title>
        <link rel="stylesheet" href="css/menu.css">
        <link rel="stylesheet" href="css/fontello.css">
        <link rel="stylesheet" href="css/index.css">
    </head>
    <body>
    <header>
        <img src="imagenes/Logotipo.png" class="img-logo">
        <input type="checkbox" id="check">
        <label for="check" class="icon-menu"></label>
        
        <nav class="menu">
            <ul>
                <li><a href="#" style="background: #df6666; color: white;">Inicio</a></li>
                <li><a href="#">Acerca de</a></li>
                <li><a href="#">Servicios</a></li>
                <li><a href="#">trabajos</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <div class="content-one">
            <div class="content-portada">
                <div class="content-text">
                    <h4>It Doesn´t Take a Rocket <h3>Scientist</h3> </h4>
                    <h2>IT TAKES A DESIGNER</h2>
                </div>
            </div>
        </div>
        <div class="content-two">
            <div class="content-details">
                <div class="content-item2">
                <label class="icon-heart"></label>
                <h4>Desing</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elit dolor, dictum id lacus in, pulvinar condimentum massa. Nunc dapibus, nunc sed suscipit fringilla, eros tortor bibendum risus, sed malesuada.</p>
                </div>
                <div class="content-item2">
                <label class="icon-laptop"></label>
                <h4>Bootstrap</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elit dolor, dictum id lacus in, pulvinar condimentum massa. Nunc dapibus, nunc sed suscipit fringilla, eros tortor bibendum risus, sed malesuada.</p>
                </div>
                <div class="content-item2">
                <label class="icon-support"></label>
                <h4>Support</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elit dolor, dictum id lacus in, pulvinar condimentum massa. Nunc dapibus, nunc sed suscipit fringilla, eros tortor bibendum risus, sed malesuada.</p>
                </div>
            </div>
        </div>
        <div class="content-three">
            <div class="content-module">
                <h3>LATEST WORKS</h3>
                <img class="img1" src="imagenes/dispositivo%20movil%20iphone%20png.png">
                <img class="img1" src="imagenes/dispositivo%20movil%20iphone%20png.png">
                <img class="img1" src="imagenes/dispositivo%20movil%20iphone%20png.png">
            </div>
        </div>
    </main>
    </body>
    </html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.