[SOLUCIONADO] diseño de fondo para web

lexell · #1 (**permalink**) 23/09/2015, 09:56

Buenas, estoy empezando con esto de la programación web me gustaría hacer el diseño que os mando en la imagen usando css, en principio en el css, en el body pongo la propiedad background-color: #cac9c9; (color gris), el header y el footer también los tengo con su fondo en azul background-color: #25037c; el problema me surge al poner el fondo blanco, ya que ahí va todo el contenido de la web (<nav><section><article>...) he probado a poner en el css de todas las etiquetas la propiedad background-color: #fff; pero no rellena todo el espacio, es decir me deja partes en gris.

¿¿Como podría hacerlo??

muchas gracias

herzbazi · #2 (**permalink**) 23/09/2015, 10:56

no se si entendi bien pero dices que el continer no ocupa toda la altura de tu monitor o web?

AngelKrak · #3 (**permalink**) 23/09/2015, 11:55

mira amig@ yo te lo hice asi, nose como lo tendrias tu jejeje xD

http://codepen.io/AngelKrak/pen/JYREVr

Rafael · #4 (**permalink**) 23/09/2015, 12:47

Tal vez se refiere simplemente al margen del background.

Hay que poner:

Código HTML:

Ver originalbody {margin: 0; padding: 0;}

lexell · #5 (**permalink**) 23/09/2015, 13:42

me vale el código ke me puso mas o menos @AngelKrak creo ke el problema era los height ke los tenia mal puestos y por eso el blanco del fondo no me pillaba todo el "cuerpo" de la página

muchas gracias por vuestra ayuda

salu2!!

lexell · #6 (**permalink**) 23/09/2015, 14:09

de todas formas, sigo teniendo problemas al cambiar el tamaño de la ventana, al reducir la ventana pierde el formato.

me recomendais algun manual o alguna forma de hacer el diseño para que al cambiar de tamaño la ventana, o verla en un movil o tablet, ke se vea en el mismo formato??

muchas gracias por vuestra ayuda

PD: en esa captura ya esta modificado con el código de @AngelKrak

AngelKrak · #7 (**permalink**) 23/09/2015, 15:13

:O mmmm, conmigo al redimensionar el tamaño de la pag se sigue viendo igual, no me pasa eso que a ti .-. podrias poner tu codigo en un codepen para poder ayudarte mejor?

lexell · #8 (**permalink**) 24/09/2015, 10:48

Código:

<!DOCTYPE html>

<html lang="es">

    <head>
        <meta charset="utf-8" />
        <title>Rub&eacute;n Manzano Jim&eacute;nez</title>
        <link rel="stylesheet" href="./StyleSheet.css" type="text/css" media="all" />
    </head>
    <body>
        <div id="contenedor">
            <header>
                <h1>Rub&eacute;n Manzano Jim&eacute;nez</h1>
                <h2>&nbsp;&nbsp;&nbsp;Ingeniero Inform&aacute;tico</h2>
            </header>
            <section>
                <nav>
                    <ul class="menu">
                        <li class="activo"><a href="./index.html">Inicio</a></li>
                        <li><a href="./contacto2.html">Contacto</a></li>
                        <li><a href="./galery.html">Galer&iacute;a</a></li>
                        <li><a href="#">Linked-in</a></li>
                    </ul>
                </nav>
        <br><br><br>
                
                    <h3>Bienvenido</h3>
                    <h4>Sobre m&iacute;:</h4>   
                
                <article>
                    parrafo 1
                    <br><br>
                    parrafo 2
                </article>
            </section>
            <footer>
                <small>
                    Copyright &copy; 2015<br/>
                    Actualizado en: 21 Septiembre 2015           
                </small>        
            </footer>  
        </div> 
    </body>
</html>

Código:

            @font-face {
                font-family: miFuente; 
                src: url('/nat/dj.ttf');                        
            } 
            * {
                margin: 0;
                padding: 0;
            }
			body {
                width: 100%;
                height: 100%;
                background-color: #cac9c9;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: top;
				font-family: miFuente;
				font-size: 13px;
				margin: 0;	
			}
            form{
                font-family: miFuente;
                text-align: center;
            }
		
			.page {
                
				width: 840px;
				margin: 0 auto;
                margin-left: 15px;
			}
			header{
                margin-left: 50px;
                margin-right: 46px;
                background-color: #25037c;
                font-size: 20px;  
                height: 10vh;
                border-radius: 7px 7px 0px 0px;
            }
            h1{
                margin-left: 25px;
                margin-top: 55px;
                color: #fff;
            }
            h2{
               margin-top: 0px;
               margin-left: 0px;
               font-size: 20px;
               color:#25037c;
               background-color: #cac9c9;
            }
            h3{
                text-align: center;
                margin-top: 10px;
                font-size: 20px;
                color:#25037c;
            }
            h4{
                margin-top: 10px;
                margin-left: 59px;
                font-size: 20px;
                color:#25037c;
            }
            section{
                background-color: #fff;
                height: 76vh;
                margin-top: 30px;
                margin-left: 50px;
                margin-right: 46px;
            }
            
            nav{
                width: 500px;
                padding: 0;
                margin: 20px auto;
                border-top: 1px solid #25037c;
            }
            
            .menu{
                list-style: none;
                margin: 0;
                color: #25037c;
            }
            .menu li{
                float: left;
                padding: 0;
                line-height: 1;
                text-align: center;
                color: #25037c;
                
            }
            .menu li a{
                color: #25037c;
                padding: 10px 25px;
                font-size: 17px;
                display: block;
                -webkit-transition: all .3s ease-in-out;
                -moz-transition: all .3s ease-in-out;
                -ms-transition: all .3s ease-in-out;
                -o-transition: all .3s ease-in-out;
            }
            .menu li a:hover,.menu li.activo a{
                -webkit-box-shadow: 0px -4px 0px #25037c inset;
                box-shadow: 0px -4px 0px #25037c inset;
            }          
            
            article{
                
                margin-left: 80px;
                font-size: 17px;
                color:#25037c;
                margin-right: 80px;
            }
			img {
				border: none;
				clear: both;
			}
			
			a {
				text-align: left;
				display: block;
				margin: 10px 0;
			}
            footer{
                margin-left: 50px;
                margin-right: 46px;
                text-align: center;
                background-color: #25037c;
                color: #fff;
                height: 10vh;
                border-radius: 0px 0px 7px 7px;
            }
			.hero {
				margin-bottom: 30px;
			}
			.url {

				margin-bottom: 110px;
			}
            #contenedor {
                width: 98%;
                margin: 10px auto;
            }

lexell · #9 (**permalink**) 24/09/2015, 10:50

http://codepen.io/anon/pen/rOMrrx

ahí lo tienes, espero que no este muy lioso con tantas etiquetas h en el css, es la primera web que hago con html y css y aún estoy muy verde.

muchas gracias

EDITO: veo que en el codepen no se ve bien tampoco pero al abrir el html en el navegador si se me ve bien, excepto si redimensiono la ventana del navegador

AngelKrak · #10 (**permalink**) 24/09/2015, 12:37

ahi sta amigo, te lo hice lo mas parecido que pude y te arregle los errores ;)

http://codepen.io/AngelKrak/pen/JYREVr

dime que tal si es como querías o no ;)

lexell · #11 (**permalink**) 24/09/2015, 13:26

ole!! muchas gracias, eres un crack!!

muchas gracias por tu ayuda

saludos!!