Как сделать резиновый сайт?

energ · April 26, 2011

Делал сайт для техникума по заданому шаблону http://htkem.ru/ столкнулся с проблемой не хватки места подс татьи на страницах этого шаблона, пришлось делать переключатели,

но все же все это проблемно и гемарно и при том в админке статьи будут добовлять люди не владеющие навикахи хтмл, поэтому тут вступает в силу такая тема, нужно сделать подобный шалон резиновым так чтобы от размера статьи он растягивался до нужной длинны, сам шаблон сверстан на css все сложные блоки вставлены как картинки что и создает проблему для переведения шаблона в растягиваемый режим, подскажите как это можно сделать?

DrStrangeLove · April 26, 2011

Делал сайт для техникума по заданому шаблону http://htkem.ru/ столкнулся с проблемой не хватки места подс татьи на страницах этого шаблона, пришлось делать переключатели,
но все же все это проблемно и гемарно и при том в админке статьи будут добовлять люди не владеющие навикахи хтмл, поэтому тут вступает в силу такая тема, нужно сделать подобный шалон резиновым так чтобы от размера статьи он растягивался до нужной длинны, сам шаблон сверстан на css все сложные блоки вставлены как картинки что и создает проблему для переведения шаблона в растягиваемый режим, подскажите как это можно сделать?

Там аж две ошибки в слове фотогалерея. Одна наверху, одна внизу..

Ещё правильно - Абитуриентам! (вверху и внизу)

Edited April 26, 2011 by DrStrangeLove

JoyStick · April 26, 2011

для начала стоит выложить css)

energ · April 26, 2011

Делал сайт для техникума по заданому шаблону http://htkem.ru/ столкнулся с проблемой не хватки места подс татьи на страницах этого шаблона, пришлось делать переключатели,
но все же все это проблемно и гемарно и при том в админке статьи будут добовлять люди не владеющие навикахи хтмл, поэтому тут вступает в силу такая тема, нужно сделать подобный шалон резиновым так чтобы от размера статьи он растягивался до нужной длинны, сам шаблон сверстан на css все сложные блоки вставлены как картинки что и создает проблему для переведения шаблона в растягиваемый режим, подскажите как это можно сделать?
Там аж две ошибки в слове фотогалерея. Одна наверху, одна внизу..
Ещё правильно - Абитуриентам! (вверху и внизу)

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

для начала стоит выложить css)

Это основной

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        color:#fff;

}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
        display: block;
}
body {
        line-height: 1;


}
ol, ul {
        list-style: none;
}
blockquote, q {
        quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
        content: '';
        content: none;
}
table {
        border-collapse: collapse;
        border-spacing: 0;
}

a {
        color:#c8d1e2;
        font-weight:bold;

        text-decoration: none;
        padding:0 0px 0 0px;
        padding-top:10px;
}

p, span {

        padding:0px 10px 0px 10px;
}




/* body */

.font{
                background-color:#3d4d5a;
                margin:0 auto;
                width:1004px;
                height:840px;

}

#heder{

                width:1004px;
                height:148px;
                margin:0 auto;
                background-image:url(../images/heder.jpg);

}



#hii{
        margin:0 auto;
        color:#fff;
        margin-left:200px;
        margin-top:-30px;
}

#menu{
        margin-top:10px;
        margin-left:204px;
        width:800px;
        height:38px;
        background-image:url(../images/aenu_grad.jpg);
        color:#FFF;


}

#glavmenutext{
        margin-left:10px;
        padding-top:10px;

       }



.body{
        margin-left:204px;
        background-image:url(../images/gradient.jpg);
        width:760px;
        height:538px;

}

        #rightblock{
                width:42px;
                height:538px;
                background-image:url(../images/rightblock_1.jpg);
                margin:0 auto;
                margin-right:0px;
                margin-top:-538px;

        }


.bottommenu{
        width:751px;
        height:35px;
        background-image:url(../images/menu_bottom_grad.jpg);
        margin-left:219px;
        color:#FFF;
        margin-top:0px;
        color:red;
        font-weight:blod;
        padding:0 0px 0 0px;

}

#bottommenutext{
        margin-left:2px;
        padding-top:10px;

}

        #menu_left_block{
                margin-top:-35px;
                width:15px;
                height:35px;
                background-image:url(../images/menu_left_block.jpg);
                margin-left:205px;

        }

        #menu_right_block{
                margin:0 auto;
                margin-right:0px;
                margin-top:-35px;
                width:49px;
                height:35px;
                background-image:url(../images/menu_right_block.jpg);

        }

