WordPress - форум поддержки пользователей | русский ВордПресс

Помощь пользователям русского ВордПресс (WordPress)

Вы не зашли.

Объявление

#1 16.01.2009 22:25:53

krieg
Блогер
Зарегистрирован: 26.10.2008
Сообщений: 25

Перенести сайдбар в другую сторону

Собственно. суть вопроса в названии темы. Сайдбар сейчас справа, а нужно чтобы был слева. Как это сделать ? Заранее спасибо.

Неактивен

 

#2 17.01.2009 08:10:57

komarik
Гуру-блогер
Зарегистрирован: 20.03.2008
Сообщений: 525

Re: Перенести сайдбар в другую сторону

style.css


Запрещено писать в ЛС о WP (_!_) | На этом форуме я только в курилке

Неактивен

 

#3 17.01.2009 08:23:51

AlexPTS
недоспавший
Откуда: Пенза
Зарегистрирован: 23.07.2008
Сообщений: 1734
Вебсайт

Re: Перенести сайдбар в другую сторону

Оставьте ссылку на ваш сайт. Тогда можно будет сказать точно, чем лечить вашу болезнь.
Возможные решения: изменить значения float на left в css для блока сайдбара или сделать в шаблоне вывод сайдбара до вывода блока с контентом.


Оказываю услуги по wordpress. Wordpress глазами пользователя - http://my-wordpress.ru | Личный блог - http://alexpts.ru

Неактивен

 

#4 17.01.2009 11:02:10

Novitsky
Продвинутый блогер
Откуда: Москва
Зарегистрирован: 16.01.2009
Сообщений: 136

Re: Перенести сайдбар в другую сторону

Всё правильно, надо использовать float.
Структура сайта должна быть, примерно такая:

Код:

<body>
   <div id="header">
   </div>

   <div id="center">
      <div id="content">
         Основная часть с контентом
      </div>

      <div id="sidebar">
      </div>
   </div>

   <div id="footer">
   </div>
</body>

А CSS:

Код:

#center {
   margin:0 auto;
   width:780px
}
#content {
   float:right;
   width:520px
}
#sidebar {
   float:left;
   width:260px
}

WordPress 4.4.2 RUS

Неактивен

 

#5 17.01.2009 14:42:45

krieg
Блогер
Зарегистрирован: 26.10.2008
Сообщений: 25

Re: Перенести сайдбар в другую сторону

Не помогло. Сделал все точно как вы описали но получилась каша. У меня там кроме content есть еще content left и content right.

Попробовал вывести сайдбар до контента. Сайдбар хорошо лег в правую сторону, но контент опустился даже ниже уровня футера. http://justindie.ru/ - вот можете посмотреть сами. Осталось сделать последний шаг, чтобы контент был справа от сайдбара, но какой ? Вы уж простите меня, в html я не ас. Прочитал пару учебников и на этом все. Надеюсь на вашу помощь

Неактивен

 

#6 17.01.2009 15:15:23

Novitsky
Продвинутый блогер
Откуда: Москва
Зарегистрирован: 16.01.2009
Сообщений: 136

Re: Перенести сайдбар в другую сторону

Попробуйте в Вашем CSS:

Код:

/* Mainbar */
.mainbar {
    float:left; ЗАМЕНИТЬ НА float:right;
    width:669px;
    overflow:hidden;
    background:url(images/mainbar_body.jpg) top left repeat;
    display:inline;
    margin:13px 0 20px 22px;
}

WordPress 4.4.2 RUS

Неактивен

 

#7 17.01.2009 15:37:44

krieg
Блогер
Зарегистрирован: 26.10.2008
Сообщений: 25

Re: Перенести сайдбар в другую сторону

Майнбар хорошо лег вправо, но по прежнему лежит под футером.

Неактивен

 

#8 17.01.2009 15:53:57

AlexPTS
недоспавший
Откуда: Пенза
Зарегистрирован: 23.07.2008
Сообщений: 1734
Вебсайт

Re: Перенести сайдбар в другую сторону

Могу помочь все поправить, пишите в личку. Или же верните все как было в оригинале.


Оказываю услуги по wordpress. Wordpress глазами пользователя - http://my-wordpress.ru | Личный блог - http://alexpts.ru

