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
* {
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>
Sol kenar çubuğu için ebeveyn üzerinde arka plan kullanmayı düşünebilirsiniz. –