html/css/responsive

sabrina79 · #1 (**permalink**) 12.06.2018, 17:50

Hallo Leute,
Bin gerade darüber einen One-Pager responsive zu erstellen.
Mein Problem liegt beim footer. Der Hintergrund sollte wie beim Header in pink sein!
Aus irgendeinem Grund bekomme ich es nicht hin, dass der Hintergrund in der Farbe #e20072 dargestellt wird.
Irgendwie ist der Wurm drin und ich sehe mittlerweile nix ausser seltsamen Zeichen.
Kann vielleicht jemand helfen?

Habe HTML und CSS Datei schon im Validator geprüft. Css scheint in Ordnung,
bei HTML sind einige Fehlermeldungen, die mir aber überhaput nicht weiterhelfen!

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

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">

<title>One Pager S.design| OfG-Studium Webdesign</title>

<meta name="description" content="Landing page S.design Website">

<link rel="stylesheet" href="styles/styles.css">
<link rel="shortcut icon" href="images/favicon.ico">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

<script>alert("Willkommen bei S.design");

//Wenn das Dokument geladen wurdeâ€¦
$(document).ready(function(){

//nach oben scrollen:
$('a.top').click(function () {
$('body,html').animate({scrollTop: 0}, 800);
return false;
});

//Beim Klick auf den "MenÃ¼"-Buttonâ€¦
$('a#mobile-menu-btn').click(function () {
// â€¦soll die Navigation eingeblendet werden.
$('#navigation').slideToggle("slow");
});
});
</script>

<link rel="icon" href="favicon.ico">
</head>

<body id="oben">
<div class="wrapper">


<header id="frame">
<img src="images/logo-s.design.png" alt="Logo s.design"/>
<h1>Einfachheit ist die hÃ¶chste Stufe der Vollendung</h1>
<h2>- Leonardo da Vinci (1452-1519)</h2>

<a id="mobile-menu-btn" href="#">MenÃ¼</a>

<nav id="navigation">
<ul>
<li><a href="#">Webdesign</a></li>
<li><a href="#">Corporate Design</a></li>
<li><a href="#">Conception</a></li>
<li><a href="#">Printmedia</a></li>
</ul>
</nav>
</header>


<section id="main">

<img src="images/design-banner.jpg" class="designbanner" alt="design-banner"/>

<article class="main">
<h2>Webdesign</h2>
<p>Weniger als 5 Sekunden Zeit benÃ¶tigt der Besucher einer Website um zu entscheiden ob er auf dieser verweilt oder sie gleich wieder verlÃ¤sst. Deshalb ist es enorm wichtig, auf den ersten Blick das Vertrauen des Betrachters zu gewinnen und die Werte und Normen des eigenen Unternehmens zu vermitteln.</p>
<p><a href="#">mehr InfoÂ´s ...</a></p>
</article>

<article class="main">
<h2>Corporate Design</h2>
<p>Das Corporate Design Ihres Unternehmens muss so stark sein, dass es aus der visuellen Ãœberflutung heraussticht. S.Design entwickelt Ihr Ã¤uÃŸeres Erscheinungsbild - mit Erfahrung, Weitsicht und dem nÃ¶tigen kreativen GespÃ¼r. Ihr CD ist so exakt auf Ihr Unternehmen zugeschnitten und entfaltet einen hohen Wiedererkennungswert.</p>
<p><a href="#">mehr InfoÂ´s ...</a></p>
</article>

<article class="main">
<h2>Conception</h2>
<p>â€žSchlieÃŸe dein leibliches Auge, damit du mit dem geistigen Auge zuerst siehest dein Bild. Dann fÃ¶rdere zutage, was du im Dunkeln gesehen, dass es zurÃ¼ckwirke auf andere von auÃŸen nach innen.â€œ
- CASPAR DAVID FRIEDRICH</p>
<p><a href="#">mehr InfoÂ´s ...</a></p>
</article>

