Highlighted

Positioning in the footer

Community Beginner ,
Jul 23, 2018

Copy link to clipboard

Copied

Hi there! I'm having struggles by positioning this element in the footer. The contact (insta, facebook, mail) should be in the center an now they are at the left site. By the web designed by Aris Martin Accola ist the "Aris Martin Accola bolder then the rest because it has a link. Used CSS but didn't changed. Also the Copyright should by positioned from the bottom by 40px.

How it should look:

Bildschirmfoto 2018-07-23 um 20.42.45.png

How it looks:

Bildschirmfoto 2018-07-23 um 20.46.42.png

My html-code:

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Sira Accola: Home</title>

<link href="../css/home.css" rel="stylesheet" type="text/css">

<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->

<script>var __adobewebfontsappname__="dreamweaver"</script>

<script src="http://use.edgefonts.net/actor:n4:default;source-sans-pro:n4,i4,n2,n3,n7,n9,i2,n6:default.js" type="text/javascript">

</script>

</head>

<body>

  <div id="wrapper">

  <header class="header" >

   <figure class="Background">

     <figure>

  <img src="../images/DAMARIS_SCHRIFTZUG.png" alt="" class="Damaris">

  </figure>

     <figure> <img src="../images/SIRA_ACCOLA.png" alt="" class="Sira">

  </figure>

      </figure>

   <nav>

     <h2 id="menulink"><a href="#navlinks">Menu</a></h2>

     <ul class="displayed" id="navlinks">

       <li><a href="home.html" class="thispage">Home</a></li>

       <li><a href="about_me.html">About me</a></li>

       <li><a href="#">Team</a></li>

       <li><a href="#">Horses</a></li>

       <li><a href="#">Gallery</a></li>

        </ul>

      </nav>

</header>

<main id="main">

  <div class="intro">

  <p>Herzlich willkommen auf meiner Web Site. Ich freue mich über Deinen Besuch.

  Mit unserer Home Page wollen wir über meinen reiterlichen Werdegang, über unserer Pferde und unser Team informieren sowie Eindrücke unserer Passion vermitteln.

  Die Resultate unserer Arbeit mit den Pferden sind via Link auf der Homepage des Schweizerischen Verbands für Pferde Sport (fnch.ch) einzusehen.

  Weil wir unsere Basis im Tessin in der Scuderia von Linda Gianella Crotta haben, reiten wir meistens im Tessin und besuchen die Concorsi in Norditalien. Diese sind für uns pferdeschonend innert 1-2  Stunden erreichbar und bieten ein wunderbares und interessantes Umfeld mit Italienischem Flair.

    </p>

  </div>

  <div class="slider-container">

  <div class="slide">

  <div class="img-container">

  <img src="../images/PHOTO-2018-07-08-07-22-38.jpg" alt="" width="1198" height="800">

  </div>

  </div>

  <div class="slide">

  <div class="img-container">

  <img src="../images/PHOTO-2018-07-08-07-22-39.jpg" alt="" width="1198" height="800">

  </div>

  </div>

  <div class="slide">

  <div class="img-container">

  <img src="../images/IMG_5880.jpg" alt="" width="1069" height="800">

  </div>

  </div>

  <a href="#" id="left"  onClick="previousSlide(-1)" class="btn">&lt;</a>

  <a href="javascript:void(0)" id="right" onClick="nextSlide(+1)" class="btn">&gt;</a>

  </div>

  <div class="news">

  <h3 class="h3"> Neuigkeiten</h3>

  <h4> Reittunier in Busto Arsizio

  </h4>

  <p> Tina de l'Yserande</p>

  <p> Grace XII

  </p>

  <p> Simeon de l'Herbage

  </p>

  <h4> Reittunier in Gorla Minore

  </h4>

  <p> Tina de l'Yserande</p>

  <p> Grace XII

  </p>

  <p> Simeon de l'Herbage

  </p>

  </div>

  <div class="news">

  <h3> Kalender

  </h3>

  <p> Reitunier in Ascona</p>

  </div>

</main>

  <footer>

  <div class="contact">

  <section class="social-media">

  <div class="sec-1">

  <img src="../images/Instagram.png" alt="">

  </div>

  <div class="sec-2">

  <img src="../images/USE facebook_circle-512.png" alt="">

  </div>

  <div class="sec-3">

  <a href="mailto:famaccola@bluewin.ch">E-Mail</a>

  </div>

  </section>

  </div>

  <div class="webdesigned">

  Webdesigned by <a class"aris-link" href="https://www.facebook.com/aris.accola">Aris Martin Accola</a></div>

  <div class="copyright">

  Copyright © 2018 DAMARIS & CO. All rights reserved

  </div>

  </footer>

