Beiträge von wakeme

wakeme

Das Design ist komplett gesprengt ?

Komisch im IE geht es. FF macht ansonsten keinerlei Probleme mit der Darstellung.

wakeme

Ich habe versucht die responsive Navigation von HTML-Seminar zu übernehmen diese wird jedoch falsch dargestellt bzw. fuktioniert nicht.

https://www.html-seminar.de/toggle-menue-0…umschaltung.htm

HTML

<html>
<head>
<title>PP</title>
<!-- meta -->
<!-- meta -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="style.css" media="all" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/a15587f23f.js" crossorigin="anonymous"></script>
</head>

<body>
<header id="nav-menue">
<a href="#" id="bereichlogo">HTML-Seminar.de</a>
<nav id="steuerung" role="navigation">
<ul>
<li><a href="#">Startseite</a></li>
<li><a href="#">HTML lernen</a></li>
<li><a href="#">Beispiele</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Impressum</a></li>
</ul>
</nav>
<a class="menue-button menue-button-beschr-close" href="#nav-menue-zu">MENÜ zu</a>
<a class="menue-button menue-button-beschr-open" href="#nav-menue">MENÜ auf</a>
</header>
<div id="background"></div>
<main>
<section>
<div class="news_box">
<div class="news_box_title"><h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h1></div>
<div class="news_box_content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
<a href="#" class="button_1">---</a>
</div>

<div class="news_box">
<div class="news_box_title"><h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h1></div>
<div class="news_box_content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
<a href="#" class="button_1">---</a>
</div>

<div class="news_box">
<div class="news_box_title"><h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h1></div>
<div class="news_box_content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
<a href="#" class="button_1">---</a>
</div>
</section>
</main>
<footer>
</footer>
</body>

</html>

Alles anzeigen

Code

@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap');

* {
box-sizing: border-box;
padding: 0;
margin: 0;
}

body {
background-color: #fafafa;
font: 13px/1.65em "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
color: #444;
}


#background {
background-image: url(images/background.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
opacity: 0.85;
}

main {
max-width: 950px;
margin: 0 auto;
display: flex;
flex-direction: column;
}

.news_box {
margin-top: 50px;
padding: 10px;
background-color: #ffffff;
border: 1px solid #f0f0f0;
border-radius: 2px;
display: flex;
flex-direction: column;
}

.news_box_title {
margin: 10px;
text-align: center;
}

.news_box_content {
text-align: center;
}

.button_1 {
display: block;
margin: 10px;
padding: 10px;
border: 1px solid #f0f0f0;
border-radius: 2px;
letter-spacing: 4px;
text-align: center;
text-decoration: none;
}

footer {
margin-top: 100px;
background-color: #1a1a1a;
height: 150px;
}


/*responsive Elemente*/

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 800px) {

main {
margin-right: 20px;
margin-left: 20px;
margin-top: 10px;
margin-bottom: 10px;
}

.news_box {
margin-top: 20px;
}
}

/*responsive Elemente*/



/*Schriften,Überschriften&Links*/
h1 {
font: 18px/1.65em "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
color: #444;
}

a {
font: 13px/1.65em "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
color: #444;
text-decoration: none;
}

/*Schriften,Überschriften&Links*/



/*fremder Code*/
header {
background-color: yellow;
background-color: gray;
width: 100%;
float: left;
border-bottom: 1px solid black;
}
#bereichlogo {
    color: white;
    background-color: limegreen;
    display: block;
    padding: 0.5em;
    text-decoration: none;
    float: left;
}
#bereichlogo {
    width: auto;
}
#steuerung li {
    list-style: none;
    float: left;
}
#steuerung a {
    display: block;
    height: 100%;
    width: 100%;
    padding: 0.5em;
    text-decoration: none;
    color: white;
    background-color: gray;
}
.menue-button {
    display: none;
}
#steuerung {
    float: right;
}
#steuerung a:hover {
    color: black;
    background: orange;
}
/* CSS erweitern um MENÜ-Button und entsprechende Steuerung */
/*    Menü-Button oben rechts einblenden bei kleiner als 600px */
@media only screen and (max-width:800px) {
    .menue-button {
        display: block;
    }
    .menue-button {
        background-color: darkblue;
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        padding: 0.5em;
        color: white;
        cursor: pointer;
        text-decoration: none;
    }
    #bereichlogo {
        width: 100%;
    }
    #steuerung {
        float: left;
        width: 100%;
        display: none;
    }
    #steuerung li {
        width: 100%;
        border-bottom: 2px solid silver;
    }
    .menue-button:hover {
        color: black;
        background: orange;
    }
}
/* die Magie, um die Steuerung einzublenden (auch auf mobile Devices) */
#nav-menue:target #steuerung {
    display: block;
}
/* ausblenden des Menü-Buttons zum öffnen - somit wird der zum Schließen sichtbar */
#nav-menue:target .menue-button-beschr-open {
    display: none ;
}
/* Allgemein Anweisungen */
section {
    padding: 0.5em;
    float: left;
    width: 100%;
}
h1, p {
    margin: 0.5em 0 0 0;
}

