0 Пользователей и 1 Гость просматривают эту тему.
  • 7 Ответов
  • 1228 Просмотров
*

uWn

  • Новичок
  • 22
  • 0 / 0
Вопрос по положению меню
« : 21.01.2012, 16:02:39 »
Здравствуйте!
Я от программирования далек, поэтому обращаюсь к вам за помощью.

В общем создал на сайте горизонтальное меню. Т.к. позиция устраивающая меня была только одна, засунул меню в нее: breadcrumb
Сам модуль этот отключил.
Дак вот. вроде все нормально отображается, но когда создал подпункт в меню, огорчился.
При наведении на пункт, подпункт открывается за текстом и его не видно, то есть видно только его верхушку.

помогите разобратсья. Файл CSS и Index.php прилагаю
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<head>
<jdoc:include type="head" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template_css.css" type="text/css" />
<link rel="shortcut icon" href="templates/<?php echo $this->template ?>/images/favicon.ico"/>

 <script type="text/javascript">
function boxes_height()
{
  if(document.getElementById('m1') && document.getElementById('m2'))
  {
  if(document.getElementById('m2').clientHeight>document.getElementById('m1').clientHeight)
  {
    y = document.getElementById('m2').clientHeight;
    document.getElementById('m1').style.height = y + 'px';
  }
  else
  {
    y = document.getElementById('m1').clientHeight;
    document.getElementById('m2').style.height = y + 'px';
  }
  document.getElementById('m1').style.visibility = 'visible';
  document.getElementById('m2').style.visibility = 'visible';
  }
 
  else if(document.getElementById('m2'))
document.getElementById('m2').style.visibility = 'visible';
  else if(document.getElementById('m1'))
document.getElementById('m1').style.visibility = 'visible';
}
</script>
 
</head>
 
<body onLoad="boxes_height();">


<div id="pagewidth" >
<div id="header">
<a href=index.php><div id="logo"></div></a>
<div id="top2"></div>
<div id="top3"></div>
<div id="top4"></div>
</div>

<div id="pathway"><jdoc:include type="modules" name="breadcrumb" style="xhtml"/></div>

<div id="wrapper2" class="clearfix" >

<div id="twocols" class="clearfix">

<?php if ( $this->countModules('right')) { ?>
<div id="maincol">

<?php if (!$this->countModules('user5') || !$this->countModules('user2'))
$one = "_one"; ?>

<?php if ($this->countModules('user2')) { ?>
<div id="m1" class="box_news<?php echo $one; ?>">
<jdoc:include type="modules" name="user2" style="table"/></div>
<?php } ?>
<?php if ($this->countModules('user5')) { ?>
<div id="m2" class="box_news<?php echo $one; ?>">
<jdoc:include type="modules" name="user5" style="table"/></div>
<?php } ?>

<div style="clear:both;"><jdoc:include type="component" style="html"/></div>
</div>
<div id="right">
<div id="blue_box">
<jdoc:include type="modules" name="top" style="table"/>
<jdoc:include type="modules" name="user2" style="table"/>
</div>
<div id="blue_bottom"></div>
<jdoc:include type="modules" name="right" style="table"/>
</div>
<?php }
else {?>
<div id="maincol" style="width:575px;">

<?php if (!$this->countModules('user1') || !$this->countModules('user2'))
$one = "_one"; ?>
<?php if ($this->countModules('user2')) { ?>
<div id="m1" class="box_news_long<?php echo $one; ?>"><jdoc:include type="modules" name="user2" style="table"/></div>
<?php } ?>
<?php if ($this->countModules('user1')) { ?>
<div id="m2" class="box_news_long<?php echo $one; ?>"><jdoc:include type="modules" name="user1" style="table"/></div>
<?php } ?>

<div style="clear:both;"><jdoc:include type="component" style="html"/></div>
</div>
<?php } ?>

</div>

<div id="left">
<div id="leftInner">
<jdoc:include type="modules" name="left" style="table"/>
</div>
</div>
</div>