<article class="main">
<h2>Printmedia</h2>
<p>Haptisch und optisch hochwertige Printprodukte verstÃ¤rken den Wiedererkennungswert Ihres Unternehmens. Das SelbstverstÃ¤ndnis der Marke setzt sich in den KÃ¶pfen der Kunden fest. FÃ¼r die einheitliche Umsetzung gibt es einen Fullservice mit exkl. Design, Druck & Produktion.</p>
<p><a href="#">mehr InfoÂ´s ...</a></p>
</article>

</section>


<aside class="sidebar">
<h2>Wir haben was Sie suchen...</h2>
<p>Sie sind auf der Suche nach einer Agentur,
die Ihren Ideen ein Aussehen gibt?
Wir bei S.design lieben was wir tun!</p>
</aside>


<section>
<div class="row">
<div class="column third"><img src="images/teaser1.jpg" class="teaser" alt="design-banner"/></div>
<div class="column third"><img src="images/teaser2.jpg" class="teaser" alt="design-banner"/></div>
<div class="column third"><img src="images/teaser3.jpg" class="teaser" alt="design-banner"/></div>
</div>

<div class="row">
<div class="column third_text"><a href="#">responsive design</a></div>
<div class="column third_text"><a href="#">projektablauf</a></div>
<div class="column third_text"><a href="#">online-marketing</a></div>

<div class="row2">
<h3 class="corporatedesign">Corporate Design</h3>
/<div>

<div class="column half">
<p class="cd">Die wichtigste und bestÃ¤ndigste Entscheidung eines Unternehmers ist die des Erscheinungsbildes fÃ¼r die eigene Firma. Dabei geht es nicht nur darum, dass ein Corporate Design gefÃ¤llt,...</p>
</div>
<div class="column half">
<p class="cd">sondern zunehmend darum ob es zum Unternehmen oder zum Produkt passt. Es ist sehr wichtig, dass Ihr Logo die Werte Ihres Unternehmens wortlos widerspiegelt & ohne ErklÃ¤rung verstÃ¤ndlich ist.</p>
</div>
</div>
</div>
</section>


<section>
<iframe src="https://player.vimeo.com/video/32944253?color=78fab7&title=0&byline=0&portrait=0" width="640" height="360" frameborder="0"></iframe>
<p><a href="https://vimeo.com/32944253">The Fundamental Elements of Design</a></p>
</section>


<footer>
<div class="column full">
<p>S.design - Full Service-Werbeagentur - Hauptstrasse 0815 - 54321 Musterstadt - Telefon: +49 001 98765432 - E-Mail: info@s.design.de</p>
</div>

<div class="row">
<div class="column third"><p><a href="#">AGB</a></p></div>
<div class="column third"><p><a class="top" href="#oben">up</a></p></div>
<div class="column third"><p><a href="#">datenschutz</a></p></div>
</div>

</footer>

</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
</head>

</html>

@charset "utf-8";

/*
* CSS-Design
* Online-Schule für Gestaltung: Webdesign-Kurs
* RESPONSIVE WEBSEITE
*/

/* Reset * * * * * * * * */

/* Reset * * * * * * * * */

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

html{
font-size: 100%; /* Browserstandard: 16px */
}

img{
max-width: 100%;
}

/* Layout * * * * * * * * */

body{
font-family: Helvetica, Arial, sans-serif;
line-height: 1.5;
background: #fff;
color: #2c2522;
}

.wrapper{
max-width: 1200px;
margin: 0 auto;
overflow: hidden;
}

header{
background: #e20072; /* Grn */
margin-bottom: 50px;
color: #fff;
text-align: center;
padding: 25px;

}

#main{
width: 73%;
float: left;
}

#main article{
margin-bottom: 25px;
background: #fff;
}

.designbanner{
margin-bottom: 80px;
margin-top: 50px;
}

.sidebar{
background: #2c2522;
color: #fff;
width: 25%;
float: right;
margin-top: 50px;
padding: 25px;
height: 274px;
}

