Diman19
Junior Member | Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору Всем привет! Скажите пожалуйста как разделить контент блока меню,от границ модуля? Вот что получается. Вот так выглядит блок в 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 кроме стилей больше ничего не менял. |