Meni na sredini :)

[Chupko]

Evo pomazem drugu da sredi forum, ali zaboli smo na jednoj stvari. Pokusavao sam sve u css-u, ali ni da makne Kako da postavim meni na sredini ?

[Founder 2008]

Pretpostavljam da si probao

Code Select Expand

text-align:center;

Ako nije problem daj celu klasu iz css ovde da pogledamo.

[Branko.]

Evo pomazem drugu da sredi forum, ali zaboli smo na jednoj stvari. Pokusavao sam sve u css-u, ali ni da makne Kako da postavim meni na sredini ?

Ako sam dobro shvatio onda pogledaj:
http://www.simplemachines.org/community/index.php?topic=484159.msg3390702#msg3390702
http://www.simplemachines.org/community/index.php?topic=478288.msg3346416#msg3346416
http://www.simplemachines.org/community/index.php?topic=472007.msg3299228#msg3299228
http://www.simplemachines.org/community/index.php?topic=467919.msg3270541#msg3270541
http://www.simplemachines.org/community/index.php?topic=466784.msg3262112#msg3262112

[Chupko]

@Carobnjak

Code Select Expand

/****TOP NAVIGATION***/
#top_navigation
{
    text-align:center;

padding: 0;
float: left;
margin: 0 0 0 6px;
width: 100%;
position:relative;
}
#nav, #nav ul{
     margin:0;
     padding:0;
     list-style-type:none;
     list-style-position:outside;
     position:relative;
     line-height:1.5em;
     z-index: 100;
}
/***child***/
#nav li ul li a:link, #nav li ul li a:active, #nav li ul li a:visited{
   
    margin: 0;
    padding:9px;
    height:10px;
    line-height: 5px;
    border-top:none;
    text-decoration: none;
    }
#nav li ul li a:hover{
    color: #222;
font-weight: bold;
    font-size:11px;
    z-index: 102;
    position: relative;

-moz-box-shadow: 0 0 3px #999999;
-webkit-box-shadow: 0 0 3px #999999;
box-shadow: 0 0 3px #999999;
   
-moz-border-radius: 0px;
border-radius: 0px;
    -webkit-border-radius:0px;
   
    background: #2989D8; /* Old browsers */
    background: -moz-linear-gradient(top, #2989D8 0%, #1E5799 94%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2989D8), color-stop(94%,#1E5799)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #2989D8 0%,#1E5799 94%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #2989D8 0%,#1E5799 94%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #2989D8 0%,#1E5799 94%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989D8', endColorstr='#1E5799',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #2989D8 0%,#1E5799 94%); /* W3C */   
}
/***child end***/
#nav li a:link, #nav li a:active, #nav li a:visited{
    background: none repeat scroll 0 0 transparent;
    border-top: 1px solid #6189A7;
    color: #6189A7;
    display: block;
    font-size: 11px;
    font-weight: bold;
    height: 34px;
    line-height: 31px;
    margin: -3px;
    padding: 3px 13px;
    text-decoration: none;
   
-moz-border-radius: 0px;
border-radius: 0px;
    -webkit-border-radius: 0px;
}
   
#nav li a.active_button
{
    color: #222;
font-weight: bold;
    font-size:11px;
    position: relative;
    z-index: 102;
    padding-left: 40px;
    padding-right: 40px;
   
    -moz-box-shadow: 1px 0 0px #000000;
-webkit-box-shadow: 1px 0 0px #000000;
box-shadow: 1px 0 0px #000000;
   
-moz-border-radius: 0px;
border-radius: 0px;
    -webkit-border-radius:0px;
       
    background: #2989D8; /* Old browsers */
    background: -moz-linear-gradient(top, #2989D8 0%, #1E5799 94%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2989D8), color-stop(94%,#1E5799)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #2989D8 0%,#1E5799 94%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #2989D8 0%,#1E5799 94%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #2989D8 0%,#1E5799 94%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989D8', endColorstr='#1E5799',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #2989D8 0%,#1E5799 94%); /* W3C */   
}

#nav li a:hover{
    color: #222;
font-weight: bold;
    font-size:11px;
    z-index: 102;
    position: relative;
       
-moz-border-radius: 0px;
border-radius: 0px;
    -webkit-border-radius:0px;
   
    -moz-box-shadow: 1px 0 0px #000000;
-webkit-box-shadow: 1px 0 0px #000000;
box-shadow: 1px 0 0px #000000;
   
    background: #2989D8; /* Old browsers */
    background: -moz-linear-gradient(top, #2989D8 0%, #1E5799 94%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2989D8), color-stop(94%,#1E5799)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #2989D8 0%,#1E5799 94%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #2989D8 0%,#1E5799 94%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #2989D8 0%,#1E5799 94%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989D8', endColorstr='#1E5799',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #2989D8 0%,#1E5799 94%); /* W3C */   

}
#nav li{
    float:left;
    position:relative;
}
#nav ul {
    position:absolute;
    width:19em;
    top:1.5em;
    display:none;
    margin-top: 16px;
    background: #E9EEF2 url(../images/lgf/main_bg.png) repeat;
    padding:5px;
    border-bottom: 3px dashed #73A3C6;
    border-left: 3px dashed #73A3C6;
    border-right: 3px dashed #73A3C6;
    z-index: 99;
}

#nav li ul a{
    width:20em;
    float:left;
    margin: 0;
    text-decoration: none;
}
#nav ul ul{
top:auto;
}

#nav li ul ul {
    border-top: 3px dashed #73A3C6;
    margin: 22px 45px;
    z-index: 98;
    }

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
    display:none;
    }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
    display:block;
    }
/****TOP NAVIGATION END***/


