[SOLUCIONADO] Necesito poner un background que rellene una lista

coldfire · #1 (**permalink**) 22/01/2015, 11:44

Muy buenas es mi primer post, puesto que llevo un ratazo intentando hacer una lista que el fondo se rellene enteramente, pero no lo consigo, ahora mismo esto es lo que tengo.

http://gyazo.com/97b44d1d4dbe85ea2fa2c3c2a8256dfe

Tengo que conseguir que salga así: http://gyazo.com/a0f5408bf0a15a8c4c42b207a1910210]

y se rellene todo hasta el lado izquierdo de la pagina, también me sale toda la estructura algo mas a la derecha del lado de la pagina, y quiero que salga pegado, que hago?

Si necesitais el codigo del html / css, lo pongo por aqui solo avisadme.

Gracias de antemano.!

mauritosuarez · #2 (**permalink**) 22/01/2015, 12:49

Hola coldfire, sí, tendrías que poner el código (utiliza el combo de Highlight para resaltar) html como css para que te podamos ayudar.

Saludos.

coldfire · #3 (**permalink**) 22/01/2015, 14:41

Perfecto, aqui lo añado, espero que me podais ayudar pues os lo agadecere Mucho :)

Código HTML:

Ver original<!doctype html>
<html>
<head>
<title>Ejercicio 27</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/ej27.css"/>
</head>
<body>
 <header>HEADER</header>
    <article>
        <section>
            <p>SECCION 1</p>
        </section>
    </article>
    <aside>
        <ul>
            <li class="home">Home</li>
            <ul>
                <li class="lista">Opcion 1</li>
                    <ul>
                        <li class="sublista">Página 1.1</li>
                        <li class="sublista">Página 1.2</li>
                    </ul>
                <li class="lista">Opcion 2</li> 
                    <ul>
                        <li class="subsublista">Opcion 2a</li>
                        <ul>
                            <li class="subsubsublista">Página 2a.1</li>
                            <li class="subsubsublista">Página 2a.2</li>
                        </ul>
                    <li class="subsublista">Opcion 2b</li>
                        <ul>
                            <li class="subsubsublista">Página 2b.1</li>
                            <li class="subsubsublista">Página 2b.2</li>
                        </ul>
                <li class="sublista">Página 2.1</li>
                <li class="sublista">Página 2.2</li>    
                    </ul>
                <li class="lista">Opcion 3</li>
            <ul>
                <li class="subsublista">Opcion 3a</li>
                <ul>
                    <li class="subsubsublista">Página 3a.1</li>
                    <li class="subsubsublista">Página 3a.2</li>
                </ul>
            </ul>     
            </ul>  
        </ul>
    </aside>
</body>
</html>

Código CSS:

Ver original/* Regla de reseteo */
* {
    margin: 0 auto;
    text-align: center;
    font-family:sans-serif;
}
header{
background-color: rgb(230,200,0);
height: 30px;
}
article{
width: 70%;
height: 200px;
background-color: #7DD2FA;
float: right;
}
aside{
border: 3px solid;
border-color: grey;
width: 25%;
float: left;
background-color: rgb(200,200,200);
 
}
li{
 
text-align: justify;
}
li:hover{
background-color: #FCDD16;
}
.home{
background-color: #000000;
color: white;
font-weight:bold;
list-style-image: url('../img/carpeta1.png');
 list-style-position: inside; 
}
.lista{
background-color: #A1A19F;
list-style-image: url('../img/carpeta3.png');
 list-style-position: inside; 
}
.sublista{
background-color: #939594;
list-style-image: url('../img/carpeta2.png');
 list-style-position: inside; 
}
.subsublista{
background-color: #BABABA;
list-style-image: url('../img/carpeta4.png');
list-style-position: inside; 
}
.subsubsublista{
background-color: #D0D2D1;
list-style-image: url('../img/carpeta5.png');
list-style-position: inside; 
}

fede5426 · #4 (**permalink**) 22/01/2015, 20:26

Si es lo que yo entendi, lo que queres es llegar a esto cierto?

Si es asi proba borrando los "ul" deja solo el primero.. el resto que sean "li", y a las clases lista, sublista, subsublista y subsubsublista agregales una indentacion.

El "aside" te quedaria asi:

Código HTML:

<aside>
        <ul>
            <li class="home">Home</li>
			
				<li class="lista">Opcion 1</li>
                    <li class="sublista">Página 1.1</li>
                    <li class="sublista">Página 1.2</li>
					
                <li class="lista">Opcion 2</li> 
                        <li class="subsublista">Opcion 2a</li>
                            <li class="subsubsublista">Página 2a.1</li>
                            <li class="subsubsublista">Página 2a.2</li>
						<li class="subsublista">Opcion 2b</li>
                            <li class="subsubsublista">Página 2b.1</li>
                            <li class="subsubsublista">Página 2b.2</li>
					<li class="sublista">Página 2.1</li>
					<li class="sublista">Página 2.2</li> 
					
                <li class="lista">Opcion 3</li>
						<li class="subsublista">Opcion 3a</li>
							<li class="subsubsublista">Página 3a.1</li>
							<li class="subsubsublista">Página 3a.2</li>
        </ul>
    </aside>

y las clases mas o menos asi:

Código CSS:

Ver original.lista{
text-indent:25px;
background-color: #A1A19F;
list-style-image: url('../img/carpeta3.png');
list-style-position: inside; 
}
.sublista{
text-indent:75px;
background-color: #939594;
list-style-image: url('../img/carpeta2.png');
 list-style-position: inside; 
}
.subsublista{
text-indent:100px;
background-color: #BABABA;
list-style-image: url('../img/carpeta4.png');
list-style-position: inside; 
}
.subsubsublista{
text-indent:125px;
background-color: #D0D2D1;
list-style-image: url('../img/carpeta5.png');
list-style-position: inside; 
}

No se si es la mejor solucion, pero probala por ahi te sirve.

Saludos.

coldfire · #5 (**permalink**) 23/01/2015, 04:17

Muchas gracias me ha servido.!

pzin · #6 (**permalink**) 25/01/2015, 03:02

La formar correcta era dejando los ul. Lo único que tenías que hacer era probablemente quitarle el relleno a esas listas.