#futer{
        margin-top:10px;
        margin-left:532px;
        margin-right:472px;
        color:#f8f8f8;

}

#leftmenu{
        margin-top:20px;
        margin-left:20px;
        width:200px
        height:248px;;
        color:#f6f6f6;
        text-transform: uppercase;
        padding:0 10px;

}

#leftmenutext li{
       text-decoration:underline;
       padding-bottom:5px;

}

#leftmenutext ul li a:hover{
        color:#00000;
}

#bottommenutext ul li a:hover{
        color:#00000;
}

Вот дополнительный код ксс выподающего меню:

#hxdmoomenu ul{
     margin: 0;
     padding: 0;

     background-image:url(aenu_grad.jpg);
 }

#hxdmoomenu ul li a  {
 color:green;
 }

#hxdmoomenu ul li a:hover {
 color:red;
 }



#hxdmoomenu ul li.active a {
 color:#000000;
}

#hxdmoomenu ul li:hover{
 background:#CCCCCC;
}




.menuhxdmenu,.menuhxdmenu  *{margin:0;padding:0;}
div#hxdmoomenu{
z-index:100;}
#hxdmoomenu li li{margin:0;}
.menuhxdmenu {line-height:1.0;float:left;margin-bottom:1.5em;position:relative; z-index:101}
.menuhxdmenu  ul{background:#fff;
padding:0;}
.menuhxdmenu  li{float:left;list-style:none;position:relative;}
div#hxdmoomenu li li a, div#hxdmoomenu li.active li a{display:block;padding:0;margin:0;text-decoration:none;float:none;width:98%;}
.menuhxdmenu  li ul{float:none;left:-999em;position:absolute;width:170px;z-index:102;}
.menuhxdmenu  li:hover ul,
.menuhxdmenu  li.sfHover ul{left:0px;top:25px;}
.menuhxdmenu  li:hover li ul,
.menuhxdmenu  li.sfHover li ul,
.menuhxdmenu  li li:hover li ul,
.menuhxdmenu  li li.sfHover li ul,
.menuhxdmenu  li li li:hover li ul,
.menuhxdmenu  li li li.sfHover li ul{top:-999em;}
.menuhxdmenu  li li:hover ul,
.menuhxdmenu  li li.sfHover ul,
.menuhxdmenu  li li li:hover ul,
.menuhxdmenu  li li li.sfHover ul,
.menuhxdmenu  li li li li:hover ul,
.menuhxdmenu  li li li li.sfHover ul{left:170px;top:0px;}
.menuhxdmenu  li li{position:relative;float:none;width:100%;}
/*** EDIT THESE CSS CODES WITH CARE: ENDS ***/

#hxdmoomenu{

}

#hxdmoomenu ul{
        margin: 0;
        padding: 0;
        margin-top:-5px;
        margin-left:0px;

}


#hxdmoomenu ul li{
        margin:0;
        padding:0;
        display:block;
}

#hxdmoomenu ul li a{
        margin:0;
        display:block;
        float: left;
        height: 25px;
        line-height: 25px;
        padding: 0 0px;
        color:red;
}

#hxdmoomenu ul li.active {
 color:#00000;
 }

#hxdmoomenu ul li a:hover{
        display:block;
        color:#f6f6f6;
}

#hxdmoomenu li.active a {
        display:block;
}

#hxdmoomenu li ul {
        margin-top:0px;
        margin-left:auto;
        width:195px;
}

#hxdmoomenu ul ul ul {
        margin-top:10px;
        margin-left:-10px;
}

#hxdmoomenu ul ul li{
        display:block;
        padding:0 0 0 15px;
        text-align:left;
        width:180px;
}

#hxdmoomenu ul ul li a{
        display:block;
}


#hxdmoomenu li.active li a {

}

#hxdmoomenu ul ul li a:hover,
#hxdmoomenu ul li.active.parent ul a:hover {
        display:block;
        background:#CCCCCC;
}

#hxdmoomenu ul li.active a {
        color:#fff;
}

#hxdmoomenu ul li:hover{
            background:#CCCCCC;
}
/*** Copy upto here ***/