/****CUSTOM TOP MENU****/
.top_menu
{
    text-align:center;

padding: 0;
float: left;
margin: 0 0 0 6px;
width: 100%;
position:relative;
    background: url("../images/lgf/top_navgation.jpg") repeat-x scroll center bottom transparent;
}
.top_menu_buttons
{
    position: ;
}
div.menu_buttons
{
    margin: 8px 5px 0 0;
    float: center;

}
.menu_buttons a:hover
{

}
.menu_buttons a
{
    color: #222;
    font-weight: bold;
    position: relative;
    right: -4px;
    text-decoration: none;
    top: 6px;
    margin: 0;
    padding: 4px 5px 6px;
   
    -moz-border-radius:2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
   
    background: #fefaef;
    background: -moz-linear-gradient(top, #fefaef 0%, #e6e3de 32%, #c0bfbd 64%, #bbbab8 67%, #a5a4a9 93%, #a3a2a7 94%, #a1a0a5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefaef), color-stop(32%,#e6e3de), color-stop(64%,#c0bfbd), color-stop(67%,#bbbab8), color-stop(93%,#a5a4a9), color-stop(94%,#a3a2a7), color-stop(100%,#a1a0a5));
    background: -webkit-linear-gradient(top, #fefaef 0%,#e6e3de 32%,#c0bfbd 64%,#bbbab8 67%,#a5a4a9 93%,#a3a2a7 94%,#a1a0a5 100%);
    background: -o-linear-gradient(top, #fefaef 0%,#e6e3de 32%,#c0bfbd 64%,#bbbab8 67%,#a5a4a9 93%,#a3a2a7 94%,#a1a0a5 100%);
    background: -ms-linear-gradient(top, #fefaef 0%,#e6e3de 32%,#c0bfbd 64%,#bbbab8 67%,#a5a4a9 93%,#a3a2a7 94%,#a1a0a5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefaef', endColorstr='#a1a0a5',GradientType=0 );
    background: linear-gradient(top, #fefaef 0%,#e6e3de 32%,#c0bfbd 64%,#bbbab8 67%,#a5a4a9 93%,#a3a2a7 94%,#a1a0a5 100%); 
    }
.menu_buttons span:hover
{
    background: #a90329;
    background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019));
    background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%);
    background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%);
    background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 );
    background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%);
   
    }
   
.menu_buttons span
{
    color: #eee;
    font-weight: bold;
    position: relative;
    text-decoration: none;
    top: -5px;
    margin: 5px;
    padding: 0px 0px 8px 1px;
   
    -moz-border-radius:2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
       
    background: #0369a9;
    background: -moz-linear-gradient(top, #0369a9 0%, #025a90 44%, #00446e 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0369a9), color-stop(44%,#025a90), color-stop(100%,#00446e));
    background: -webkit-linear-gradient(top, #0369a9 0%,#025a90 44%,#00446e 100%);
    background: -o-linear-gradient(top, #0369a9 0%,#025a90 44%,#00446e 100%);
    background: -ms-linear-gradient(top, #0369a9 0%,#025a90 44%,#00446e 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0369a9', endColorstr='#00446e',GradientType=0 );
    background: linear-gradient(top, #0369a9 0%,#025a90 44%,#00446e 100%);
    }
   
.menu_buttons span span
{
    left: -3px;
    margin: 0;
    opacity: 0.5;
    padding: 4px;
    position: relative;
    top: 6px;
    background: transparent;
    text-shadow:-1px 0 2px #222;
    }
/*****CUSOM TOP MENU END*****/


Branko, ne pomaze nista. Videcu nekako da sredim

[rocknroller]

u index.template.php zamjeni cjelu funkciju function template_menu()

Code Select Expand

function template_menu()
{
    global $context, $settings, $options, $scripturl, $txt;
    echo '
    <table style="margin:0 auto;">
        <tbody>
            <tr>
                <td>
            <div id="top_navigation">
            <ul class="top_navigation_ul" id="nav">';
                foreach ($context['menu_buttons'] as $act => $button) {
                    echo '
            <li id="button_', $act, '" class="first_line">
            <a class="', $button['active_button'] ? 'active_button' : '', '" href="', $button['href'],
                        '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
            <span class="', isset($button['is_last']) ? '' : '', '">', $button['title'],
                        '</span>
            </a>';
                    if (!empty($button['sub_buttons'])) {
                        echo '
            <ul class="">';
                        foreach ($button['sub_buttons'] as $childbutton) {
                            echo '
            <li>
            <a href="', $childbutton['href'], '"', isset($childbutton['target']) ?
                                ' target="' . $childbutton['target'] . '"' : '', '>
            <span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'],
                                !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
            </a>';
                            // 3rd level menus :)
                            if (!empty($childbutton['sub_buttons'])) {
                                echo '
            <ul>';
                                foreach ($childbutton['sub_buttons'] as $grandchildbutton)
                                    echo '
            <li>
            <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ?
                                        ' target="' . $grandchildbutton['target'] . '"' : '', '>
            <span', isset($grandchildbutton['is_last']) ? ' class="last"' : '',
                                        '>', $grandchildbutton['title'], '</span>
            </a>
            </li>';
                                echo '
            </ul>';
                            }
                            echo '
            </li>';
                        }
                        echo '
            </ul>';
                    }
                    echo '
            </li>';
                }
                echo '
            </ul>
            </div>
                </td>
            </tr>
        </tbody>
    </table>';
}

i u CSS zamjeni. nisam testirao moguće da visina neće odgovarati pa se poigraj sa parametrom top

Code Select Expand

#top_navigation {
    border-bottom: 0 dashed #FFFFFF;
    border-top: 0 dashed #FFFFFF;
    position: relative;
    top: -9px;
}