Wie man höher "beiseite" und "topnav" macht?

-4

Ich habe versucht, "oben" und "unten" zu verwenden, aber es hat nicht funktioniert. Wie kann ich es reparieren ?Wie man höher "beiseite" und "topnav" macht?

Site

It must to look like on this photo

HTML/CSS Code

nav { 
 
    float: left; 
 
    width: 100%; 
 
    
 
} 
 

 
.News { 
 
    color: #6a70b3; 
 
    font-family: verdana, arial, helvetica, "sans-serif"; 
 
    font-size: 12.3333px; 
 
    line-height: 17px; 
 
    font-weight: 700; 
 
    text-align: left; 
 
    margin-right: 50%; 
 
    padding-top: 2%; 
 
    padding-left: 14%; 
 
} 
 

 
section { /*Контент*/ 
 
    font-family: Arial; 
 
    color: #000000; 
 
    font-size: 12.8px; 
 
    float: left; 
 
    width: 75%; 
 
} 
 

 
section a:visited { 
 
    color:#003399; 
 
} 
 

 
section a:hover { 
 
    color: black; 
 
} 
 

 
aside { /*Sidebar*/ 
 
    padding: 5% 0.5%; 
 
    margin: 0% auto; 
 
    width: 20%; 
 
    background-image: url(../images/side.PNG); 
 
    background-repeat: repeat-y; 
 
    background-size: auto; 
 
    float: left; 
 
} 
 

 
aside li { /*Sidebar Список */ 
 
    font-family: Verdana, Arial , "sans-serif", helvetica; 
 
    font-size: 11px; 
 
    margin-bottom: 5%; 
 
    width: 70%; 
 
    font-weight: 700; 
 
    text-align: left; 
 
    line-height: 15px; 
 
    z-index: 2; 
 
    
 
} 
 
/* Стиль верхней панели навигации */ 
 
.topnav { 
 
    margin: 6.2%; 
 
    margin-left: 20%; 
 
    width: 80%; 
 
    top: 20%; 
 
    background-color: red; 
 
    text-align: center; 
 
    float: left; 
 
    
 
} 
 

 
/* Стиль ссылок навигации */ 
 
.topnav a { 
 
    margin:0 auto; 
 
    display:inline; 
 
    margin-left:3px; 
 
    margin-top: 3px; 
 
    line-height: 7px; 
 
    font-size: 11px; 
 
    font-weight: 700; 
 
    float:left; 
 
    font-family: verdana, "sans-serif", helvetica, arial; 
 
    display: block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 5px 10px; 
 
    text-decoration: none; 
 
    z-index: 3; 
 
} 
 

 
/* Изменение цвета при наведении */ 
 
.topnav a:hover { 
 
    color: orange; 
 
} 
 

 
ul { 
 
    list-style-type: none; /* Убираем маркеры */ 
 
    text-decoration: none; /* Убираем подчёркивание */ 
 
    margin-left: 0; /* Отступ слева в браузере IE и Opera */ 
 
    padding-left: 0; /* Отступ слева в браузере Firefox, Safari, Chrome */ 
 
} 
 

 
ul a{ 
 
    list-style-type: none; 
 
    text-decoration: none; 
 
    color: darkblue; 
 
} 
 

 
ul a:hover{ 
 
    list-style-type: none; 
 
    text-decoration: none; 
 
    color:orange; 
 
} 
 

 
#mainText { 
 
    text-align: center; 
 
} 
 

 
.border { 
 
    color:black; 
 
} 
 

 
table, th, td { 
 
    border: 1px solid black; 
 
} 
 

 
footer { /*Подвал*/ 
 
     width: 100%; 
 
    text-align: center; 
 
    float: left; 
 
} 
 

 
footer a{ 
 
    font-family: Arial; 
 
    font-size: 10.6667px; 
 
    line-height: 14px; 
 
    font-weight: 400; 
 
    text-decoration: none; 
 
    color:#06C; 
 
} 
 

 
.footerline { 
 
    position: fixed; 
 
    bottom: 1px; 
 
    left: 0px; 
 
    float: none; 
 
}

<!DOCTYPE html> 
 
<html lang="ru"> 
 
    <head>  
 
<meta charset="utf-8"> 
 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
<link rel="stylesheet" href="css/index.css"> 
 
<title>Новости - Анонсы</title> 
 
    </head> 
 
<body> 
 
    <header> 
 
    <img src="images/headerfinal.png" class="Header" alt="Header"> 
 
    </header> 
 
    <nav> 
 
    <div class="topnav"> <!--Верхнее меню --> 
 
    <a href="news.html">Новости</a> 
 
    <a href="#top">О Суде</a> 
 
    <a href="#top">Решения КС РФ</a> 
 
    <a href="#top">Заседания КС РФ</a> 
 
    <a href="#top">Контакты</a> 
 
    </div> 
 
    </nav> 
 
<aside> <!-- Меню слева --> 
 
<ul> 
 
<li><a href="news.html">Новости</a></li> 
 
<li><a href="#top">О Суде</a></li> 
 
<li><a href="#top">Решения КС РФ</a></li> 
 
<li><a href="#top">Заседания КС РФ</a></li> 
 
<li><a href="#top">Контакты</a></li> 
 
</ul> 
 
<br> 
 
<img src="images/gerb.gif" alt="Герб РФ"> 
 
    </aside> 
 
    <section> <!-- Основной текст --> 
 
<div class="News"><h3>Новости - Анонсы</h3></div> 
 
<br> 
 
<p>10 ноября 2017 года Конституционный Суд РФ провозгласит Постановление по делу о проверке конституционности Федерального закона «О внесении изменений в отдельные законодательные акты РФ в части совершенствования законодательства о публичных мероприятиях»</p> 
 
<br> 
 
<p>(<a href="#top">подробнее...</a>)</p> 
 
<br> 
 
<p>7 ноября 2017 года Конституционный Суд РФ провозгласил Постановление по делу о проверке конституционности ряда положений Закона Республики Крым «Об особенностях регулирования имущественных и земельных отношений на территории Республики Крым»</p> 
 
<br> 
 
<p>(<a href="#top">подробнее...</a>)</p> 
 

 
<br> 
 
    <a href="#top">Посмотреть все новости</a> 
 
<br> 
 
    </section> 
 

 
<br> 
 
<br> 
 
    <footer> 
 
     <hr style="border:1px;width:60%; height:1px;background-color:black"> 
 
    <img src="images/footer.PNG" class=footerline alt="Footer"> 
 
     <a href="index.html">©Конституционный Суд Российской Федерации, 2008-2017</a> 
 
    </footer> 
 
</body> 
 
</html>

Quelle

2017-11-24 Mamedov_A.

teilen Sie Ihren Code hier bitte –

Sie müssen Ihre Code-Fehler beheben, zum Beispiel Sie verlassen> aus dem Closing mlegg

Es will mehr Details aus einem Grund . Warnungen nicht umgehen. – jhpratt

müssen Sie die Position in Ihrem CSS definieren, wie in Ihrem .footerline :)

Quelle

2017-11-24 22:05:44

Wie man höher "beiseite" und "topnav" macht?

Antwort

Verwandte Themen