Update header.html

This commit is contained in:
Pentabyteman
2017-11-18 13:54:59 +01:00
committed by GitHub
parent 2feff20147
commit f15c767919
+129 -122
View File
@@ -1,131 +1,138 @@
{% load static %} {% load static %}
<div id=header> <div id=header>
<style> <style>
#logo { html {
width: 90%; background-color: white;
padding-left: 2%; }
padding-top: 2%; #logo {
} width: 90%;
.top-links { padding-left: 2%;
color: #929292; padding-top: 2%;
vertical-align: top; }
padding-top: 5px; .top-links {
text-align: center; color: #929292;
} vertical-align: top;
#logotablerow { padding-top: 5px;
padding-right: 2%; text-align: center;
} }
#search { #logotablerow {
vertical-align: middle; padding-right: 2%;
} }
#search_icon { #search {
width: 80%; vertical-align: middle;
vertical-align: middle; }
padding-left: 0px; #search_icon {
} width: 80%;
table{ vertical-align: middle;
border-collapse: collapse; padding-left: 0px;
border: none; }
} table{
table tr{ border-collapse: collapse;
border: none; border: none;
vertical-align: top; }
} table tr{
border: none;
vertical-align: top;
}
table td{ table td{
padding-left: 10px; padding-left: 10px;
padding-top: 2px; padding-top: 2px;
border: none; border: none;
} }
.link-container { .link-container {
text-align: center; text-align: center;
width: 10%; width: 10%;
} }
.allcenter { .allcenter {
vertical-align: middle; vertical-align: middle;
text-align: right; text-align: right;
padding-right: 10px; padding-right: 10px;
} }
#search { #search {
font-size: 16pt; font-size: 16pt;
background: #D6D5D5; background: #D6D5D5;
color: black; color: black;
} }
#search:focus{ #search:focus{
font-size: 16pt; font-size: 16pt;
background: #D6D5D5; background: #D6D5D5;
color: black; color: black;
outline: none; outline: none;
} }
ul { ul {
list-style-type: none; list-style-type: none;
position: relative; position: relative;
margin-left: 2%; margin-left: 2%;
margin-top: 20px; margin-top: 20px;
width: 96%; padding: 0;
background: #D6D5D5; overflow: hidden;
border: none; width: 96%;
} background: #D6D5D5;
border: none;
}
li { li {
float: left; float: left;
width: 30%; width: 30%;
margin-top: 0.5%; margin-top: 0.5%;
margin-bottom: 0.5%; margin-bottom: 0.5%;
vertical-align: middle; vertical-align: middle;
padding-left: 3%; padding-left: 3%;
color: #929292; color: #929292;
} }
li a { li a {
display: block; display: block;
color: #666; color: #666;
text-align: center; text-align: center;
padding: 14px 16px; padding: 14px 16px;
text-decoration: none; text-decoration: none;
} border-top-right-radius: 5px;
border-top-left-radius: 2.5px;
}
.active { .active {
background: #9F2D17; background: #9F2D17;
color: white; color: white;
} }
li a:hover:not(.active) { li a:hover:not(.active) {
background: #929292; background: #929292;
} }
</style> </style>
<table class="table"> <table class="table">
<tr> <tr>
<td id ="logotablerow", width="20%"> <td id ="logotablerow", width="20%">
<img id="logo" src="{% static "public/images/apb_icon.png" %}" alt="logo"> <img id="logo" src="apb_icon.jpeg" alt="logo">
</td> </td>
<td class="link-container"> <td class="link-container">
<a class="top-links", href="https://www.tagesschau.de">tagesschau.de</a> <a class="top-links", href="https://www.tagesschau.de">tagesschau.de</a>
</td> </td>
<td class="link-container"> <td class="link-container">
<a class="top-links", href="https://www.spiegel.de">spiegel.de</a> <a class="top-links", href="https://www.spiegel.de">spiegel.de</a>
</td> </td>
<td class="link-container"> <td class="link-container">
<a class="top-links", href="https://www.zeit.de">zeit.de</a> <a class="top-links", href="https://www.zeit.de">zeit.de</a>
</td> </td>
<td class="link-container"> <td class="link-container">
<a class="top-links", href="https://www.bpb.de">bpb.de</a> <a class="top-links", href="https://www.bpb.de">bpb.de</a>
</td> </td>
<td vertical-align="middle", width="25%" class="allcenter"> <td vertical-align="middle", width="25%" class="allcenter">
<input type="text" id="search" maxlength="30" placeholder="Datenbank durchsuchen"> <input type="text" id="search" maxlength="30" placeholder="Datenbank durchsuchen">
</td> </td>
<td width="5%" class="allcenter"> <td width="5%" class="allcenter">
<a href="http://www.dohiy.com/wp-content/uploads/2014/06/itsatrap.jpg"><img id="search_icon" src="{% static "public/images/search_icon.png" %}" alt="search"></a> <a href="http://www.dohiy.com/wp-content/uploads/2014/06/itsatrap.jpg"><img id="search_icon" src="search_icon.png" alt="search"></a>
</td> </td>
</tr> </tr>
</table> </table>
<div id="navigation"> <div id="navigation">
<ul> <ul>
<li><a class="active" href="https://www.none.com">Gesetzesblatt</a></li> <li><a class="active" href="https://www.none.com">Gesetzesblatt</a></li>
<li><a href="https://www.none.com">Datenbank</a></li> <li><a href="https://www.none.com">Datenbank</a></li>
<li><a href="https://www.none.com">Mein Goethopia</a></li> <li><a href="https://www.none.com">Mein Goethopia</a></li>
</ul> </ul>
</div> </div>
</div> </div>