Полоса не растягивается

YanaSt · August 11, 2009

Здравствуйте!

Мучаю свой первый макет, делаю для мужа , все никак не могу его "добить" (макет, а не мужа конечно же).

Надо было с чего попроще начать, но сейчас уже не отступлю!

Делаю верстку для макета, посмотреть можно то, что есть тут: http://stepalex.mamayana.ru/

Там все пока еще совсем страшненькое, но суть не в этом.

Проблема такая: слева есть серая полоса, на которой слово ПОРТФОЛИО. По задумке дизайнера она должна "прилипать" к левой стороне экрана, при этом быть от верха до низа экрана (при любом масштабе). Слово портфолио должно быть примерно посередине экрана.

Но у меня получается, что она идет от границы таблицы (центральная, в которой весь остальной контент). Если я div с этой полосой переножу ДО таблицы, то получается полоска от начала экрана, но немного не до конца

Свою голову уже всю сломала почему такое возникает, помогите!!!!

Ах да, если из файла вырезать центральную таблицу, то все нормально сразу же становится. Может быть это из-за отступов отрицательных...

html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
  <title>Дизайн сайтов StepAlex</title>
  <link rel="stylesheet" type="text/css" href="main.css" />
 </head>

 <body style="background-color:#272020">

   <center>

  <table class="table" border="2" width="1000">
    <tr>
    <td>

    <div class="header">
      <p>обновлено: <span class="gray">15.05.09</span>              статус: <span class="gray">Свободен</span></p>
      <img id="ecology" src="images/ecology.png" alt="" />
    </div>

    <div class="logo">
      <img src="images/logolight.png" alt="" />      
    </div>

    <div class="navbar_contact">
      <p>РАЗДЕЛЫ: 
      <br/>
      <img src="images/line_03.png" alt="" />
      <br/>
      веб-дизайн (30)
      <br/>
      <img src="images/line_03.png" alt="" />
      <br/>
      логотипы
      <br/>
      <img src="images/line_03.png" alt="" />
      <br/>      
      полиграфия
      <br/>
      <img src="images/line_03.png" alt="" />
      <br/>      
      иллюстрации
      <br/>
      <img src="images/line_03.png" alt="" />
      <br/>      
      наружная рекламма
      <br/>
      <img src="images/line_03.png" alt="" />
      </p>

      <p class="otstup">Контактная информация:
      <br/>
      icq: 328 314 739
      <br/>
      e-mail: sy80@mail.ru
      <br/>
      skype: thelayers
      </p>

    </div>

    <div class="table_portfolio">
    <table border="2" width="" cellpadding="">

    <tr class="arrow">
      <td><a href="#"><img id="left" src="images/arrow_left.png" alt="" /></a>обратно</td>
      <td align="center">1 2 3 4 5</td>
      <td align="right">туда<a href="#"><img id="right" src="images/arrow_right.png" alt="" /></a></td>
    </tr>

      <tr height="30">
        <td width="253"><a href="#">Магазин "Teleshop"</a></td>
        <td width="253"><a href="#">Все о виски</a></td>
        <td width="200"><a href="#">Продажа iPhone v.1</a></td>
      </tr>


      <tr valign="top">
        <td><a href="#"><img src="images/portfolio_sushi1.jpg"  alt="" /></a></td>
        <td><a href="#"><img src="images/portfolio_bar.jpg" alt="" /></a></td>
        <td><a href="#"><img src="images/portfolio_iphone1.jpg" alt="" /></a></td>
      </tr>

      <tr height="30">
        <td><a href="#">"Империя"</a></td>
        <td><a href="#">Продажа iPhone v.2</a></td>
        <td><a href="#">Магазин "Мобиробот"</a></td>
      </tr>

      <tr valign="top">
        <td><a href="#"><img src="images/portfolio_stroit.jpg" alt="" /></a></td>
        <td><a href="#"><img src="images/portfolio_mobirobot.jpg" alt="" /></a></td>
        <td><a href="#"><img src="images/portfolio_iphone2.jpg" alt="" /></a></td>
      </tr>

      <tr height="30">
        <td><a href="#">"Orbex"</a></td>
        <td><a href="#">Компания "Виталформ" v.1</a></td>
        <td><a href="#">Салон тканей "Меланж"</a></td>
      </tr>

      <tr valign="top">
        <td><a href="#"><img src="images/portfolio_orbex.jpg" alt="" /></a></td>
        <td><a href="#"><img src="images/portfolio_vital2.jpg" alt="" /></a></td>
        <td><a href="#"><img src="images/portfolio_melanzsh.jpg" alt="" /></a></td>
       </tr>
   </table>
   </div>


    <div class="footer1">
      <p>Ссылки: <a href="#">я в контакте</a></p>
      <p><a href="#">я на free-lance.ru</a></p>
      <p><a href="#">мой музыкальный проект</a></p>
    </div>

    <div class="footer2">
      <p>© 2009, Дизайнерил:...я...
      <br />Все права защищены.</p>
    </div>


 </td>
 </tr>
  </table>

    <div class="left_portfolio">
    <img src="images/portf_left_02.png" />
   </div>

    </center>


 </body>

