Перейти к содержанию
СофтФорум - всё о компьютерах и не только

Как разделить границы блока меню?


Рекомендуемые сообщения

Всем привет! Скажите пожалуйста как разделить контент блока меню,от границ модуля? Вот что получается.
 
Вот так выглядит блок в HTML это тот результат который хотим получить!
 
c0ce0852e000.jpg
 
Теперь выделим данный блок!
 
05bd7b220e47.jpg
 
Как видим контент блока выделился отдельно от границ блока.
 
Вот что получилось у меня при переносе данного html блока в шаблон Joomla 2.5
 
Сам блок
 
cd95cd2e8347.jpg
 
 
Как видно на рисунке даже текст перекосило сверху,и шрифт получился не по размеру.
 
Теперь выделим сам блок
 
d5abc9123bad.jpg
 
Как видим контент меню блока выделился вместе с границами.Вопрос как сделать так как в первом примере?
 
Вот HTML Код блока который пытаюсь встроить в шаблон джумлы!
 

 

<table style="border:1px solid #1c1c1c" cellpadding="0" cellspacing="0" width="198">
<tr><td height="32px" style="border-bottom:1px solid #1c1c1c;background:url(/img/block_head.png); text-shadow: 0.1em 0.1em 0.05em #000000;"><font color="#cbcbcb"><center>TITLE</center></font></td></tr>
<tr><td style="background:#242424;padding:7px;">CONTENT</td></tr>
<tr><td><img src="/img/block_foot.png" border="0"></td></tr>
</table><div style="padding-top:4px;"></div>
<!-- </block> -->

 

 
Его состав(кнопки)
 
<div class="menublock"><a onclick="$('#menu1').slideToggle('slow');" href="javascript://"><center>Название</center></a></div></center><div style="padding-top:3px;"></div><div class="bBlok31" id="menu1" style="display:none;"><ul class="uz"> <li><a href="Ссылка">Название</a></li>  <li><a href="Ссылка">Название</a></li>  <li><a href="Ссылка">Название</a></li>  <li><a href="Ссылка">Название</a></li>  <li><a href="Ссылка">Название</a></li>  <li><a href="Ссылка">Название</a></li>  <li><a href="Ссылка">Название</a></li>  <li><a href="Ссылка">Название</a></li>  </ul></div><div style="padding-top:3px;"></div>
 
И CSS Данного блока
 
