Всем привет! Скажите пожалуйста как разделить контент блока меню,от границ модуля? Вот что получается.
Вот так выглядит блок в HTML это тот результат который хотим получить!
Теперь выделим данный блок!
Как видим контент блока выделился отдельно от границ блока.
Вот что получилось у меня при переносе данного html блока в шаблон Joomla 2.5
Сам блок
Как видно на рисунке даже текст перекосило сверху,и шрифт получился не по размеру.
Теперь выделим сам блок
Как видим контент меню блока выделился вместе с границами.Вопрос как сделать так как в первом примере?
Вот 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 кроме стилей больше ничего не менял.