<div id="border_bottom"></div>
<div id="footer_menu">
<jdoc:include type="modules" name="user3" style="xhtml"/>
</div>

<div id="footer">
<div style="float:left;text-align:left; width:436px;">
<?php include_once('includes/footer.php'); ?>
</div>
<div style="float:right;padding-top:5px;text-align:right;"><a href="http://www.transalen.ru" target="_blank" title="Транспортная компания"><img src=images/fooot.png></a>
</div>
</div>
</div>

</body>
</html>
Код
@import url('clearing.css');



td, input, option, textarea {

  color: #333333;

  font-family: Verdana, Arial, Helvetica, sans-serif;

  font-size: 12px;

  background: white;

}

fieldset {  border:none;}

body, td, div {

  margin: 0px;

  padding: 0px;

}



div {

overflow:hidden;

}



html,body {

  height:100%;

  width:100%;

}



body {

  color: #333333;

  background:#f0f0f0;

  font-family: Verdana, Arial, Helvetica, sans-serif;

  font-size: 12px;

  vertical-align: top;

}



td {

  border-spacing: 0;

  vertical-align: top;

}



img {border: 0px;}





a {

font-size: 12px;

text-decoration: none;

background: none;

color: #599ad6;

}



a:hover {

text-decoration: underline;

color:#333333;

}



table.contentpaneopen, table.contentpane {width: 100%;} /* Safari */



#pathway

{

clear:both;

padding:5px;

background:#f2f2f2;

width:786px;

margin:auto;

}



a.pathway {

padding:0px 5px 0px 5px;

font-size: 12px;

text-decoration: none;

background: none;

color: #599ad6;

}

a.pathway:hover {

text-decoration: none;

color:#333333;

}



