За последние 24 часа нас посетили 22382 программиста и 1126 роботов. Сейчас ищут 648 программистов ...

Как сделать хедер в СSS резиновым.

Тема в разделе "HTML и CSS", создана пользователем Inventyc, 4 дек 2014.

  1. Inventyc

    Inventyc Новичок

    С нами с:
    4 дек 2014
    Сообщения:
    5
    Симпатии:
    0
    Добрый день уважаемые программисты. Я установил шаблон на вордпресс. Однако хочу сделать хедер резиновым. Чтобы он динамически расширялся в соответствии с разрешением экрана.
    Вот код от CSS стиля, который содержит в себе шаблон сайта. Было бы здорово если бы подсказали где ковыряться, что бы решить задачу. Картинка хедера хорошего разрешения и сайт пока загружен на денвере. Заранее спасибо.
    /*
    Theme Name: OfficeFurniture
    Theme URL: http://wordpressorg.ru/officefurniture/
    Description: OfficeFurniture is a free WordPress theme with options page. Supports the post thumbnails. Suitable for any niche especially for games, online games or entertainment sites or blogs.
    Author: NewWpThemes.com
    Author URI: http://newwpthemes.com/
    Version: 1.0
    */

    /* LAYOUT */

    body {
    background:#FFFFFF url(images/background.jpg) center 0px no-repeat;
    }

    #wrapper {
    background: url(images/wrapper-bg.png) left top repeat-x;
    }

    #container {
    }

    #contentwrap {
    background: #FFFFFF;
    }

    a {
    color: #064563;
    text-decoration: none;
    }

    a:hover {
    color: #8BB1C5;
    text-decoration: underline;
    }


    /* HEADER */
    #header {
    width: 100%;
    height: 100px;
    background-image: url('http://svai365.ru/wp-content/uploads/2014/12/21e1d8d0-0e96-11e4-9640-fd0db5d45ee8_FIFTYSHADES_HEADER_YAHOO.jpg');
    }

    #header{height:auto;}
    #headerTb{border-collapse:collapse;border-spacing:0;table-layout:fixed;background-color:#1552ca;height:121px;}
    #headerTb img.topImg{width:100%!important;height:125px!important;-ms-interpolation-mode:bicubic;}
    /* EndStyle */
    </style>______
    #header {
    height: 114px;
    padding:10px 0;
    }

    #header h1 {
    margin-bottom: 0px !important;
    padding: 40px 0 0 0;
    font-weight: normal;
    font-family: Arial, Helvetica, Sans-serif;
    font-weight: bold;
    font-size: 50px;
    }

    #header h1 a, #header h1 a:visited {
    color: #989997;
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: 1px 1px 0px #000;
    }

    #header h1:first-letter{
    color:#0a0000;
    font-weight: bold;
    font-size: 75px;
    }

    #header h2 {
    color: #0a0000;
    font-size: 20px;
    font-family: Arial, Helvetica, Sans-serif;
    }

    .logoimg {
    margin: 30px 0 0 0px;
    }

    /* NAVIGATION MENUS */

    #pagemenucontainer {
    margin-top: 40px;
    height: 38px;
    float: right;
    padding: 0 2px 0 2px;
    background: url(images/pagemenu-bg.png) left top repeat-x;
    border: 1px solid #F2F2EC;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    }

    #pagemenu {
    height: 38px;
    float: right;
    }

    #pagemenu, #pagemenu ul {
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: 1;
    }
    #pagemenu {
    margin-bottom: 1px;
    padding: 0 2px;
    }

    #pagemenu ul {
    float: left;
    list-style: none;
    margin: 0px 0px 0px 0px;
    padding: 0px;
    }

    #pagemenu li {
    float: left;
    list-style: none;
    margin: 0px;
    padding: 0;
    }
    #pagemenu li:first-child {
    }

    #pagemenu ul li {
    list-style: none;
    margin: 0px;
    padding: 0px;
    }

    #pagemenu li a, #pagemenu li a:link {
    color: #384441;
    display: block;
    margin: 0 2px 0 2px;
    padding: 13px 10px;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    }

    #pagemenu li a:hover, #pagemenu li a:active {
    color: #064563;
    display: block;
    text-decoration: none;
    background: url(images/pagemenu-hover.png) left top repeat-x;
    }

    #pagemenu li.current_page_item a {
    color: #064563;
    text-decoration: none;
    background: url(images/pagemenu-hover.png) left top repeat-x;
    }

    #pagemenu li:hover, #pagemenu li.sfhover {
    position: static;
    }

    .topright {
    text-align: right;
    margin: 16px 0 0 0;
    }

    #navcontainer {
    height: 34px;
    display: block;
    overflow: hidden;
    background: url(images/nav-bg.png) left top repeat-x;
    padding-left: 10px;
    border: 1px solid #FFFFFF;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin-bottom: 10px;
    }

    #navcontainer .current-cat a {
    color:#FFFFFF;
    background: url(images/nav-hover.png) left top repeat-x;
    text-decoration: none;
    }

    /* CONTENT */

    #content {
    padding: 15px 5px 15px 15px;
    color: #36362E;
    }

    h1,h2,h3,h4,h5 {
    color: #7B7B76;
    }

    pre { overflow: auto;
    width: 470px;
    }

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


    .post p {
    margin-bottom: 10px;
    }

    .title {
    margin: 0 0 8px 0;
    padding: 0px;
    line-height: 26px;
    font-size: 24px;
    font-family: Arial, Verdana;
    color: #7B7B76;
    font-weight: bold;
    }


    .title a {
    text-decoration: none;
    color: #7B7B76;
    }

    .title a:hover {
    text-decoration: none;
    color: #064563;
    }

    .pagetitle {
    margin-bottom: 20px;
    line-height: 22px;
    font-family: Arial, Verdana;
    text-decoration: none;
    color: #7B7B76;
    }

    .readmorecontent {
    text-align: right;
    }

    a.readmore {
    padding: 4px 15px;
    background: none;
    color: #000000;
    text-decoration: none;
    font-size: 12px;
    text-transform: uppercase;
    }

    a.readmore:hover {
    color: #30789F;
    background: none;
    text-decoration: underline;
    text-transform: uppercase;
    }


    .postdate {
    font-size: 12px;
    padding: 1px 0px;
    font-family: Arial, Verdana;
    color: #36362E;
    }


    .postmeta {
    font-size: 12px;
    padding: 2px 4px;
    font-family: Arial, Verdana;
    color: #36362E;
    }

    .postdate img, .postmeta img {
    border: none;
    vertical-align: middle;
    margin:2px;
    }

    .entry {
    text-align: justify;
    line-height: 20px;
    padding-top: 8px;
    font-family: Arial, Verdana;
    font-size: 14px;
    }

    .navigation {
    padding: 10px 0;
    }

    blockquote {
    overflow: hidden;
    padding-left: 9px;
    font-style: italic;
    color: #666;
    border-left: 3px solid #CADAE7;
    }

    .post img {
    max-width: 1000%;
    }

    img.wp-smiley {
    max-height: 12px;
    margin: 0;
    padding: 0;
    border: none;
    }

    .aligncenter,
    div.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    .alignleft {
    float: left;
    margin: 0 10px 5px 0;
    }

    .alignright {
    float: right;
    }

    .wp-caption {
    border: 1px solid #ddd;
    text-align: center;
    background-color: #f3f3f3;
    padding-top: 4px;
    margin: 10px;
    /* optional rounded corners for browsers that support it */
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    }

    .wp-caption img {
    margin: 0;
    padding: 0;
    border: 0 none;
    }

    .wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    padding: 0 4px 5px;
    margin: 0;
    }

    /* wp-pagenavi */
    .wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:active {
    font-size: 15px !important;
    padding: 4px 8px !important;
    color: #5A5A56 !important;
    background:none !important;
    border: 1px solid #fff !important;
    }
    .wp-pagenavi a:hover {
    border: 0 !important;
    color: #5A5A56 !important;
    background: #FDFDFD url(images/wp-pagenavi-hover.png) left top repeat-x !important;
    border: 1px solid #E1E0DF !important;

    }
    .wp-pagenavi span.pages {
    font-size: 15px !important;
    padding: 4px 8px !important;
    color: #5A5A56 !important;
    background: none !important;
    border: 1px solid #fff !important; ;
    }
    .wp-pagenavi span.current {
    font-size: 15px !important;
    padding: 4px 8px !important;
    font-weight: bold;
    color: #fff !important;
    background: #004873 url(images/wp-pagenavi-bg.png) left top repeat-x !important;
    border: 1px solid #0472AE !important;
    }
    .wp-pagenavi span.extend {
    font-size: 15px !important;
    padding: 4px 8px !important;
    background:transparent !important;
    color: #5A5A56 !important;
    background: none !important;
    border: 1px solid #fff !important;
    }

    /* SIDEBAR(S) */

    .sidebaradbox {
    margin-top: 5px;
    text-align:center;
    }

    .ad125 {
    margin: 10px 6px;
    }


    .sidebar {
    margin: 0 10px 10px 10px;
    font-size: 13px;
    color: #0058dd;
    padding: 0;
    }

    .sidebar a {
    text-decoration: none;
    color: #6D6D6E;
    }

    .sidebar a:hover {
    text-decoration: underline;
    color:#0272A9;
    }


    #search {
    border: 1px solid #EAE5D9;
    height: 28px;
    padding: 0 2px;
    background: url(images/search-bg.png) left top repeat-x;
    text-align: right;
    }

    #search input {
    border: 0;
    background: none;
    color: #3F3F3F;
    }



    #s {
    width: 252px;
    padding: 0 3px 3px 3px ;
    margin:0 0 0 0;
    background: none;
    }

    #topsearch {
    margin-top: 15px;
    }

    /* Social icons */
    .addthis_toolbox {
    padding: 15px 0 0 0;
    text-align: center;
    }
    .addthis_toolbox .custom_images a
    {
    width: 32px;
    height: 32px;
    margin: 0 3px 0 3px;
    padding: 0;
    }

    .addthis_toolbox .custom_images a:hover img
    {
    filter:alpha(opacity=100);
    -moz-opacity:1.0;
    -khtml-opacity: 1.0;
    opacity: 1.0;
    }

    .addthis_toolbox .custom_images a img
    {
    filter:alpha(opacity=70);
    -moz-opacity:0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
    }



    .sidebarvideo {

    }


    .socialboxes {
    background: #FFFFFF url(images/socialboxes-bg.png) left top repeat-x;
    border: 1px solid #EBEBE9;
    padding: 10px;
    margin: 10px 0 0 0;
    }

    .socialboxes:hover {
    border: 1px solid #EAF2F7;
    background: #FFFFFF url(images/socialboxes-hover.png) left top repeat-x;
    }

    .socialboxes a {
    color: #52575C;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    font-family: Arial, Helvetica, Sans-serif;
    }
    .socialboxes a:hover {
    color: #0272A9;
    text-decoration: underline;
    }

    .sidebar h2 {
    margin: 10px 0 0px 0;
    padding: 10px 0 10px 10px;
    font-size: 16px;
    line-height: 16px;
    font-family: Arial, Helvetica, Sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    color: #414445;
    background: url(images/sidebar-tab.png) left top repeat-x;
    -moz-border-radius: 5px 5px 0 0;
    -khtml-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    }

    .sidebar ul {
    list-style-type: none;
    margin: 0px 0px 10px 0px;
    padding: 0px;
    }

    .sidebar ul li {
    list-style-type: none;
    margin: 0px 0px 5px 0px;
    padding: 0px;
    }

    .sidebar ul ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    }

    .sidebar ul li li, .sidebar ul li ul li {
    padding: 6px 0px 6px 10px;
    background: url(images/bullet.png) left 12px no-repeat;
    border-bottom: 1px dotted #BED3DE;
    }


    #wp-calendar th {
    font-style: normal;
    text-transform: capitalize;
    color: #6D6D6E;
    background: none!important;
    }
    #wp-calendar caption {
    padding: 2px 4px;
    text-transform: uppercase; margin: 2px 0 2px 0;
    background: none !important;
    color: #6D6D6E;
    }

    #wp-calendar td {
    color: #6D6D6E;
    font: normal 12px 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
    letter-spacing: normal;
    padding: 2px 0;
    text-align: center;
    }

    #wp-calendar td:hover, #wp-calendar #today {
    background: #0272A9;
    color: #fff;
    }

    #wp-calendar td:hover a {
    color: #fff;
    }

    #wp-calendar {
    empty-cells: show;
    font-size: 14px;
    margin: 0;
    font-weight: bold;
    width: 100%;
    }


    /* FOOTER */

    #footer {
    padding: 22px;
    text-align: center;
    color: #000000;
    background: url(images/footer-bg.png) left top repeat-x;
    font-size: 13px;
    }

    #footer a {
    color: #000000;
    }

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

    #credits {
    color: #555454;
    font-size: 11px;
    text-align: center;
    padding: 10px;
    }

    #credits a {
    color: #555454;
    text-decoration: none;
    }

    /* COMMENTS */

    #comments h3 {
    margin-bottom: 10px;
    }

    #commentform input {
    width: 170px;
    padding: 2px;
    margin: 5px 5px 1px 0;
    }

    #commentform {
    margin: 5px 10px 0 0;
    }

    #commentform textarea {
    width: 100%;
    padding: 2px;
    }

    #respond:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

    #commentform #submit {
    margin: 0 0 5px auto;
    float: right;
    }

    .alt {
    margin: 0;
    padding: 10px;
    }

    .commentlist {
    padding: 0;
    text-align: justify;
    }

    .commentlist li {
    margin: 15px 0 10px;
    padding: 5px 5px 10px 10px;
    list-style: none;

    }

    .commentlist li ul li {
    margin-right: -5px;
    margin-left: 10px;
    }

    .commentlist p {
    margin: 10px 5px 10px 0;
    }
    .children { padding: 0; }

    #commentform p {
    margin: 5px 0;
    }

    .nocomments {
    text-align: center;
    margin: 0;
    padding: 0;
    }

    .commentmetadata {
    margin: 0;
    display: block;
    }

    .post_thumbnail {
    padding: 6px;
    border: 1px solid #E7E5DA;
    margin: 0 10px 10px 0;
    background: #FFFFFF;
    }
     
  2. Ganzal

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

    С нами с:
    15 мар 2007
    Сообщения:
    9.902
    Симпатии:
    969
    во-первых кодом оформите.
    во-вторых обычно еще и хтмл выкладывается. мало ли что, с вложенностью не угадаем
    в-третьих сиэсэс к новичкам в пхп не имеет отношения
    в-четвертых разрешение экрана не меняется, меняется размер окна браузера
    в-пятых ну вы сделайте сам стакан страницы заполняющим всю ширину окна браузера. а уже оттуда делайте хидер на всю ширину. это вам в самоучитель сиэсэс за базисами верстки.
     
  3. artoodetoo

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

    С нами с:
    11 июн 2010
    Сообщения:
    11.072
    Симпатии:
    1.237
    Адрес:
    там-сям
    Перенес тему.
    Автор, отредактируй своё сообщение, помести свой код в [code] [/code] !

    Блоки изначально "резиновые". Они становятся у́же когда к ним применяют правила float или width или max-width.
    Во всех современных браузерах можно "проинспектировать" элемент и поменять его атрибуты на лету. Попробуй и расскажи о результатах.
     
  4. Inventyc

    Inventyc Новичок

    С нами с:
    4 дек 2014
    Сообщения:
    5
    Симпатии:
    0
    А вот эти команды в каую часть кода вставлять ? float или width или max-width.
    Просто я чайник :) мне бы наглядно :)

    Добавлено спустя 6 минут 41 секунду:
    Уважаемый Ganzel - я в этом деле чайник, который хочет сделать простой сайт на основе шаблона. Поэтому если не сложно, объяснять как для чайников. :) а Лучше показать :)
     
  5. Ganzal

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

    С нами с:
    15 мар 2007
    Сообщения:
    9.902
    Симпатии:
    969
    дайте исходник страницы, уважаемый Invantyc (тут сарказм на вашу опечатку в моем никнейме) - мне по нему будет немного проще, о чем я сказал в первом сообщении :)
    еще просто из любопытства - вот эти правила автор шаблона написал, да?)
     
  6. Inventyc

    Inventyc Новичок

    С нами с:
    4 дек 2014
    Сообщения:
    5
    Симпатии:
    0
    Прошу прощенья GanzAl).Исходники стиля CSS я выложил ранее. Эти правила шаблона написал не Я, а автор шаблона. я хочу их подрихтовать немного. Вам достаточно информации? или же еще какие то исходники нужны ?
     
  7. artoodetoo

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

    С нами с:
    11 июн 2010
    Сообщения:
    11.072
    Симпатии:
    1.237
    Адрес:
    там-сям
    Они уже вставлены :D проинспектируй нужный элемент страницы и увидишь их. Просто кликни на странице правой кнопкой и ищи команду "Inspect element".
     
  8. Ganzal

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

    С нами с:
    15 мар 2007
    Сообщения:
    9.902
    Симпатии:
    969
    удобнее конечно доступ дать. ибо css оно не просто так Css - там файлов может быть и больше чем вы думаете, поэтому приложенный фрагмент может опираться на другие правила, шедшие ранее или наоборот - переопределяться правилами идущими после. но давайте попробуем с тем что есть.
     
  9. Inventyc

    Inventyc Новичок

    С нами с:
    4 дек 2014
    Сообщения:
    5
    Симпатии:
    0
    В данном случае, я полностью доверяю вашему профессианализму. Я могу дать доступ в случае необходимости, однако есть один момент. У меня сайт пока не денвере а хоста пока еще нет ((((
     
  10. Ganzal

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

    С нами с:
    15 мар 2007
    Сообщения:
    9.902
    Симпатии:
    969
    сурс до завтра появится?)
     
  11. Inventyc

    Inventyc Новичок

    С нами с:
    4 дек 2014
    Сообщения:
    5
    Симпатии:
    0
    спасибо большое
     
  12. Ganzal

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

    С нами с:
    15 мар 2007
    Сообщения:
    9.902
    Симпатии:
    969
    ой да не за что)