Неактивен

 

#9 17.01.2009 16:41:49

Novitsky
Продвинутый блогер
Откуда: Москва
Зарегистрирован: 16.01.2009
Сообщений: 136

Re: Перенести сайдбар в другую сторону

krieg написал:

Майнбар хорошо лег вправо, но по прежнему лежит под футером.

Такое может происходить, если суммарная ширина сайдбара и майнбара больше ширины content, content_left или content_right (в зависимости от того, в каком из блоков лежат сайдбар и майнбар).


WordPress 4.4.2 RUS

Неактивен

 

#10 17.01.2009 19:14:25

krieg
Блогер
Зарегистрирован: 26.10.2008
Сообщений: 25

Re: Перенести сайдбар в другую сторону

Ширина у content , content_left  и content_right  указана в css  процентами. Везде по 100.

У Mainbar, mainbar_top , mainbar_bottom ширина 669px , а у mainbar_inner 560 px
Ширина сайдбара 270 px

Неактивен

 

#11 18.01.2009 02:32:05

Novitsky
Продвинутый блогер
Откуда: Москва
Зарегистрирован: 16.01.2009
Сообщений: 136

Re: Перенести сайдбар в другую сторону

Вообще, по хорошему счёту, весь этот мусор из кода надо убрать.
Начиная с этого места <div class="content"> лучше сделать так:

Код:

<div class="content">
   <div class="sidebar">
      Всё, что находится в sidebar'е...
   </div>

   <div class="mainbar">
      Всё, что находится в mainbar'е...
   </div>
</div>

И не надо лишних div'ов.

Теперь, что касается CSS. Если у .wrap ширина (width) 1000px, то ширина .sidebar и .mainbar не должна в сумме превышать 1000px, иначе блок, который идёт вторым в коде, будет съезжать вниз.
Пример:

Код:

.sidebar {
   float:left;
   width:300px
}
.mainbar {
   float:right;
   width:700px
}

Причём, если у блока .wrap имеются внутренние боковые поля (padding-left и padding-right, а равно как и padding:10px 20px 10px 20px), а у блоков .sidebar и .mainbar, и внутренние поля, и внешние отступы (margin-left и margin-right, а равно как и margin:10px 20px 10px 20px), то величину этих полей и отступов необходимо вычесть из ширины блоков .sidebar и .mainbar. Кстати, тоже касается и border'ов.
Пример:

Код:

.wrap {
   padding:10px 20px 10px 20px;
   width:958px; - величина изменилась
   border:1px solid #ccc
}
.sidebar {
   float:left;
   margin:10px 20px 10px 20px;
   padding:10px 20px 10px 20px;
   width:198px; - величина изменилась
   border-right:1px solid #ccc
}
.mainbar {
   float:right;
   margin:10px 20px 10px 20px;
   padding:10px 20px 10px 20px;
   width:598px; - величина изменилась
   border-left:1px solid #ccc
}

http://www.com3.ru/files/images/sample.gif
В противном случае .mainbar всегда будет съезжать вниз!


WordPress 4.4.2 RUS

Неактивен

 

#12 18.01.2009 14:49:42

krieg
Блогер
Зарегистрирован: 26.10.2008
Сообщений: 25

Re: Перенести сайдбар в другую сторону

у меня ведь даже без вычета padding  и margin  сайдбар с майнбаром не дают в сумме 1000 ( сайдбар 270 майнбар 669 ) , а у .wrap нету  paddding в коде

Может я что не так посчитал. Вот куски кода.

.wrap
{
width:1000px;
margin:0 auto;
overflow:hidden;
}

/* Mainbar */
.mainbar
{
float:right;
width:669px;
overflow:hidden;
background:url(images/mainbar_body.jpg) top left repeat;
display:inline;
margin:13px 0 20px 22px;
}
.mainbar_top
{
width:669px;
overflow:hidden;
background:url(images/mainbar_top.jpg) top left no-repeat;
}
.mainbar_bottom
{
width:669px;
overflow:hidden;
background:url(images/mainbar_bottom.jpg) bottom left no-repeat;
padding:40px 0;
}
.mainbar_inner
{
width:560px;
margin:0 0 0 70px;
}

