#1

deckewandboden

Mitglied  (28 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://www.decke-wand-boden.de

Ich möchte gerne bei meinem Design einen HTML CSS Footer einfügen...

Hallo liebe SIQUANDO´s ... Ich benutze das Design Reykjavik Midborg mit Shop Pro 6

Ich möchte gerne bei meinem Design einen Footer einfügen... dazu habe ich folgende Code Zeilen :

<style>
.footer-dark {
padding:50px 0;
color:#f0f9ff;
background-color:#282d32;
}

.footer-dark h3 {
margin-top:0;
margin-bottom:12px;
font-weight:bold;
font-size:16px;
}

.footer-dark ul {
padding:0;
list-style:none;
line-height:1.6;
font-size:14px;
margin-bottom:0;
}

.footer-dark ul a {
color:inherit;
text-decoration:none;
opacity:0.6;
}

.footer-dark ul a:hover {
opacity:0.8;
}

@media (max-width:767px) {
.footer-dark .item:not(.social) {
 text-align:center;
 padding-bottom:20px;
}
}

.footer-dark .item.text {
margin-bottom:36px;
}

@media (max-width:767px) {
.footer-dark .item.text {
 margin-bottom:0;
}
}

.footer-dark .item.text p {
opacity:0.6;
margin-bottom:0;
}

.footer-dark .item.social {
text-align:center;
}

@media (max-width:991px) {
.footer-dark .item.social {
 text-align:center;
 margin-top:20px;
}
}

.footer-dark .item.social > a {
font-size:20px;
width:36px;
height:36px;
line-height:36px;
display:inline-block;
text-align:center;
border-radius:50%;
box-shadow:0 0 0 1px rgba(255,255,255,0.4);
margin:0 8px;
color:#fff;
opacity:0.75;
}

.footer-dark .item.social > a:hover {
opacity:0.9;
}

.footer-dark .copyright {
text-align:center;
padding-top:24px;
opacity:0.3;
font-size:13px;
margin-bottom:0;
}
</style>

 

...UND ...

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Untitled</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
 <link rel="stylesheet" href="assets/css/style.css">
</head>

<body>
 <div class="footer-dark">
   <footer>
     <div class="container">
       <div class="row">
         <div class="col-sm-6 col-md-3 item">
           <h3>Services</h3>
           <ul>
             <li><a href="#">Web design</a></li>
             <li><a href="#">Development</a></li>
             <li><a href="#">Hosting</a></li>
           </ul>
         </div>
         <div class="col-sm-6 col-md-3 item">
           <h3>About</h3>
           <ul>
             <li><a href="#">Das Unternehmen</a></li>
             <li><a href="#">Team</a></li>
             <li><a href="#">Careers</a></li>
           </ul>
         </div>
         <div class="col-md-6 item text">
           <h3>Company Name</h3>
           <p>
Machen Sie aus Ihrer Wohnung ein Zuhause

Wir helfen Ihnen dabei Ihren Wohnraum so zu gestalten, wie Sie es sich vorstellen.

Von der Planung zum Wohntraum – Auf diesem Weg begleiten wir sie mit kreativen Ideen, fundiertem Fachwissen, großer Einsatzbereitschaft und viel Einfühlungsvermögen.

Wir liefern alles aus einer Hand – pünktlich an die Baustelle - in Deutschland, Europa und wenn Sie möchten auch in die ganze Welt.
</p>
         </div>
         <div class="col item social"><a href="#"><i class="icon ion-social-facebook"></i></a><a href="#"><i class="icon ion-social-twitter"></i></a><a href="#"><i class="icon ion-social-snapchat"></i></a><a href="#"><i class="icon ion-social-instagram"></i></a></div>
       </div>
       <p class="copyright">Company Name © 2018</p>
     </div>
   </footer>
 </div>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
</body>

</html>

 

Das ganze kommt von hier : https://jsfiddle.net/Grobbert/70s6yr12/1/

Die Frage ist... die ich leider nicht gelöst bekomme... wohin mit den Codezeilen ???

Ich hoffe ihr könnt mir verraten wie bzw. wo ich einen CSS/HTML Code "eingarbeitet" bekomme...

Die Testseite ist : https://2022.decke-wand-boden.de/


Dieser Beitrag wurde bereits 1 mal bearbeitet, zuletzt von »W2D Fan« (26.07.2022, 16:59)
#2

W2D Fan

Ehrenmitglied  (4122 Punkte)  ·   weiblich  ·   Niederlande  ·   Nachricht senden
 http://www.w2dfan.nl

Willst du bitte das nächste Mal für Codes den Knopf {:} verwenden, und nicht ständig doppelte Leerzeilen verwenden Damit die Beiträge nicht unmöglich und unnötig lange werden.

Ich habe das jetzt angepasst Danke für dein Verständnis.


Gruß,
Marjorie

Hilfe ist nicht selbstverständlich. Deshalb halte ich ein "Dankeschön", nachdem jemandem geholfen wurde, für überaus angebracht und höflich.

#3

W2D Fan

Ehrenmitglied  (4122 Punkte)  ·   weiblich  ·   Niederlande  ·   Nachricht senden
 http://www.w2dfan.nl

Und wie stellst du dir das vor, das kann doch nur in die Hose gehen. Dein Design hat, wie alle andere Designs auch, schon standard head und body Tags. Wie auch stylesheets und metatags. Das alles doppelt aufführen könnte sich gewaltig beißen.

Dabei verfügen alle Designs standard über eine Fußzeile. Wo man die Fußzeile findet kommt auf das Design an.

Für Reykjavik findet man die unter Design Bearbeiten und auf den Reiter Fußzeile kannst du einen Text reinschreiben (siehe Anhang)

Wie man Infoseiten wie z.B. Impressum, Datenschutz, Kontakt usw erstellt kannst du HIER lesen.

Und wie du diese Infoseiten in der Fußzeile sichtbar machst findest du auch in den Beitrag und kannst auch auf angehängtes Bild sehen.


Gruß,
Marjorie

Hilfe ist nicht selbstverständlich. Deshalb halte ich ein "Dankeschön", nachdem jemandem geholfen wurde, für überaus angebracht und höflich.


#4

deckewandboden

Mitglied  (28 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://www.decke-wand-boden.de

Alternativ habe ich mir auch schon überlegt das so zu machen das ich den Footer eben im "unten" Bereich mit Absätzen erstelle.

Wenn ich das mache und mit

.sqrcommon {
display:none;
}

Die Fußzeile ausblende dann bleibt mir aber noch ein ungefähr 20px Rand unten übrig der nicht wirklich gut aussieht.

 

Hat jemand eine Idee wie ich den Abstand des letzen Absatzes dann auf 0 reduzieren kann?

 

PS: Was nicht geht ist im Absatz unter Eigenschaften Abstand danach auf 0px... der Rand bleibt trotzem. Eine Style Anweisung wäre sicher die richtige Lösung oder ???

 

#footer {
 padding: 0 0 20px 0;
}

 

Das hier kann ich finden wenn ich im Browser auf "Untersuchen" gehe. Aber wie mache ich dann daraus eine entsprechende Style Anweisung?

 

Das hier ist der Knoten <div class="" id="footer"> aber da habe ich keine class die ich mit .class ansprechen kann.

 

Ich bin jetzt leider kein Programmierer und HTML und CSS sind nicht wirklich meine Sprache... daher bitte ich euch um eure Hilfe.... vorab schon mal ganz doll D A N K E S C H Ö N

#5

W2D Fan

Ehrenmitglied  (4122 Punkte)  ·   weiblich  ·   Niederlande  ·   Nachricht senden
 http://www.w2dfan.nl

Du scheinst wenig vertrauen zu haben in meinen Rat bezüglich der standard Fußzeile, oder in die standard Fußzeile überhaupt.

Ich habe mal einen Blick geworfen auf deine Testseite und rein persönlich finde ich dass du in der Fußzeile etwas häßliches gebastelt hast.

Ich habe mal schnell ein Beispiel gemacht mit das Design Cetera, wo ich eine Kontaktzeile verwenden kann, denn soviel war mir schon klar geworden aus deine Codezeilen. Leider hat Reykjavik diese Möglichkeit nicht.

Alles andere in der Fußzeile habe ich einfach erstellt mit die vorhandene Bordmittel. Und den Vorteil dabei ist auch noch das alle Punkte auch noch völlig automatisch auf die richtige Seite verlinkt werden.


Gruß,
Marjorie

Hilfe ist nicht selbstverständlich. Deshalb halte ich ein "Dankeschön", nachdem jemandem geholfen wurde, für überaus angebracht und höflich.



Dieser Beitrag wurde bereits 1 mal bearbeitet, zuletzt von »W2D Fan« (28.07.2022, 16:30)
#6

MuggelClan

As  (116 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://www.donaustauf.info

Hallo @deckewandboden,

vielleicht übersehe ich etwas, möchte trotzdem zurückfragen:

Wenn ich mir das Design Reykjavik ansehe, fällt mir nichts auf, das ich nicht mit dem "Flex-Design-Editor" genau so nachstellen könnte, auch nicht beim Footer. Deswegen meine Frage:

Warum verwendest du nicht den "Flex-Design-Editor"?

Hast den "Flex-Design-Editor" schon mal genauer angeschaut?

Wenn ja, was fehlt in diesem Editor?


Mit freundlichen Grüßen

MuggelClan

Web To Date seit 2004, Siquando Web 11, Pro Web 6

119 Aufrufe | 6 Beiträge