CODEWITHSUNDEEP
htmlcss
Oscar Arranz
Oscar Arranz

Reputation: 714

Texts in boxes don't share box background

I used to do basic web designs a while ago a I remember whenever I made a box with a div and put some text on a paragraph inside, the background of the paragraph would be transparent so you would see the box background.

That isn't happening to me now, every time I put a paragraph, h1, h2... on a div, it is like a box with the background color of the body but not the one of the box.

My webpage html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GO!</title>
    <link rel="stylesheet" href="styles/main.css" type="text/css">
    <link rel="stylesheet" href="styles/pages.css" type="text/css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="/index.html">X</a>
                    <ul>
                        <li><a href="/register.html">REGISTRARSE</a></li>
                        <li><a href="/recover.html">RECUPERAR CONTRASEÑA</a></li>
                    </ul>
                </li>
                <li><a href="">DESCARGAR</a>
                    <ul>
                        <li><a href="/descargas/android.html">ANDROID</a></li>
                        <li><a href="/descargas/ios.html">iOS</a></li>
                    </ul>
                </li>
                <li><a href="">AYUDA</a>
                    <ul>
                        <li><a href="/ayuda/faqs.html">FAQ'S</a></li>
                        <li><a href="/ayuda/ticket.html">ENVIA UN TICKET</a></li>
                        <li><a href="/ayuda/tutorial.html">COMO JUGAR</a></li>
                    </ul>
                </li>
                <li><a href="">MAPAS</a>
                    <ul>
                        <li><a href="/mapas/madrid.html">MADRID</a></li>
                        <li><a href="/mapas/barcelona.html">BARCELONA</a></li>
                        <li><a href="/mapas/sevilla.html">SEVILLA</a></li>
                        <li><a href="/mapas/valencia.html">VALENCIA</a></li>
                        <li><a href="/mapas/mas.html">MAS</a></li>
                    </ul>
                </li>
                <li><a href="">NOSOTROS</a>
                    <ul>
                        <li><a href="/nosotros/equipo.html">EQUIPO</a></li>
                        <li><a href="/nosotros/politica.html">POLITICA DE EMPRESA</a></li>
                        <li><a href="/nosotros/contactanos.html">CONTACTANOS</a></li>
                    </ul>
                </li>
                <li><a href="">PARA EMPRESAS</a>
                    <ul>
                        <li><a href="/empresas/que.html">¿QUE ES X?</a></li>
                        <li><a href="/empresas/unete.html">UNETE A LA AVENTURA</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </header>
    <main>
        <h1>Registrate ahora</h1>

        <div class="registerbox">
            <p>Usuario: </p>
            <input type="text">
            <p>Contraseña: </p>
            <input type="password">
            <p>Repite la contraseña: </p>
            <input type="password">
            <p>Email: </p>
            <input type="text">
            <p>Repite el email: </p>
            <input type="text">
        </div>
    </main>
    <footer>
        <p>GO! Copyright 2018 All rights reserved.</p>
    </footer>
</body>
</html>

My first css:

@import url('https://fonts.googleapis.com/css?family=Gamja+Flower|Gugi|Ubuntu');


*{
    margin: 0;
    padding: 0;
}

html {
  height: 100%;
}


body {
    background: linear-gradient(#45b1c7 30%, #7be5fa);
}
/* MENUS */

header {
    width:100%;
    position: fixed;
    top: 0;
}

/* MENU PRINCIPAL */

header nav ul {
    list-style: none;
    text-align: center;
    background: #F6F6F6;
    border-bottom: solid 2px #C4C4C4;
    z-index: 0;
}

header nav ul li {
    display: inline-block;
}

header nav ul li a {
    display: block;
    padding: 35px 25px;
    color: #000;
    text-decoration: none;
    background: #F6F6F6;
    font-family: 'Gugi', sans-serif;
    font-size: 20px;
}

header nav ul li a:hover {
    background: #E8E8E8;
}

/* SUBMENUS GENERAL */

header nav ul li ul {
    background: #F2ED54;
    width: 100%;
    top: 33px;
    left: 0;
    position: absolute;
    z-index: -1;
    transition: all 0.5s ease;
    border-style: none;
}

header nav ul li ul li a {
    background: #F2ED54;
    padding: 20px 25px;
    font-size: 17px;
}

header nav ul li ul li a:hover {
    background: #DCD84D;
    padding: 20px 25px;
    font-size: 17px;
}

header nav ul li:hover > ul{
    top: 95px;
}

/* FOOTER */

footer {

    width:100%;
    position: fixed;
    bottom: 0;
}

footer p {
    background: #252525;
    color: #fff;
    text-align: center;
    font-family: 'Ubuntu';
    padding: 20px;
}

My second css:

/* CONTENIDOS */

main {
    margin-top: 95px;
    text-align: center;
    padding-top: 60px;
}

h1 {
    font-family: 'Gugi';
    font-size: 40px;
    color: #fff;
    text-shadow: 3px 3px rgba(0,0,0,0.15);
}

h2 {
    margin-top: 20px;
    font-family: 'Gugi';
    font-size: 20px;
    color: #fff;
    text-shadow: 3px 3px rgba(0,0,0,0.15);
    text-transform: uppercase;
}

.registerbox {
    margin: auto;
    width: 50%;
    background: rgba(255,255,255,.5);
}

.registerbox p {

}

The issue is, when the .registerbox has a background color, it doesn't show up and sometimes if the box shows the color, the elements inside have boxes around that have the background color of the web but not the div.

I hope it's clear, it's difficult to explain, I'll try to get the thing that happens in a picture.

Oh here also you can see that, while I've set the .registerbox width to 50% it is still the 100%, why's that happening?.

Thanks in advance.

Code working here: https://codepen.io/OscarArranz/pen/yjmrLo

Upvotes: 0

Views: 42

Answers (1)

wazz
wazz

Reputation: 5068

I think there's a hidden character after the word registerbox (the first class with that word). Delete the space then re-add it.

Upvotes: 1

Related Questions