</div>

<script type="text/javascript" src="../js/menu.js"></script>

<script type="text/javascript">

  var index = 1;

  imageSlide();

  manualSlide(index);

  function previousSlide(n){

  index = index + n;

  manualSlide(index);

  }

  function nextSlide(n){

  index = index + n;

  manualSlide(index);

  }

  function imageSlide (){

  var slide = document.getElementsByClassName("slide");

  if(index > slide.length){

  index = 1;

  }

  for (var i = 0; i < slide.length; i++) {

  slide.style.display = "none";

  };

  slide[index-1].style.display = "block";

  index = index + 1;

  setTimeout(imageSlide,5000);

  }

  function manualSlide(n){

  var slide = document.getElementsByClassName("slide");

  if(n > slide.length){

  index = 1;

  }

  if(n < 1){

  index =slide.length;

  };

  for (var i = 0; i < slide.length; i++) {

  slide.style.display = "none";

  };

  slide[index-1].style.display = "block";

  }

  </script>

</body>

</html>

My CSS-Code:

@charset "UTF-8";

/* CSS Document */

/* Simplify width and height calculations */

html {

  box-sizing: border-box;

}

*, *:before,

*:after {

    box-sizing: inherit;

}

*

{

padding:0px;

margin:0px;

}

/* ganze Seite */

body {

  font-family: source-sans-pro;

  font-style: normal;

  font-weight: 400;

  font-size: medium;

}

#wrapper {

  margin-right: auto;

  margin-left: auto;

  margin-top: auto;

  margin-bottom: auto;

  background-color:#FBFBFB;

}

/* Kopf */

.Damaris {

  max-width: 100%;

  max-height: 100%;

  width: 345px;

  display: block;

  margin-left: auto;

  margin-right: auto;

  margin-top: 0px;

  margin-bottom: 0px;

  position: relative;

  top: 30px;

}

.Background {

  max-width: 100%;

  width: auto;

  height: 250px;

  margin-left: auto;

  margin-right: auto;

  background-image: -moz-linear-gradient( 85deg, rgb(153,201,250) 60%, rgb(3,9,252) 100%);

  background-image: -webkit-linear-gradient( 85deg, rgb(153,201,250) 60%, rgb(3,9,252) 100%);

  background-image: -ms-linear-gradient( 85deg, rgb(153,201,250) 60%, rgb(3,9,252) 100%);

  position: relative;

  top: 0px;

  left: 0px;

  right: 0px;

  min-width: 100%;

  min-height: 100%;

  display: inherit;

  margin-top: 0px;

  margin-bottom: 0px;

}

.Sira {

  max-width: 100%;

  max-height: 100%;

  display: block;

  margin-left: auto;

  margin-right: auto;

  margin-top: 20px;

  margin-bottom: 20px;

  position: relative;

  top: 30px;

}

.header {

  position: relative;

}

/* Navigationsmenu */

#nav {

  background-color: #29009E;

  color: #29009E;

  text-transform: none;

  font-variant: normal;

  font-style: normal;

  font-weight: 200;

  text-align: center;

  text-decoration: none;

}

.navmenu {

  margin: 0;

  text-align: center;

  background-color: #29009E;

}

.navmenu a {

  color: #29009E;

  font-weight: 200;

  text-decoration: none;

  text-transform: uppercase;

  display: block;

  padding-top: 0.1em;

  padding-bottom: 0.1em;

}

a {

  font-weight: bold;

  text-decoration: none;

}

a:link {

  color: #000000;

}

a:visited {

  color: #000000;

}

a:hover, a:active, a:focus {

  color: #000000;

  text-decoration: none;

}

#menulink {

  background-color: #29009E;

  margin: 0;

  text-align: center;

}

#menulink a {

  color: #000000;

  text-transform: uppercase;

  font-weight: 400;

  text-decoration: none;

  padding-top: 0.1em;

  padding-bottom: 0.1em;

  font-family: source-sans-pro;

  font-style: normal;

  font-size: 5em;

}

