За последние 24 часа нас посетили 16482 программиста и 1549 роботов. Сейчас ищут 2013 программистов ...

Резиновый сайт

Тема в разделе "HTML и CSS", создана пользователем Golovastik, 30 авг 2010.

  1. Golovastik

    Golovastik Активный пользователь

    С нами с:
    14 июл 2010
    Сообщения:
    193
    Симпатии:
    0
    Есть шапка размером 1024Х180px Хочу сделать чтоб шапка при больших разрещениях увеличивалась ,а при уменьшении экрана на 700-800 пикселей ,чтоб появлялась во всех браузерах полоса прокрутки, чтоб нормально показывалось на всю ширину на экранах 15,17,19,22 дюйма. Подскажите как, код пробный. Проблема в том, что у меня не появляеться полоса прокрутки при уменьшении окна браузера на меньше 800 пикселей в браузере ИЕ, там и 900 и 1000 пикселей, полоса появляеться. А в др. браузерах аообще не появляеться при уменьшении на меньше 800 пикселей.
    Хочу чтоб на всю шрину было в экранах размером 15,17,19,22 дюйма. Подскажите как в моём коде правильно написать. Заранее благодарю за ответ.

    Код (Text):
    1.  
    2.  
    3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    4. "http://www.w3.org/TR/html4/loose.dtd">
    5. <html>
    6. <head><title>Видео</title>
    7. <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    8.  
    9. <style type="text/css">
    10. .rezina{min-width:800px;}
    11. .marginpadding{margin:0px; padding:0px;}
    12. .bordur{border:1px solid black;}
    13. .menubordur {border: #000 solid 1px; border-top:0;}
    14. .d img{display:block; }
    15. </style>
    16.  
    17. </head>
    18. <body class="marginpadding" >
    19.  
    20. <!-- ШАПКА -->
    21. <table width="100%" class="bordur rezina"    cellspacing="0" cellpadding="0" >
    22. <tr >
    23.  <td colspan="2">
    24.      <img src="shapka.jpg" width="100%" height="180" align="center" >
    25.  </td>
    26. </tr>
    27.  
    28. <!-- СЕРЕДИНА -->
    29. <tr >
    30.    <td width="15%">
    31.       <div class="d">
    32.         <img  src="videoyroki.png"  >
    33.          <img src="n1.png"  >
    34.          </div>
    35.  
    36.          
    37.    </td>
    38.   <td class="bordur" > С новым годом!</td>
    39.    
    40.  
    41.  
    42. </tr>
    43.  
    44. </table>
    45. </body>
    46. </html>
     
    #1 Golovastik, 30 авг 2010
  2. neverlose

    neverlose Активный пользователь

    С нами с:
    27 авг 2008
    Сообщения:
    1.112
    Симпатии:
    20
    <body class="marginpadding" style="margin: 0; padding: 0;">

    <!-- ШАПКА -->
    <table width="100%" class="bordur rezina" cellspacing="0" cellpadding="0" >
    <tr >
    <td colspan="2" style="padding-left: 800px;">
    <img src="shapka.jpg" width="100%" height="180" align="center" style="margin-left: -800px;" >
    </td>
    </tr>

    Можно попробовать как-то так, а если "забить" на <= IE6, то у <img src="shapka.jpg" width="100%" height="180" align="center"> можно просто добавить style="min-width: 800px;"
     
    #2 neverlose, 31 авг 2010
  3. Golovastik

    Golovastik Активный пользователь

    С нами с:
    14 июл 2010
    Сообщения:
    193
    Симпатии:
    0
    У меня картинка-шапка размером 1240Х185 Как сделать чтоб она нормально отображалась во всех браузераз при разных разрешениях?
    Может при маленьком разрешении экрана лучше её обрезать? Попробовал растягивать получаеться какие-то буквы суженые и не очень красиво смотриться, что можно придумать? Или может картинку делать меньшим размером на фотошопе?
    Хочу чтоб так растягивалась на всю ширину шапка как на этом сайте: http://ruseller.com
     
    #3 Golovastik, 31 авг 2010
  4. neverlose

    neverlose Активный пользователь

    С нами с:
    27 авг 2008
    Сообщения:
    1.112
    Симпатии:
    20
    Сделайте картинку шириной в 800px в PhotoShop'е. После чего не указывайте ей параметр width, а у таблицы укажите цвет фона такой же, как на границах картинки. Тогда Вы добъётесь точно такого же эффекта как на этом сайте (кстати, на нём картинка не растягивается).
     
    #4 neverlose, 31 авг 2010
  5. Golovastik

    Golovastik Активный пользователь

    С нами с:
    14 июл 2010
    Сообщения:
    193
    Симпатии:
    0
    Так вы имеете ввиду?
    [​IMG]

    1картинка моя 800 пикселей создавать ан фотошопе, а вторую картинку какую делать?
     
    #5 Golovastik, 31 авг 2010
  6. neverlose

    neverlose Активный пользователь

    С нами с:
    27 авг 2008
    Сообщения:
    1.112
    Симпатии:
    20
    Почти так, только вторую картинку не надо. просто цвет (baackground-color)
     
    #6 neverlose, 31 авг 2010
  7. Golovastik

    Golovastik Активный пользователь

    С нами с:
    14 июл 2010
    Сообщения:
    193
    Симпатии:
    0
    А 800 пикселей картинка поместиться в монитор 15 или 17 дюймов, чтоб полосы прокрутки не появлялось хочу.
     
    #7 Golovastik, 31 авг 2010
  8. Golovastik

    Golovastik Активный пользователь

    С нами с:
    14 июл 2010
    Сообщения:
    193
    Симпатии:
    0
    Попробовал чтоб картинку выровнять по левому краю, и добавить картинку фон в правую сторону от картинки-шапки ,что-то не происходит дублирование, фоновой картинки, это тчоб по всей ширине экрана шапка была. Как сделать дублирование картинки-фона, что-то у меня не срабатывает.
    Код (Text):
    1.  
    2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    3. "http://www.w3.org/TR/html4/loose.dtd">
    4. <html>
    5. <head><title>Видео</title>
    6. <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    7.  
    8. <style type="text/css">
    9. .shapkafon{background:url(img/fon.jpg); background-repeat:repeat-x;
    10.  }
    11. .body{min-width:700px;}
    12. .marginpadding{margin:0px; padding:0px;}
    13. .bordur{border:1px solid black;}
    14. .menubordur {border: #000 solid 1px; border-top:0;}
    15. .d img{display:block; }
    16. </style>
    17.  
    18. </head>
    19. <body class="marginpadding">
    20.  
    21. <!-- ШАПКА -->
    22. <table  class="bordur"  width="100%"  cellspacing="0" cellpadding="0" >
    23. <tr >
    24.  <td colspan="2">
    25.      <img  class="shapkafon" src="img/shapka.jpg"  height="180" align="left" >
    26.  </td>
    27. </tr>
    28.  
    29. <!-- СЕРЕДИНА -->
    30. <tr >
    31.    <td width="15%">
    32.       <div class="d">
    33.         <img  src="img/videoyroki.png"  >
    34.          <img src="img/n1.png"  >
    35.          </div>
    36.  
    37.          
    38.    </td>
    39.   <td class="bordur" > С новым годом!</td>
    40.    
    41.  
    42.  
    43. </tr>
    44.  
    45. </table>
    46. </body>
    47. </html>
     
    #8 Golovastik, 31 авг 2010
  9. neverlose

    neverlose Активный пользователь

    С нами с:
    27 авг 2008
    Сообщения:
    1.112
    Симпатии:
    20
    Картинку с повторением нужно задавать фоном, а не тегом <img>.
    <td background="my_image.jpg">
     
    #9 neverlose, 31 авг 2010
  10. Golovastik

    Golovastik Активный пользователь

    С нами с:
    14 июл 2010
    Сообщения:
    193
    Симпатии:
    0
    Вот так работает, но появляеться дополнтельная полоса прокрутки, подскажите как убрать её?
    Код (Text):
    1.  
    2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    3. "http://www.w3.org/TR/html4/loose.dtd">
    4. <html>
    5. <head><title>Видео</title>
    6. <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    7.  
    8. <style type="text/css">
    9. .shapkafon{background:url(img/fon.jpg); background-repeat:repeat-x;
    10.  }
    11. .body{min-width:700px;}
    12. .marginpadding{margin:0px; padding:0px;}
    13. .bordur{border:1px solid black;}
    14. .menubordur {border: #000 solid 1px; border-top:0;}
    15. .d img{display:block; }
    16. </style>
    17.  
    18. </head>
    19. <body class="marginpadding">
    20.  
    21. <!-- ШАПКА -->
    22. <table  class="bordur"  width="100%"  cellspacing="0" cellpadding="0" >
    23. <tr >
    24.  <td colspan="2" class="shapkafon">
    25.      <img   src="img/shapka.jpg" width="100%"  height="180" align="left" >
    26.  </td>
    27. </tr>
    28.  
    29. <!-- СЕРЕДИНА -->
    30. <tr >
    31.    <td width="15%">
    32.       <div class="d">
    33.         <img  src="img/videoyroki.png"  >
    34.          <img src="img/n1.png"  >
    35.          </div>
    36.  
    37.          
    38.    </td>
    39.   <td class="bordur" > С новым годом!</td>
    40.    
    41.  
    42.  
    43. </tr>
    44.  
    45. </table>
    46. </body>
    47. </html>
     
    #10 Golovastik, 31 авг 2010
  11. Golovastik

    Golovastik Активный пользователь

    С нами с:
    14 июл 2010
    Сообщения:
    193
    Симпатии:
    0
    Мне нужно чтоб обрезало картинку справа при разрешении 800х600, но чтоб при этом панель навигации, которая справа должна не обрезаться а сдвинуться.
    Если написать так.

    Код (Text):
    1.  
    2.  
    3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    4.  
    5. "http://www.w3.org/TR/html4/loose.dtd">
    6.  
    7. <html>
    8.  
    9. <head><title>Видео</title>
    10.  
    11. <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    12.  
    13. <style type="text/css">
    14.  
    15. .shapkafon{background:url(img/fon.jpg); repeat-x; }
    16.  
    17. body{min-width:800px; overflow:hidden;}
    18.  
    19. .marginpadding{margin:0px; padding:0px;}
    20.  
    21. .bordur{border:1px solid black;}
    22.  
    23. .menubordur {border: #000 solid 1px; border-top:0;}
    24.  
    25. .d img{display:block; }
    26.  
    27. </style>
    28.  
    29. </head>
    30.  
    31. <body class="marginpadding">
    32.  
    33. <!-- ШАПКА -->
    34.  
    35. <table class="bordur" width="100%" cellspacing="0" cellpadding="0" >
    36.  
    37. <tr >
    38.  
    39. <td colspan="2" class="shapkafon">
    40.  
    41. <img src="img/header.jpg" height="180" align="left" >
    42.  
    43. </td>
    44.  
    45. </tr>
    46.  
    47. <!-- СЕРЕДИНА -->
    48.  
    49. <tr >
    50.  
    51. <td width="15%">
    52.  
    53. <div class="d">
    54.  
    55. <img src="img/videoyroki.png" >
    56.  
    57. <img src="img/n1.png" >
    58.  
    59. </div>
    60.  
    61.  
    62.  
    63. </td>
    64.  
    65. <td class="bordur" > С новым годом!</td>
    66.  
    67.  
    68.  
    69. <td width="15%">
    70.  
    71. <div class="d">
    72.  
    73. <img src="img/videoyroki.png" >
    74.  
    75. <img src="img/n1.png" >
    76.  
    77. </div>
    78.  
    79.  
    80.  
    81. </tr>
    82.  
    83. </table>
    84.  
    85. </body>
    86.  
    87. </html>


    Происходит обрезка изображения,

    но как быть если у меня панель навигации слева и справа, оно обрежет его справа, как сделать так чтоб не обрезало,чтоб не обрезало правую часть, 3-ую ячеку 2 строки таблицы?
    [​IMG]
     
    #11 Golovastik, 1 сен 2010
  12. tommyangelo

    tommyangelo Старожил

    С нами с:
    6 дек 2009
    Сообщения:
    2.549
    Симпатии:
    0
    Адрес:
    Мариуполь
    А Попов не помогает?
     
    #12 tommyangelo, 2 сен 2010
  13. Golovastik

    Golovastik Активный пользователь

    С нами с:
    14 июл 2010
    Сообщения:
    193
    Симпатии:
    0
    А вы думаете что я его не сомтрю, смотрю конечно.
    В браузере ИЕ при разрешении 800х600 обрезка происходит изображения справа,навигацию обрезает, а сдвигов навигации влево не происходит, а в др. браузерах сдвиг происходит со странными пустотами. Вот я для теста всё сделал и посомтрите что за бред вышел.
    http://www.sharemania.ru/0229844
     
    #13 Golovastik, 2 сен 2010
  14. Апельсин

    Апельсин Активный пользователь

    С нами с:
    20 мар 2010
    Сообщения:
    3.645
    Симпатии:
    2
    кто б сомневался.
     
    #14 Апельсин, 2 сен 2010
  15. Golovastik

    Golovastik Активный пользователь

    С нами с:
    14 июл 2010
    Сообщения:
    193
    Симпатии:
    0
    Помогите с решением проблемы кто-нибудь, а то я умру.
     
    #15 Golovastik, 2 сен 2010
  16. Golovastik

    Golovastik Активный пользователь

    С нами с:
    14 июл 2010
    Сообщения:
    193
    Симпатии:
    0
    Вот код.
    Код (Text):
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    2. <html>
    3. <head><title>Видео</title>
    4. <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    5. <style type="text/css">
    6. *{margin:0; padding:0;}
    7. body{min-width:800px; overflow:hidden;}
    8. img {border: none;}
    9. .shapkafon {background:url(img/fon.jpg); repeat-x; }
    10. .shapkafon img { text-align:left;}
    11. .bordur {width: 100%; border-collapse:collapse;}
    12. .bordur td {border:1px solid black;}
    13. .menubordur {border: 1px solid black; border-top:none;}
    14. .d {width:15%;}
    15. .d img {display:block;}
    16. </style>
    17. </head>
    18.  
    19. <body class="marginpadding">
    20.  
    21. <!-- ШАПКА -->
    22. <table class="bordur">
    23. <tr >
    24. <td colspan="3" class="shapkafon" >
    25. <img src="img/header.jpg" >
    26. </td>
    27. </tr>
    28. <!-- СЕРЕДИНА -->
    29. <tr >
    30. <td class="d">
    31. <img src="img/videoyroki.png" >
    32. <img src="img/n1.png" >
    33. </td>
    34. <td> С новым годом!</td>
    35. <td class="d">
    36. <img src="img/videoyroki.png" >
    37. <img src="img/n1.png" >
    38. </tr>
    39. </table>
    40.  
    41. </body>
    42. </html>
    Сейчас у меня экран размером 1280х1024. Этот архив при запуске файла индекс, отображает вот такое в браузере ИЕ7,Опера, Мозила.
    Нормально как я хотел. Вот фото отображения в ИЕ,Опера,Мозила.
    http://ipicture.ru/uploads/100902/p1jvhCuL1x.jpg

    В браузере гуглхром вот такую ерунду отображает.
    http://ipicture.ru/uploads/100902/GUuVs4Uh7I.jpg

    1)Проблема №1, неправильно отображение в браузере ГУГлхром, в самом начале при большом разрешении,скажите как исправить?

    2) 2-ая проблема, вот что произойдёт ,если сменить разрешение экрана на 800х600, и проверить отображение
    в браузере ИЕ,МОЗИЛА,ОПЕРА.
    Вот что произойдёт,с чем я не могу побороться и в чём была главная проблема всей этой темы.

    http://ipicture.ru/uploads/100902/3QDVOy6dpa.jpg
     
    #16 Golovastik, 2 сен 2010
  17. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    вот эта штука знаешь что такое?
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
     
    #17 igordata, 2 сен 2010
  18. Golovastik

    Golovastik Активный пользователь

    С нами с:
    14 июл 2010
    Сообщения:
    193
    Симпатии:
    0
    А что у меня Доктайп неверный что ли?
    Вот так сработало,вот что я хотел получить при маленьком разрешении экраеа,наконец-то.
    Код (Text):
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    2. <html>
    3. <head><title>Видео</title>
    4. <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    5. <style type="text/css">
    6. * {margin:0; padding:0;}
    7. body{overflow:hidden;}
    8. img {border: none;}
    9. .shapka {height: 155px; background:url(img/header.jpg) no-repeat; }
    10. .shapkafon {height: 155px; background:url(img/fon.jpg) repeat-x; }
    11. .shapkafon img { text-align:left;}
    12. .bordur {width: 100%; border-collapse:collapse;}
    13. .bordur td {border:1px solid black;}
    14. .menubordur {border: 1px solid black; border-top:none;}
    15. .d {width:15%;}
    16. .d img {display:block;}
    17. </style>
    18. </head>
    19.  
    20. <body class="marginpadding">
    21.  
    22. <!-- ШАПКА -->
    23. <table class="bordur">
    24. <tr >
    25. <td colspan="3" class="shapkafon" >
    26. <div class="shapka" ></div>
    27. </td>
    28. </tr>
    29. <!-- СЕРЕДИНА -->
    30. <tr >
    31. <td class="d">
    32. <img src="img/videoyroki.png" >
    33. <img src="img/n1.png" >
    34. </td>
    35. <td> С новым годом!</td>
    36. <td class="d">
    37. <img src="img/videoyroki.png" >
    38. <img src="img/n1.png" >
    39. </tr>
    40. </table>
    41.  
    42. </body>
    43. </html>
     
    #18 Golovastik, 2 сен 2010
  19. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    Golovastik
    а какой он верный будет для всех этих случаев? я хз. Если ты уверен - то и отлично. =)

    может готовый дизайн возмешь какой-нить такой и его распотрошишь?
     
    #19 igordata, 2 сен 2010
  20. iliavlad

    iliavlad Активный пользователь

    С нами с:
    24 янв 2009
    Сообщения:
    1.689
    Симпатии:
    4
    Golovastik
    хоть и не по теме, но если не получается, займитесь другой проблемой, отвлекитесь. через два-три дня вернетесь к этой проблеме и с новым взглядом решите ее. а может посчитаете, что лучше сделать другой вариант.
     
    #20 iliavlad, 3 сен 2010
(Вы должны войти или зарегистрироваться, чтобы разместить сообщение.)