1. дома
  2. Вопрос и ответ
  3. Изменение положения боковой панели

Изменение положения боковой панели

2015-01-13 9 views
1

Я занимаюсь только HTML и CSS уже более года. У меня, очевидно, есть чему поучиться. Когда я начал перепроектировать мой сайт, я использовал доступный шаблон. Я изменил почти все, кроме боковой панели. У него боковая панель слева, и я хочу, чтобы она была справа, потому что я полагаю, что это будет выглядеть лучше. Я изменил float слева направо для боковой панели. Я изменил float справа налево для контента. Это просто вызывает множество проблем, которые я не могу объяснить, и я не знаю, как это исправить. Я играл с большим количеством css. Пожалуйста, помогите мне понять, что я делаю неправильно, и что я не думаю об изменении, которое нужно изменить. Я играл с этим на скрипке, и здесь с моими изменениями (как вы можете видеть, я не добьюсь): The FiddleИзменение положения боковой панели

Вот моего оригинал:

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%; 
}

источник

2015-01-13 WinPhan254

+0

вы можете изменить поплавок слева направо и наоборот, а также сделать '#sidebar {float: right; right: 10px;} ' – Afsar

ответ

0

Попробуйте это,

#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; 
}

Fiddle

источник

2015-01-13 05:03:01

0

Когда вы использовали Position атрибут в CSS float атрибут не будет работать. Поэтому вместо поплавка right:0; см. Ниже код.

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

    #content { 
    float: left; 
    width: 564px; 
    padding-top: 30px; 
    }

и обеспечивает 100% width к внутреннему (р, h2, дела), чтобы они обернуть внутри #content div.

источник

2015-01-13 05:16:14 Rahul

Смежные вопросы

 Смежные вопросы