.componentheading, .contentheading, .contentpagetitle {font-size:16px;font-weight:bold;color:#599ad6;padding:10px 0px 10px 0px;}

table.contentpaneopen {width: 100%;padding: 0;border-collapse: collapse;border-spacing: 0;border-width: 0;margin: 0px;vertical-align: top;}

table.contentpaneopen td {padding-right: 5px;}



.small {color: #999999;font-size: 11px;}

.createdate {height: 15px;padding-bottom: 10px;color: #999999;font-size: 11px;}

.modifydate {height: 15px;padding-top: 10px;color: #999999;font-size: 11px;}



.mosimage {border: 1px solid #cccccc;margin: 7px;}

.mosimage_caption {background: #efefef;padding: 4px;color: #666666;font-size: 10px;border-top: 1px solid #cccccc;}



.buttonheading {padding:5px;}



.sectiontableheader {font-weight:bold;color:#333333;padding:5px;background:#ebebeb;border-bottom:1px solid #cfcfcf;}

.sectiontableentry1 td {padding:7px;background:#f8f8f8;}

.sectiontableentry2  td {padding:7px;background:white;}

.contentpane {margin:10px 5px 10px 5px;}

.contentdescription {padding:10px;}



/*spis tresci*/

table.contenttoc {margin: 10px;width:150px;border:1px solid #f2f2f2;}

.contenttoc th {padding:5px 10px 5px 10px;background: #f2f2f2;}

.contenttoc td {padding:2px 10px 2px 10px;}



.pagenav {padding:5px;} /*pasek nawigacji*/



ul {

list-style-image: url(../images/arrow2.gif);
}



/*formularze*/

.button {margin:3px 0px 0px 5px;border:1px solid #c6c6c6;}

.inputbox {margin:5px 0px 5px 5px;border:1px solid #c6c6c6;}

.text_area {margin:5px 0px 5px 5px;border:1px solid #c6c6c6;}



#searchphraseany, #searchphraseall, #searchphraseexact, #mod_login_remember

{

background:none;

}



/*do wydruku i powiadamienia znajomego*/



body.contentpane, body.contentpane a, body.contentpane span.small, body.contentpane table.contentpaneopen td, body.contentpane table td {

  background:white;

  color:black;

}



body.contentpane .button {

color:black;

border:1px solid black;

}



/*kod wstawiany na strone*/

.moscode {}, .highlight {}, pre {}, code {}





#top {

padding:7px 7px 0px 7px;

vertical-align:top;

height:192px;

}



#logo {

width:360px;

height:98px;

background:url(../images/top1.jpg) no-repeat;

float:left;

}



#top2 {

width:422px;

height:98px;

background:url(../images/top2.jpg) no-repeat;

float:left;

}



#top3 {

width:360px;

height:87px;

background:url(../images/top3.jpg) no-repeat;

clear:left;

float:left;

}



#top4 {

width:422px;

height:87px;

background:url(../images/top4.jpg) no-repeat;

float:left;

}


#left div, #left table, #left tr, #left td{

margin:0px;

padding:0px;

background:none;

}



#left table.moduletable {

width:100%;

}



#left div.search {

width:100px;

}



#left form {padding:10px 0px 5px 0px;margin-bottom:10px;background:#f8f8f8;}

#left label {margin-left:10px;color:#7c7c7c;}

#left input {margin:3px 0px 0px 5px;border:1px solid #c6c6c6;}

#left input.button {margin:10px 0px 10px 5px;padding:1px 8px 1px 8px;}

#left #mod_login_remember {border:0px;margin:5px 0px 0px 10px;}

#left #mod_login_password, #left #mod_login_username {margin:5px 0px 5px 7px;width:100px;}



#left div.syndicate {

padding:10px 3px 10px 3px;

}



#left th {

font-size:14px;

color:#616161;

text-align:left;

padding:7px 0px 0px 30px;

width:140px;

height:27px;

background:url(../images/bg_gray2.gif) repeat-x;

border-top:1px solid #d9d9d9;

display:block;

}



#left a.mainlevel {

display:block;

font-weight:bold;

color:#999999;

border-top:1px solid #d9d9d9;

padding:7px 3px 7px 30px;

background:url(../images/arrow.gif) no-repeat 8px 11px;

text-decoration:none;

}



#left a.mainlevel:hover{

background:url(../images/arrow2.gif) no-repeat 11px 11px;

color:#599ad6;

text-decoration:none;

}



#left a.sublevel {

display:block;

font-weight:bold;

color:#999999;

border-top:1px solid #d9d9d9;

padding:7px 3px 7px 35px;

background:url(../images/arrow2.gif) no-repeat 12px 11px;

text-decoration:none;

}



#left a.sublevel:hover {

background:url(../images/arrow2.gif) no-repeat 15px 11px;

color:#599ad6;

text-decoration:none;

}



#right th {

font-size:14px;

color:#616161;

text-align:left;

padding:7px 0px 0px 20px;

width:188px;

height:27px;

background:url(../images/bg_gray.gif) repeat-x;

border-top:1px solid #d9d9d9;

display:block;

}



#right td {

background:#f8f8f8;

padding:5px;

}



#right label {

text-align:left;

}



#right input {background:none;}

#right input.button {border:1px solid #d9d9d9;background:white;padding:2px 4px 2px 4px;}



.pollstableborder td {text-align:left;}



#blue_box td, #blue_box th, #blue_box{

background:#6dabe4;

color:white;

}



#blue_box th {

text-transform:uppercase;

padding:8px 0px 0px 15px;

height:23px;

border-bottom:1px solid #b6d5f2;

border-top:0px;

width:190px;

}

#blue_box a, #blue_box a:hover {color:white;}

#blue_box .contentpagetitle { font-size:12px;}



#blue_box ul {padding:10px;}

#blue_box li {background:url(../images/dot.gif) no-repeat 4px 6px;padding:2px 3px 2px 20px;}

#blue_box li a {font-weight:bold;}



#blue_bottom {

width:208px;

height:9px;