.bBlok31 {padding:2px;background:url(/img/b4.gif);border:1px solid #1c1c1c;}.menublock {padding:2px;background:url(/img/bg2.png);border:1px solid #1c1c1c;}
 
 
Вот CSS код который я изменял.Где закомментировано это оригинальный код.
 
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,font,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,center,dl,dt,dd,ul,li,fieldset,form,label,legend,table,caption,tfoot,thead{background: transparent;border: 0;font-style: inherit;font-weight: inherit;margin: 0;padding: 0;outline: 0;vertical-align: baseline;}tr,th,td {background: transparent;border: 1px solid #e1e1e1;font-style: inherit;font-weight: inherit;margin: 0;padding-left: 7px;outline: 0;vertical-align: baseline;} table {border-collapse: collapse;border-spacing: 0; width: 100%; border: 1px solid #e1e1e1;}html {overflow-y: scroll;}   /* Main Layout */html {height: 100%;}body {text-shadow:#080808 1px 1px 0px;font-family:verdana,arial,helvetica; font-size:8pt; color:#dedede;  /* font-family: Helvetica, Arial, sans-serif; font-size:13px; line-height: 1.3; color: #555; */ }body.contentpane { background:#fff; color:#555;}.background { background:url(../images/fon_nk.png); margin:0; background-attachment:fixed;}h1,h2,h3,h4,h5,h6 {margin:0; padding:10px 0; font-weight:bold; color:#134E8B;font-family:Arial, Helvetica, sans-serif;}.componentheading { font-style:italic;font-size:25px; margin:0; padding:0 0 10px 0; color:#1a528c;}h1 { font-size: 20px;}h2 { font-size: 18px;}h3 { font-size: 16px;}h4 { font-size: 14px;}/* a:link, a:visited { text-decoration: none; color: #1aa8fb;}a:hover { text-decoration: underline; color: #2f7ac0;} */a:link, a:visited { text-decoration: none; color: #dedede;}a:hover { text-decoration: none; color: #ffffff;}ul {margin:0 0 0 15px;}p {margin-top: 0;margin-bottom: 10px; padding: 0 5px 0 5px;}blockquote { background:#eee; border:3px solid #ccc; margin:5px; padding:5px; font-size:18px; font-family:Arial, Helvetica, sans-serif; font-style:italic}element.style { height:auto;}hr { width:100%; clear:both; border:none; height:2px; background:#eee; margin:0; padding:0;}.clr {clear: both;} /* Header */#header { position:relative; height:125px; width:960px; margin:0 auto; background:url(../images/banner.jpg) repeat-x; -moz-border-radius: 5px; border-radius:5px;-moz-box-shadow: 0 0 5px #b9b9b9;-webkit-box-shadow: 0 0 5px#b9b9b9;box-shadow: 0 0 5px #b9b9b9;}#header-w {position:relative;}.top {color:#fff;width:450px;overflow:hidden; padding:20px 0 0 0; margin:0 0 0 500px;z-index:1;}.top a {color:#fff; text-decoration:underline}.logo { position:absolute; left:30px; color:#fff; top: 27px;}.slogan { position:absolute; left:67px; color:#555; top: 80px;}.tguser { position:absolute; right:10px; top: 0px; color:#fff; float:right;} /*.topmenu {right:130px; top:10px; float:right; height:22px;font-family: segoe ui, verdana, arial, sans-serif; -moz-border-radius-bottomright: 7px; -moz-border-radius-bottomleft: 7px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; webkit-bottom-right-radius: 7px; webkit-bottom-left-radius: 7px ;} */.topmenu ul {margin:0; padding:0; float:left; background:#fff; -moz-border-radius: 5px; border-radius: 5px;}.topmenu ul li {list-style:none;float:left;height:100%;position:relative;}.topmenu ul li a { display:block;padding:0 10px 0 10px; margin:0; line-height:22px; color:#555; text-decoration:none;font-size:12px;font-weight:normal; text-shadow:#fff 0 1px;}.topmenu ul li.active {}.topmenu ul li.active a {}.topmenu ul li:hover {}.topmenu ul li a:hover{ text-decoration:none; font-weight:normal; font-size:12px; -moz-border-radius: 5px; border-radius: 5px; color:#03b6dd;text-shadow:none;}.topmenu ul li ul {position:absolute;width:180px;left:-999em;border-top:0; margin:0; padding:0;}.topmenu ul li:hover ul, #menu ul li.sfHover ul {left:0;}.topmenu ul li ul li {padding:0;height:auto;width:180px; margin:0; border:none;}.topmenu ul li:hover ul li a {text-shadow:none;}.topmenu ul li:hover ul li { background:none;}.topmenu ul li:hover ul li a, .topmenu ul li ul li a, .topmenu ul li.active ul li a{margin:0; padding:0 0 0 10px;height:24px;line-height:24px; background:#555;border-bottom:1px solid #3a3a3a;color:#d1d1d1; font-size:11px;font-weight:normal;text-shadow:none;}.topmenu ul li ul li a:hover, .topmenu ul li ul li.active a, .topmenu ul li.active ul li a:hover, .topmenu ul li.active ul li.active a {margin:0; padding:0 0 0 10px;height:24px;line-height:24px;background:#343434;color:#fff; font-size:11px;text-shadow:none;}.topmenu ul li ul ul, .topmenu ul li:hover ul ul, .topmenu ul li:hover ul ul ul, .topmenu ul li:hover ul ul ul ul, .topmenu ul li.sfHover ul ul, .topmenu ul li.sfHover ul ul ul, .topmenu ul li.sfHover ul ul ul ul {left:-999em;} #slide-w { margin:0; padding:0; background:#EAEAEA url(../images/bg.png) 0 0 repeat-x; border-bottom:1px solid #d6d6d6;border-top:1px solid #f5f5f5;}#slide { width:960px; margin:0 auto;} /* Navigation */#nav {}#navl {}#navr {height:40px; background:url(../images/mainmenu.png) 0 0 repeat-x; font-family: 'Cuprum', sans-serif; font-size:15px; margin-top: 5px;margin-top: -4px;}#nav {z-index:10; position:relative;}#nav-left { float:left; width:80%;}#nav-right { float:right; width:20%;}#nav ul {margin:0; padding:0; float:left;}#nav ul li {list-style:none;float:left;height:100%;position:relative; padding:0; margin:0;}#nav ul li a { display:block;padding:0 15px 0 15px; margin:0; line-height:40px; color:#fff; text-decoration:none;font-size:15px;font-weight:normal;}#nav ul li.active {}#nav ul li.active a {background:url(../images/mainmenu-h.png) repeat center; color:#555;}#nav ul li:hover {}#nav ul li a:hover{ text-decoration:none; font-weight:normal; font-size:15px; background:url(../images/mainmenu-h.png) repeat center; color:#555;}#nav ul li ul {position:absolute;width:180px;left:-999em;border-top:0; margin:0; padding:0;}#nav ul li:hover ul, #menu ul li.sfHover ul {left:0;}#nav ul li ul li {padding:0;height:auto;width:180px; margin:0 auto; border:none; text-align: left;}#nav ul li ul li:hover ul {left:180px; top:0}#nav ul li:hover ul li a {text-shadow:none;}#nav ul li:hover ul li { background:none;}#nav ul li:hover ul li a, #nav ul li ul li a, #nav ul li.active ul li a{margin:0; padding:0 0 0 10px;height:24px;line-height:24px; background:#555;border-bottom:1px solid #3a3a3a;color:#d1d1d1; font-size:12px;font-weight:normal;text-shadow:none; -moz-border-radius: 0px; border-radius: 0px;}#nav ul li ul li a:hover, #nav ul li ul li.active a, #nav ul li.active ul li a:hover, #nav ul li.active ul li.active a {text-align: left; padding:0 0 0 10px;height:24px;line-height:24px;background:#343434;color:#fff; font-size:13px;text-shadow:none;}#nav ul li ul ul, #nav ul li:hover ul ul, #nav ul li:hover ul ul ul, #nav ul li:hover ul ul ul ul, #nav ul li.sfHover ul ul, #nav ul li.sfHover ul ul ul, #nav ul li.sfHover ul ul ul ul {left:-999em;}#nav ul li ul li ul li{padding:0;height:auto;width:180px; margin:0 auto; border:none; text-align: left;} /* Sidebar */#leftbar-w {padding:0px;width:209px;float:left;}#addthis {float:center; padding-left: 12px; padding-top: 5px;}#rightbar-w {padding:0px;width:209px;float:right; }#sidebar {padding:0;}#sidebar .module {border:1px solid #1c1c1c; margin-bottom: 5px; /* -moz-border-radius-bottomright: 7px; -moz-border-radius-bottomleft: 7px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; webkit-bottom-right-radius: 7px; webkit-bottom-left-radius: 7px; */}#sidebar .module-title {font-size:8px;font-weight:100;margin:0;height:32px; line-height:34px; color: #cbcbcb; padding:0 0 0 22px; /* font-family: 'Cuprum', sans-serif; */ font-size:12px; border-bottom:1px solid #1c1c1c; text-shadow: 0.1em 0.1em 0.05em #000000;/*  -moz-border-radius-topright: 7px; -moz-border-radius-topleft: 7px; border-top-right-radius: 7px; border-top-left-radius: 7px; -moz-box-shadow: 0px 0px 3px #b9b9b9; -webkit-box-shadow: 0px 0px 3px #b9b9b9; box-shadow: 0px 0px 3px #b9b9b9; */}#leftbar-w .module-title {padding: 0 0 0 15px; background:#202020; background: url(../images/block_head.png);}#rightbar-w  .module-title {padding: 0 0 0 15px; background: #fff;}#sidebar .module-body {margin:0; padding:7px; background:#242424;/*  -moz-border-radius-bottomright: 7px; -moz-border-radius-bottomleft: 7px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; color:#555; -moz-box-shadow: 0px 0px 3px #b9b9b9; -webkit-box-shadow: 0px 0px 3px #b9b9b9; box-shadow: 0px 0px 3px #b9b9b9; */}/* #sidebar .module-body p{padding:0; margin:0;} */#sidebar  ul li { margin:0 5px; padding:0;}#sidebar .module ul.menu{margin:5px 0 0 0; padding:0;list-style:none; padding:0; list-style-type:none;}#sidebar .module ul.menu li{list-style:none; list-style-type:none;margin:6px; padding:0; border:1px solid #1c1c1c;  /* border-bottom:1px dotted #6e99c2; */}#sidebar .module ul.menu li a {display:block;margin:0; padding:3px 0 3px 15px;font-weight:bold;line-height:12px;background: url(../images/bg2.png) 0% 50% no-repeat; text-decoration:none; font-size:10px; text-align:left;}#sidebar .module ul.menu li a:hover { color:#ffffff; text-decoration:none;}#sidebar .module ul.menu li.active a{color:#dedede;}#sidebar .module ul.menu li ul {border-top:1px solid #e4e4e4; margin:0;}#sidebar .module ul.menu li ul li {background:none; border:none; margin: 0 0 0 15px;   }#sidebar .module ul.menu li ul li a{ border: 0; color:#999; background: url(../images/arrow2.png) 0% 50% no-repeat; text-align:left;}#sidebar .module ul.menu li ul li a:hover{ border: 0; color:#134E8B; background: url(../images/arrow2.png) 0% 50% no-repeat; }#sidebar .module ul.menu li.active ul li a{color: #6e99c2;}#sidebar .module ul.menu li ul li.active a, #sidebar .module ul.menu li.active ul li a:hover{color:#134E8B;}
 
 
Помогите пожалуйста исправить.
 
p.s кроме стилей больше ничего не менял.
Ссылка на комментарий
Поделиться на другие сайты

Присоединяйтесь к обсуждению

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

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...