/*fremder Code*/

Alles anzeigen

wakeme

Reicht es aus wenn ich den Universalselektor mit display: flex; ausstatte oder muss ich tatsächlich jeden neuen Container mit display:flex; bezeichnen ?

Ich wollte den Code des derzeitigen Projektes etwas kürzer gestalten.

wakeme

Das heißt diese Variablen funktioniert auch so in CSS ?

wakeme

Ich habe eine schöne Navigation gefunden welche mit Sass&Compass umgesetzt worden ist. Leider kenne ich mich mit diesem Framework nicht aus.

https://codepen.io/maxivan/pen/mdyVzXd

Die einzigen Bestandteile des Frameworks sind die php-typischen Variablen oder ?

$grey = “#232323;

Das könnte ich ja einfach durch normale CSS Definition ersetzen.

wakeme

Bei selfhtml steht nicht geschrieben, dass man ausschließlich Klassen verwendet.

https://wiki.selfhtml.org/wiki/CSS/Tutor…tieg/Selektoren

Man behauptet einfach etwas, das man versucht mit Scheinquellen zu belegen.

Hier mal ein weitere dem widersprechende Meinung von der Universität in Washington oder aus der Dokumentation von Mozilla.

https://www.washington.edu/accesscomputin…e5/lesson1.html

https://developer.mozilla.org/en-US/docs/Lea…nd_ID_Selectors

Versteht mich mich nicht falsch, ich möchte es richtig machen aber einfach etwas zu behaupten ohne das adäquat zu begründen ist fragwürdig. Das mit den Höhenangaben und der neuen semantischen Struktur übernehme ich äußerst gerne. Nur hat mir noch niemand erklären können wie man den einen Hintergrund ohne Höhenangabe erstellt.

Auf dieser Seite habe ich gelernt, dass man aufgrund der Ladezeit nur eine einzige CSS Datei verwendet. Spielt das bei heutigen Ladezeiten überhaupt eine Rolle ?

Ich würde gerne das CSS vom Template und das vom Inhalt trennen.

wakeme

Naja das ist ja an sich einfach zu beantworten.

#header enthält das Titelbild des Designs. Die einzige andere Möglichkeit das umzusetzen wäre das Bild direkt in die Indexdatei einzubinden. Das ist aber auch unschön.

Nullius in verba ?

Verstehe mich bitte nich falsch aber es wäre schön, wenn du eine valide Quelle nennen könntest welche das so bestätigt. Denn selbst mein HTML Buch widerspricht dem.

wakeme

Das derartig einzubinden habe ich bei W3 gelernt. Und wenn du mir schon derartig polemisch und süffisant entgegentrittst könntest du es doch auch einfach erklären oder ? Was für eine Alternative besteht ?

wakeme

Das mit height: 100%; hat funktioniert. Ich weiß gar nicht warum das dort steht und was ich damit erreichen wollte.

Wenn ich die Höhenangabe bei #header weglasse wird nichts angezeigt. Die Kopfnavigation muss exakt 53P groß sein. Bei dem Rest ist kommentiert worden, dass es nur temporär ist.

Das mit den ID&Class ist mir Neu. Ich habe damals in einem Tutorial gelesen, dass es keinen Unterschied macht.

Das heißt, dass IDs einmalig und Klassen mehrmals verwendet werden können ?

Zitat

Für das CSS solltest du nur class verwenden.

Und auch das steht hier auf dieser Internetseite anders.

Zitat

Die Frage, warum nicht alles mit class gemacht wird ist berechtigt – die Antwort ist, dass es nicht von gutem Stil zeugt und es geschickter ist, wenn man auf einen Blick sieht, was einmalige Bereiche sind. Weiterhin haben id-Bereiche mehr Gewicht.