background:url(../images/blue_bottom.gif) no-repeat;

margin-bottom:8px;

font-size:0px;

}



#center {

width:365px;

padding:0px 10px 0px 10px;

float:left;

position:relative;

background:none;

overflow:hidden;

}





.box_news,.box_news_long,.box_news_one,.box_news_long_one {border:1px solid #b3d2ef;visibility:hidden;float:left;margin:0px 3px 0px 3px;}

.box_news table {width:173px;}

.box_news_long table {width:275px;}

.box_news_one table {width:346px;}

.box_news_long_one table {width:560px;}

.box_news th,.box_news_one th,.box_news_long th,.box_news_long_one th {

text-transform:uppercase;

text-align:left;

padding:2px 5px 0px 15px;

height:18px;

background:url(../images/bg_caption.gif) repeat-x;

color:white;

}

.box_news td,.box_news_long td,.box_news_one td,.box_news_long_one td {padding:5px;}

.box_news li,.box_news_long li,.box_news_one li,.box_news_long_one li {background:url(../images/arrow2.gif) no-repeat 4px 6px;padding:2px 3px 2px 20px;}

.box_news a,.box_news_long li a,.box_news_one li a,.box_news_long_one li a {font-weight:bold;text-decoration:none;}



#footer_menu h3 { display: none;}

#footer_menu {

clear:both;

color:#b2b2b2;

border-top:3px solid #f4f4f4;

height:25px;

padding:10px 5px 0px 15px;

text-align:center;

width:776px;

margin:auto;

}



#footer_menu ul {

list-style:none;

margin:0px;

padding:0px;

text-align:center;

}



#footer_menu ul li {

display:inline;

text-align:center;

padding:0px 20px 0px 20px;

background:url(../images/arrow4.gif) 8px 3px no-repeat;

}



#footer_menu ul li a  {

font-size:12px;

text-decoration:none;

font-weight:bold;

color:#b2b2b2;

}



#footer_menu ul li a:hover {

color:#969696;

}



#footer div {

text-align:left;

}



#footer a:link, #footer a:visited {

color:#bee6ff;

text-decoration:none;

}



#footer a:hover {

text-decoration:underline;

}





#pagewidth {

width:836px;

text-align:left; 

margin-left:auto;

margin-right:auto;

background:url(../images/bg_big.gif) repeat-y;

}



#wrapper2 {

margin-top:5px;

padding:0px 20px 10px 20px;

background:url(../images/bg_left.gif) repeat-y 198px;

}



#border_bottom {

border-bottom:1px solid #cfcfcf;

width:796px;

margin:auto;

font-size:0px;

}

 

#header {

position:relative;

height:190px;

padding:6px 0px 0px 15px;

width:796px;

margin:auto;

}

 

#left {

width:170px;

float:left;

position:relative;

padding:0px 0px 0px 5px;

}

 

#twocols {

width:605px;

float:right;

position:relative;

}

 

#right {

width:208px;

float:right;

position:relative;

padding:0px 7px 0px 0px;

}

 

#maincol {

float: left;

display:inline;

position: relative;

width:370px;

}

 

#footer {

height:38px;

clear:both;

width:776px;

margin:auto;

padding:10px 5px 0px 15px;

color:white;

border-top:5px solid #bed8ef;

background:url(../images/bg_bottom.gif) repeat-x;

}

 

 /*printer styles*/

 @media print{

/*hide the left column when printing*/

#left{display:none;}



/*hide the right column when printing*/

#rightcol{display:none;}

#twocols, #maincol{width:100%; float:none;}

}
*

uWn

  • Новичок
  • 22
  • 0 / 0
Re: Вопрос по положению меню
« Ответ #1 : 21.01.2012, 16:04:18 »
Вот еще файл CSS от меню:
Код
#menu, #menu ul {

        margin: 0;

        padding: 0;

        list-style: none;

}

#menu {

        min-width:600px;

