Wie man meine <neben> gleiche Höhe wie die Haupt-Teil?

Augenblick bin ich versucht zu duplizieren einer Webseite Bild, aber aus irgendeinem Grund auf meinem Teil der Seite den Teil, wo es heißt „empfohlene links“ nicht mit der „HOME“ – header. Gibt es eine Möglichkeit, dies zu tun? und wie würde ich korrigiere meine code/css um dies zu implementieren? Danke!!! (jetzt die beiseite Teil erscheint weiter unten auf der Seite, als beabsichtigt).

mein code:

 <!-- Your code goes here -->
<section>  
<h1>HOME</h1>

<article>
<h2>HTML5 & CSS Normalize</h2>
<p> </p>

</article>

<article>
<h2>Honesty/Copyright</h2>
<p> </p>

</article>
</section>
<aside>
<section>
<h4><u>Recommended Links</u></h4>

<p>HTML5 

<p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>

<p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>
</P>
<p>CSS 

<p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>

<p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>
</P>
<p>JavaScript 

<p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>

<p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>
 </P>

<hr>

<h4><u>Social Media Links</u></h4>

<div class="social">
       <!-- images on row 1 - top 3px left 4px   - increment left by 27px   for the next one -->
       <!-- images on row 2 - top 30px left 4px  - increment left by 27px for the next one -->
       <!-- images on row 3 - top 57px left 4px  - increment left by 27px for the next one -->
       <!-- images on the next row - increment top by 27px for the next row -->
 <a href="http://facebook.com" title="Face Book"  style="width: 23px; height: 23px; border: 0; position: absolute; top: 3px; left: 4px;"></a> 

</div>
</section>
</aside>

<!-- Your code ends here -->
<!-- Defining Footer -->
<div id="footer">

  <script>
      var dt=new Date(document.lastModified);   //Get document last modified date
      document.write('This page was last updated on '+dt.toLocaleString()) 
   </script>

</div>
</body>
</html>

CSS:

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
/*Add an "active" class to the current link to let the user know which page      he/she is on*/
.active {
background-color: #4CAF50;
}

 /* Add a gray right border to all list items, except the last item (last-child) */
li {
border-right: 1px solid #bbb;
}

li:last-child {
border-right: none;
}

aside {
  float: right;
  width: 30%;

}

.social{
position: relative; 
background: url('social-media.png') no-repeat; 
width: 250px; 
height: 140px;
}

#footer {
  clear: both;
  background: #000;
  color: #fff;
  bottom: 0;
}
InformationsquelleAutor bp06km | 2016-03-16