https://www.html-seminar.de/class_und_id.htm

wakeme

Der Footer und das entsprechende Hintergrundbild werden mittig ausgerichtet. Hat jemand eine Idee wie ich den Footer da hinbekomme wo er hingehört ?

HTML

<html>
<head>
<title>Lorem ipsum dolor sit amet</title>
<!-- meta -->
<!-- meta -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="style_text.css" media="all" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/a15587f23f.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
</head>

<body>
<div id="kopfnavigation"></div>
<div id="header"></div>
<div id="hauptcontainer">



<div id="container">

<div id="spalte_links">
<div id="nachrichten_box_kopfzeile_1">
<h1>Lorem ipsum dolor sit amet</h1>
<h2><i class="fas fa-user"></i></i>&nbsp;&nbsp;PP&nbsp;&nbsp;<i class="fas fa-calendar-week"></i>&nbsp;&nbsp;5. April 2018</h2>
</div>
<div class="text" id="nachrichten_box_1">

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
 <img src="images/test.png" alt="Nature" class="res">
</div>
<div id="nachrichten_box_kopfzeile_2">
<h1>Updates zur neuen Internetseite</h1>
<h2><i class="fas fa-user"></i>&nbsp;&nbsp;PP&nbsp;&nbsp;<i class="fas fa-calendar-week"></i>&nbsp;&nbsp;5. April 2018</h2>
</div>
<div class="text" id="nachrichten_box_2">

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div id="nachrichten_box_kopfzeile_2">
<h1>Lorem ipsum dolor sit amet</h1>
<h2><i class="fas fa-user"></i></i>&nbsp;&nbsp;PP&nbsp;&nbsp;<i class="fas fa-calendar-week"></i>&nbsp;&nbsp;5. April 2018</h2>
</div>
<div class="text" id="nachrichten_box_3">

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
<br></br>
<img src="images/test.png" alt="Nature" class="res">
<br></br>

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>

<div id="spalte_rechts">
<div id="vertikale_navigation_kopfzeile_1"></div>
<div id="vertikale_navigation_1"></div>
<div id="vertikale_navigation_2"></div>
<div id="vertikale_navigation_3"></div>
</div>
</div>
</div>
<div id="footer"></div>
</body>

</html>

Alles anzeigen

Code

* {
box-sizing: border-box;
padding: 0;
margin: 0;

}

body {
background-color: #000;
background-image: url(images/body_hintergrund.png);
background-repeat: repeat;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: 300;
color: #cccccc;
}


#kopfnavigation {
width: 100%;
height: 53px;
background-color: #232323;
}

#hauptcontainer {
max-width: 950px;
margin: 0 auto;
height : 100%;
}

#header {
background-image: url(images/header.png);
background-size: cover;
height : 419px;
}

#container {
display: flex;
flex-direction: row;
}

#spalte_links {
width: 75%;
margin-top: 20px;
margin-right: 20px;
display: flex;
flex-direction: column;
}

#spalte_rechts {
width: 25%;
margin-top: 20px;
display: flex;
flex-direction: column;
}

#nachrichten_box_1 {
background-color: hsla(0, 100%, 100%, 0.05);
box-shadow:
/* offset-x | offset-y | blur-radius | spread-radius | color */
0px 1px 1px 0px hsla(0,0%,0%,0.14),
0px 2px 1px -1px hsla(0,0%,0%,0.12),
0px 1px 3px 0px hsla(0,0%,0%,0.2);
border-radius: 1px;
min-height: 300px;  /*temporär zur Anschauung*/
}

#nachrichten_box_2 {
background-color: hsla(0, 100%, 100%, 0.05);
box-shadow:
/* offset-x | offset-y | blur-radius | spread-radius | color */
0px 1px 1px 0px hsla(0,0%,0%,0.14),
0px 2px 1px -1px hsla(0,0%,0%,0.12),
0px 1px 3px 0px hsla(0,0%,0%,0.2);
border-radius: 1px;
min-height: 300px;  /*temporär zur Anschauung*/
}

#nachrichten_box_3 {
background-color: hsla(0, 100%, 100%, 0.05);
box-shadow:
/* offset-x | offset-y | blur-radius | spread-radius | color */
0px 1px 1px 0px hsla(0,0%,0%,0.14),
0px 2px 1px -1px hsla(0,0%,0%,0.12),
0px 1px 3px 0px hsla(0,0%,0%,0.2);
border-radius: 1px;
min-height: 300px;  /*temporär zur Anschauung*/
}