#navlinks {

  width: 100%;

  list-style-type: none;

  padding: 0;

  margin: 0;

  text-align: center;

  background-color: #29009E;

  background-color: rgba(20,3,186,0.87);

  position: absolute;

  -webkit-transition: all ease-out 0.5s;

  transition: all ease-out 0.5s;

  font-family: source-sans-pro;

  font-style: normal;

  font-weight: 200;

}

#navlinks.displayed {

  top: auto;

  z-index: 1;

  opacity: 1;

}

#navlinks.start {

  display: none;

}

#navlinks.collapsed {

  top: auto;

  opacity: 0;

}

#navlinks a {

  display: block;

  padding-top: 10px;

  padding-bottom: 10px;

  color: #000000;

  font-weight: 400;

  text-decoration: none;

  text-transform: uppercase;

  font-size: large;

}

#navlinks a:hover, #navlinks a:active, #navlinks a:focus, #navlinks a.thispage {

  color: #000000;

}

/* Hauptteil */

.intro {

  background-color: #01AF5F;

  color: #000000;

  font-family: source-sans-pro;

  font-style: normal;

  font-weight: 300;

  font-size: x-large;

  text-align: justify;

  text-decoration: none;

  text-transform: none;

  padding-top: 20px;

  padding-bottom: 20px;

  padding-left: 40px;

  padding-right: 40px;

}

/*SlideShow*/

  .slider-container{

  width:100%;

  height: 810px;

  background:#6B6A6A;

  }

  .slide{

  position:absolute;

  width:100%;

  height: 800px;

  overflow: hidden;

  }

  .slide>.img-container{

  position: relative;

  width: 100%;

  height: 800px;

  text-align: center;

  padding: 10px 0px;

  }

  .btn{

  position: absolute;

  font-size: 50px;

  font-weight: bold;

  font-family: arial, sans serfif;

  color: #000000;

  text-decoration: none;

  text-shadow: 0 2px 2px #333;

  top: 800px;

  cursor: pointer;

  margin: 1%;

  }

  #right{

  right:0

  }

.news {

  background-color: #046BCC;

  color: #000000;

  font-family: source-sans-pro;

  font-style: normal;

  font-weight: 300;

  font-size: large;

  text-align: justify;

  text-decoration: none;

  text-transform: none;

  padding-top: 20px;

  padding-bottom: 20px;

  padding-left: 40px;

  padding-right: 40px;

}

/* Fuss */

footer {

  color: #000000;

  background-image: -moz-linear-gradient( 90deg, rgb(253,3,3) 0%, rgb(251,191,74) 44%);

  background-image: -webkit-linear-gradient( 90deg, rgb(253,3,3) 0%, rgb(251,191,74) 44%);

  background-image: -ms-linear-gradient( 90deg, rgb(253,3,3) 0%, rgb(251,191,74) 44%);

  height: 400px;

  }

.social-media {

  height: 200px;

  width: auto;

  position: relative;

  padding-top: 40px;

  margin: 0px auto;

}

.sec-1 {

  height: 100px;

  width: 100px;

  float: left;

  margin-right: 50px;

}

.sec-2 {

  height: 100px;

  width: 100px;

  float: left;

  margin-right: 50px;;

}

.sec-3 {

  height: 100px;

  width: 200px;

  float: left;

  background-color: #FDBC7A;

}

.sec-1>img {

  width: 100px;

  height: 100px;

  background: none;

  margin: 0 auto;

  }

.sec-2>img {

  width: 100px;

  height: 100px;

  background: none;

  margin: 0 auto;

  }

.footer-2{

  position: relative;

  bottom:0;

}

.copyright {

  width: 100%;

  height: auto;

  display: block;

  float: none;

  font-family: source-sans-pro;

  font-style: normal;

  font-weight: 600;

  font-size: x-large;

  text-align: center;

}

.webdesigned{

  font-family: "source-sans-pro";

  font-style: normal;

  font-weight: 600;

  font-size: xx-large;

  text-align: right;

  margin-right: 50px;

}

/* Darstellung */

@media (min-width:700px){

  #menulink {

  display: none;

  }

#navlinks {

  position: static;

  background-color: #2804B6;

  }

#navlinks.collapsed {

  opacity: 2;

  }

#navlinks a {

  width: 20%;

  padding-top: 10px;

  padding-bottom: 10px;

  margin-bottom: 20px;

  float: left;

  color: #000000;

  background-color: #2804B6;

  }

}

