2016-04-06 20 views
0

Temelde this design elde etmeye çalışıyordum ama this şimdiye kadar elde ettiğim şey.Kenar çubuğu alttan diğer hata yapmayan

  • kenar çubuğu, sayfanın en altına sokmaz ... sen de görebileceğiniz gibi

    hataların bir yeri vardır, ama bunları düzeltmek için nasıl bilmiyorum

  • Ben bunu eğer hamle çünkü
  • Ben

  • Ayrıca menüyü yapmak için, kenar çubuğuna padding ekleyemezsiniz ve logosu yanlış bir şey yaptım orada kal. İşte

kodudur:

* { 
 
    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 a { 
 
    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 a { 
 
    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>

+1

Sol kenar çubuğu için ebeveyn üzerinde arka plan kullanmayı düşünebilirsiniz. –

cevap

1

sizin html, body için height:100% ekleyin ve birkaç çalıştığını ince ayar ...

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 a { 
 
    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 a { 
 
    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>

+0

yaptım ve bu ne olur http://postimg.org/image/42nkmb7vb/ –

+0

@JairoGil güncellenmiş cevabı gör – dippas

İlgili konular