#nachrichten_box_kopfzeile_1 {
height: 65px;
border-bottom: 1px solid #232323;
background-color: hsla(0, 100%, 100%, 0.09);
padding: 10px;
text-align: left;
}

#nachrichten_box_kopfzeile_2 {
margin-top: 20px;
height: 65px;
border-bottom: 1px solid #232323;
background-color: hsla(0, 100%, 100%, 0.09);
padding: 10px;
text-align: left;
}


#vertikale_navigation_1 {
background-color: hsla(0, 100%, 100%, 0.05);
box-shadow:
/* offset-x | offset-y | blur-radius | spread-radius | color */
0px 1px 1px 0px hsla(0,0%,0%,0.14),
0px 2px 1px -1px hsla(0,0%,0%,0.12),
0px 1px 3px 0px hsla(0,0%,0%,0.2);
border-radius: 1px;
min-height: 300px;  /*temporär zur Anschauung*/
}

#vertikale_navigation_2 {
margin-top: 20px;
background-color: hsla(0, 100%, 100%, 0.05);
box-shadow:
/* offset-x | offset-y | blur-radius | spread-radius | color */
0px 1px 1px 0px hsla(0,0%,0%,0.14),
0px 2px 1px -1px hsla(0,0%,0%,0.12),
0px 1px 3px 0px hsla(0,0%,0%,0.2);
border-radius: 1px;
min-height: 200px;  /*temporär zur Anschauung*/
}

#vertikale_navigation_3 {
margin-top: 20px;
background-color: hsla(0, 100%, 100%, 0.05);
box-shadow:
/* offset-x | offset-y | blur-radius | spread-radius | color */
0px 1px 1px 0px hsla(0,0%,0%,0.14),
0px 2px 1px -1px hsla(0,0%,0%,0.12),
0px 1px 3px 0px hsla(0,0%,0%,0.2);
border-radius: 1px;
min-height: 300px;  /*temporär zur Anschauung*/
}

#vertikale_navigation_kopfzeile_1 {
height: 65px;
border-bottom: 1px solid #232323;
background-color: hsla(0, 100%, 100%, 0.09);
padding: 10px;
text-align: left;
}

#footer {
background-image: url(images/footer_background.png);
background-size: cover;
width: 100%;
height: 419px;
margin-top: 20px;
}


/*Klassen*/
h1 {
font-family: 'Open Sans', sans-serif;
font-size: 15px;
color: #cccccc;
}

h2 {
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #cccccc;
font-weight: normal;
margin-top: 5px;
margin-bottom: 5px;
}

h3 {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #cccccc;
font-weight: normal;
margin-top: 5px;
margin-bottom: 5px;
}

h4 {
font-family: 'Open Sans', sans-serif;
font-size: 15px;
color: #cccccc;
text-shadow: #000 0 1px 1px;
}

.text {
padding: 15px;
line-height: 1.75em;
}

.res {
width: 100%;
height: auto;
}

p {
margin-top: 20px;
margin-bottom: 20px;
}
/*Klassen*/


/*responsive Elemente*/
@media screen and ( max-width: 767px ) {
#container {
display: flex;
flex-direction: column;
margin-left: 20px;
margin-right: 20px;
}
#spalte_links {
width: 100%;
margin-right: 0px;
}
#spalte_rechts {
width: 100%;
}
#header {
height: 319px;
}

}
/*responsive Elemente*/

Alles anzeigen

wakeme

Werde ich mir aneignen

Danke für den Tipp.

wakeme

Das ist mir gar nicht aufgefallen. Vielen vielen Dank

wakeme

http://pathologicalplay.bplaced.net/test_design/

Ich habe das mit dem neusten FF+Opera und diesem neuen IE Ding getestet.

wakeme

Das hat funktioniert :))))))

Dankeschön.

html-seminar.de/woltlab/attachment/2649/

Den Abstand unten meine ich.

wakeme

Danke, das habe ich gemacht aber die beiden Probleme bestehen weiterhin.

#footer_background hat einen größeren Abstand zu unterem Bildschirmrand ist aber dennoch fast richtig ausgerichtet.

