Beiträge von reaper451

reaper451 · 12. Juni 2020

Habe mal beide Datein eingefügt..

reaper451 · 12. Juni 2020

CSS

/*
Blau : #1F4E8C
Dunkel Grau: #3D3F45
Hell Grau: #E5E5E5
Rot:   #A62C21

/* ---- GLOBAL ---- */



*/

body {
margin: 0;
font-family: 'Raleway', 'Lato', 'Helvetica Neue', 'Arial', sans-serif;
font-size: 16px;
}

* {
box-sizing: border-box;
}

/*-- GENERELLES --*/

.clearfix::after {
content: "";
display: block;
clear: both;
}

.active {
background-color: #A62C21 !important;
}

/*--  Navigationsleiste --*/

.header-nav {       /*  Navigationsleiste  */
width: 100%;
height: 50px;
background-color: #3D3F45;
position: relative;
font-weight: bold;
font-size: 1.1rem;

}
.header-nav a > img {  /*  Logo   */
height: 30px;
width: auto;
margin: .55rem;
float: left;

}

.header-nav ul {
margin: 0;
padding: 0;
float: right;
height: 100%;
}

.header-nav ul > li {
display: inline-block;
height: 100%;
padding: 0 .4rem 0 .4rem;

}
.header-nav ul > li > a {
margin-top: .8rem;
display: inline-block;
}

.header-nav ul > li > a:link{
color: #FFF;
text-decoration: none;
}
.header-nav ul > li > a:hover{
color: #E5E5E5;
text-decoration: none;

}
.header-nav ul > li > a:active{
color: #E5E5E5;
text-decoration: none;
}
.header-nav ul > li > a:visited{
color: #FFF;
text-decoration: none;
}

.header-nav .col-6 {
padding-top: 0;
padding-bottom: 0;

}

.header-nav .container,
.header-nav .row,
.header-nav .col-6 {
height: 100%;
}

}
/*    NAVIGATIONSLEISTE  (Mobil)       */

.mobile-nav-button {
color: #FFF;
float: right;
font-size: 2rem;
border: 2px solid #FFF;
width: 37px;
height: 37px;
position: relative;
margin-top: .4rem;

}
/*  Button für DROPDOWN  */
.mobile-nav-button > span {
position: absolute;
bottom: -30px;
right: 10px;
top:  8px;
color: #FFF;
border: 2px solid #FFF;
font-size: 1.1rem;

}
/*   DROPDOWN-MENU    */
.mobile-nav-content > ul > li {
display: block;
background-color: #3D3F45;
height: 50px;
padding: 0 1.2rem;
text-align: center;

}

.mobile-nav-dropdown {
position: relative;
display: inline-block;
float: right;

}


.mobile-nav-content {
position: absolute;
right: 0;
top: 50px;
display: none;
}
.mobile-nav-dropdown:hover > .mobile-nav-content {
display: block;
}

.mobile-nav {
display: none;
}

@media (max-width: 768px) {

.desktop-nav {
display: none;
}

.mobile-nav {
display: block;
}

}


/*  Header-Banner */

.header-banner {
width: 100%;
height: 0;
padding-top: 20.83%;
background: url("../img/hintergrund.jpg") no-repeat;
background-size: contain;

}

.header-banner-klein {
width: 100%;
height: 0;
padding-top: 15.625%;
background: url("../img/hintergrund-klein.jpg") no-repeat;
background-size: contain;

}
/*    GRID-SYSTEM (Sichtbarkeit)

.border, .border * {
border: 1px solid #91C4FF;
}

[class*='col-'] {
background-color: #BFDDFF;
}

p {
background-color: #91C4FF;
padding: 0;
margin: 0;
color: #FFF;
text-align: center;
} */

/*   GRID-SYSTEM     */

.container {
width: 95%;
margin-left: auto;
margin-right: auto;

}

.row::after {
content: "";
clear:both;
display: block;
}

[class*='col-'] {
float: left;
min-height: 1px;
padding: .8rem;

}

.col-1 { width: 16.666%; }
.col-2 { width: 33.333%; }
.col-3 { width: 50%;     }
.col-6 { width: 100%;    }

/*
::::  Wichtige Breakpoints ::::

480    Pixel     (Iphone Querformat)
768    Pixel     (Ipad Hochformat)
1024   Pixel     (Ipad Querformat)

*/

@media (max-width: 1024px){

.col-1 { width: 33.333%; }

}

@media (max-width: 768px) {

.col-1 { width: 50%; }
.col-2 { width: 100%; }
.col-3 { width: 100%; }

}

@media (max-width: 480px) {
.col-1 { width: 100%; }
.col-2 { width: 100%; }
.col-3 { width: 100%; }

}

Alles anzeigen

HTML - Index.html

HTML

<!DOCTYPE html>
<html lang="de">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Startseite</title>
<link rel="stylesheet" type="text/css" href="src/css/styles.css">
</head>

<body>
<!-- Navigationsleiste -->
<nav class="header-nav">

<div class="container desktop-nav">
<div class="row">
<div class="col-6">

<a href="index.html">
<img src="src/img/webdesign-logo.png" alt="Das Logo von Webdesign made simple">
</a>

<ul>
<li class="active"><a href="index.html">Startseite</a></li>
<li><a href="leistungen.html">Leistungen</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>

</div>
</div>
</div>


<div class="container mobile-nav">
<div class="row">
<div class="col-6">

<a href="index.html">
<img src="src/img/webdesign-logo.png" alt="Das Logo von Webdesign made simple">
</a>

<div class="mobile-nav-dropdown clearfix">

<div class="mobile-nav-button"><span>&WCF_AMPERSAND≡</span></div>


<div class="mobile-nav-content clearfix">

<ul>
<li class="active"><a href="index.html">Startseite</a></li>
<li><a href="leistungen.html">Leistungen</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>

</div>



</div>





</div>
</div>
</div>

</nav>

<!-- Header-Banner -->

<header class="header-banner"></header>



</body>

</html>

Alles anzeigen

reaper451 · 12. Juni 2020

Moin

Ich bin grade dabei ein Design mit Html5 und mit CSS3 anzupassen.. Bin momentan dabei die ganze Navigation sowie Headerbild für die mobile Version zu coden, allerdings bekomme ich meine Border für die Navigation nicht vernünftig hin...

CSS

/*    NAVIGATIONSLEISTE  (Mobil)       */

.mobile-nav-button {
color: #FFF;
float: right;
font-size: 2rem;
border: 2px solid #FFF;
width: 37px;
height: 37px;
position: relative;
margin-top: .2rem;
margin-bottom: 3px;




/*  Button für DROPDOWN  */
.mobile-nav-button > span {
position: absolute;
bottom: -30px;
right: 5px;
top:  8px;
color: #FFF;
border: 2px solid #FFF;
font-size: 1.1rem;

Alles anzeigen

Ist das irgendwas falsch im Inhalt?

Beiträge von reaper451

Wie stelle ich meine Border vernünftig ein?

Wie stelle ich meine Border vernünftig ein?

Wie stelle ich meine Border vernünftig ein?