Thanks for your help 😃

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

Footer only.  I think this will do what you want.  Paste into a new, blank document.

<!doctype html>

<html lang="ch">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>Footer Only </title>

<!--FONT AWESOME ICONS-->

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<style>

footer { background: darkorange; }

footer, footer a { color: #fff; }

.flex-grid { display: flex; }

.col { flex: 1; }

.right { text-align: right }

.center { text-align: center }

.p2 { margin: 10% 0 10% 0 }

</style>

</head>

<body>

<footer>

<div class="flex-grid center">

<div class="col"> <i class="fa fa-instagram fa-3x"></i> </div>

<div class="col"> <i class="fa fa-facebook-square fa-3x"></i> </div>

<div class="col"> <i class="fa fa-envelope fa-3x"></i> </div>

</div>

<p class="right p2">Webdesign by <a  href="https://www.facebook.com/aris.accola">Aris Martin Accola</a> </p>

<p class="center p2">Copyright © 2018 DAMARIS & CO. All rights reserved</p>

</footer>

</body>

</html>

Views

340

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Positioning in the footer

Community Beginner ,
Jul 23, 2018

Copy link to clipboard

Copied

Hi there! I'm having struggles by positioning this element in the footer. The contact (insta, facebook, mail) should be in the center an now they are at the left site. By the web designed by Aris Martin Accola ist the "Aris Martin Accola bolder then the rest because it has a link. Used CSS but didn't changed. Also the Copyright should by positioned from the bottom by 40px.

How it should look:

Bildschirmfoto 2018-07-23 um 20.42.45.png

How it looks:

Bildschirmfoto 2018-07-23 um 20.46.42.png

My html-code:

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Sira Accola: Home</title>

<link href="../css/home.css" rel="stylesheet" type="text/css">

<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->

<script>var __adobewebfontsappname__="dreamweaver"</script>

<script src="http://use.edgefonts.net/actor:n4:default;source-sans-pro:n4,i4,n2,n3,n7,n9,i2,n6:default.js" type="text/javascript">

</script>

</head>

<body>

  <div id="wrapper">

  <header class="header" >

   <figure class="Background">

     <figure>

  <img src="../images/DAMARIS_SCHRIFTZUG.png" alt="" class="Damaris">

  </figure>

     <figure> <img src="../images/SIRA_ACCOLA.png" alt="" class="Sira">

  </figure>

      </figure>

   <nav>

     <h2 id="menulink"><a href="#navlinks">Menu</a></h2>

     <ul class="displayed" id="navlinks">

       <li><a href="home.html" class="thispage">Home</a></li>

       <li><a href="about_me.html">About me</a></li>

       <li><a href="#">Team</a></li>

       <li><a href="#">Horses</a></li>

       <li><a href="#">Gallery</a></li>

        </ul>

      </nav>

</header>

<main id="main">

  <div class="intro">

  <p>Herzlich willkommen auf meiner Web Site. Ich freue mich über Deinen Besuch.

  Mit unserer Home Page wollen wir über meinen reiterlichen Werdegang, über unserer Pferde und unser Team informieren sowie Eindrücke unserer Passion vermitteln.

  Die Resultate unserer Arbeit mit den Pferden sind via Link auf der Homepage des Schweizerischen Verbands für Pferde Sport (fnch.ch) einzusehen.

  Weil wir unsere Basis im Tessin in der Scuderia von Linda Gianella Crotta haben, reiten wir meistens im Tessin und besuchen die Concorsi in Norditalien. Diese sind für uns pferdeschonend innert 1-2  Stunden erreichbar und bieten ein wunderbares und interessantes Umfeld mit Italienischem Flair.

    </p>

  </div>

  <div class="slider-container">

  <div class="slide">

  <div class="img-container">

  <img src="../images/PHOTO-2018-07-08-07-22-38.jpg" alt="" width="1198" height="800">

  </div>

  </div>

  <div class="slide">

  <div class="img-container">

  <img src="../images/PHOTO-2018-07-08-07-22-39.jpg" alt="" width="1198" height="800">

  </div>

  </div>

  <div class="slide">

  <div class="img-container">

  <img src="../images/IMG_5880.jpg" alt="" width="1069" height="800">

  </div>

  </div>

  <a href="#" id="left"  onClick="previousSlide(-1)" class="btn">&lt;</a>

  <a href="javascript:void(0)" id="right" onClick="nextSlide(+1)" class="btn">&gt;</a>

  </div>

  <div class="news">

  <h3 class="h3"> Neuigkeiten</h3>

  <h4> Reittunier in Busto Arsizio

  </h4>

  <p> Tina de l'Yserande</p>

  <p> Grace XII

  </p>

  <p> Simeon de l'Herbage

  </p>

  <h4> Reittunier in Gorla Minore

  </h4>

  <p> Tina de l'Yserande</p>

  <p> Grace XII

  </p>

  <p> Simeon de l'Herbage

  </p>

  </div>

  <div class="news">

  <h3> Kalender

  </h3>

  <p> Reitunier in Ascona</p>

  </div>

</main>

  <footer>

  <div class="contact">

  <section class="social-media">

  <div class="sec-1">

  <img src="../images/Instagram.png" alt="">

  </div>

  <div class="sec-2">

  <img src="../images/USE facebook_circle-512.png" alt="">

  </div>

  <div class="sec-3">

  <a href="mailto:famaccola@bluewin.ch">E-Mail</a>

  </div>

  </section>

  </div>

  <div class="webdesigned">

  Webdesigned by <a class"aris-link" href="https://www.facebook.com/aris.accola">Aris Martin Accola</a></div>

  <div class="copyright">

  Copyright © 2018 DAMARIS & CO. All rights reserved

  </div>

  </footer>

</div>

<script type="text/javascript" src="../js/menu.js"></script>

<script type="text/javascript">

  var index = 1;

  imageSlide();

  manualSlide(index);

  function previousSlide(n){

  index = index + n;

  manualSlide(index);

  }

  function nextSlide(n){

  index = index + n;

  manualSlide(index);

  }

  function imageSlide (){

  var slide = document.getElementsByClassName("slide");

  if(index > slide.length){

  index = 1;

  }

  for (var i = 0; i < slide.length; i++) {

  slide.style.display = "none";

  };

  slide[index-1].style.display = "block";

  index = index + 1;

  setTimeout(imageSlide,5000);

  }

  function manualSlide(n){

  var slide = document.getElementsByClassName("slide");

  if(n > slide.length){

  index = 1;

  }

  if(n < 1){

  index =slide.length;

  };

  for (var i = 0; i < slide.length; i++) {

  slide.style.display = "none";

  };

  slide[index-1].style.display = "block";

  }

  </script>

</body>

</html>

My CSS-Code:

@charset "UTF-8";

/* CSS Document */

/* Simplify width and height calculations */

html {

  box-sizing: border-box;

}

*, *:before,

*:after {

    box-sizing: inherit;

}

*

{

padding:0px;

margin:0px;

}

/* ganze Seite */

body {

  font-family: source-sans-pro;

  font-style: normal;

  font-weight: 400;

  font-size: medium;

}

#wrapper {

  margin-right: auto;

  margin-left: auto;

  margin-top: auto;

  margin-bottom: auto;

  background-color:#FBFBFB;

}