.sidebar
{
float:left;
width:270px;
overflow:hidden;
margin:22px 0 0 10px;

}
.sidebar ul, .sidebar ul li, .sidebar ul li ul, .sidebar ul li ul li
{
margin:0;
padding:0;
list-style:none;
border:0;
background:none;
overflow:hidden;
}
.sidebar ul li, .sidebar ul, .sidebar ul li ul
{
display:block;
}
.sidebar ul li
{
width:268px;
border:1px dashed #99936f;
background:url(images/sidebar_body.gif) top left repeat;
margin:0 0 10px 0;
overflow:hidden;
}
.sidebar ul li h2
{
width:268px;
height:33px;
background:url(images/sidebar_h2.gif) top left repeat-x;
margin:11px 0 20px 0;
color:#c7d1db;
text-transform:uppercase;
font: bold 24px/33px "Trebuchet MS", Helvetica, sans-serif;
padding:0 0 0 18px;
text-align: left;

}
.sidebar ul li ul
{
width:232px;
margin:0 0 0px 0;

}
.sidebar ul li ul li
{
margin:0 0 10px 18px;
padding: 0 0 0 13px;
background:url(images/bullet.gif) left no-repeat

Отредактированно krieg (18.01.2009 15:06:39)

Неактивен

 

#13 18.01.2009 17:47:59

krieg
Блогер
Зарегистрирован: 26.10.2008
Сообщений: 25

Re: Перенести сайдбар в другую сторону

Все таки сделал правильный перенос. Спасибо за помощь.

Неактивен

 

#14 28.06.2011 00:00:29

veterenator
Новичок
Зарегистрирован: 16.06.2011
Сообщений: 2

Re: Перенести сайдбар в другую сторону

а в моем шаблоне нет .mainbar
как увеличить .sidebar нашел

Spoiler:


div.sidebar {
float:left;
overflow:hidden;
width:170px;
padding:0 0 0 10px;
}

а как уменьшить само тело?

вот мой CSS

Spoiler:


body {
font-family:"Trebuchet MS", Helvetica, sans-serif;
font-size:13px;
background:#f794a2 url(images/bg.png) repeat 0 0;
margin:0;
padding:0;
line-height:16px;
color:#777;
}

#wrapper {
width:992px;
margin:0 auto;
padding:0 6px;
overflow:hidden;
background:url(images/border.png) repeat 0 0;
}

#inner {
background:#fff url(images/side.gif) repeat-y -67px 0;
overflow:hidden;
padding:0 1px;
width:990px;
}

div#container {
float:right;
margin:0 0 0 -200px;
width:100%;
}

div#content {
margin:0 0 0 200px;
padding-bottom:10px;
}

div.sidebar {
float:left;
overflow:hidden;
width:170px;
padding:0 0 0 10px;
}

div#secondary {
clear:left;
}

div#footer {
clear:both;
width:100%;
height:50px;
overflow:hidden;
background:#f75878 url(images/footer.png) repeat-x 0 0;

border-top:1px solid #fff;
line-height:50px;
letter-spacing:3px;
font-size:14px;
}

#footer a {
color:#000;
}

#footer a:hover {
text-decoration:none;
}

#header {
background:url(images/header.jpg) no-repeat 0 0;
height:345px;
overflow:hidden;
position:relative;
}

#access {
border-bottom:1px solid #fff;
}

#menuborder{
background:url(images/border.png) repeat 0 0;
height:6px;
position:absolute;
bottom:0px;
left:0px;
width:990px;
}

h1#blog-title {
font-size:30px;
margin:8px 0 0px;
padding:0;
line-height:40px;
font-weight:bold;
letter-spacing:-3px;
text-align:center;
}

h1#blog-title a{
color:#e14060;
text-decoration:none;
}

#blog-description {
color:#e14060;
letter-spacing:5px;
font-size:20px;
font-weight:bold;
line-height:18px;
text-align:left;
}

#logobox {
background:url(images/logobox.png) no-repeat 0 0;
width:477px;
height:95px;
position:absolute;
top:50px;
left:10px;
}

a {
color:#000;
}

a:hover {
text-decoration:none;
}

/* Content */
.entry-content {
overflow:hidden;
}

.entry-content p {
margin:10px 0;
}

.post {
margin:0 5px 10px 0;
padding:0 0 10px;
border-bottom:1px solid #efefef;
}