max-width:900px;

        margin: 0 auto;

        border: 1px solid #222;

        background-color: #111;

        background-image: -moz-linear-gradient(#444, #111);

        background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));

        background-image: -webkit-linear-gradient(#444, #111);

        background-image: -o-linear-gradient(#444, #111);

        background-image: -ms-linear-gradient(#444, #111);

        background-image: linear-gradient(#444, #111);

        -moz-border-radius: 6px;

        -webkit-border-radius: 6px;

        border-radius: 6px;

        -moz-box-shadow: 0 1px 1px #777;

        -webkit-box-shadow: 0 1px 1px #777;

        box-shadow: 0 1px 1px #777;

}

#menu:before,

#menu:after {

        content: "";

        display: table;

}



#menu:after {

        clear: both;

}



#menu {

        zoom:1;

}

#menu li {

        float: left;

        border-right: 1px solid #222;

        -moz-box-shadow: 1px 0 0 #444;

        -webkit-box-shadow: 1px 0 0 #444;

        box-shadow: 1px 0 0 #444;

        position: relative;

}



#menu a {

        float: left;

        padding: 12px 30px;

        color: #999;

        text-transform: uppercase;

        font: bold 12px Arial, Helvetica;

        text-decoration: none;

        text-shadow: 0 1px 0 #000;

}



#menu li:hover > a {

        color: #fafafa;

}



*html #menu li a:hover { /* Только для IE6 */

        color: #fafafa;

}

#menu ul {

        margin: 20px 0 0 0;

        _margin: 0; /*IE6 only*/

        opacity: 0;

        visibility: hidden;

        position: absolute;

        top: 38px;

        left: 0;

        z-index: 9999;

        background: #444;

        background: -moz-linear-gradient(#444, #111);

        background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));

        background: -webkit-linear-gradient(#444, #111);

        background: -o-linear-gradient(#444, #111);

        background: -ms-linear-gradient(#444, #111);

        background: linear-gradient(#444, #111);

        -moz-box-shadow: 0 -1px rgba(255,255,255,.3);

        -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);

        box-shadow: 0 -1px 0 rgba(255,255,255,.3);

        -moz-border-radius: 3px;

        -webkit-border-radius: 3px;

        border-radius: 3px;

        -webkit-transition: all .2s ease-in-out;

        -moz-transition: all .2s ease-in-out;

        -ms-transition: all .2s ease-in-out;

        -o-transition: all .2s ease-in-out;

        transition: all .2s ease-in-out;

}



#menu li:hover > ul {

        opacity: 1;

        visibility: visible;

        margin: 0;

}



#menu ul ul {

        top: 0;

        left: 150px;

        margin: 0 0 0 20px;

        _margin: 0; /*IE6 only*/

        -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);

        -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);

        box-shadow: -1px 0 0 rgba(255,255,255,.3);

}



#menu ul li {

        float: none;

        display: block;

        border: 0;

        _line-height: 0; /*IE6 only*/

        -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

        -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

        box-shadow: 0 1px 0 #111, 0 2px 0 #666;

}



#menu ul li:last-child {

        -moz-box-shadow: none;

        -webkit-box-shadow: none;

        box-shadow: none;

}



#menu ul a {

        padding: 10px;

        width: 130px;

        _height: 10px; /*IE6 only*/

        display: block;

        white-space: nowrap;

        float: none;

        text-transform: none;

}



#menu ul a:hover {

        background-color: #0186ba;

        background-image: -moz-linear-gradient(#04acec,  #0186ba);

        background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));

        background-image: -webkit-linear-gradient(#04acec, #0186ba);

        background-image: -o-linear-gradient(#04acec, #0186ba);

        background-image: -ms-linear-gradient(#04acec, #0186ba);

        background-image: linear-gradient(#04acec, #0186ba);

}

#menu ul li:first-child > a {

        -moz-border-radius: 3px 3px 0 0;

        -webkit-border-radius: 3px 3px 0 0;

        border-radius: 3px 3px 0 0;

}



#menu ul li:first-child > a:after {

        content: '';

        position: absolute;

        left: 40px;

        top: -6px;

        border-left: 6px solid transparent;

        border-right: 6px solid transparent;

        border-bottom: 6px solid #444;

}



#menu ul ul li:first-child a:after {

        left: -6px;

        top: 50%;

        margin-top: -6px;

        border-left: 0;

        border-bottom: 6px solid transparent;

        border-top: 6px solid transparent;

        border-right: 6px solid #3b3b3b;

}



