ボタンをヘッダーの右下に移動します

基本的なWebページを作成しようとしています。私はログインやサインアップのためにトップにボタンを持っていますが、私が何をしてもヘッダーの右下に移動させることはできません。彼らはたいてい中心部で終わります。私はそれらを浮かそうとしましたが、間違いなく動作しました。 CSSでのスタイリングボタンの良い方法は何ですか？ボタンをヘッダーの右下に移動します

HTML：

.clear { 
 
\t clear: both; 
 
    } 
 

 
    #container{ 
 
     margin: 0 auto; 
 
     max-width: 1200px; 
 
    } 
 
    header { 
 
     width: 94%; 
 
     padding: 3%; 
 
     background-color: #F3D22D; 
 
    } 
 
    header #title { 
 
     font-size: 50px; 
 
     color: #fff; 
 
    } 
 
    nav { 
 
     width: 97%; 
 
     background-color: #DDCFC5; 
 
     padding: 0 1.5% 0 1.5%; 
 
    } 
 
    nav ul li { 
 
     display: inline-block; 
 
     padding: 15px 1.5% 15px 1.5% ; 
 
    } 
 
    nav ul li a { 
 
     text-decoration: none; 
 
     color: #ffffff; 
 
     font-size: 1.2em; 
 
    } 
 
    nav ul li a:hover { 
 
     color: #000000; 
 
     text-decoration: none; 
 
    } 
 
    #content { 
 
     float: left; 
 
     padding: 3%; 
 
     width: 64%; 
 
    } 
 
    aside { 
 
     float: right; 
 
     padding: 3%; 
 
     width: 24%; 
 
     background-color: #DDCFC5; 
 
    } 
 
    footer{ 
 
     width: 94%; 
 
     padding: 3%; 
 
     background-color: #F3D22D; 
 
     border-top: 5px solid #DDCFC5; 
 
     color: #fff; 
 
     text-align: center; 
 
    } 
 
    @media all and (max-width : 768px) { 
 
     header { 
 
      text-align: center; 
 
     } 
 
     nav { 
 
      text-align: center; 
 
     } 
 
     #content { 
 
      width: 94%; 
 
      padding: 3%; 
 
     } 
 
     #sidebar { 
 
      width: 94%; 
 
      padding: 3%; 
 
      border-top: 3px solid #E64A19; 
 
     } 
 
    } 
 
    @media all and (max-width : 330px) { 
 
     nav ul li { 
 
      display:block; 
 
      width: 94%; 
 
     } 
 
    } 
 

 
    button { 
 
\t  background-color: #4CAF50; 
 
\t  border: none; 
 
\t  color: white; 
 
\t  padding: 15px 32px; 
 
\t  text-align: center; 
 
\t  text-decoration: none; 
 
\t  display: inline-block; 
 
\t  font-size: 16px; 
 
\t  margin: 4px 2px; 
 
\t  cursor: pointer; 
 
    } 
 

 
    #usermenu { 
 
\t  bottom: 0; 
 
\t  left: 0; 
 
    }

<!DOCTYPE html> 
 
    <html> 
 
\t  <head> 
 
\t \t <title>Website</title> 
 
\t \t <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
\t \t <link type="text/css? rel="stylesheet" href="reset.css" /> 
 
\t \t <link type="text/css" rel="stylesheet" href="style.css" /> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id="container"> 
 
\t \t \t <!-- header --> 
 
\t \t \t <header id="header"> 
 
\t \t \t \t <h1 id="title">Website</h1> 
 
\t \t \t \t <div id="usermenu"> 
 
\t \t \t \t \t <button type="button">Login</button> 
 
\t \t \t \t \t <button type="button">Sign Up</button> 
 
\t \t \t \t </div> 
 
\t \t \t </header> 
 
\t \t \t <!-- navigation --> 
 
\t \t \t <nav id="menu" class="clearfix"> 
 
\t \t \t \t <ul> 
 
\t \t \t \t \t <li><a href="#">Home</a></li> 
 
\t \t \t \t \t <li><a href="#">About</a></li> 
 
\t \t \t \t \t <li><a href="#">Contact</a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t </nav> 
 

 
\t \t \t  <!-- main content area --> 
 
\t \t \t 
 
\t \t \t  <section id="content"> 
 
\t \t \t \t  <h2>Built with HTML5 and CSS3</h2> 
 
\t \t \t \t  <p> 
 
\t \t \t \t \t  More content here................ 
 
\t \t \t \t \t  <br> 
 
\t \t \t \t \t  Hello... blah blahblah 
 
\t \t \t \t  </p> 
 
\t \t \t  </section> 
 
\t \t \t 
 
\t \t \t  <!-- sidebar --> 
 
\t \t \t  <aside id="sidebar"> 
 
\t \t \t \t  <h3>This is the sidebar</h3> 
 
\t \t \t \t  <p>content goes here...</p> 
 
\t \t \t  </aside> 
 
\t \t \t  <div class="clear"></div> 
 
\t \t \t  <!-- footer --> 
 
\t \t \t  <footer id="footer" class="clearfix"> 
 
\t \t \t \t  Copyright &copy Gregory Soble 2017 
 
\t \t \t  </footer> 
 
\t \t  </div> 
 
\t  </body> 
 
    </html>

出典

2017-07-06 Greg Soble

コードは、あなたの質問を反映するように、質問を頼まれた時に元のCSSに戻してください。このようにして、他の訪問者にとって有用なままです。ありがとうございました！ –

デフォルトで要素のpositionがtop、right、bottomの値ので、静的であり、そしてleftはまったく効果がありません。あなたは要素/要素にpositionの別の値を与えて、それらを "配置"できるようにする必要があります。

.clear { 
 
clear: both; 
 
} 
 

 
#container{ 
 
    margin: 0 auto; 
 
    max-width: 1200px; 
 
} 
 
header { 
 
    position: relative; 
 
    width: 94%; 
 
    padding: 3%; 
 
    background-color: #F3D22D; 
 
} 
 
header #title { 
 
    font-size: 50px; 
 
    color: #fff; 
 
} 
 
nav { 
 
    width: 97%; 
 
    background-color: #DDCFC5; 
 
    padding: 0 1.5% 0 1.5%; 
 
} 
 
nav ul li { 
 
    display: inline-block; 
 
    padding: 15px 1.5% 15px 1.5% ; 
 
} 
 
nav ul li a { 
 
    text-decoration: none; 
 
    color: #ffffff; 
 
    font-size: 1.2em; 
 
} 
 
nav ul li a:hover { 
 
    color: #000000; 
 
    text-decoration: none; 
 
} 
 
#content { 
 
    float: left; 
 
    padding: 3%; 
 
    width: 64%; 
 
} 
 
aside { 
 
    float: right; 
 
    padding: 3%; 
 
    width: 24%; 
 
    background-color: #DDCFC5; 
 
} 
 
footer{ 
 
    width: 94%; 
 
    padding: 3%; 
 
    background-color: #F3D22D; 
 
    border-top: 5px solid #DDCFC5; 
 
    color: #fff; 
 
    text-align: center; 
 
} 
 
@media all and (max-width : 768px) { 
 
    header { 
 
     text-align: center; 
 
    } 
 
    nav { 
 
     text-align: center; 
 
    } 
 
    #content { 
 
     width: 94%; 
 
     padding: 3%; 
 
    } 
 
    #sidebar { 
 
     width: 94%; 
 
     padding: 3%; 
 
     border-top: 3px solid #E64A19; 
 
    } 
 
} 
 
@media all and (max-width : 330px) { 
 
    nav ul li { 
 
     display:block; 
 
     width: 94%; 
 
    } 
 
} 
 

 
button { 
 
    background-color: #4CAF50; 
 
    border: none; 
 
    color: white; 
 
    padding: 15px 32px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: 16px; 
 
    margin: 4px 2px; 
 
    cursor: pointer; 
 
} 
 

 
#usermenu { 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
}

<div id="container"> 
 
     <!-- header --> 
 
     <header id="header"> 
 
      <h1 id="title">Website</h1> 
 
      <div id="usermenu"> 
 
       <button type="button">Login</button> 
 
       <button type="button">Sign Up</button> 
 
      </div> 
 
     </header> 
 
     <!-- navigation --> 
 
     <nav id="menu" class="clearfix"> 
 
      <ul> 
 
       <li><a href="#">Home</a></li> 
 
       <li><a href="#">About</a></li> 
 
       <li><a href="#">Contact</a></li> 
 
      </ul> 
 
     </nav> 
 

 
      <!-- main content area --> 
 

 
      <section id="content"> 
 
       <h2>Built with HTML5 and CSS3</h2> 
 
       <p> 
 
        More content here................ 
 
        <br> 
 
        Hello... blah blahblah 
 
       </p> 
 
      </section> 
 

 
      <!-- sidebar --> 
 
      <aside id="sidebar"> 
 
       <h3>This is the sidebar</h3> 
 
       <p>content goes here...</p> 
 
      </aside> 
 
      <div class="clear"></div> 
 
      <!-- footer --> 
 
      <footer id="footer" class="clearfix"> 
 
       Copyright &copy Gregory Soble 2017 
 
      </footer> 
 
     </div>

出典

2017-07-06 02:04:07

あなたのサンプルコードは動作しますが、私の既存のCSSで実装すると、CSSが壊れます。頭と体が重なっている。他のすべての要素の位置を保持するためにすべての要素を絶対的にする必要がありますか？ –

**すべて**の位置情報をページに追加する必要はありません。レイアウトの残りの部分を維持するために兄弟要素を配置する必要があるかもしれませんが、CSSがどのように見えるかを知らなければ、他に必要なものを教えることは不可能です。 –

Hmm。私はまだいくつかの問題を抱えています。レイアウト全体を邪魔することなく、ページの左下からボタンを取得することはできません。私はページの残りのコードを追加しました。 –

ボタンをヘッダーの右下に移動します

答えて

関連する問題