Das margin-bottom: -200px; vom #wrapper wird ignoriert und bei diesem Design ist es wichtig, dass der wrapper Header&Footer überlagert.

wakeme

Es hat funktioniert aber jetzt ist ein größerer Abstand zwischen dem unterem Rand des Bildschirmes und der Grafik. Ich verstehe nich wodurch dieser verursacht wird. Aus irgendeinem Grund wird durch diesen Zusatz das margin-bottom: -200px; des #Wrappers ignoriert.

HTML

<html>
<!-- head -->
<head>
<title></title>
<!-- meta -->
<!-- meta -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="style.css" media="all" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<!-- head -->

<body>
<div id="header">
<div id="navigation"></div>
</div>
<div id="wrapper">
<div id="wrapper_right">
<div id="wrapper_right_top"></div>

</div>
<div id="wrapper_left"></div>
</div>
<div id="footer">
<div id="footer_background"></div>
</div>
</body>

</html>

Alles anzeigen

wakeme

Anbei mal der ganze Code

Ich möchte, dass die Hintergrundgrafik von #footer_background unten am Rand anliegt. Bei dem Code wird die Grafik gar nicht angezeigt.

#footer_background liegt in der DIV #footer.

Code

* {
box-sizing: border-box;
padding: 0;
margin: 0;

}

body {
background-color: #000;
background-image: url(images/background.png);
background-repeat: repeat;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: 500;
color: #fff;
}

#navigation {
background-image: url(images/navigation.png);
height: 80px;
}

#header {
background-image: url(images/header.png);
background-repeat: no-repeat;
background-size: cover;
height: 612px;
}

#wrapper {
width: 900px;
margin: 0 auto;
margin-top: -300px;
margin-bottom: -200px;
display: flex;
flex-direction: row;
}

#wrapper_right {
width: 75%;
min-height: 900px;
display: flex;
flex-direction: column;
background-image: url(images/background_content.png);
background-repeat: repeat-y;
}

#wrapper_right_top {
height: 19px;
background-image: url(images/background_content_top.png);
background-repeat: no-repeat;
}
#wrapper_left {
width: 25%;
min-height: 600px;
margin-left: 20px;
background-image: url(images/sidebar.png);
background-repeat: repeat-y;
}

#footer {
height: 612px;
background-image: url(images/footer_background_1.png);
background-repeat: no-repeat;
background-size: cover;
}

#footer_background {
position: absolute;
bottom: 0;
height: 293px;
background-image: url(images/footer_background_2.png);
background-repeat: no-repeat;
background-size: cover;
}

Alles anzeigen

wakeme

Dankeschön, das hat funktioniert

Der Footer meines derzeitigen Projektes beinhaltet eine Hintergrundgrafik und eine halbtransparente Grafik welche die Hintergrundgrafik überlagert. Nun möchte ich diese zweite Grafik unten ausrichten. Aber weder mit Position noch mit Flex funktioniert das.

Code

#footer {
position: relative;
height: 612px;
background-image: url(images/footer_background_1.png);
background-repeat: no-repeat;
background-size: cover;
}

#footer_background {
position: absolute;
bottom: 0;
height: 293px;
background-image: url(images/footer_background_2.png);
background-repeat: no-repeat;
background-size: cover;
}

Alles anzeigen

wakeme

Der Code ist noch gar nicht vorhanden.

Genau ich möchte, dass der graue Bereich über dem Hintergrundbild liegt. Das wären also zwei Divisionen welche einander überlagern.

wakeme

Ich möchte das die graue Contentbox auf dem Beispielbild, das Hintergrundbild des Headers überlagert.

Wie kann ich das erreichen ?

html-seminar.de/woltlab/attachment/2648/

Beiträge von wakeme

Navigation

Navigation

display:flex; als Universalselektor

Navigation mit Sass&Compass

Navigation mit Sass&Compass

Footer fälschlicherweise mittig ausgerichtet

Footer fälschlicherweise mittig ausgerichtet

Footer fälschlicherweise mittig ausgerichtet

Footer fälschlicherweise mittig ausgerichtet

Footer fälschlicherweise mittig ausgerichtet

Überlappen von Divisionen

Überlappen von Divisionen

Überlappen von Divisionen

Überlappen von Divisionen

Überlappen von Divisionen

Überlappen von Divisionen

Überlappen von Divisionen

Überlappen von Divisionen

Überlappen von Divisionen

Überlappen von Divisionen