#menu ul li:first-child a:hover:after {

        border-bottom-color: #04acec;

}



#menu ul ul li:first-child a:hover:after {

        border-right-color: #0299d3;

        border-bottom-color: transparent;

}



#menu ul li:last-child > a {

        -moz-border-radius: 0 0 3px 3px;

        -webkit-border-radius: 0 0 3px 3px;

        border-radius: 0 0 3px 3px;

}

*

Alldar

  • Завсегдатай
  • 1450
  • 187 / 1
Re: Вопрос по положению меню
« Ответ #2 : 21.01.2012, 16:19:05 »
ссылку на сайт дайте
Пожалуйста не дублируйте сообщения в личку/skype/google+. Все вопросы задавайте на форуме! Спасибо!

Клуб шаблонов для Joomla - NorrTheme
*

uWn

  • Новичок
  • 22
  • 0 / 0
Re: Вопрос по положению меню
« Ответ #3 : 21.01.2012, 16:23:01 »
 ^-^
« Последнее редактирование: 21.01.2012, 16:44:42 от uWn »
*

Диза

  • Новичок
  • 2
  • 0 / 0
Re: Вопрос по положению меню
« Ответ #4 : 21.01.2012, 16:35:38 »
Не узнала как добавить свой вопрос. Прошу прощения, я поэтому написала здесь. Скажите пожалуйста, А можно как то установить один счётчик на несколько сайтов? Счетчик посетителей сайта Vinaora Visitors Counter
*

al-teen

  • Глобальный модератор
  • 2385
  • 224 / 10
  • im
Re: Вопрос по положению меню
« Ответ #5 : 21.01.2012, 16:39:40 »
Код
div {
    overflow: hidden;
}
template_css.css (строка 29)
удалите
*

al-teen

  • Глобальный модератор
  • 2385
  • 224 / 10
  • im
Re: Вопрос по положению меню
« Ответ #6 : 21.01.2012, 16:40:59 »
Не узнала как добавить свой вопрос. Прошу прощения, я поэтому написала здесь. Скажите пожалуйста, А можно как то установить один счётчик на несколько сайтов? Счетчик посетителей сайта Vinaora Visitors Counter
создать новую тему.Поставить можно, но поинтересуйтесь у того, чей счетчик ставите, могут забанить
*

uWn

  • Новичок
  • 22
  • 0 / 0
Re: Вопрос по положению меню
« Ответ #7 : 21.01.2012, 16:44:26 »
Код
div {
    overflow: hidden;
}
template_css.css (строка 29)
удалите
Спасибо огромное! помогло!
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Пункт меню

Автор s120367

Ответов: 0
Просмотров: 160
Последний ответ 03.06.2018, 13:02:55
от s120367
Большое меню Joomla

Автор Amakeeva

Ответов: 1
Просмотров: 352
Последний ответ 22.01.2018, 13:17:45
от effrit
Как можно отображать имя пользователя в название меню?

Автор selimoff

Ответов: 27
Просмотров: 3417
Последний ответ 02.01.2018, 15:24:44
от logan-19
как сделать пункт меню не кликабельным?

Автор qweqweqwe

Ответов: 13
Просмотров: 6269
Последний ответ 07.09.2017, 01:45:49
от forzi
Сдвинуть пункты меню в левое положение

Автор wectra

Ответов: 6
Просмотров: 617
Последний ответ 12.07.2017, 21:09:01
от wectra