h2.entry-title {
font-size:14px;
margin:0 0 2px;
color:#e14060;
}

h2.entry-title a{
text-decoration:none;
color:#e14060;
}

.entry-meta {
font-size:10px;
color:#fff;
margin-top:10px;
clear:both;
background:#f68a9c;
padding:5px;
border-radius: 5px;
-moz-border-radius: 5px;
-opera-border-radius: 5px;
-webkit-border-radius: 5px;
}

.entry-meta a {
color:#fff;
}

.entry-date {
font-size:11px;
}

.post blockquote {
background: url(images/quote.png) no-repeat 0 3px;
font-style: italic;
margin: 10px;
padding: 5px 5px 5px 35px;
}

.entry-content h1 {font-size:18px;}
.entry-content h2 {font-size:16px;}
.entry-content h3 {font-size:14px;}
.entry-content h4 {font-size:12px;}
.entry-content h5 {font-size:10px;}

h2.page-title {
text-align:center;
font-size:18px;
border-bottom:1px dotted #dcdcdc;
padding-bottom:5px;
margin-right:5px;
}

/* elements */

ul {
margin: 0 0 18px 2.5em;
}

ol {
margin: 0 0 18px 2.5em;
}

ul {
list-style:disc;
}

ol {
list-style-type: decimal;
}

ol ol {
list-style:upper-alpha;
}

ol ol ol {
list-style:lower-roman;
}

ol ol ol ol {
list-style:lower-alpha;
}

ul ul, ol ol, ul ol, ol ul {
margin-bottom:0;
}

dl    {
margin:0 1.5em;
}

dt {
font-weight:bold;
}

dd {
margin-bottom:18px;
}

strong {
font-weight: bold;
}

cite, em, i {
font-style: italic;
}

blockquote em, blockquote i, blockquote cite {
font-style:normal;
}

pre {
font:11px Monaco, monospace;
line-height:18px;
margin-bottom:18px;
}

code {
font:11px Monaco, monospace;
}

abbr, acronym {
border-bottom:1px dotted #333;
cursor: help;
}

ins {
text-decoration:none;
}

sup,
sub {
height: 0;
line-height: 1;
vertical-align: baseline;
position: relative;
}

sup {
bottom: 1ex;
}

sub {
top: .5ex;
}

/*comments*/

div.comments p {
margin-top:10px;
}

#comments-list {
margin:25px 5px 0 0;
}

#comments-list h3, #respond h3 {
font-size:18px;
margin:0 0 10px;
}

div.comments ol {
list-style:none;
margin:0;
padding:0;
}

div.comments ol li {
border-bottom:1px solid #efefef;
padding-bottom:25px;
margin:0 0 25px;
}

img.avatar {
border:1px solid #dcdcdc;
padding:1px;
}

.comment-author span {font-size:15px;}

.comment-meta {
font-size:11px;
margin:2px 0;
clear:both;
}

/* Just some example content */
div.skip-link {
position:absolute;
right:1em;
top:1em;
}

div#menu {
background:#f898a7 url(images/menu.png) repeat-x 0 0;
height:38px;
margin:0;
width:100%;
overflow:hidden;
}

div#menu ul li {
padding:0 2px 0 0;
margin:0;
background:url(images/div.png) no-repeat right 0;
}

div#menu ul ul li {
padding:0 0 0 0px;
margin:0;
background:#ea506e;
}

div#menu ul ul li a {color:#fff;}
div#menu ul ul ul li a {color:#fff;}

div#menu ul,div#menu ul ul {
line-height:38px;
list-style:none;
margin:0;
padding:0;
}

div#menu ul li a {
display:block;
padding:0 15px;
text-decoration:none;
color:#ec5d79;
font-weight:bold;
}

div#menu ul li.current_page_item a, div#menu ul li a:hover {
color:#fff;
background:url(images/menu-active.png) repeat-x 0 0;}

div#menu ul ul ul a {
font-style:italic;
}

div#menu ul li ul {
left:-999em;
position:absolute;
}

div#menu ul li:hover ul {
left:auto;
}

.entry-title,.entry-meta {
clear:both;
}

div#container,div#primary {
margin-top:2em;
}

