BinaryDevelop
  1. ホーム
  2. css

[解決済み】サイドバーの位置を変更する

2022-01-25 14:38:29

質問内容

HTMLとCSSの練習を始めてまだ1年ちょっとです。明らかに学ぶべきことがたくさんあります。自分のサイトのリデザインを始めたとき、利用可能なテンプレートを使用しました。サイドバー以外のほぼ全てを変更しました。サイドバーが左側にあるのですが、右側にしたいのです、その方がきれいに見えると思うからです。サイドバーのフロートを左から右に変更しました。コンテンツはフロートを右から左に変更しました。ただ、これでは説明できない問題がたくさん発生し、どう修正したらいいのかわからない。cssはかなり弄りました。何が間違っているのか、何を変えようと思っていないのか、変える必要があるのか、ご教授ください。私はこれをフィドルで遊びました、そして、それは私の変更とここにあります（あなたが見ることができるように、私はどこにも行きませんでした）。 フィドルの場合

これが私のオリジナルです。

HTML 

<body>
 <div id="wrapper">
  <div id="header">
  <!-- end div#logo -->
  <div id="menu">
   <ul style="
    overflow: hidden;
     width: 892px;
     /* text-align: center; */
     margin: 0 auto;
">
    <li id="logo"></li>
    <li><a href="/index.html">Home</a></li>
    <li><a href="/games.html">Games</a></li>
  </ul>
 </div>
 <!-- end div#menu --> 
 </div>
 <!-- end div#header -->
 <div id="page">
<div id="page-bgtop">
  <div id="content">
    <!-- InstanceBeginEditable name="Page Content" --><div class="post">
      <h2 class="title"><a href="#">New Site Update!</a></h2>
      <p class="byline">Posted by Nicholas Maguire</p>
      <div class="entry">
        <p>&nbsp; This is the editable area.</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
      </div>

    </div><!-- InstanceEndEditable -->
  </div>
  <!-- end div#content -->
  <div id="sidebar">
    <ul>
      <li id="search">
        <h2>Search</h2>
        <form method="get" action="">
          <fieldset>
            <input type="text" id="seach-text" name="s" value="" />
            <input type="submit" id="search-submit" value="Search" />
          </fieldset>
        </form>
      </li>
      <li>
        <h2>Newest Games</h2>
        <ul>
          <li><a href="games/atv-destroyer.html">ATV Destoyer</a></li>
          <li><a href="games/army-driver.html">Army Driver</a></li>
          <li><a href="games/arkanoid.html">Arkanoid</a></li>
          <li><a href="games/amazing-football.html">Amazing Football</a></li>
          <li><a href="games/alien-vs-predator.html">Alien Vs Predator</a></li>
          <li><a href="games/airport-madness.html">Airport Madness</a></li>
          <li><a href="games/age-of-war.html">Age of War</a></li>
        </ul>
      </li>
      <li>
        <h2>Contact Me</h2>
        <ul>
          <li><a href="feedback.html">Contact Form</a></li>
          <li><a href="feedback.html">Requests</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <!-- end div#sidebar -->
  <div style="clear: both; height: 1px"></div>
</div>
</div>
<!-- end div#page --> 
</div>
<!-- end div#wrapper -->
<div id="footer">
<p id="legal">Copyright &copy; 2014 Crazy Block. All Rights Reserved. </p>
<p id="links"><a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a></p>
 </div>
<!-- end div#footer -->
</body>

CSS 

{
margin: 0;
padding: 0;
}

body {
background: #E9E9E9;
text-align: justify;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #757E82;
margin: 0;
}

h1, h2, h3 {
color: #AA2808;
}

h1 {
}

h2 {
}

h3 {
}

p, blockquote, ul, ol {
margin-bottom: 20px;
line-height: 2em;
}

p {
}

blockquote {
}

ul, ol, li {
margin: 0px;
padding: 0px;
list-style: none;
}

a {
text-decoration: underline;
color: #1692ef;
}

a:hover {
text-decoration: none;
color: #165bef;
}

/* Wrapper */

#wrapper {
}

/* Header */

#header{
width: 100%;
height: 91px;
margin: 0;
top: 0;
}

/* Logo */