/****** DEMO CSS CODE TO DEMONSTRATE THE IMPLEMENTING SECOND MENU START ***/
/****** These codes are only for demonstration. You can delete this code. ***/
/*** Changes made from orignal CSS:
         Replaced parent UL class menuhxdmenu with menuhxd_moodemo_2
         Replaced Div ID hxdmoomenu with moomenu2 ***/

.menuhxdmenu2,.menuhxdmenu2  *{margin:0;padding:0;}
div#moomenu2{
z-index:55;}
#moomenu2 li li{margin:0;}
.menuhxdmenu2 {line-height:1.0;float:left;margin-bottom:1.5em;position:relative; z-index:56}
.menuhxdmenu2  ul{background:#fff;
padding:0;}
.menuhxdmenu2  li{float:left;list-style:none;position:relative;}
div#moomenu2 li li a, div#moomenu2 li.active li a{display:block;padding:0;margin:0;text-decoration:none;float:none;width:98%;}
.menuhxdmenu2  li ul{float:none;left:-999em;position:absolute;width:170px;z-index:57;}
.menuhxdmenu2  li:hover ul,
.menuhxdmenu2  li.sfHover ul{left:0px;top:25px;}
.menuhxdmenu2  li:hover li ul,
.menuhxdmenu2  li.sfHover li ul,
.menuhxdmenu2  li li:hover li ul,
.menuhxdmenu2  li li.sfHover li ul,
.menuhxdmenu2  li li li:hover li ul,
.menuhxdmenu2  li li li.sfHover li ul{top:-999em;}
.menuhxdmenu2  li li:hover ul,
.menuhxdmenu2  li li.sfHover ul,
.menuhxdmenu2  li li li:hover ul,
.menuhxdmenu2  li li li.sfHover ul,
.menuhxdmenu2  li li li li:hover ul,
.menuhxdmenu2  li li li li.sfHover ul{left:170px;top:0px;}
.menuhxdmenu2  li li{position:relative;float:none;width:100%;}
/*** EDIT THESE CSS CODES WITH CARE: ENDS ***/

#moomenu2{

}

#moomenu2 ul{
        margin: 0;
        padding: 0;
        background: #ACACAC;
}

#moomenu2 ul li{
        margin:0;
        padding:0;
        display:block;
}

#moomenu2 ul li a{
        margin:0;
        display:block;
        float: left;
        height: 25px;
        line-height: 25px;
        padding: 0 15px;
}

#moomenu2 ul li a:hover{
        display:block;
}

#moomenu2 li.active a {
        display:block;
}

#moomenu2 li ul {
        margin-top:0px;
        margin-left:auto;
        width:195px;
}

#moomenu2 ul ul ul {
        margin:0;
        margin-top:10px;
}

#moomenu2 ul ul li{
        display:block;
        padding:0 0 0 15px;
        text-align:left;
        width:180px;
        height: 25px;
}

#moomenu2 ul ul li a{
        display:block;
}


#moomenu2 li.active li a {

}

#moomenu2 ul ul li a:hover,
#moomenu2 ul li.active.parent ul a:hover {
        display:block;
}

Код меню, модульный, сам сайт ставил на движок joomla версии 1.5

Edited April 26, 2011 by energ

Serlutin · April 26, 2011

для начала стоит выложить css)

Зачем? Неужели так сложно открыть FireBug?

Проблема в том, что у вас жёстко заданы и ширина сайта и высота. Ладно ещё ширина, но в высоту сайты ограничивать не принято.

Вам нужно убрать высоту с классов .font и .body Только тогда у вас, конечно же, поедет вёрстка во все стороны. Поедет она, потому что сделана кое-как.

У вас даже сам текст главной статьи оформлен неправильно. Например, перечисление того, что из себя представляет техникум, это <ol>. Я понимаю, что текст скорее всего оформлялся в визуальном редакторе, но хотя бы на главной странице можно в ручную красиво всё оформить.

DrStrangeLove · April 26, 2011

Можно ещё воспользоваться Google Chrome Developer Tools. В Хроме нажать Ctrl+Shift+I..

Sign In

Как сделать резиновый сайт?

Question

energ

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

DrStrangeLove

Link to comment

Share on other sites

JoyStick

Link to comment

Share on other sites

energ

Link to comment

Share on other sites

Serlutin

Link to comment

Share on other sites

DrStrangeLove

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information