Итак, имеем 2-х колоночный шаблон. Цель добавить 3-ю колонку и сделать чтобы модули в левой и правой колонке были на разной высоте. Точнее в левой колонке они должны быть ниже чем в правой.
Что сделано.
1. Добавил новую позицию в index.php
2. добавил в templateDetails.xml новую позицию
3. В CSS скопировал код с левой колонки обозвал её
4. Дальше застопорился.
5. Разными паддинг-топ в левой колонке опустил модули на 340px, в правой на 200px. В IE всё отработало нормально. В Firefox правая колонка опускаться не хочет.
Подозреваю, что где-то неправильно (ткните носом пожалуйста) привязал стиль к новой позиции в шаблоне. Почти день просидел а разобраться не могу!
/* CSS Document */
#content60 {
float: left;
width: 530px;
background: transparent url(../images/content_bg.gif) no-repeat 0 0;
overflow: hidden;
}
#content80 {
float: left;
width: 530px;
background: transparent url(../images/content_bg.gif) no-repeat 0 0;
overflow: hidden;
}
#content100 {
float: left;
width: 530px;
background: transparent url(../images/content_bg.gif) no-repeat 0 0;
overflow: hidden;
}
img {
margin: 5px 15px 10px 15px;
}
* {
margin:0;
padding:0;
}
body {
background: #f7f7f7 url(../images/body_bg.jpg) repeat 50% 0;
background-color: #f7f7f7;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 1.5;
color: Black;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address {
margin:0.5em 0;
}
h1, h2, h3, h4, h4 {
padding-bottom: 5px;
margin: 15px 0;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
h1 {font-size: 200%;}
h2 {font-size: 175%;}
h3 {font-size: 150%;}
h4 {color:#fff; font-size: 120%;}
a:link, a:visited {
font-size: 12px;
color: Navy;
text-decoration: none;
font-family: "Lucida Sans", Tahoma, Arial;
}
a:hover {
color: Red;
text-decoration: underline;
}
.contentheading {
font-family: "Times New Roman", Times, serif;
background: transparent url(../images/contentheading.jpg) no-repeat 0 0;
font-size: 22px;
text-align: center;
color: Navy;
font-weight: bold;
height: 10px;
text-transform: uppercase;
width: 990px;
}
.contentheading a:link, .contentheading a:visited {
font-family: "Lucida Sans", Tahoma, Arial;
font-size: 14px;
color: #ad7a13;
height: 10px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
}
.contentheading a:hover {
font-family: "Lucida Sans", Tahoma, Arial;
font-size: 14px;
color: #93bb3a;
font-weight: bold;
height: 10px;
text-transform: uppercase;
text-decoration: underline;
}
.modifydate{
font-family: "Lucida Sans", Tahoma, Arial;
font-size: 10px;
color: #b4b4b4;
padding: 10px;
}
.small{
font-family: "Lucida Sans", Tahoma, Arial;
font-size: 10px;
color: #b4b4b4;
}
.createdate{
font-family: "Lucida Sans", Tahoma, Arial;
font-size: 10px;
color: #b4b4b4;
}
.readon{
font-family: "Lucida Sans", Tahoma, Arial;
font-size: 12px;
font-weight: bold;
color: #ad7a13;
height: 30px;
}
a.readon:link, a.readon:visited {
font-family: "Lucida Sans", Tahoma, Arial;
font-size: 12px;
color: Blue;
text-decoration: none;
padding: 5px 8px 3px 7px;
height: 30px;
width: 100px;
}
a.readon:hover {
text-decoration: underline;
}
td.buttonheading {
width: 16px;
}
.article_column {padding:10px}
.article_row {padding:10px;}
li,dd {
margin-left:1em;
}
fieldset {
padding:.5em;
}
#wrap {
width: 960px;
text-align:left;
margin:0 auto;
}
#header {
height: 190px;
background: transparent url(../images/header.gif) no-repeat 0 0;
position: relative;
}
/*-------------------------------------------------------------- BREADCRUMBS -----*/
#breadcrumbs {
padding-right: 10px;
float:right;
text-align: right;
width: 100%;
overflow:hidden;
height: 22px;
color: #fff;
}
.breadcrumbs { }
#breadcrumbs a {
color: #fff;
}
#content {
float:left;
width:60%;
overflow:hidden;
}
.inside {
padding: 10px 30px 10px 50px;
}
#leftcol {
background: transparent url(../images/leftmenu_bg.gif) no-repeat 0 0;
float: left;
width: 210px;
overflow: hidden;
padding-left: 0px;
height: 987px;
}
#rightcol {
background: transparent url(../images/rightmenu_bg.gif) no-repeat 0 0;
float: right;
width: 220px;
overflow: hidden;
padding-left: 0px;
height: 987px;
}
#footer,.small,.createdate,.modifydate,.mosimage_caption {
font: 0.8em Arial,Helvetica,sans-serif;
color: #737373;
}
/*PDF & print buttons */
p.buttonheading {
text-align:right;
}
.buttonheading img
{
border:0;
padding: 6px;
}
p.buttonheading a:link,p.buttonheading a:visited
{
border:solid 2px #fff;
}
.leading p.buttonheading a:link,.leading p.buttonheading a:visited
{
border:solid 2px #EFDEEA;
}
p.buttonheading a:hover
{
background:none !important;
color:#000 !important;
}
p.buttonheading a:active,p.buttonheading a:focus
{
border:solid 2px;
color:#000;
}
#banner {
padding: 5px;
text-align:center;
overflow:hidden;
clear:both;
}
#footer {
text-align: right;
padding-top: 90px;
clear: both;
overflow: hidden;
background: transparent url(../images/footer*****.png) no-repeat 0 0;
max-height: 110px;
}
a {
text-decoration:none;
color: #1d5867;
}
a:hover {text-decoration:underline;}
h1,.componentheading {font-size:1.7em;}
h2,.contentheading {
font-size: 22px;
padding-left: 0px;
}
h4 {font-size:1.3em;}
h4 {font-size:1.2em;}
h5 {font-size:1.1em;}
h6 {font-size:1em;font-weight:700;}
ol {list-style: decimal outside; }
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
line-height: 17px;
text-indent: 18px;
padding-top: 0px;
background-repeat: no-repeat;
background-position: 0px 3px;
}
/*-------------------------------------------------------------- MODULE STYLING -----*/
#leftcol {
padding-top: 340px;
}
table.moduletable {
width: 182px;
margin-top: 10px;
margin-bottom: 10px;
}
.moduletable2 a:link, a:visited {
color: Navy;
}
.moduletable2 table.moduletable {
width: 100%;
margin-bottom: 5px;
}
.moduletable2 table.moduletable th {
background: none;
padding: 5px;
font-family: "Lucida Sans", Tahoma, Arial;
font-size: 14px;
color: #758089;
height: 12px;
text-transform: uppercase;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #aec9d4;
text-align: left;
list-style: none;
}
/*-------------------------------------------------------------- MODULE STYLING right-----*/
#rightcol,{
padding-top: 200px;
}
table.moduletable-r {
width: 182px;
margin-top: 10px;
margin-bottom: 10px;
}
.moduletable2-r a:link, a:visited {
color: Navy;
}
.moduletable2-r table.moduletable-r {
width: 100%;
margin-bottom: 5px;
}
.moduletable2-r table.moduletable-r th {
background: none;
padding: 5px;
font-family: "Lucida Sans", Tahoma, Arial;
font-size: 14px;
color: #758089;
height: 12px;
text-transform: uppercase;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #aec9d4;
text-align: left;
list-style: none;
}
/*-----------------------------------------------Menu Styling*/
table.moduletablemenu {
width: 206px;
margin-bottom: 20px;
}
/* Menu Heading*/
table.moduletable th, table.moduletable_menu th {
padding: 10px 10px 0 20px;
font-family: "Lucida Sans", Tahoma, Arial;
font-size: 14px;
color: #fff;
height: 10px;
text-transform: uppercase;
border-bottom-width: 1px;
text-align: left;
}
table.moduletable td {
padding: 20px 0px 0px 10px;
margin: 2px;
font-family: "Lucida Sans", Tahoma, Arial;
font-size: 10px;
color: #374149;
}
table.moduletable td a {
color: #fff;
}
.moduletable ul.menu {
width: 195px;
padding-left: 25px;
padding-right: 6px;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
padding-bottom: 5px;
}
.moduletable ul.menu a {
background-image: url(../images/menu_bg.jpg);
height: 30px;
margin: 1px;
display: block;
padding: 3px;
font-size: 11px;
text-transform: uppercase;
text-align: center;
vertical-align: middle;
}
.moduletable ul.menu a:link, .moduletable a:visited {
color: Silver;
text-decoration: none;
padding-bottom: 5px;
}
.moduletable ul.menu li {
line-height: 24px;
text-indent: 9px;
padding-top: 0px;
background-repeat: no-repeat;
background-position: 5px 7px;
}
.moduletable ul.menu li a:hover {
background-image: url(../images/menu_bg_active.jpg);
background-repeat: no-repeat;
background-position: 0px 7p0;
background-color: transparent;
color: #fff;
}
.moduletable ul.menu li.active a {
background-image: url(../images/menu_bg_active.jpg);
background-repeat: no-repeat;
background-position: 0px 7p0;
background-color: transparent;
color: #fff;
font-weight: bold;
float: left;
padding-left: 10px;
}
.pollstableborder td {
text-align: left;
}
28.12.2020, 17:37:52