so trying achieve this design, this got far.
as can see has lot of errors, don't know how fix them...
the sidebar doesn't stick bottom of page,
i cannot add
paddingsidebar because moves if so,also make menu , logo stay there did wrong.
here code:
* { font-family: arial; } body { background: url(bg.jpg) no-repeat; background-size: 100%; height: auto; width: 850px; margin: 0 auto; background-attachment: scroll; background-position: center; } header { background: #343843; color: white; height: 80px; } header { color: #24272e; background: aqua; text-decoration: none; padding: 60px 40.5px; } nav { background: #24272e; color: white; height: 30px; width: 675px; float: right; } nav ul { margin: 0; padding: 0; } nav ul li { list-style: none; display: inline-block; padding: 5px 10px; margin-left: -10; } nav ul li { color: white; text-decoration: none; font-size: 14px; font-weight: bold; padding: 5px 10px; } section { background: #ffffff; color: darkgray; width: 675px; float: right; } article { background: #fff; color: #000; } aside { background: #343843; float: left; width: 175px; height: 100%; display: inline-block; margin-top: -30px; } footer { background: #20232a; position: relative; margin-top: -65px; clear: both; width: 100%; }<!doctype html> <html lang="es"> <head> <title>titulo de la web</title> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css" /> </head> <body> <header> <a href="index.html" class="logo">condominios</a> </header> <nav> <ul> <li><a href="index.html" tittle="home">home</a> </li> </ul> </nav> <section> <article> <h2>titilo de contenido</h2> <p>contenido</p> </article> </section> <aside> <h3>titulo de contenido</h3> <p>contenido</p> </aside> <footer> creado </footer> </body> </html>
add height:100% html,body, , few tweak works...
html, body { height: 100% } body { background: url(bg.jpg) no-repeat; background-size: 100%; background-attachment: scroll; background-position: center; width: 850px; margin: 0 auto; font-family: arial } header { background: #343843; color: white; height: 80px; } header { color: #24272e; background: aqua; text-decoration: none; padding: 60px 40.5px; } nav { background: #24272e; color: white; height: 30px; width: 675px; float: right; } nav ul { margin: 0; padding: 0; } nav ul li { list-style: none; display: inline-block; padding: 5px 10px; margin-left: -10; } nav ul li { color: white; text-decoration: none; font-size: 14px; font-weight: bold; padding: 5px 10px; } section { background: #ffffff; color: darkgray; width: 675px; float: right; height: 100%; background: red } article { background: #fff; color: #000; } aside { background: #343843; float: left; width: 175px; height: 100%; display: inline-block; margin-top: -30px; height: calc(100% + 30px) } footer { background: #20232a; position: relative; margin-top: -65px; clear: both; width: 100%; }<header> <a href="index.html" class="logo">condominios</a> </header> <nav> <ul> <li><a href="index.html" tittle="home">home</a> </li> </ul> </nav> <section> <article> <h2>titilo de contenido</h2> <p>contenido</p> </article> </section> <aside> <h3>titulo de contenido</h3> <p>contenido</p> </aside> <footer> creado </footer>
Comments
Post a Comment