One Reply
  1. 3

    Wenn Sie hinzufügen dieser Regel (und legen Sie es als class auf den ersten section, werden Sie line-up

    section.left {
      float: left;
      width: 70%;
    }

    Probe

    CSS:

    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    }
    
    li {
    float: left;
    }
    
    li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    }
    
    /* Change the link color to #111 (black) on hover */
    li a:hover {
    background-color: #111;
    }
    /*Add an "active" class to the current link to let the user know which page      he/she is on*/
    .active {
    background-color: #4CAF50;
    }
    
     /* Add a gray right border to all list items, except the last item (last-child) */
    li {
    border-right: 1px solid #bbb;
    }
    
    li:last-child {
    border-right: none;
    }
    
    section.left {
      float: left;
      width: 70%;
    }
    
    aside {
      float: right;
      width: 30%;
    }
    
    .social{
    position: relative; 
    background: url('social-media.png') no-repeat; 
    width: 250px; 
    height: 140px;
    }
    
    #footer {
      clear: both;
      background: #000;
      color: #fff;
      bottom: 0;
    }

    HTML:

    <!-- Your code goes here -->
    <section class="left">  
      <h1>HOME</h1>
    
      <article>
        <h2>HTML5 & CSS Normalize</h2>
        <p> </p>
    
      </article>
    
      <article>
        <h2>Honesty/Copyright</h2>
        <p> </p>
    
      </article>
    </section>
    
    <aside>
      <section>
        <h4><u>Recommended Links</u></h4>
    
        <p>HTML5 
    
        <p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>
    
        <p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>
        
      <p>CSS 
    
      <p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>
    
      <p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>
    
      <p>JavaScript 
    
    <p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>
    
    <p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>
    
    <hr>
    
    <h4><u>Social Media Links</u></h4>
    
    <div class="social">
      <!-- images on row 1 - top 3px left 4px   - increment left by 27px   for the next one -->
      <!-- images on row 2 - top 30px left 4px  - increment left by 27px for the next one -->
      <!-- images on row 3 - top 57px left 4px  - increment left by 27px for the next one -->
      <!-- images on the next row - increment top by 27px for the next row -->
      <a href="http://facebook.com" title="Face Book"  style="width: 23px; height: 23px; border: 0; position: absolute; top: 3px; left: 4px;"></a> 
    
        </div>
      </section>
    </aside>
    
    
    <!-- Your code ends here -->
    <!-- Defining Footer -->
    <div id="footer">
    
      <script>
        var dt=new Date(document.lastModified);   //Get document last modified date
        document.write('This page was last updated on '+dt.toLocaleString()) 
      </script>
    
    </div>

    Eine moderne und bessere Weg wäre, um flex

    .container {
      display: flex;
    }
    
    aside {
      width: 30%;
    }
    section.left {
      width: 70%;
    }

    Probe

    CSS:

    .container {
      display: flex;
    }
    
    aside {
      width: 30%;
    }
    section.left {
      width: 70%;
    }
    
    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    }
    
    li {
    float: left;
    }
    
    li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    }
    
    /* Change the link color to #111 (black) on hover */
    li a:hover {
    background-color: #111;
    }
    /*Add an "active" class to the current link to let the user know which page      he/she is on*/
    .active {
    background-color: #4CAF50;
    }
    
     /* Add a gray right border to all list items, except the last item (last-child) */
    li {
    border-right: 1px solid #bbb;
    }
    
    li:last-child {
    border-right: none;
    }
    
    .social{
    position: relative; 
    background: url('social-media.png') no-repeat; 
    width: 250px; 
    height: 140px;
    }
    
    #footer {
      clear: both;
      background: #000;
      color: #fff;
      bottom: 0;
    }

    HTML:

    <!-- Your code goes here -->
    <div class="container"> 
    
      <section class="left">  
        <h1>HOME</h1>
    
        <article>
          <h2>HTML5 & CSS Normalize</h2>
          <p> </p>
    
        </article>
    
        <article>
          <h2>Honesty/Copyright</h2>
          <p> </p>
    
        </article>
      </section>
    
      <aside>
        <section>
          <h4><u>Recommended Links</u></h4>
    
          <p>HTML5 
    
          <p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>
    
          <p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>
    
          <p>CSS 
    
          <p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>
    
          <p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>
    
          <p>JavaScript 
    
          <p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>
    
          <p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>
    
          <hr>
    
          <h4><u>Social Media Links</u></h4>
    
          <div class="social">
            <!-- images on row 1 - top 3px left 4px   - increment left by 27px   for the next one -->
            <!-- images on row 2 - top 30px left 4px  - increment left by 27px for the next one -->
            <!-- images on row 3 - top 57px left 4px  - increment left by 27px for the next one -->
            <!-- images on the next row - increment top by 27px for the next row -->
            <a href="http://facebook.com" title="Face Book"  style="width: 23px; height: 23px; border: 0; position: absolute; top: 3px; left: 4px;"></a> 
    
          </div>
        </section>
      </aside>
    
    </div>
    
    <!-- Your code ends here -->
    <!-- Defining Footer -->
    <div id="footer">
    
      <script>
        var dt=new Date(document.lastModified);   //Get document last modified date
        document.write('This page was last updated on '+dt.toLocaleString()) 
      </script>
    
    </div>

    • <Abschnitt style=“display:flex“> <Artikel></Artikel><neben></neben> </section> For the win.. danke.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.