Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Единый форум поддержки » Корзина » Не встает правильно сайдбар

Не встает правильно сайдбар

Страница: 1

Сообщений 1 страница 13 из 13

Перевести1

  • Автор: Annet1397
  • Заслуженный
  • Зарегистрирован: Сб, 23 Авг 2008
  • Сообщений: 85
  • Уважение: +8
  • Позитив: +23
  • Последний визит:
    Чт, 17 Май 2012 14:55:59

Доброго времени суток.
Возникла такая проблема, у меня в html-верх прописан код, для таблицы, которая будет видна в самой шапке наверху. Сейчас вставила скрипт (туда же html-верх) для сайдбара с двух боков. Вроде все прописано правильно и этот скрипт работает без проблем на другом форуме. Но в сочетании с первой таблицей - получается вот это - все куда-то сдвигается.. и фон и все остальное. Можно ли как-то сделать, чтобы были и боковые сайдбары и объявление, которое наверху?
форум

код для верхнего объявленя:

Код:
<div style="position: absolute; width:210px; height:212px; top:163px; left: 76px;>
<table width="100%" border="0">
  <tbody>
    <tr>
      <td width="10%">
        <div style="height: 212px; width: 210px">
          <div align="justify">
<b>Дата & Время:</b> осень 1997; день.
<br><b>Погода:</b> Осень - эти ее мокрые дожди, сильные порывистые ветры, темные тучи, давящие на голову. Запасайтесь аспирином и зонтиками - метеочувствительным сегодня точно не повезет.
<br>
<b>События:</b> В Малфой-Мэноре Темный Лорд собирает Пожирателей Смерти, чтобы выслушать от них последние новости. Ничего не подозревающий Орден Феникса готовится к свадьбе Билла Уизли и Флер Делакур (квест: "<a href=http://repelloinimicum.mybb.ru/viewtopic.php?id=4>Глава первая. *Узнать, как всё начиналось, ещё страшней, чем знать,как всё закончилось.* </a>")
<br>
    
          </div>
        </div>
      </td>
    
  </tbody>
</table></div><div style="position: absolute; width:230px; height:134px; top:272px; left: 589px;>
<table width="100%" border="0">
  <tbody>
    <tr>
      <td width="10%">
        <div style="height: 134px; width: 230px">
          <div align="center">
<a href=http://repelloinimicum.mybb.ru/viewtopic.php?id=2#p17>Сюжет</a> ♦ <a href=http://repelloinimicum.mybb.ru/viewtopic.php?id=3>Свод правил</a> ♦ <a href=http://repelloinimicum.mybb.ru/viewtopic.php?id=6>Свободные роли</a> <br>♦ <a href=http://repelloinimicum.mybb.ru/viewtopic.php?id=7>Список внешностей</a> ♦ <a href=http://repelloinimicum.mybb.ru/viewforum.php?id=8>Список акций</a> <br>  ♦ <a href=http://repelloinimicum.mybb.ru/viewforum.php?id=6>Шаблоны анкет</a> <br>♦ <a href=http://repelloinimicum.mybb.ru/viewtopic.php?id=4>Действующие квесты</a> ♦  <a href=http://repelloinimicum.mybb.ru/viewtopic.php?id=5>Задать вопрос</a> <br>♦  <a href=http://repelloinimicum.mybb.ru/viewtopic.php?id=8>Объявления</a> <br>
    
          </div>
        </div>
      </td>
    
  </tbody>
</table></div>
<div style="position: absolute; width:115px; height:120px; top:355px; left: 670px;>
<table width="100%" border="0">
  <tbody>
    <tr>
      <td width="10%">
        <div style="height: 115px; width: 150px">
          <div align="center"><img src="http://xmages.net/storage/10/1/0/e/7/upload/85d58d80.png"/> 00<img src="http://xmages.net/storage/10/1/0/4/9/upload/8bf5e56c.png"><img src="http://xmages.net/storage/10/1/0/9/c/upload/7deee871.png"/> 00<img src="http://xmages.net/storage/10/1/0/4/9/upload/8bf5e56c.png"><img src="http://xmages.net/storage/10/1/0/a/c/upload/d6e4986c.png"/> 00<img src="http://xmages.net/storage/10/1/0/4/9/upload/8bf5e56c.png"><img src="http://xmages.net/storage/10/1/0/e/5/upload/e7a8cda6.png"/> 00
    
          </div>
        </div>
      </td>
    
  </tbody>
</table></div>
</style>

код для двойного сайдбара:

Код:
<style>
#pun {
  margin: auto 175px 0 175px;
  width : 210px;}
.sidbar1 {background:  transparent url(http://www.image-share.com/upload/1129/270.png); width: 210px; height: 500px; border: 0px normal; position: absolute; z-index: 1000;  top: 20px; right: 310px; left: 5px;}
.sidbar2 {background:  transparent url(http://www.image-share.com/upload/1129/270.png); width: 210px; height: 500px; border: 0px normal; position: absolute; z-index: 1000;  top: 20px; right: 5px; left: 1145px;}
.sidbar1 h1 , .sidbar1 h2 , .sidbar1 h3, .sidbar2 h1 , .sidbar2 h2 , .sidbar2 h3 {
background:  transparent url(http://www.image-share.com/upload/1129/270.png); height: 500px; text-align: center; color: #496690; border: 0px normal; width: 100%; margin: auto;}
.sidbar1 p, .sidbar2 p{padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; text-align: center;}

.nav {margin: 0px;}
.nav a{display: block; color:#000000; background-color: #88aea1; text-align: center; width:150px; padding: 1px; margin: 1px; text-decoration: none;   text-transform: uppercase;}
.nav a:hover{background-color: #DCFFF9; color:#000000; text-transform: uppercase;}
</style>

<div class="sidbar1"><table  background="http://www.image-share.com/upload/1129/270.png" width="210px" border="0" cellspacing="0"  cellpadding="0">
	<tr>
<!-- Строка 1 ; столбец 1 -->
<td>
 
</td>
	</tr>
	<tr>
<!-- Строка 2 ; столбец 1 -->
<td>
 
</td>
<!-- Строка 2 ; столбец 2 -->
<td width="200px">
	<br>

<center><a href="http://annaleticja.mybb.ru/" class="menuitem"><img src="http://image-share.com/upload/1119/226.gif"></a>  <br>

Добро пожаловать на ролевую. 

<br><br><br>

<a href="http://annaleticja.mybb.ru/profile.php?id=2" target="_blank"><img class="img_hover" src="http://s2.ipicture.ru/uploads/20111126/jRAec7wk.gif" title="AnnaLeticja" alt= AnnaLeticja' border="0"width="180" height="80">
</a>
</a>

<br> 

<div class="nav"> 
<a href="http://foreverstrong.rolka.su/viewtopic.php?id=10">Сюжет</a>  
</div>

<br>
 
</div>
</center>
<br>
</td>
<!-- Строка 2 ; столбец 3 -->
<td>
  
</td>
	</tr>
	<tr>
<!-- Строка 3 ; столбец 1 -->
<td>
 
</td>
	</center></tr>
</table></div>



<div class="sidbar2"><table  background="http://www.image-share.com/upload/1129/270.png" width="210px" border="0" cellspacing="0"  cellpadding="0">
	<tr>
<!-- Строка 1 ; столбец 1 -->
<td>
 
</td>
	</tr>
	<tr>
<!-- Строка 2 ; столбец 1 -->
<td>
 
</td>
<!-- Строка 2 ; столбец 2 -->
<td width="200px">
	<br>

<center><a href="http://annaleticja.mybb.ru/" class="menuitem"><img src="http://image-share.com/upload/1120/86.gif"></a> <br>

Добро пожаловать на ролевую. 

<br><br><br>

<a href="http://annaleticja.mybb.ru/profile.php?id=2" target="_blank"><img class="img_hover" src="http://s2.ipicture.ru/uploads/20111126/jRAec7wk.gif" title="AnnaLeticja" alt= AnnaLeticja' border="0"width="180" height="80">
</a>
</a>

<br> 

<div class="nav"> 
<a href="http://foreverstrong.rolka.su/viewtopic.php?id=10">Сюжет</a>  
</div>

<br>
 
</div>

<br>
</td>
<!-- Строка 2 ; столбец 3 -->
<td>
  
</td>
	</tr>
	<tr>
<!-- Строка 3 ; столбец 1 -->
<td>
 
</td>
	</center></tr>
</table></div>

0

Перевести2

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51736
  • Уважение: +15549
  • Позитив: +12368
  • Последний визит:
    Вчера 23:00:02

Annet1397
Пробуйте для сайдбаров взять код отсюда

Боковая панель - установка, вопросы, проблемы Пост 257 -

Сперва настройте её, вынув объявление - потом вставьте объявление - я посмотрю

+1

Перевести3

  • Автор: Annet1397
  • Заслуженный
  • Зарегистрирован: Сб, 23 Авг 2008
  • Сообщений: 85
  • Уважение: +8
  • Позитив: +23
  • Последний визит:
    Чт, 17 Май 2012 14:55:59

Deff, все получилось. спасибо большое

0

Перевести4

  • Автор: Annet1397
  • Заслуженный
  • Зарегистрирован: Сб, 23 Авг 2008
  • Сообщений: 85
  • Уважение: +8
  • Позитив: +23
  • Последний визит:
    Чт, 17 Май 2012 14:55:59

только теперь возникла такая проблема, что не могу никак поставить изображения чтобы были ровно посередине (относительно боков) (((
упростила для себя немного код, возможно из-за этого не ставится?

Код:
<style>

    .sidebar {position: absolute;
      width: 210px;
      top: 35px;
      height: 500px;
      text-align: center;
    }
    #Rightbar {
      margin-left:22px;
    }

    #Leftbar {
      margin-left:-250px;
    }
#Rightbar .container,
#Leftbar .container{
color:#3d3225;
text-align:center!important;
width:210px;
border: 0px red solid;
}

#Leftbar .container.a1{
height:500px;
background: transparent url(http://www.image-share.com/upload/1129/270.png) no-repeat 4px 6px;
}
#Rightbar .container.a1{
height:500px;
background: transparent url(http://www.image-share.com/upload/1129/270.png) no-repeat 4px 6px;
}
.nav {margin: 0 -5px 0 0px;}
.nav a{display: block; color:#000000; background-color: #c6ad7b; text-align: center; width:210px; text-decoration: none}
.nav a:hover{background-color: #291e09; color:#ffffff}

.scroll {
 width:100%;
 overflow-y: auto;
}
    </style>

<span style="float:left;">
<div id="Leftbar" class="sidebar">
<div class="container a1">
<a href="http://repelloinimicum.mybb.ru" class="menuitem"><img src="http://image-share.com/upload/1130/89.gif"></a><br>

</div>
</div></span>


<span style="float:right;">
  <div id="Rightbar" class="sidebar">
<div class="container a1">
 <div class="scroll" style="height:500px;">
****
 </div>
 </div>
</div>
</span>

0

Перевести5

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51736
  • Уважение: +15549
  • Позитив: +12368
  • Последний визит:
    Вчера 23:00:02

Вы ставьте бекграунд на центральные блоки на не на отдельные контейнеры

#Rightbar {
      margin-left:22px;
      background: transparent url(http://www.image-share.com/upload/1129/270.png) no-repeat 4px 6px;
    }

    #Leftbar {
      margin-left:-250px;
      background: transparent url(http://www.image-share.com/upload/1129/270.png) no-repeat 4px 6px;
    }

У Вас смещены бекграунды сайдбаров влево - поэтому якобы не центрировано

Отредактировано Deff (Ср, 14 Дек 2011 22:02:13)

0

Перевести6

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51736
  • Уважение: +15549
  • Позитив: +12368
  • Последний визит:
    Вчера 23:00:02

Можно просто двигать картинку

<img src="http://image-share.com/upload/1130/89.gif" style="margin-left:-12px">

0

Перевести7

  • Автор: Annet1397
  • Заслуженный
  • Зарегистрирован: Сб, 23 Авг 2008
  • Сообщений: 85
  • Уважение: +8
  • Позитив: +23
  • Последний визит:
    Чт, 17 Май 2012 14:55:59

Deff, Благодарю!
а текст возможно так же двигать? а то как мне кажется он как-то не посередине, несмотря на прописанные: text-align: center; и text-align:center!important;

0

Перевести8

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51736
  • Уважение: +15549
  • Позитив: +12368
  • Последний визит:
    Вчера 23:00:02

#Rightbar .container,
#Leftbar .container{
color:#3d3225;
text-align:center!important;
width:210px;
border: 0px red solid;
margin-left:-6px
}

Цифру регулируйте + - и число

0

Перевести9

  • Автор: Annet1397
  • Заслуженный
  • Зарегистрирован: Сб, 23 Авг 2008
  • Сообщений: 85
  • Уважение: +8
  • Позитив: +23
  • Последний визит:
    Чт, 17 Май 2012 14:55:59
Deff написал(а):

Цифру регулируйте + - и число

двигаются таблицы, а не сам текст :(

Deff написал(а):

Вы ставьте бекграунд на центральные блоки на не на отдельные контейнеры

Deff написал(а):

У Вас смещены бекграунды сайдбаров влево - поэтому якобы не центрировано

блин окончательно запуталась...
то есть чтобы все шло тупо по центру мне нужно где код
вот сюда вообще не прописывать картинку в бекграунд?

#Rightbar {
      margin-left:22px;
      background: transparent url(http://www.image-share.com/upload/1129/270.png) no-repeat 4px 6px;
    }

    #Leftbar {
      margin-left:-250px;
      background: transparent url(http://www.image-share.com/upload/1129/270.png) no-repeat 4px 6px;
    }

просто там больше вроде и некуда прописывать его...

0

Перевести10

  • Автор: Annet1397
  • Заслуженный
  • Зарегистрирован: Сб, 23 Авг 2008
  • Сообщений: 85
  • Уважение: +8
  • Позитив: +23
  • Последний визит:
    Чт, 17 Май 2012 14:55:59

прошу прощения, что опять надоедаю :blush: но у меня вообще не выходит ничего. попробовала сделать один основной фон в настройки сайдбаров, но все равно идет все не по центру...

Код:
<style>

    .sidebar {position: absolute;
      background-image: url('http://www.image-share.com/upload/1129/270.png');
      background-repeat: no-repeat; 
      width: 210px;
      top: 35px;
      height: 700px;
      text-align: center;
      font-size: 7.5pt;
    }
    #Rightbar {
      margin-left:25px;
    }

    #Leftbar {
      margin-left:-245px;
    }
#Rightbar .container,
#Leftbar .container{
color:#3d3225;
text-align:center!important;
width:170px;
border: 0px red solid;
}

#Leftbar .container.a1{
height:700px;
}
#Rightbar .container.a1{
height:700px;
}
.nav {margin: 0px;}
.nav a{display: block; color:#000000; background-color: #b19873; text-align: center; width:150px; padding: 1px; margin: 1px; text-decoration: none;   text-transform: uppercase;}
.nav a:hover{background-color: #F0D9A7; color:#000000; text-transform: uppercase;}
.scroll {
 width:100%;
 overflow-y: auto;
}
    </style>

<span style="float:left;">
<div id="Leftbar" class="sidebar">
<div class="container a1">
<font size="1"><a href="http://repelloinimicum.mybb.ru" class="menuitem"><img src="http://image-share.com/upload/1130/155.gif" style="margin-left:-12px"></a><br>
<b> Добро пожаловать домой, <br>дорогой друг! Мы ждали и<br> верили, что ты будешь с нами! </b><br>
Наша ролевая основана на <br>событиях, описанных в книге <br>Дж. Роулинг "Гарри Поттер и <br>Дары Смерти". </font>
</div></div></span>

<span style="float:right;">
  <div id="Rightbar" class="sidebar">
<div class="container a1">
 <div class="scroll" style="height:140px;">
      <font size="1"><br>лялялялялял</font>
 </div></div></div></span>

0

Перевести11

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51736
  • Уважение: +15549
  • Позитив: +12368
  • Последний визит:
    Вчера 23:00:02

Annet1397
Замените код Объявления

Код:
<style>
    .sidebar {position: absolute;
      background-image: url('http://www.image-share.com/upload/1129/270.png');
      background-position:top center;
      background-repeat: no-repeat; 
      width: 210px;
      top: 35px;
      height: 700px;
      font-size: 7.5pt;
    }
    #Rightbar {
      margin-left: 25px;
    }

    #Leftbar {
      margin-left:-245px;
    }
#Rightbar .container,
#Leftbar .container{
padding:24px!important;
margin: 0 auto;
color:#3d3225;
text-align:center!important;
width:160px;
border: 0px red solid;
}

#Leftbar .container.a1{
height:700px;
}
#Rightbar .container.a1{
height:700px;
}
.nav {margin: 0px;}
.nav a{display: block; color:#000000; background-color: #b19873; text-align: center; width:150px; padding: 1px; margin: 1px; text-decoration: none;   text-transform: uppercase;}
.nav a:hover{background-color: #F0D9A7; color:#000000; text-transform: uppercase;}
.scroll {
 width:100%;
 overflow-y: auto;
}
    </style>

<span style="float:left;">
<div id="Leftbar" class="sidebar">
<div class="container a1">
<font size="1"><a href="http://repelloinimicum.mybb.ru" class="menuitem"><img src="http://image-share.com/upload/1130/155.gif" width=100%/></a><br>
Добро пожаловать домой, 
дорогой друг! Мы ждали и
 верили, что ты будешь с нами! 
 Наша ролевая основана на 
событиях, описанных в книге 
Дж. Роулинг "Гарри Поттер и 
Дары Смерти".
<b> Добро пожаловать домой, <br>дорогой друг! Мы ждали и<br> верили, что ты будешь с нами! </b><br>
Наша ролевая основана на <br>событиях, описанных в книге <br>Дж. Роулинг "Гарри Поттер и <br>Дары Смерти". </font>
</div></div></span>

<span style="float:right;">
  <div id="Rightbar" class="sidebar">
<div class="container a1">
 <div class="scroll" style="height:140px;">
<a href="http://repelloinimicum.mybb.ru" class="menuitem"><img src="http://image-share.com/upload/1130/155.gif" width=100%/></a>
      <font size="1"><br>Добро пожаловать домой, 
дорогой друг! Мы ждали и
 верили, что ты будешь с нами! 
 Наша ролевая основана на 
событиях, описанных в книге 
Дж. Роулинг "Гарри Поттер и 
Дары Смерти".</font>
 </div></div></div></span>

Отредактировано Deff (Сб, 17 Дек 2011 14:40:15)

+1

Перевести12

  • Автор: Annet1397
  • Заслуженный
  • Зарегистрирован: Сб, 23 Авг 2008
  • Сообщений: 85
  • Уважение: +8
  • Позитив: +23
  • Последний визит:
    Чт, 17 Май 2012 14:55:59

Deff, огромнейшее спасибо!

0

Перевести13

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51736
  • Уважение: +15549
  • Позитив: +12368
  • Последний визит:
    Вчера 23:00:02

Чуть подправил код в картинках

0

Страница: 1

Вы здесь » Единый форум поддержки » Корзина » Не встает правильно сайдбар