form#commentform .form-label {
margin:1em 0 0;
}

form#commentform span.required {
background:#fff;
color:#c30;
}

form#commentform,form#commentform p {
padding:0;
}

input#author,input#email,input#url,textarea#comment {
padding:0.2em;
}


textarea#comment {
height:13em;
margin:0 0 0.5em;
overflow:auto;
width:66%;
}

.alignright,img.alignright{
float:right;
margin:1em 0 0 1em;
}

.alignleft,img.alignleft{
float:left;
margin:0.4em 1em 0 0;
}

.aligncenter,img.aligncenter{
display:block;
margin:1em auto;
text-align:center;
}

div.gallery {
clear:both;
height:180px;
margin:1em 0;
width:100%;
}

p.wp-caption-text{
font-style:italic;
}

div.gallery dl{
margin:1em auto;
overflow:hidden;
text-align:center;
}

div.gallery dl.gallery-columns-1 {
width:100%;
}

div.gallery dl.gallery-columns-2 {
width:49%;
}

div.gallery dl.gallery-columns-3 {
width:33%;
}

div.gallery dl.gallery-columns-4 {
width:24%;
}

div.gallery dl.gallery-columns-5 {
width:19%;
}

div#nav-above {
margin-bottom:1em;
font-size:10px;
text-transform:uppercase;
margin-right:5px;
}

#nav-above a {color:#b1b1b1;text-decoration:none;}

div#nav-below {
margin-top:1em;
clear:both;
margin-bottom:1em;
margin-right:5px;
}

div#nav-below a{
background:#000;
color:#fff;
font-size:11px;
text-decoration:none;
padding:5px;
border-radius: 5px;
    -moz-border-radius: 5px;
    -opera-border-radius: 5px;
    -webkit-border-radius: 5px;
}

div#nav-images {
height:150px;
margin:1em 0;
}

div.navigation {
height:1.25em;
}

div.navigation div.nav-next {
float:right;
text-align:right;
}


div.sidebar h3 {
font-size:18px;
color:#000;
}

div.sidebar ul ul a {
color:#e14060;
text-decoration:none;
background:url(images/bullet.gif) no-repeat 0 center;
padding:0 0 0 8px;
line-height:18px;
}

div.sidebar a:hover {color:#fff;}

div.sidebar input#s {
width:7em;
}

div.sidebar li {
list-style:none;
margin:0 0 20px;
}

div.sidebar li form {
margin:0.2em 0 0;
padding:0;
}

div.sidebar ul ul {
margin:0.5em 0 0 1em;
}

div.sidebar ul ul li {
list-style:none;
margin:0;
}

div.sidebar ul ul ul {
margin:0 0 0 0.5em;
}

div.sidebar ul ul ul li {
list-style:none;
}

div#menu ul li,div.gallery dl,div.navigation div.nav-previous {
float:left;
}

div#header,div#footer {
text-align:left;
}

input#author,input#email,input#url,div.navigation div {
width:50%;
}

div.gallery *,div.sidebar div,div.sidebar h3,div.sidebar ul {
margin:0;
padding:0;
}

Отредактированно veterenator (28.06.2011 00:12:04)

Неактивен

 

#15 18.11.2017 15:27:56

bb2016
Новичок
Зарегистрирован: 18.11.2017
Сообщений: 1

Re: Перенести сайдбар в другую сторону

Добрый день, у меня аналогичная проблема, нужно перенести сайт бар на другую сторону. Все вышеперечисленное пробовала, не помогает. Буду благодарна за совет

Неактивен

 

#16 26.11.2017 12:01:06

GerardoLug
Новичок
Откуда: Mauritius
Зарегистрирован: 26.11.2017
Сообщений: 5
Вебсайт

Re: Перенести сайдбар в другую сторону

online pharmacy! online pharmacies beneficial web site online pharmacies. http://pharmacyonline.bid online pharmacy


http://pharmacyonline.bid

Неактивен

 

#17 04.12.2017 05:25:50

isedova
Новичок
Зарегистрирован: 03.12.2017
Сообщений: 3
Вебсайт

Re: Перенести сайдбар в другую сторону

послушаю..пригодится

Неактивен

 

Board footer

Работает на PunBB
© Копирайт 2002–2005 Rickard Andersson