/* Kopf */

.Damaris {

  max-width: 100%;

  max-height: 100%;

  width: 345px;

  display: block;

  margin-left: auto;

  margin-right: auto;

  margin-top: 0px;

  margin-bottom: 0px;

  position: relative;

  top: 30px;

}

.Background {

  max-width: 100%;

  width: auto;

  height: 250px;

  margin-left: auto;

  margin-right: auto;

  background-image: -moz-linear-gradient( 85deg, rgb(153,201,250) 60%, rgb(3,9,252) 100%);

  background-image: -webkit-linear-gradient( 85deg, rgb(153,201,250) 60%, rgb(3,9,252) 100%);

  background-image: -ms-linear-gradient( 85deg, rgb(153,201,250) 60%, rgb(3,9,252) 100%);

  position: relative;

  top: 0px;

  left: 0px;

  right: 0px;

  min-width: 100%;

  min-height: 100%;

  display: inherit;

  margin-top: 0px;

  margin-bottom: 0px;

}

.Sira {

  max-width: 100%;

  max-height: 100%;

  display: block;

  margin-left: auto;

  margin-right: auto;

  margin-top: 20px;

  margin-bottom: 20px;

  position: relative;

  top: 30px;

}

.header {

  position: relative;

}

/* Navigationsmenu */