#logo {
float: left;
width: 270px;
height: 76px;
margin: 0px;
padding: 15px 0px 0px;
margin-left: 27%;
}

#logo h1 {
margin: 0;
padding: 0;
font: normal 36px Georgia, "Times New Roman", Times, serif;
}

#logo h2 {
margin: -2px 0 0 0;
padding: 0;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 10px;
font-weight: bold;
color: #444444;
}

#logo h2 a {
color: #9AA9B1;
}

#logo a {
text-decoration: none;
color: #165bef;
}

/* Menu */

#menu {
float: right;
width: 100%;
height: 54px;
margin-top: 0;
background: #ffffff url("/images/menu_bar.jpg") repeat-x left top;
position:fixed;
}

#menu ul {
overflow: hidden;
width: 892px;
margin: 0 auto;
padding: 0 30px;
list-style: none;
line-height: normal;
}

#menu li {
display: inline;
text-align: center;
}

#menu a {
display: block;
float: left;
height: 36px;
padding: 18px 20px 0px 20px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #ffffff;
}

li#logo {
height: 52px;
width: 52px;
background: url('/images/cb_logo.png') no-repeat;
margin-top: 1px;
margin-right: 1px;
margin-left: 1px;
}
#menu a:hover, #menu .active a {
background: #1687ef;
color: #FFFFFF;
}

/* Search */

#search {
height: 45px;
padding: 0px 0px 40px 0px;
}

#search form {
margin: 0;
padding: 12px 0px 0 0;
}

#search fieldset {
margin: 0;
padding: 0;
border: none;
}

#search input {
float: left;
font: 12px Georgia, "Times New Roman", Times, serif;
}

#search-text {
width: 120px;
height: 18px;
padding: 3px 0 0 5px;
border: 1px solid #000000;
color: #000000;
}

#search-submit {
height: 21px;
margin-left: 10px;
padding: 0px 2px;
border: none;
background: #000000;
color: #FFFFFF;
}

/* Page */

#page {
width: 892px;
margin: 0 auto;
}

#page-bgtop {
padding: 0px 30px;
}

/* Content */

#content {
float: right;
width: 564px;
padding-top: 30px;
}
.post {
margin: 0px 0px 30px 0px;
}

.post .title {
margin: 0px;
padding: 0px 0px 5px 0px;
color: #1f201d;
}

.post .title a {
padding: 4px 35px 4px 15px;
background-color: #1535EF;
text-decoration: none;
font-weight: normal;
color: #FFFFFF;
}

.post .entry {
}

.post img {
float: left;
padding: 15px 0px;
}

.post .meta {
text-align: right;
padding-top: 20px;
border-bottom: 1px solid #E5E5E5;
font-weight: bold;
color: #202020;
}

.post .byline {
float: right;
margin-top: -30px;
font-size: 12px;
color: #5E5E5E;
}

/* Sidebar */

#sidebar {
float: left;
width: 208px;
padding-top: 30px;
background-color:#D2D2D2;
margin-left:initial;
position: fixed;
}

#sidebar ul {
margin: 0;
padding: 10px;
list-style: none;
line-height: normal;
}

#sidebar li {
margin-bottom: 1px;
}

#sidebar li ul {
margin: 0px;
padding: 0px 0px 40px 0px;
}

#sidebar li li {
margin: 0;
padding: 9px 0px;
border: none;
background: url(images/img07.jpg) repeat-x left bottom;
}

#sidebar h2 {
margin: 0px;
padding: 0px;
border-bottom: 2px solid #EBEBEB;
font-size: 160%;
font-weight: normal;
color: #454E55;
}

#sidebar h3 {
font-size: 77%;
color: #454E55;
}

#sidebar p {
margin: 0;
line-height: normal;
color: #0038ff;
}

#sidebar a {
border: none;
text-decoration: none;
}

#sidebar a:hover {
text-decoration: underline;
}

/* Submenu */

#submenu {
}

/* News */

#news {
}

#news a {
font-size: 85%;
}

解決するには？

これを試してみてください。

プレ #sidebar { float: left; width: 208px; padding-top: 30px; background-color:#D2D2D2; margin-left:initial; /*position: fixed;*/ //remove it } #content { float: left; // change right to left width: 564px; padding-top: 30px; }

フィドル

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します