kaepten
Mitglied
Hallo,
Die Navileiste sollte so ausschauen! Kann mir einer sagen wie ich die Navileiste hinbekomme,das es so wie auf dem einen Bild aussieht (nur ohne den weißen Hintergrund) :(
Aber sobald ich es einfüge sieht es so aus! Habe es aus meiner alten Seite herauskopiert und in die neue eingefügt
Der alte Code: https://jsfiddle.net/9rvpmx1o/
Und der Neue Code zuerst die HTML- Datei
und hier die CSS-Datei
Die Navileiste sollte so ausschauen! Kann mir einer sagen wie ich die Navileiste hinbekomme,das es so wie auf dem einen Bild aussieht (nur ohne den weißen Hintergrund) :(
Aber sobald ich es einfüge sieht es so aus! Habe es aus meiner alten Seite herauskopiert und in die neue eingefügt
Der alte Code: https://jsfiddle.net/9rvpmx1o/
Und der Neue Code zuerst die HTML- Datei
Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheets/format_index.css" />
<meta charset="UTF-8">
<title>Startseite</title>
<link href="bilder/favicon.ico" rel="shortcut icon">
</head>
<body>
<div class="seite">
<nav>
<a class="naviaktiv" href="index.html"><img src="bilder/930.png" alt="BKWI" width="45" height="45"/>
<a class="navi" href="informatik.html">Informatik</a>
</nav>
<div class="navi">
<div class="mitte">
<br /><br /><br /><br /><br /><br />
<img src="bilder/logo.png" alt="BKWI"/>
<br /><br />
<div class="abstand"> Homepage </div>
Protonenrucksack
<br />
_____________________________________________________________________________
</div>
</div>
<div class="inhalt">
<br /><br />
Willkommen :)
<br /><br />
</div>
<div class="ende">
<img class="links" src="bilder/banner2.png" width="90" />
<table style="padding-left: 30px; text-align: left; font-size: 60%; letter-spacing: 1px; color: #d5d5d5; padding-top: 25px;">
<tr>
<td style="text-align: left; padding-right: 60px; padding-top: 5px;">Die beste Firma AG</td>
<td style="text-align: left; padding-right: 60px; padding-top: 5px;">Telefon: 07031 / 12 34 56</td>
<td style="text-align: left; padding-right: 60px; padding-top: 5px;"><a class="back" href="login.html">LOGIN</a></td>
</tr>
<tr>
<td style="text-align: left; padding-right: 60px; padding-top: 5px;">Wodkastraße 12</td>
<td style="text-align: left; padding-right: 60px; padding-top: 5px;">Fax: 07031 / 12 34 57</td>
<td style="text-align: left; padding-right: 60px; padding-top: 5px;"><a class="back" href="kontakt.html">Kontakt</a></td>
</tr>
<tr>
<td style="text-align: left; padding-right: 60px; padding-top: 5px;">© by Lukas </td>
</tr>
</div>
</div>
</body>
</html>
Code:
/* =============================================================
1. body
2. Überschriften
3. Seite
4. Links
5. Sonstiges
6. Kontaktformular
============================================================= */
body
{
background-color: #454444;
text-align: center;
font-family: Century Gothic,verdana, arial, sans-serif;
}
/* =============================================================
CSS-STYLE FÜR Ü B E R S C H R I F T E N
============================================================= */
/* =============================================================
CSS-STYLE FÜR S E I T E
============================================================= */
.seite
{
width: 980px;
margin: 0 auto;
margin-top: 20px;
}
.navi
{
width: 980px;
height: 300px;
background: #ECECEC;
margin-top: 10px;
}
.inhalt
{
width: 980px;
height: auto;
background: #ECECEC;
}
.ende
{
width: 980px;
height: 100px;
background: #363636;
}
.nav
{
width: 980px;
height: 45px;
display: flex;
justify-content: center;
background: #008800;
margin-top: 10px;
}
/* =============================================================
CSS-STYLE FÜR L I N K S
============================================================= */
a.navi
{
display: block;
padding: 0.5rem;
border-top: 0.1rem solid black;
margin: 0.5rem;
text-decoration: none;
color: #000000;
}
a.navi:hover
{
padding-top: 0.4rem;
border-top: 0.2rem solid black;
}
a.navi:visited
{
text-decoration: none;
text-underline: none;
color: 000000;
}
a.naviaktiv
{
display: block;
padding-top: 0.4rem;
border-top: 0.2rem solid black;
margin: 0.5rem;
text-decoration: none;
text-underline: none;
color: #FF0000;
}
a.back
{
display: block;
text-decoration: none;
text-underline: none;
color: #d5d5d5;
}
a.back:hover
{
color: red;
}
a.login
{
display: block;
text-decoration: none;
text-underline: none;
color: black;
}
a.login:hover
{
color: red;
}
/* =============================================================
CSS-STYLE FÜR S O N S T I G E S
============================================================= */
.mitte
{
text-align:center;
}
.abstand
{
letter-spacing: 4px;
}
.links
{
float: left;
padding-top: 20px;
padding-left: 70px;
padding-right: 30px;
}
/* =============================================================
CSS-STYLE FÜR K O N T A K T F O R M U L A R
============================================================= */
form {
background-color: #d9d9d9;
width: 370px; /* Breite des Formulars */
padding: 20px;
border: 1px solid #8c8c8c;
}
label { /* Beschriftung auf eigener Zeile */
display: block;
cursor: pointer; /* Mauszeiger wird zur Hand */
}
input#besuchername,
input#besuchermail,
textarea {
width: 300px;
border: 1px solid #8c8c8c;
margin-bottom: 1em;
}
textarea {
height: 7em;
}
input:focus,
textarea:focus {
background-color: #C0C0C0;
}
Zuletzt bearbeitet:
