Q&A
質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
<!DOCTYPE html>
<body> <div class="wrapper"> <header> <div class="topnavigation"> <ul class="left"> <li>I am treating</li> <li>Game</li> <li>Hobby</li> <li>Animation goods</li> <li>PC supply</li> <ul class="right"> <li class="right">Register</li> <li>Login</li> </ul><head><link rel="stylesheet" type="text/css" href=".css"></head>
</body> </html></div> <div class="top"> <h1 style="margin-left:10px;"><img src="mets.jpg"><p>Hobby Station</p> <!--<div class="sns"><img src="" class="icon"><img src=""><img src=""></div>--> </h1> </div> <div class="contents"> <div class="category"> <form action="cgi-bin/abc.cgi" method="post"> <p><label><input type="search" name="search" size="30" maxlength="255"></label><input type="submit" value="search"></p> <div class="sub"> </div> <div class="aside"> </div> <div class="categorytwo"> <div class="inner"> <p>Game</p> <p>Animation Hobby Goods</p> <p>Digital Goods</p> </div> </div> </div> <div class="centercontents"> <div class="whatsnew"> </div> </div> <div class="rightcontents"> </div> </div> </div> <footer> </footer>
body {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ebf1f6+0,abd3ee+50,89c3eb+100,d5ebfb+100 /
background: #ebf1f6; / Old browsers /
background: -moz-linear-gradient(left, #ebf1f6 0%, #abd3ee 50%, #89c3eb 100%, #d5ebfb 100%); / FF3.6-15 /
background: -webkit-linear-gradient(left, #ebf1f6 0%,#abd3ee 50%,#89c3eb 100%,#d5ebfb 100%); / Chrome10-25,Safari5.1-6 /
background: linear-gradient(to right, #ebf1f6 0%,#abd3ee 50%,#89c3eb 100%,#d5ebfb 100%); / W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=1 ); / IE6-9 */
}
.wrapper {
margin:20px;
}
img {
height:120px;
margin-bottom:15px;
display:inline;
}
.topnavigation {
height:20px;
margin:0px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,7db9e8+100 /
background: #1e5799; / Old browsers /
background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%); / FF3.6-15 /
background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%); / Chrome10-25,Safari5.1-6 /
background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%); / W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); / IE6-9 */
}
.topnavigation ul li {
margin-left:20px;
}
.topnavigation ul li {
float:left;
list-style-type:none;
font-weight:bold;
color:white;
}
.topimage {
height:150px;
}
.top {
border:solid 1px black;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,2989d8+0,7db9e8+100 /
background: #1e5799; / Old browsers /
background: -moz-linear-gradient(left, #1e5799 0%, #2989d8 0%, #7db9e8 100%); / FF3.6-15 /
background: -webkit-linear-gradient(left, #1e5799 0%,#2989d8 0%,#7db9e8 100%); / Chrome10-25,Safari5.1-6 /
background: linear-gradient(to right, #1e5799 0%,#2989d8 0%,#7db9e8 100%); / W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); / IE6-9 */
}
.top p {
color:#0000AA;
}
.top img {
width:100px;
height:100px;
float:left;
margin^top:-20px;
}
.right {
float:right;
margin-right:15px;
}
.sns {
float:right;
}
.sns img {
width:30px;height:30px;
}
/.top p {
float:left;
}/
.undernavigation {
height:30px;
background-color:blue;
clear:both;
}
.contents {
width:1250px;
height:900px;
border:1px solid black;
clear:both;
margin:5px;
}
.category {
float:left;
width:250px;
height:900px;
border:1px solid black;
background: #1e5799; /* Old browsers /
background: -moz-linear-gradient(left, #1e5799 0%, #2989d8 0%, #7db9e8 100%); / FF3.6-15 /
background: -webkit-linear-gradient(left, #1e5799 0%,#2989d8 0%,#7db9e8 100%); / Chrome10-25,Safari5.1-6 /
background: linear-gradient(to right, #1e5799 0%,#2989d8 0%,#7db9e8 100%); / W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); / IE6-9 */
padding:5px;
font-weight:bold;
margin-top:0px;
}
.inner {
width:200px;height:100px;
border:1px solid black;
padding:10px;
}
.centercontents {
margin-left:280px;
width:610px;height:900px;
border:1px solid black;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,7db9e8+0,7db9e8+0,7db9e8+49,2989d8+100,207cca+100,1e5799+100,1e5799+100 /
background: rgb(30,87,153); / Old browsers /
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(125,185,232,1) 0%, rgba(125,185,232,1) 0%, rgba(125,185,232,1) 49%, rgba(41,137,216,1) 100%, rgba(32,124,202,1) 100%, rgba(30,87,153,1) 100%, rgba(30,87,153,1) 100%); / FF3.6-15 /
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 0%,rgba(125,185,232,1) 0%,rgba(125,185,232,1) 49%,rgba(41,137,216,1) 100%,rgba(32,124,202,1) 100%,rgba(30,87,153,1) 100%,rgba(30,87,153,1) 100%); / Chrome10-25,Safari5.1-6 /
background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 0%,rgba(125,185,232,1) 0%,rgba(125,185,232,1) 49%,rgba(41,137,216,1) 100%,rgba(32,124,202,1) 100%,rgba(30,87,153,1) 100%,rgba(30,87,153,1) 100%); / W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#1e5799',GradientType=0 ); / IE6-9 */
}
.whatsnew {
width:400px;
height:250px;
border:1px solid black;
margin:10px;
}
.categorytwo {
margin-left:10px;
}
table {
width:180px;
height:800px;
border:1px solid black;
margin-left:15px;
}
table ul {
display:inline;
}
.sidebar {
width:160px;
float:left;
}
.sub {
width:520px;
}
.aside {
width:250px;
}
.rightcontents {
width:100px;
height:500px;
border:1px solid black;
}
上記は、自身で作成している html と cssのコードです。
contents内のclassをfloat leftで、順番に横に並ぶようにしています。.rightcontentsのクラスが、contents内に収まらず、下の左側に来てしまいます。どうにかcontents class内の一番右に来るようにしたいのですが、どの様に修正すればよいかアドバイスお願い致します。
回答1件
0
ちゃんと閉じていないタグが多々ありhtmlが不完全ですが、このまま使用されているのでしょうか。
構造がやや不明ですが、推察するに、.centercontents がfloatしてないので .rightcontents が回り込まない、という感じでしょうか。
.rightcontents を .centercontents の前に置いて .rightcontents に float:right を追加するか、
配置そのままなら .centercontents に float:left 、.rightcontents に float:right をそれぞれ追加します。
いずれにしても html を修正しないと不具合が続出するかと思います。
投稿2017/01/30 09:16
総合スコア251
あなたの回答
tips
プレビュー
