¿¿Como podría hacerlo??

muchas gracias
| |||
![]() 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 |
| ||||
Respuesta: diseño de fondo para web mira amig@ yo te lo hice asi, nose como lo tendrias tu jejeje xD http://codepen.io/AngelKrak/pen/JYREVr |
| ||||
Respuesta: diseño de fondo para web Tal vez se refiere simplemente al margen del background. Hay que poner:
Código HTML:
Ver original |
| |||
Respuesta: diseño de fondo para web 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!! |
| |||
Respuesta: diseño de fondo para web 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 |
| |||
Respuesta: diseño de fondo para web
Código:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8" /> <title>Rubén Manzano Jiménez</title> <link rel="stylesheet" href="./StyleSheet.css" type="text/css" media="all" /> </head> <body> <div id="contenedor"> <header> <h1>Rubén Manzano Jiménez</h1> <h2> Ingeniero Informá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ía</a></li> <li><a href="#">Linked-in</a></li> </ul> </nav> <br><br><br> <h3>Bienvenido</h3> <h4>Sobre mí:</h4> <article> parrafo 1 <br><br> parrafo 2 </article> </section> <footer> <small> Copyright © 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; } |
| |||
Respuesta: diseño de fondo para web 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 Última edición por lexell; 24/09/2015 a las 10:56 |
| ||||
Respuesta: diseño de fondo para web 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 ;) |
Etiquetas: |