zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden html/css/responsive

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.06.2018, 17:50
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.05.2018
Beiträge: 45
sabrina79 befindet sich auf einem aufstrebenden Ast
Standard html/css/responsive

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">

<!-- Kopfleiste -->
<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>


<!-- Hauptinhalt -->
<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>


<!-- Seitenleiste -->
<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>


<!-- Teaserleiste -->
<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>


<!-- Videolink-->
<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>


<!-- Fussleiste -->
<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;
}
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 10.07.2018, 12:05
Neuer Benutzer
neuer user
 
Registriert seit: 10.07.2018
Beiträge: 23
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
css, html, responsive

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus



Alle Zeitangaben in WEZ +2. Es ist jetzt 12:18 Uhr.