• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Inhalt in eine Aside Section

B

bUu2188

Mitglied
Hallo bin in HTML ein wenig vertaut und versuche es mir gerade anzueignen :)
Ich habe aus dem Internet einen Code für Social Media Buttons herausgefunden und wollte Ihn in meine Homepage einbauen nur habe ich folgendes Problem:
Wenn ich den Code des HTML in meine Aside Section rein mache, ist das Feld nicht dort wo ich es gerne hätte.
Ich weiß mit bisschen rum schrauben an der CSS, würde ich es bestimmt schaffen aber ich verstehe rein aus der Logik nicht, wenn ich das Element in diese Section mache, warum Sie nicht dort bleibt.
<P> Ein Text bleibt ja auch genau in dieser Section</p>

Bitte um eure Hilfe

Hier der HTML Code der Social Media Banners:

HTML: 
<html>
<head>
  <meta charset="UTF-8" />
  <title>CSS3 and HTML5 Social media icons</title>
</head>
<body>
  <div class="wrapper">
  <a class="icon facebook" href="#"><span class="zocial-facebook"></span></a>
  <a class="icon twitter" href="#"><span class="zocial-twitter"></span></a>
  <a class="icon linkedin" href="#"><span class="zocial-linkedin"></span></a>
  <a class="icon youtube" href="#"><span class="zocial-youtube"></span></a>
  <a class="icon flickr" href="#"><span class="zocial-flickr"></span></a>
  <a class="icon email" href="#"><span class="zocial-email"></span></a>
  </div>
</body>
</html>


Die CSS der Social Media Banners:

HTML: 
@import url(http://weloveiconfonts.com/api/?family=zocial);

/* zocial */
[class*="zocial-"]:before {
  font-family: 'zocial', sans-serif;
}

body{
  background: url("http://subtlepatterns.com/patterns/cloth_alike.png") repeat scroll 0% 0% transparent;
}

.wrapper{
  width: 325px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -162px;
  margin-top: -25px;
}

.icon{
  display: inline-block;
  position: relative;
  color: #bdbdbd;
  width: 50px;
  height: 50px;
  text-align: center;
  font-size: 1.47em;
  line-height: 2em;
  background-color: #fff;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  box-shadow: 0px 3px 0px #bdbdbd, 0px 3px 10px #bababa;
  -webkit-transition:background-color 250ms ease 0s;
  transition:background-color 250ms ease 0s;
}

.zocial-facebook{margin-left: -8px}

.icon.facebook:hover{background-color: #4986c7;}
.twitter:hover{background-color: #4cb6e8;}
.linkedin:hover{background-color: #29a0cc;}
.youtube:hover{background-color: #a32929;}
.flickr:hover{background-color: #c257ad;}
.email:hover{background-color: #d5b120;}

a{
  text-decoration: none;
}

.icon:hover{
  color: #fff;
  box-shadow: 0px 3px 0px #686868, 0px 3px 10px #7e7e7e;
}

.icon:active{
  box-shadow: inset 0px 1px 4px #3d3d3d, 0px 0px 0px #bdbdbd;
  top: 3px;
}

Hier ein Ausschnitt meines HTML Codes der Homepage:

HTML: 
    <section id="main">
    <article>
        <section>
                <h2></h2>
<p>blablabla></p>
        </section>
            <section>
            <h2>blablablabla</h2>
            <p>blabla</p>   
            </section>
           
            </article>
            <aside>
                <section>
                    <h2>Social Media</h2>
                          
                           <ul class="wrapper">
                                      <a class="icon facebook" href="#"><span class="zocial-facebook"></span></a>
                                      <a class="icon youtube" href="#"><span class="zocial-youtube"></span></a>
                                      <a class="icon email" href="#"><span class="zocial-email"></span></a>
                           </ul>  
              </section>

Der CSS Code meiner Seite ( Ausschnitt):

HTML: 
#main aside {
    display:inline-block;
    width:30.6%;
    margin-left:3%;
    padding:0em;
    vertical-align:top;
    box-shadow: 0px 0px 20px 5px #999;
    border-radius:18px;
}

#main aside section {
    margin-bottom:1.563em;
    border-bottom: 0.188em solid #E7590B;
}

#main article h2 {
    padding:1em 1.8em 1em 1.8em;
}
 
Werbung:
Werbung:
Das Design kenn Ich aber irgendwoher :D. Vielleicht bin Ich blind aber Ich entdecke keine Socialmedia- buttonso_O
 
Hatte damals schoneinmal ein Post wegen einem anderen Thema aufgemacht ^^

Ne habe Die Buttons noch nicht eingebaut aber sie fliegen bei mir auf HTML meines Rechners, oben am Header herum obwohl ich die <div> in meine Aside Section geworfen habe :(
 
Werbung:
Hallo,

Bring zunächst mal Ordnung in deinen Quelltext. CSS-Anweisungen (style-Element) im body-Bereich sollten vermieden werden, verschiebe die in den head-Bereich.

Gleiches mit dem JavaScript, außer es muss aus technischen Gründen im body-Bereich stehen.

Verzichte auf HTML-Formatierungen.

Verwende geeignete Bezeichnungen, statt

Code: 
<section id="main">

zum Beispiel besser

Code: 
<main>


Beseitige die Fehler im HTML:

https://validator.w3.org/nu/?doc=http://www.acebuu.de/

In deinem ersten HTML-Quellcode der Homepage stehen a-Elemente direkt in einem ul-Element. Das ul-Element darf jedoch nur li-Elemente als direkte Kind-Elemente enthalten.

Lasse leere Elemente weg. Die können bei der Anzeige zu Problemen führen. Wenn die als Erinnerung im Quelltext stehen sollen schreibe besser Kommentare oder setzte die leeren Elemente selbst in Kommentare.

Ich habe den HTML-Quelltext mal überarbeitet, so dass er keine Fehler mehr enthält. So werden auch die Social-Media-Buttons korrekt im aside-Element angezeigt.

Du musst nur in der style.css "#main" durch "main" ersetzen und gegebenenfalls die Pfade zu den externen Dateien anpassen. Ich weiß zum Beispiel nicht wie du das CSS für die Social-Media-Buttons einbinden willst.

Code: 
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>aCebUu</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script type="text/javascript" src="jquery-1.3.2.js"></script>
   <script type="text/javascript">
      $(function() {
          $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);
          $('#navigation > li').hover(
              function () {
                  $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
              },
              function () {
                  $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
              }
          );
      });
   </script>
   <link rel="stylesheet" href="style.css" type="text/css">
   <link rel="stylesheet" href="sidebar.css" type="text/css">
   <link rel="stylesheet" href="socialmedia.css" type="text/css">
   <style> 
   a.back {
      width: 256px;
      height: 73px;
      position: fixed;
      bottom: 15px;
      right: 15px;
   }
   .scroll {
      width: 133px;
      height: 61px;
      position: fixed;
      bottom: 15px;
      left: 150px;
   }
   </style>
</head>
<body>
   <header>
      <img src="header.png" alt="Headerbild">
   </header>
   <ul id="navigation">
      <li class="home"><a href="http://www.google.de/" title="Home"></a></li>
      <li class="about"><a href="" title="About"></a></li>
   </ul>
   <main>
      <article>
         <h2>Youtube</h2>
         <section>
            <h2>Pentakill mit Fiora</h2>
            <iframe src="https://www.youtube-nocookie.com/embed/m1zX_2IKDe0" height="480" width="640">
            </iframe>
         </section>
         <section>
            <h2>Pentakill mit Ryze</h2>
            <iframe src="https://www.youtube-nocookie.com/embed/bJHg9BOMm6Y" height="480" width="640">
            </iframe>
         </section>
      </article>
      <aside>
         <section>
            <h2>Weitere Artikel</h2>
            <ul>
               <li>Noch ein spannender Artikel</li>
               <li>Diesen musst du auch lesen</li>
               <li>Und diesen Artikel</li>
            </ul>
         </section>
         <section>
            <h2>Ein Textfeld</h2>
            <p>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</p>
         </section>
         <section>
            <h2>Kategorien</h2>
         </section>
         <section>
            <h2>Social Media</h2>
            <p><a class="icon facebook" href="#"><span class="zocial-facebook"></span></a></p>
            <p><a class="icon twitter" href="#"><span class="zocial-twitter"></span></a></p>
            <p><a class="icon linkedin" href="#"><span class="zocial-linkedin"></span></a></p>
            <p><a class="icon youtube" href="#"><span class="zocial-youtube"></span></a></p>
            <p><a class="icon flickr" href="#"><span class="zocial-flickr"></span></a></p>
            <p><a class="icon email" href="#"><span class="zocial-email"></span></a></p>
         </section>
      </aside>
   </main>
   <footer>
      <ul>
         <li>(c) 2015 aCebUu</li>
         <li>Kontakt</li>
         <li>Datenschutz</li>
         <li>Impressum</li>
      </ul>
   </footer>
   <a style="visibility: visible; display: block;" href="http://www.google.de/" title="Home"></a>
   <a style="visibility: visible; display: block;" href="" title="About"></a>
</body>
</html>

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Wow vielen Dank für diese ausführliche Antwort :)
Werde mich die Tage gleich mal ran machen und die Probleme beheben :)
Melde mich dann nochmal, habe grad Unistress etc :p
 
Vielen Dank nochmal MrMurphy :)
Ich habe nur folgendes Problem.... Die iframes werden nun so komisch angezeigt und das Headerbild ist nun nicht mehr ganz oben :(
 
Werbung:
Werbung:
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben