0
私はGoogleホームページを再作成しようとしていますが、いくつかの問題で苦労しています。Googleホームページを再作成するレイアウトの問題
フッタはちょっと高めですが、高さの数字を追加しようとすると画面が大きくなります。また、検索ボタンが検索ボックスと重なっているように見えます。私のブラウザでは、それは大丈夫だと思うが、私はそれを下にとどまるようにする方法がわからない。
どうすれば実現できますか？フッターの高さを低くするためにposition: fixedとheight: 40pxへ
body {
background-color: #fff;
font-family: arial, sans-serif;
font-size: small;
}
ul li img {
width: 25px;
height: auto;
}
.nav {
float: right;
height: 15px;
letter-spacing: .5px;
font-weight: lighter;
margin-right: 20px;
}
a {
text-decoration: none;
color: black;
}
#sign-in {
background-color: #4285f4;
color: #fff;
padding: 5px 10px;
border-radius: 3px;
font-weight: bold;
}
li {
display: inline-block;
margin: 10px;
vertical-align: center;
}
#logo {
width: 272px;
height: 92px;
margin-left: 532px;
margin-top: 190px;
}
#input {
display: inline-block;
margin: 0 auto;
}
form input {
border: solid 1px #e5e5e5;
height: 35px;
width: 550px;
left: 30%;
position: absolute;
margin-top: 18px;
}
form input:hover {
border: solid 1px #aba2a1;
}
form input:active {
border: solid 0.5px #4285f4;
}
#left.nav {
margin-bottom: 0;
}
footer {
position: fixed;
}
.Search {
position: absolute;
display: inline-block;
top: 60%;
left: 41%;
border: none;
}
#gs {
float: left;
}
#lucky {
float: right;
margin-left: 15px;
}
button {
padding: 10px;
border: none;
background-color: #f1f1f1;
color: #757575;
font-weight: bold;
border-radius: 2px;
}
button:hover {
border: solid 1px #d7d7d7;
font-weight: bolder;
color: black;
}
.footer {
background-color: #f2f2f2;
border-top: solid 1px #E5E5E5;
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: auto;
}
#left-nav {
float: left;
}
#right-nav {
float: right;
margin-right: 25px;
}
.footer ul {
color: #757575;
}
.footer ul li {
padding-left: 8px;
}<div class="container">
<header>
<div class="nav">
<ul>
<li><a href="#">Gmail</a>
</li>
<li><a href="#">Images</a>
</li>
<li>
<a href="#" img src="http://www.englewoodschools.net/cms/lib8/CO01900647/Centricity/Domain/1009/GoogleAppsIcon.png" alt="google-apps-logo"></a>
</li>
<li><a href="#" id="sign-in">Sign In</a>
</li>
</ul>
</div>
</header>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" id="logo" alt="google">
<form>
<input type="text" name="input">
</form>
<div class="Search">
<button type="button" id="gs">Google Search</button>
<button type="button" id="lucky">I'm Feeling Lucky</button>
</div>
</div>
<div class="footer">
<div id="left-nav">
<ul>
<li><a href="">Advertising</a>
</li>
<li><a href="">Business</a>
</li>
<li><a href="">About</a>
</li>
</ul>
</div>
<div id="right-nav">
<ul>
<li><a href="">Privacy</a>
</li>
<li><a href="">Terms</a>
</li>
<li><a href="">Settings</a>
</li>
</ul>
</div>
</div>
ストップ ''マージンマージンleft'トライ使用を使用して：ブロックコンテンツ – aahhaa
をセンタリングする0 auto'それは、良いように見えます！ –