</html>

CSS:

  BODY {

   background-image: url(images/pattern.png); 
   background-color: #272020;
   margin:0;
    }


.table {
  top:0px;
}

.header {
  color:#565e61;  
}

img#ecology{
  margin-top:60px;
  width:332px;
}

.logo {
  position:relative;
  left:340px;
  top:-150px;

  /*position:absolute;
  left:30%;*/
}

.navbar_contact {

	width:183px;
	float:right;
	margin-right:30px;
	margin-top:-400px;
	color:#b2b8bb;

}

p.otstup {padding-top: 59px;}


.left_portfolio {
  position:absolute;
  left:0px;
  padding-top:30%;
  height:100%;
  background-image: url(images/portfolio_polosa.png); 
  background-repeat: repeat-y;
  margin:0;
  vertical-align:bottom;

}



span.gray{
  color:#959b9d;
  }


.arrow {
  color:#959b9d;
}

.table_portfolio{
  left:0px;
  margin-top:-400px;
}

img#left{
  padding-right:11px;
}

img#right{
  padding-left:11px;
}

a {
	color: #959b9d;
}


.footer1{
  margin-top:0px;
  color:#565e61;
  float:left;
  width:;  
}


.footer2{
 color:#565e61;
  padding-left:400px;
}

3ABAPKA · August 11, 2009

.left_portfolio {

position:absolute;

left:0px;

top: 0;

padding-top:30%;

height:100%;

background-image: url(images/portfolio_polosa.png);

background-repeat: repeat-y;

margin:0;

vertical-align:bottom;

}

YanaSt · August 11, 2009

3ABAPKA, сделала top: 0;

получилось то же, что и было: сверху нормально, снизу не доходит до конца (((

3ABAPKA · August 11, 2009

html, BODY {

background-image: url(images/pattern.png);

background-color: #272020;

margin:0;

height:100%;

}

psywalker · August 11, 2009

YanaSt

слушай, а может тебе сделать чуть по-другому, может стоит полосу пустить фоном по оси-y, только для Body, а картинку просто отдельно уже сделать слева всегда посередине?

YanaSt · August 11, 2009

3ABAPKA , на эту сторку вообще реакции нет ((

psywalker, у меня уже идет фон у Body

   background-image: url(images/pattern.png); 
   background-color: #272020;

туда еще тогда полоску засунуть?

psywalker · August 11, 2009

psywalker, у меня уже идет фон у Body
Код
background-image: url(images/pattern.png);
background-color: #272020;
туда еще тогда полоску засунуть?

Слушай, тогда дай мне время, у меня щас есть свободный часик, мне твоя задача понравилась, если подождёшь немного, я попробую сделать, что-бы полоска слева тянулась всегда от верха до низа, а картинка с надписью "Портфолио" была по середине

YanaSt · August 11, 2009

я не тороплюсь никуда ))))))

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

но как это решить

вся надежда на вас!

psywalker · August 11, 2009

ну а вот например смотри, слева фон всегда тянутся сверху вниз и картинка ровно посередине, пойдёт?

http://psywalker.ru/Forum/bg-left-center/main.html

YanaSt · August 11, 2009

ха! так и у меня получается, если без остального контента!

а вот со всем остальным - идет сдвиг!

psywalker · August 11, 2009

Ок, а если так: http://psywalker.ru/Forum/bg-left-center/main.html

Заполни контентом только, чтобы увидеть эффект!

YanaSt · August 11, 2009

ну все, дождусь ночи и буду тестить ))))

спасибки!!!

по результату - отпишусь здесь

psywalker · August 11, 2009

ну все, дождусь ночи и буду тестить ))))
спасибки!!!
по результату - отпишусь здесь

погоди, а чё ночью то?? мне самому интересно, получилось у меня или нет? Держи вот я текста залил много, тести!

http://psywalker.ru/Forum/bg-left-center/main.html

3ABAPKA · August 11, 2009

убери из <center> </center>

это (все равно не надо ее центровать)

</div>

и тогда

html, BODY {

height:100%;

}

должно сработать

YanaSt · August 11, 2009

3ABAPKA, убрала, не помогло. Изначально это и было перед <center> </center>, потом уже во все места пробовала вставлять :-)

psywalker, потому что доча из садика пришла, все, конец работе! :-)

YanaSt · August 12, 2009

получается такая ерунда:

я свой макет все время открывала в FF

после доработки открыла в нем - полоса опять не до конца, открыла в Опере - все нормуль, про проводник молчу, там засада вообще все не так

psywalker · August 12, 2009

получается такая ерунда:
я свой макет все время открывала в FF
после доработки открыла в нем - полоса опять не до конца, открыла в Опере - все нормуль, про проводник молчу, там засада вообще все не так wacko.gif

Странно, у меня всё везде одинаково хорошо, зайди по моей ссылке и посмотри, потому что у меня подозрение, что у тебя какие нибудь прописанные отступы, где не надо, создают непонятный отступ

http://psywalker.ru/Forum/bg-left-center/main.html

Edited August 12, 2009 by psywalker

Sign In

Полоса не растягивается

Question

Link to comment

Share on other sites

16 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information