#nav {

  background-color: #29009E;

  color: #29009E;

  text-transform: none;

  font-variant: normal;

  font-style: normal;

  font-weight: 200;

  text-align: center;

  text-decoration: none;

}

.navmenu {

  margin: 0;

  text-align: center;

  background-color: #29009E;

}

.navmenu a {

  color: #29009E;

  font-weight: 200;

  text-decoration: none;

  text-transform: uppercase;

  display: block;

  padding-top: 0.1em;

  padding-bottom: 0.1em;

}

a {

  font-weight: bold;

  text-decoration: none;

}

a:link {

  color: #000000;

}

a:visited {

  color: #000000;

}

a:hover, a:active, a:focus {

  color: #000000;

  text-decoration: none;

}

#menulink {

  background-color: #29009E;

  margin: 0;

  text-align: center;

}

#menulink a {

  color: #000000;

  text-transform: uppercase;

  font-weight: 400;

  text-decoration: none;

  padding-top: 0.1em;

  padding-bottom: 0.1em;

  font-family: source-sans-pro;

  font-style: normal;

  font-size: 5em;

}

#navlinks {

  width: 100%;

  list-style-type: none;

  padding: 0;

  margin: 0;

  text-align: center;

  background-color: #29009E;

  background-color: rgba(20,3,186,0.87);

  position: absolute;

  -webkit-transition: all ease-out 0.5s;

  transition: all ease-out 0.5s;

  font-family: source-sans-pro;

  font-style: normal;

  font-weight: 200;

}

#navlinks.displayed {

  top: auto;

  z-index: 1;

  opacity: 1;

}

#navlinks.start {

  display: none;

}

#navlinks.collapsed {

  top: auto;

  opacity: 0;

}

#navlinks a {

  display: block;

  padding-top: 10px;

  padding-bottom: 10px;

  color: #000000;

  font-weight: 400;

  text-decoration: none;

  text-transform: uppercase;

  font-size: large;

}

#navlinks a:hover, #navlinks a:active, #navlinks a:focus, #navlinks a.thispage {

  color: #000000;

}

/* Hauptteil */

.intro {

  background-color: #01AF5F;

  color: #000000;

  font-family: source-sans-pro;

  font-style: normal;

  font-weight: 300;

  font-size: x-large;

  text-align: justify;

  text-decoration: none;

  text-transform: none;

  padding-top: 20px;

  padding-bottom: 20px;

  padding-left: 40px;

  padding-right: 40px;

}

/*SlideShow*/

  .slider-container{

  width:100%;

  height: 810px;

  background:#6B6A6A;

  }

  .slide{

  position:absolute;

  width:100%;

  height: 800px;

  overflow: hidden;

  }

  .slide>.img-container{

  position: relative;

  width: 100%;

  height: 800px;

  text-align: center;

  padding: 10px 0px;

  }

  .btn{

  position: absolute;

  font-size: 50px;

  font-weight: bold;

  font-family: arial, sans serfif;

  color: #000000;

  text-decoration: none;

  text-shadow: 0 2px 2px #333;

  top: 800px;

  cursor: pointer;

  margin: 1%;

  }

  #right{

  right:0

  }

.news {

  background-color: #046BCC;

  color: #000000;

  font-family: source-sans-pro;

  font-style: normal;

  font-weight: 300;

  font-size: large;

  text-align: justify;

  text-decoration: none;

  text-transform: none;

  padding-top: 20px;

  padding-bottom: 20px;

  padding-left: 40px;

  padding-right: 40px;

}

/* Fuss */

footer {

  color: #000000;

  background-image: -moz-linear-gradient( 90deg, rgb(253,3,3) 0%, rgb(251,191,74) 44%);

  background-image: -webkit-linear-gradient( 90deg, rgb(253,3,3) 0%, rgb(251,191,74) 44%);

  background-image: -ms-linear-gradient( 90deg, rgb(253,3,3) 0%, rgb(251,191,74) 44%);

  height: 400px;

  }

.social-media {

  height: 200px;

  width: auto;

  position: relative;

  padding-top: 40px;

  margin: 0px auto;

}

.sec-1 {

  height: 100px;

  width: 100px;

  float: left;

  margin-right: 50px;

}

.sec-2 {

  height: 100px;

  width: 100px;

  float: left;

  margin-right: 50px;;

}

.sec-3 {

  height: 100px;

  width: 200px;

  float: left;

  background-color: #FDBC7A;

}