#footer{
width: 100%;
float: left;
background: #e20072;
height: 500px;

}

.row2 {
background: #202522;
}

.row a{
color: #2c2522;
padding: 7px 20px;
text-decoration: none;
border: 1px solid #fff;
}

.row a:hover{
text-transform: uppercase;
background: #2c2522;
color: #fff;
}

.article {
background: #e20072;
}

/* Navigation * * * * * * * * */

#mobile-menu-btn{
display: none;
}

#navigation{
margin: 50px 0 0;
}

#navigation ul li{
display: inline;
}

#navigation a{
color: #2c2522;
text-decoration: none;
padding: 7px 20px;
margin: 0 10px;
border: 1px solid #fff;
}

#navigation a:hover{
color: #333;
background: #fff;
}

#main a{
color: #e20072;
text-decoration: none;
}
#main a:hover{
text-transform: uppercase;
color: #e20072;
}

/* Typografie * * * * * * * * */

h1, h2, h3, h4, h5, h6{
font-family: Georgia, Times, serif;
font-style: italic;
font-weight: normal;
margin-bottom: 15px;
}

h1{
text-align: center;
font-size: 48px;
font-size: 3rem;
margin-top: 20px;
}

h2{
font-size: 30px;
font-size: 1.875rem;
}

h3{
font-size: 48px;
font-size: 3rem;
text-transform: uppercase;
text-align: center;
margin-top: 50px;
color: #e20072;
letter-spacing: 1rem;
}

.corporatedesign{
color: #fff;
}

p {
font-size: 16px;
font-size: 1rem;
margin: 0 0 15px;
}

.cd {
font-size: 16px;
font-size: 1rem;
margin-bottom: 80px;
text-align: left;
}

/* Raster * * * * * * * * */

.column {
float: left;
padding: 25px;
margin: 25px 0 25px 2%;
}

.row{
width: 100%;
float: left;
}

.column:first-child {
margin-left: 0;
}

.full { width: 100%; text-align: center; padding: 0px; margin-bottom: -10px;}
.half { width: 48%; text-align: center; padding: 0px;}
.third { width: 32%; text-align: center; text-transform: uppercase;}
.third_text { width: 32%; text-align: center; text-transform: uppercase; margin-top: -70px; }
.two-thirds { width: 66%; }
.fourth { width: 23.5%; }
.three-fourth {width:74.5%;}

/* Media Queries * * * * * * * * */

@media only screen and (min-width: 980px) and (max-width: 1279px){

#frame{
background: #205460;}
}

@media only screen and (min-width: 760px) and (max-width: 979px) {
.wrapper{
width: 760px;
}

#frame{background: #9A68C0;}

#main, .sidebar{
width: 100%;
}
}

@media only screen and (max-width: 759px) {
.wrapper{
width: 100%;
}

#frame{
background: #8ccfa4;
}

#main, .sidebar{
width: 96%;
margin: 25px 2% !important;
}

#navigation{
display: none;
margin: 0px 0 0;
}

a#mobile-menu-btn{
display: block;
background: #2c2522;
color: #fff;
text-decoration: none;
text-transform: uppercase;
padding: 10px 0;
margin: 25px 0 0;
}

#navigation ul li {
display: block;
float: none;
}

#navigation ul li a{
display: block;
background: #2c2522;
color: #fff;
margin: 1px 0;
border: 0;
}

#navigation a{
color: #2c2522;
text-decoration: none;
padding: 7px 20px;
margin: 0 10px;
border: 1px solid #2c2522;
}

#navigation a:hover{
color: #2c2522;
background: #fff;
}
}

Sailor56 · #2 (**permalink**) 10.07.2018, 12:05

Frage... was macht das ...

Zitat:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
</head>

</html>

in deinem Code?
Antwort:
Du adressierst in deinem CSS eine ID -> #footer
Diese ID gibt es im HTML Code nicht.
Also entweder im CSS nur den Tag, als 'footer' adressieren oder deinem Footer die ID="footer" geben

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln