Wie mache ich Header-Titel nach oben?

Question

Ich kann nicht herausfinden, wie man diesen Header-Titel an die Spitze kleben. Ich möchte, dass es den oberen Bereich sowie links & rechts füllt. Kann jemand mit CSS-Superskills helfen?

Bitte beachten Sie, dass ich immer noch die Tabellenwerte in der Mitte halten möchte, und ich möchte die Tabelle auffüllen.

#search input{ 
 
    width: 100%; 
 
} 
 

 
#activities { 
 
    top: 0; 
 
    float: right; 
 
    border: 0 none; 
 
    border-radius: 3px; 
 
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.3); 
 
    padding: 20px; 
 
    margin: 2%; 
 
    position: relative; 
 
} 
 
table { 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
}

<div id="activities"> 
 
        <h2 style="background:#0094ff;color:white;width: 100%;padding: 4px;position: relative;">Div Title</h2> 
 
        <form id="search"> 
 
         <input name="query" placeholder="Search..."> 
 
        </form> 
 
        <table> 
 
        <tbody> 
 
        <tr> 
 
         <td> 
 
          Fotboll 4v4 
 
         </td><td> 
 
          0.3 km 
 
         </td> 
 
        </tr><tr> 
 
         <td> 
 
          Brännboll 
 
         </td><td> 
 
          1.2 km 
 
         </td> 
 
        </tr><tr> 
 
         <td> 
 
          Badminton 2v2 
 
         </td><td> 
 
          1.5 km 
 
         </td> 
 
        </tr><tr> 
 
         <td> 
 
          Gruppmöte 
 
         </td><td> 
 
          2.2 km 
 
         </td> 
 
        </tr> 
 
        </tbody> 
 
       </table> 
 
       </div>

Oder Demo hier: https://jsfiddle.net/a2uqh6eu/

Answer 1

Ihr Div Title hat Ereignis nicht nehmen Sie die ganze Breite Sie es auf 100%, warum gesetzt? Weil Ihre Behälter Polsterung verwendet, Polsterung der Raum Ihrer Inhalte an die Grenze ist, werfen Sie einen Blick auf diesen Link helfen könnte: https://www.w3schools.com/css/css_boxmodel.asp

So entfernte ich Ihre padding: 20px aus dem Behälter, und fügte hinzu, eine Klasse .content Ihre Inhalte zu wickeln und hinzufügen Polsterung dort:

.content { 
    padding: 0 20px 20px; 20px 
} 

nun eine Klasse für div-Titel mit margin-top: 0; läßt es bleiben oben und width: 100%; arbeiten nun die gesamte Breite des Behälters zu nehmen. Verwenden Sie auch text-align: center;, um den Text zu zentrieren.

.div-title { 
    background: #0094ff; 
    color: white; 
    width: 100%; 
    position: relative; 
    text-align: center; 
    margin-top: 0; 
} 

#search input { 
 
    width: 100%; 
 
} 
 

 
#activities { 
 
    top: 0; 
 
    float: right; 
 
    border: 0 none; 
 
    border-radius: 3px; 
 
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.3); 
 
    position: relative; 
 
} 
 

 
table { 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 

 
.div-title { 
 
    background: #0094ff; 
 
    color: white; 
 
    width: 100%; 
 
    position: relative; 
 
    text-align: center; 
 
    margin-top: 0; 
 
} 
 

 
.content { 
 
    padding: 0 20px 20px; 20px 
 
}

<div id="activities"> 
 
    <h2 class="div-title">Div Title</h2> 
 
    <div class="content"> 
 
    <form id="search"> 
 
    <input name="query" placeholder="Search..."> 
 
    </form> 
 
    <table> 
 
    <tbody> 
 
     <tr> 
 
     <td> 
 
      Fotboll 4v4 
 
     </td> 
 
     <td> 
 
      0.3 km 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      Brännboll 
 
     </td> 
 
     <td> 
 
      1.2 km 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      Badminton 2v2 
 
     </td> 
 
     <td> 
 
      1.5 km 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      Gruppmöte 
 
     </td> 
 
     <td> 
 
      2.2 km 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
    </div> 
 
</div>

Answer 2

Gebrauchsstellung: fixed; auf Ihre #Aktivitäten div

Um die Tabelle in der Mitte zu halten, wie Sie es sagen, müssen Sie wahrscheinlich aus dem #activities Div nehmen.

Answer 3

#activities { 
    padding-top: 0; 
} 

#activities h2 { 
    margin-top: 0; 
} 

Answer 4

können Sie verwenden position: sticky Eigentum auf Ihrer #activities.

Seien Sie vorsichtig, es ist nicht implementiert in all web browsers. Sie können jedoch this polyfill: https://github.com/filamentgroup/fixed-sticky für diejenigen verwenden, die die Eigenschaft nicht unterstützen.

Hoffnung, die Ihnen helfen,)

Answer 5

Hmm ... wenn ich das richtig verstehe, wollen Sie Ihre DIV am oberen Rand der Seite immer bleiben?

Versuchen Sie, position: relative; zu position: fixed; zu ändern. Das kann erreichen, was Sie brauchen.

Answer 6

Ich glaube, Sie die Marge und Polsterung an den body Element entfernen möchten, fügen Sie diese in die CSS-Datei

body { padding:0;margin:0;} 

oder gerade Position hinzufügen absolut activities und right:0

#activities { position:absolute;right:0;}