.sec-1>img {

  width: 100px;

  height: 100px;

  background: none;

  margin: 0 auto;

  }

.sec-2>img {

  width: 100px;

  height: 100px;

  background: none;

  margin: 0 auto;

  }

.footer-2{

  position: relative;

  bottom:0;

}

.copyright {

  width: 100%;

  height: auto;

  display: block;

  float: none;

  font-family: source-sans-pro;

  font-style: normal;

  font-weight: 600;

  font-size: x-large;

  text-align: center;

}

.webdesigned{

  font-family: "source-sans-pro";

  font-style: normal;

  font-weight: 600;

  font-size: xx-large;

  text-align: right;

  margin-right: 50px;

}

/* Darstellung */

@media (min-width:700px){

  #menulink {

  display: none;

  }

#navlinks {

  position: static;

  background-color: #2804B6;

  }

#navlinks.collapsed {

  opacity: 2;

  }

#navlinks a {

  width: 20%;

  padding-top: 10px;

  padding-bottom: 10px;

  margin-bottom: 20px;

  float: left;

  color: #000000;

  background-color: #2804B6;

  }

}

Thanks for your help 😃

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

Footer only.  I think this will do what you want.  Paste into a new, blank document.

<!doctype html>

<html lang="ch">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>Footer Only </title>

<!--FONT AWESOME ICONS-->

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<style>

footer { background: darkorange; }

footer, footer a { color: #fff; }

.flex-grid { display: flex; }

.col { flex: 1; }

.right { text-align: right }

.center { text-align: center }

.p2 { margin: 10% 0 10% 0 }

</style>

</head>

<body>

<footer>

<div class="flex-grid center">

<div class="col"> <i class="fa fa-instagram fa-3x"></i> </div>

<div class="col"> <i class="fa fa-facebook-square fa-3x"></i> </div>

<div class="col"> <i class="fa fa-envelope fa-3x"></i> </div>

</div>

<p class="right p2">Webdesign by <a  href="https://www.facebook.com/aris.accola">Aris Martin Accola</a> </p>

<p class="center p2">Copyright © 2018 DAMARIS & CO. All rights reserved</p>

</footer>

</body>

</html>

Views

341

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 23, 2018 0
Adobe Community Professional ,
Jul 23, 2018

Copy link to clipboard

Copied

Footer only.  I think this will do what you want.  Paste into a new, blank document.

<!doctype html>

<html lang="ch">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>Footer Only </title>

<!--FONT AWESOME ICONS-->

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<style>

footer { background: darkorange; }

footer, footer a { color: #fff; }

.flex-grid { display: flex; }

.col { flex: 1; }

.right { text-align: right }

.center { text-align: center }

.p2 { margin: 10% 0 10% 0 }

</style>

</head>

<body>

<footer>

<div class="flex-grid center">

<div class="col"> <i class="fa fa-instagram fa-3x"></i> </div>

<div class="col"> <i class="fa fa-facebook-square fa-3x"></i> </div>

<div class="col"> <i class="fa fa-envelope fa-3x"></i> </div>

</div>

<p class="right p2">Webdesign by <a  href="https://www.facebook.com/aris.accola">Aris Martin Accola</a> </p>

<p class="center p2">Copyright © 2018 DAMARIS & CO. All rights reserved</p>

</footer>

</body>

</html>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 23, 2018 0
Community Beginner ,
Jul 23, 2018

Copy link to clipboard

Copied

Thanks for help;) But how can I do this with my symbols? Would be great if you could correct it directly in my code.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 23, 2018 0
Adobe Community Professional ,
Jul 23, 2018

Copy link to clipboard

Copied

I used Font Awesome icons because:

  1. I don't have have your images. 
  2. Font icons are scalable to whatever size is needed without any loss in quality.
  3. Font icons can be styled with CSS.
  4. Font Icons have a much smaller  footprint than images.
    Font Awesome Intro

Feel free to replace the icon tags with your images if that's what you prefer.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 23, 2018 1
Community Beginner ,
Jul 23, 2018

Copy link to clipboard

Copied

I tryed your code and integrated in my page. But when I zoom in the copyright disappears. But manu thk for your help.;)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 23, 2018 0
Adobe Community Professional ,
Jul 23, 2018

Copy link to clipboard

Copied

If copyright disappears it's not coming from anything in my code. 

Try removing the height property from  your footer CSS code.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 23, 2018 1