こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

ブロック表示すると重なってしまいます!!

下記のcssとHTMLでWEBサイトを昔作りました
上部に■いねずみ色のブロックを並べて表示しその下に左に
縦にリスト形式でメニューが並び右にピンクのブロックで項目を並べる
形式にしたのですが、右のブロックの項目の下にテキストで文章を入れたり
何かブロックを足そうとするとブロックが重なってしまい、
上手くできませんでした。

どのようにすればうまく行きますか?教えて下さいよろしくお願いします。

/* mycss.css */

html {
background-color: aqua;
height: 100%;
}

body{
height: 100%;
font-family: Verdana, Arial;
font-size: 14px;
}

body > #container{
height: auto;
}

#container {
min-height: 100%;
height: 100%;
width: 90%;
margin: 0 auto;
padding: 0 10px;
background-color: #fff;
box-shadow: 0 0 3px rgba(0,0,0,0.5);
}

#header {
width: 100%;
height: 80px;
background: skyblue;
border-radius: 20px;
}

#menu{
margin-bottom: 15px;
overflow: hidden;
}

#main{
overflow: hidden;
margin-bottom: 15px;
}

#contents{
float: left;
width: 25%;
font-size: 14px;
}

#contents ul {
margin-bottom: 15px;
padding: 10px;
}

#contents dl{
border-bottom: 10px;
border-top: 2px solid #ccc;
}

#contents dd{
border-top: 2px solid #ccc;
}


#contents ul>li>a{
text-decoration: none;
}

#contents ul>li:hover {
background: orange;

}

#sidebar {
float: right;
width: 70%;
}


#sidebar ul>li {
float: left;
width: 230px;
height: 25px;
font-size: 13px;
text-align: center;
padding: 4px;
background: #ffd8ff;
margin-right: 10px;
margin-bottom: 10px;
border-radius: 4px;
text-shadow: 0 1px 0 #fff;
}


#sidebar ul>li:hover {
background: #ddd;

}


#sidebar ul>li>a{
text-decoration: none;
display: block;
}

#footer{
font-size: 12px;
color: #ccc;
text-align: center;
border-top: 1px solid #ccc;
padding: 10px 0 20px;
}

#menu ul>li {
float: left;
width: 120px;
height: 25px;
font-size: 13px;
text-align: center;
padding: 2px;
background: #ccc;
margin-right: 10px;
margin-bottom: 10px;
border-radius: 4px;
text-shadow: 0 1px 0 #fff;
}

#menu ul>li:hover {
background: #ddd;

}

#menu ul>li>a{
text-decoration: none;
display: block;
}
----------以下HTML-------------------------------------------------------------------

<!DOCTYPE html>
<html lang="ja">
<head>
<meta chraset="shift-jis">
<title>ああああ</title>
<link rel="stylesheet" href="mycss.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>テストページ<A></h1>
</div>
<div id="menu">
<h2>便利リンク</h2>
<ul>
<li><a href="">Google</a></li>
<li><a href="">Youtube</a></li>
<li><a href="">【amazon】</a></li>
</ul>
</div>
<div id="main">
<div id="contents">
<dl>
<dt>検索エンジン・リアルタイム</dt>
<dd>
<ul>
<li><a href="">CEEK.JP</a></li>
<li><a href="">Google</a></li>
<li><a href="">buzztter</a></li>
</ul>
</dd>
</dl>

<dl>
<dt>SNS/検索エンジン/メール/質問サイト</dt>
<dd>
<ul>
<li><a href="">Facebook</a></li>
<li><a href=""">Excite</a></li>
<li><a href="">Baidu</a></li>
</ul>
</dd>
</dl>
</div><!-- #contents -->

<div id="sidebar">
<ul>
<li><a href=""_blank">BOOK・OFF Online</a></li>
<li><a href="" target="_blank">イーブックオフ</a></li>
<li><a href="">infoseekニュース</a></li>
</ul>
</div><!-- #sidebar -->
</div><!-- #main -->
<div id="footer">Copyright 2018</div>
</div><!-- #container -->
</body></html>

投稿日時 - 2018-07-16 07:44:45

QNo.9518680

困ってます

質問者が選んだベストアンサー

#sidebar ul>li {
float: left;
}

#sidebar ul>li {
display:inline-block;
}
にすればいいと思います。

投稿日時 - 2018-08-03 02:59:35

お礼

ありがとうございました。
出来ました。

投稿日時 - 2018-08-04 14:42:37

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)