Autor Zpráva
Kuba S.
Profil *
#1 · Zasláno: 29. 3. 2014, 14:13:48 · Upravil/a: Kuba S.
Odpovědět Citovat
Ahoj, potřeboval bych rady - na stránce http://www.neephase.com/ potřebuji vycentrovat menu - je to wordpress web s upravenou free šablonou...

CSS MENU: 

.menu_wrapper
{
    width: 84%;
    margin: 0 auto;
    text-align: center;
}    
#main_menu nav ul
{
    margin: 0 auto;
    text-align: center;
    position: relative;
    padding-left: 2%;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #FFF;
    
}
#main_menu nav ul:after
{ 
    content: "\0020"; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
#main_menu nav ul#nav_menu li
{
    text-align: center;
    cursor: pointer;
    display: block;
    float: left;
    margin-right: 19px;
}
#main_menu nav ul#nav_menu li a
{
    display: block;
    padding: 20px 10px 15px;
    font: 11px/1.27em "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: 0.25em;
    color: #fff;
    z-index: 2;
}
#main_menu nav ul#nav_menu li.blob
{
    border-bottom: 1px solid #F00;
    bottom: -1px;
    height: 1px;
    padding-bottom: 0;
    position: absolute;
    z-index: 1;
}

Díky Kuba


Je potřeba dodat nějaké další informace? :)


Tady ješte responsive.css 

@media only screen and (max-width: 959px) 
{
    .modal
    {
        width: 720px;
    }
    .wisdoms_slider
    {
        margin-right: 30px;
    }
    ul#wisdoms-slides li  
    {
        font: bold 25px/1.2em "Prata", Helvetica, Arial, sans-serif;
    }
    #main_menu nav ul
    {
        padding-left: 1%;
        
    }
    #main_menu nav ul#nav_menu li
    {
        margin-right: 13px;
    }
    #main_menu nav ul#nav_menu li a
    {
        padding: 20px 2px 15px;
    }
    h1
    {
        font: 87px/1.3em Prata, Helvetica, Arial, sans-serif; 
    }
    #subscriberEmail
    {
        width: 345px;
    }
    #subscribeButton
    {
        width: 95px;
    }
    ul.gallery li.item 
    {
        height: 172px;
    }
    .map_img
    {
        height: 233px;
    }
    .clients_number
    {
        height: 50px;
        font-size: 55px;
        line-height: 67px;
    }
    .ch-grid
    {
        margin-top: 50px;
    }
    .globe
    {
        width: 82%;
        font-size: 18px;
        line-height: 46px;
    }
    .post_comment
    {
        margin-right: 20px;
    }
    .comment .comment_meta,
    .comment .comment_content
    {
        width: 77%;
    }
    .comment_list .nested_comment .nested_comment .nested_comment .comment .comment_meta,
    .comment_list .nested_comment .nested_comment .nested_comment .comment .comment_content
    {
    width: 70%;
    }
    .comment .nested_comment
    {
        padding: 0 0 0 30px;
        margin: 20px 0 0 15px;
    }
    .accordion h3
    {
        margin-top: 15px;
        font: bold 22px/1.36em "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    .form_wrapper
    {
        margin-right: 20%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 959px) 
{
    .modal
    {
        width: 576px;
    }
    .ch-grid li {
        width: 216px;
        height: 216px;
    }
    .ch-info h3
    {
        font-size: 16px;
        line-height: 17px;
        margin: 0 11px;
        padding: 40px 0 0 0;
        height: 56px;
    }
    .ch-info p
    {
        padding: 10px 5px 0 5px;
        margin: 0 18px;
        font-size: 12px;
        line-height: 13px;
    }
    .socio_contact ul li 
    {
        margin-right: 8px;
    }
}
@media only screen and (max-width: 767px) 
{
    .menu_wrapper
    {
        width: 100%;
        margin-left: 0;
    }
    #main_menu nav ul
    {
         border-top: 0;
         border-bottom: 0;
         padding-left: 0;
    }
    .wisdoms_slider
    {
        width: 64.9%;
        margin-right: 10px;
        margin-bottom: 25px;
    }
    ul#wisdoms-slides li  
    {
        padding-bottom: 0px;
        font: bold 20px/1.2em "Prata", Helvetica, Arial, sans-serif;
    }
    .button.get_another
    {
        width: 32%;
        height: 60px;
        line-height: 60px;
    }
    .button.read
    {
        margin-right: 38%;
    }
    #subscriberEmail
    {
        width: 300px;
    }
    #subscribeButton
    {
        width: 95px;
    }
    ul.gallery li.item 
    {
        height: 172px;
    }
    #display
    {
        padding-left: 0;
    }
    ul.gallery li.item 
    {
        height: 100px;
    }
    .services_small_icon_middle
    {
        margin-top: 0px;
    }
    .list_of_services
    {
        margin-top: 0px;
    }
    ul.ch-grid
    {
        margin-top: 25px;
    }
    .tem_description
    {
        margin-bottom: 20px;
    }
    .post_comment
    {
        margin-right: 10px;
    }
    .more_post
    {
        margin-bottom: 50px;
    }
    .comment .avatar
    {
        margin-right: 20px;
    }
    .comment .comment_meta,
    .comment .comment_content
    {
        width: 75%;
    }
    .comment_list .nested_comment .nested_comment .comment_meta,
    .comment_list .nested_comment .nested_comment .comment_content
    {
        width: 70%;
    }
    .comment_list .nested_comment .nested_comment .nested_comment .comment .comment_meta,
    .comment_list .nested_comment .nested_comment .nested_comment .comment .comment_content
    {
    width: 70%;
    }
    .comment .nested_comment
    {
        padding: 0 0 0 10px;
    }
    .post_comment_form
    {
        margin-bottom: 50px;
    }
    .post_info
    {
        float: none;
        margin-top: 0px;
        padding-left: 35%;
    }
    .map
    {
        height: 240px !important;    
    }
    .accordion h3
    {
        margin-top: 10px;
        font: bold 19px/1.2em "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    .pricing-table-small
    {
        width: 100%;
        margin-top: 100px;
    }
    .pricing-table-big
    {
        width: 100%;
    }
    .info_details
    {
        margin-bottom: 60px;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) 
{
    .modal
    {
        width: 420px;
    }
}

@media only screen and (max-width: 479px) 
{
    h1
    {
    font: 70px/1.1em "Prata", Helvetica, Arial, sans-serif;
    text-align: center;
    letter-spacing: -0.05em;
    }
    .modal
    {
        width: 300px;
    }
    .small-menu-wrapper
    {
        width: 300px;    
        text-align: center;
    }
    .wisdoms_slider
    {
        width: 100%;
        margin-right: 0px;
        margin-bottom: 0px;
    }
    .button.get_another
    {
        margin-left: 20%;
        width: 60%;
    }
    .button.read
    {
        margin-right: 36%;
    }
    #subscriberEmail
    {
        text-indent: 15px;
        width: 200px;
    }
    #subscribeButton
    {
        width: 75px;
    }
    #display
    {
        width: 40%;
        padding-left: 0;
    }
    ul.gallery li.item 
    {
        width: 93.3%;
        margin-left: 10px;
        height: 220px;
        margin-right: 0;
        margin-bottom: 35px;
    }
    .clients
    {
        padding-top: 30px;
    }
    .map_img
    {
        height: 167px;
    }
    .comment .avatar
    {
        margin-right: 15px;
    }
    .comment .comment_meta,
    .comment .comment_content
    {
        width: 60%;
    }
    .comment_list .nested_comment .nested_comment .comment_meta,
    .comment_list .nested_comment .nested_comment .comment_content
    {
        width: 60%;
    }
    .comment_list .nested_comment .nested_comment .nested_comment .comment .comment_meta,
    .comment_list .nested_comment .nested_comment .nested_comment .comment .comment_content
    {
        width: 60%;
    }
    .comment .nested_comment
    {
        padding: 0 0 0 5px;
    }
    .accordion .one
    {
        height: 125px;
    }
    .form_wrapper
    {
        margin-right: 15%;
    }
    #mail-message 
    {
        width: 150px;
    }
}
Tomáš123
Profil
#2 · Zasláno: 29. 3. 2014, 20:47:54
Odpovědět Citovat
Ja mám menu v strede. Mení sa mi iba poloha obrázku: zmenšenina a zväčšenina. Ale ako si môžeš všimnúť menu v obidvoch prípadoch ostáva vycentrované na stred.
Kuba S.
Profil *
#3 · Zasláno: 30. 3. 2014, 01:35:41
Odpovědět Citovat
Díky za reakci... Menu je možné vycentrované vertikálně, ale horizontálně není :/ ... Před první položkou je menší mezera než za poslední...

Nějaké nápady? ZKusil jsem toho už hrozně moc :/
Bubák
Profil
#4 · Zasláno: 30. 3. 2014, 08:54:26
Odpovědět Citovat
Kuba S.:
„Menu je možné vycentrované vertikálně, ale horizontálně není“
Protože položky menu floatuješ, takto dělané menu není snadné vycentrovat (pokud stačí vycentrovíní od IE 8 výše, je to o poznání jednodušší, než řešení finkční i v IE6/7). Nedávej LI floatovat, ale deklaruj je jako řádkové elementy, obdobně odkazy nechej řádkové.
Z mých starších ukázek menu je jediné centrované horizontální menu s šířkou podle odkazů toto: http://teststranek.kvalitne.cz/menu7.3/
Není to úplně totéž, co máš ty, ale třeba ti pomůže, třebas techdy, kdybys úplně nechápal výše uvedený slovní popis.

Mimo téma.
Já osobně bych o něco zvětšil klikatelnou plochu odkazů, zvětšil bych pravý a levý padding odkazů a úměrně tomu bych zmenšil pravý a levý margin položek LI.
Kuba S.
Profil *
#5 · Zasláno: 30. 3. 2014, 21:29:17
Odpovědět Citovat
Super, díky. Vyřešeno :)
Časová prodleva: 10 let

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0