omen1989
11-05-2010, 11:50
Mam taki mały problem. Jest sobie w szablolnie pozycja top. Tam też mam umieszczony moduł szukania (AjaxSearch). Pozycja określona jest chyba na całej szerokości strony, dlatego też moduł wyswietla się zaraz z lewej strony, gdyż na tą pozycje przypisany jest tylko on jeden. Chciałbym to zmienić aby wyświetlał się z prawej stony. Zamieszczam screena. Poza tym niestety nie mogę podać linka do strony bo mam ją na localhoście- i żeby uprzedzić wasze pytania- niestety nie mogę udostępniać swojego localhosta. Poza tym zamieszczam fragment template_css.css
#topmod {
padding: 20px 0;
margin: -49px 0 0; /* - height + padding-top ==> -69px + 20px = -49px */
overflow: hidden;
}
#logo {
width: 320px;
height: 80px;
float: left;
}
#header {
height: 80px;
background: url(../images/header-bg.png) 0 0 repeat-x;
}
#top-tab {
width: 193px;
height: 30px;
float: right;
margin-right: 78px;
text-align: center;
cursor: pointer;
}
#searchmod {
position: absolute;
margin-top: 40px;
margin-left: 710px;
}
span.tab-text {
padding-left: 12px;
}
#showcase2 {
height: 200px;
}
#showcase-promo {
height: 200px;
}
#showcase-promo img#promo {
position: absolute;
bottom: -29px;
left: 40px;
width: 877px;
height: 207px;
}
#featured-mod,
#featured-mod2 {
height: 136px;
overflow: hidden;
}
#featured-shadow {
height: 136px;
background: url(../images/featured-shadow.png) 50% 0 no-repeat;
overflow: hidden;
}
#featuredmodules {
padding: 0 5px 0 25px;
color: #fff;
}
#showcase,
#featured-mod,
#page-bg,
#showcase .wrapper,
#featured-mod .wrapper,
#page-bg .wrapper {
position: relative;
}
#showcase {
z-index: 1;
}
#featured-mod, #page-bg {
z-index: 0;
}
#main-shadow {
position: absolute;
left: -20px;
width: 20px;
height: 192px;
background: url(../images/page-shadow-l.png) 0 0 no-repeat;
}
#main-shadow2 {
position: absolute;
right: -20px;
width: 20px;
height: 192px;
background: url(../images/page-shadow-r.png) 100% 0 no-repeat;
}
#main-content {
background: #fff url(../images/content-bg.png) 0 0 repeat-x;
}
table.mainbody,
table.blog {
width: 100%;
}
td.leftcol {
background: url(../images/column-shadow-l.png) 100% 50px no-repeat;
}
td.rightcol {
background: url(../images/column-shadow-r.png) 0 50px no-repeat;
}
td.maincol .padding {
padding: 32px 20px 20px 20px;
}
td.rightcol .padding,
td.leftcol .padding {
padding: 20px 33px 20px 25px;
}
#inset {
margin-bottom: 30px;
}
#page-bg {
background: #fff url(../images/page-bg.png) 0 0 repeat-x;
}
#page-bg-bottom {
height: 31px;
background: url(../images/page-bg-bottom.png) 0 0 repeat-x;
overflow: hidden;
}
#bottom-tab {
height: 31px;
width: 149px;
margin-left: 50px;
padding-top: 15px;
text-align: center;
cursor: pointer;
}
span.bottom-tab-text {
padding-left: 12px;
}
span.tab-text, span.bottom-tab-text {
color: #fff;
}
span.tab-text-up, span.bottom-tab-text-up {
background: url(../images/tab-arrow-up.png) 0 50% no-repeat;
}
span.tab-text-down, span.bottom-tab-text-down {
background: url(../images/tab-arrow-dn.png) 0 50% no-repeat;
}
#bottom {
overflow: hidden;
padding: 20px 0 10px 0;
}
#footer {
background: #666 url(../images/footer-bg.png) 0 0 repeat-x;
}
#footer2 {
width: 333px;
height: 121px;
float: right;
background: url(../images/footer-graphic.png) 0 0 no-repeat;
}
img#rocket {
width: 143px;
height: 22px;
margin-top: 35px;
background: url(../images/rocket.png) 0 0 no-repeat;
}
.spacer .block {
float: left;
}
.spacer.w99 .block {
width: 100%;
}
.spacer.w49 .block {
width: 50%;
}
.spacer.w33 .block {
width: 33.3%;
}
.spacer.w24 .block {
width: 25%;
}
/* @end */
/* @group Modules */
#featuredmodules {
padding-top: 10px;
}
#featuredmodules .module div div div {
padding: 1px;
}
#showcasemodules .module,
#bottommodules .module,
#featuredmodules .module,
#mainmodules .module,
td.maincol .module-hilite1,
td.maincol .module-hilite2,
td.maincol .module-hilite3,
td.maincol .module-hilite4 {
margin-right: 10px;
padding-right: 10px;
margin-bottom: 30px;
overflow: hidden;
}
td.leftcol .module-hilite1,
td.rightcol .module-hilite1,
td.leftcol .module-hilite2,
td.rightcol .module-hilite2,
td.leftcol .module-hilite3,
td.rightcol .module-hilite3,
td.leftcol .module-hilite4,
td.rightcol .module-hilite4 {
margin-bottom: 30px;
overflow: hidden;
}
td.leftcol .module h3,
td.rightcol .module h3,
td.maincol .module h3,
td.leftcol .module-menu h3,
td.rightcol .module-menu h3 {
color: #666;
background: url(../images/h3-arrow.png) 0 3px no-repeat;
padding-left: 20px;
}
td.leftcol .module,
td.rightcol .module {
margin-bottom: 30px;
overflow: hidden;
}
#main-content .module-hilite1 h3,
#main-content .module-hilite2 h3,
#main-content .module-hilite3 h3,
#main-content .module-hilite4 h3 {
padding-left: 28px;
padding-top: 5px;
}
#bottom .module h3 {
padding-left: 20px;
}
.module-note h3 {
font-style: italic;
color: #65613E;
}
.module-note {
font-style: italic;
width: 215px;
margin-bottom: 20px;
background: url(../images/note-bg.png) 0 0 repeat-y;
color: #65613E;
}
.module-note div {
background: url(../images/note-bg-top.png) 0 0 no-repeat;
}
.module-note div div {
background: url(../images/note-bg-bottom.png) 0 100% no-repeat;
}
.module-note div div div {
padding: 30px 20px 20px 20px;
}
#mainmodules,
#featuredmodules {
overflow: hidden;
}
#bottom-menu {
height: 32px;
overflow: hidden;
color: #ccc;
}
#bottom-menu a {
line-height: 32px;
height: 32px;
margin-right: 15px;
padding-right: 15px;
padding-left: 0;
margin-top: 6px;
display: block;
float: left;
font-size: 100%;
text-indent: 0;
background: url(../images/bottom-menu-div.png) 100% 50% no-repeat;
color: #ccc;
}
#bottom-menu a:hover {
color: #fff;
}
/* @end */
/* @group Horizontal Menu */
#horiz-menu {
height: 46px;
width: 100%;
}
#horiz-menu ul {
list-style: none;
margin: 0;
padding: 0;
float: right;
}
#horiz-menu li {
display: block;
float: left;
margin: 0;
padding: 0;
}
#horiz-menu a,
#horiz-menu li.active a {
white-space: nowrap;
display: block;
float: left;
height: 46px;
line-height: 46px;
padding: 0 17px;
font-weight: normal;
font-size: 100%;
overflow: hidden;
text-decoration: none;
}
#horiz-menu ul ul li a,
#horiz-menu ul li.active.parent ul a {
padding-left: 5px;
}
#horiz-menu ul ul li a:hover,
#horiz-menu ul li.active.parent ul a:hover {
padding-left: 5px;
background: url(../images/dropdown-arrow-over.png) 10px 50% no-repeat;
color: #fff;
}
/* mouseovers */
#horiz-menu li li a:hover {
background: none;
}
#horiz-menu li li.active,
#horiz-menu li.active li a,
#horiz-menu li.active li a:hover {
background: none;
}
#horiz-menu li li a {
font-size: 100%;
font-weight: normal;
background: none;
}
Domyślam się, że za to co chce osiągnąć odpowiada topmod?
#topmod {
padding: 20px 0;
margin: -49px 0 0; /* - height + padding-top ==> -69px + 20px = -49px */
overflow: hidden;
}
#logo {
width: 320px;
height: 80px;
float: left;
}
#header {
height: 80px;
background: url(../images/header-bg.png) 0 0 repeat-x;
}
#top-tab {
width: 193px;
height: 30px;
float: right;
margin-right: 78px;
text-align: center;
cursor: pointer;
}
#searchmod {
position: absolute;
margin-top: 40px;
margin-left: 710px;
}
span.tab-text {
padding-left: 12px;
}
#showcase2 {
height: 200px;
}
#showcase-promo {
height: 200px;
}
#showcase-promo img#promo {
position: absolute;
bottom: -29px;
left: 40px;
width: 877px;
height: 207px;
}
#featured-mod,
#featured-mod2 {
height: 136px;
overflow: hidden;
}
#featured-shadow {
height: 136px;
background: url(../images/featured-shadow.png) 50% 0 no-repeat;
overflow: hidden;
}
#featuredmodules {
padding: 0 5px 0 25px;
color: #fff;
}
#showcase,
#featured-mod,
#page-bg,
#showcase .wrapper,
#featured-mod .wrapper,
#page-bg .wrapper {
position: relative;
}
#showcase {
z-index: 1;
}
#featured-mod, #page-bg {
z-index: 0;
}
#main-shadow {
position: absolute;
left: -20px;
width: 20px;
height: 192px;
background: url(../images/page-shadow-l.png) 0 0 no-repeat;
}
#main-shadow2 {
position: absolute;
right: -20px;
width: 20px;
height: 192px;
background: url(../images/page-shadow-r.png) 100% 0 no-repeat;
}
#main-content {
background: #fff url(../images/content-bg.png) 0 0 repeat-x;
}
table.mainbody,
table.blog {
width: 100%;
}
td.leftcol {
background: url(../images/column-shadow-l.png) 100% 50px no-repeat;
}
td.rightcol {
background: url(../images/column-shadow-r.png) 0 50px no-repeat;
}
td.maincol .padding {
padding: 32px 20px 20px 20px;
}
td.rightcol .padding,
td.leftcol .padding {
padding: 20px 33px 20px 25px;
}
#inset {
margin-bottom: 30px;
}
#page-bg {
background: #fff url(../images/page-bg.png) 0 0 repeat-x;
}
#page-bg-bottom {
height: 31px;
background: url(../images/page-bg-bottom.png) 0 0 repeat-x;
overflow: hidden;
}
#bottom-tab {
height: 31px;
width: 149px;
margin-left: 50px;
padding-top: 15px;
text-align: center;
cursor: pointer;
}
span.bottom-tab-text {
padding-left: 12px;
}
span.tab-text, span.bottom-tab-text {
color: #fff;
}
span.tab-text-up, span.bottom-tab-text-up {
background: url(../images/tab-arrow-up.png) 0 50% no-repeat;
}
span.tab-text-down, span.bottom-tab-text-down {
background: url(../images/tab-arrow-dn.png) 0 50% no-repeat;
}
#bottom {
overflow: hidden;
padding: 20px 0 10px 0;
}
#footer {
background: #666 url(../images/footer-bg.png) 0 0 repeat-x;
}
#footer2 {
width: 333px;
height: 121px;
float: right;
background: url(../images/footer-graphic.png) 0 0 no-repeat;
}
img#rocket {
width: 143px;
height: 22px;
margin-top: 35px;
background: url(../images/rocket.png) 0 0 no-repeat;
}
.spacer .block {
float: left;
}
.spacer.w99 .block {
width: 100%;
}
.spacer.w49 .block {
width: 50%;
}
.spacer.w33 .block {
width: 33.3%;
}
.spacer.w24 .block {
width: 25%;
}
/* @end */
/* @group Modules */
#featuredmodules {
padding-top: 10px;
}
#featuredmodules .module div div div {
padding: 1px;
}
#showcasemodules .module,
#bottommodules .module,
#featuredmodules .module,
#mainmodules .module,
td.maincol .module-hilite1,
td.maincol .module-hilite2,
td.maincol .module-hilite3,
td.maincol .module-hilite4 {
margin-right: 10px;
padding-right: 10px;
margin-bottom: 30px;
overflow: hidden;
}
td.leftcol .module-hilite1,
td.rightcol .module-hilite1,
td.leftcol .module-hilite2,
td.rightcol .module-hilite2,
td.leftcol .module-hilite3,
td.rightcol .module-hilite3,
td.leftcol .module-hilite4,
td.rightcol .module-hilite4 {
margin-bottom: 30px;
overflow: hidden;
}
td.leftcol .module h3,
td.rightcol .module h3,
td.maincol .module h3,
td.leftcol .module-menu h3,
td.rightcol .module-menu h3 {
color: #666;
background: url(../images/h3-arrow.png) 0 3px no-repeat;
padding-left: 20px;
}
td.leftcol .module,
td.rightcol .module {
margin-bottom: 30px;
overflow: hidden;
}
#main-content .module-hilite1 h3,
#main-content .module-hilite2 h3,
#main-content .module-hilite3 h3,
#main-content .module-hilite4 h3 {
padding-left: 28px;
padding-top: 5px;
}
#bottom .module h3 {
padding-left: 20px;
}
.module-note h3 {
font-style: italic;
color: #65613E;
}
.module-note {
font-style: italic;
width: 215px;
margin-bottom: 20px;
background: url(../images/note-bg.png) 0 0 repeat-y;
color: #65613E;
}
.module-note div {
background: url(../images/note-bg-top.png) 0 0 no-repeat;
}
.module-note div div {
background: url(../images/note-bg-bottom.png) 0 100% no-repeat;
}
.module-note div div div {
padding: 30px 20px 20px 20px;
}
#mainmodules,
#featuredmodules {
overflow: hidden;
}
#bottom-menu {
height: 32px;
overflow: hidden;
color: #ccc;
}
#bottom-menu a {
line-height: 32px;
height: 32px;
margin-right: 15px;
padding-right: 15px;
padding-left: 0;
margin-top: 6px;
display: block;
float: left;
font-size: 100%;
text-indent: 0;
background: url(../images/bottom-menu-div.png) 100% 50% no-repeat;
color: #ccc;
}
#bottom-menu a:hover {
color: #fff;
}
/* @end */
/* @group Horizontal Menu */
#horiz-menu {
height: 46px;
width: 100%;
}
#horiz-menu ul {
list-style: none;
margin: 0;
padding: 0;
float: right;
}
#horiz-menu li {
display: block;
float: left;
margin: 0;
padding: 0;
}
#horiz-menu a,
#horiz-menu li.active a {
white-space: nowrap;
display: block;
float: left;
height: 46px;
line-height: 46px;
padding: 0 17px;
font-weight: normal;
font-size: 100%;
overflow: hidden;
text-decoration: none;
}
#horiz-menu ul ul li a,
#horiz-menu ul li.active.parent ul a {
padding-left: 5px;
}
#horiz-menu ul ul li a:hover,
#horiz-menu ul li.active.parent ul a:hover {
padding-left: 5px;
background: url(../images/dropdown-arrow-over.png) 10px 50% no-repeat;
color: #fff;
}
/* mouseovers */
#horiz-menu li li a:hover {
background: none;
}
#horiz-menu li li.active,
#horiz-menu li.active li a,
#horiz-menu li.active li a:hover {
background: none;
}
#horiz-menu li li a {
font-size: 100%;
font-weight: normal;
background: none;
}
Domyślam się, że za to co chce osiągnąć odpowiada topmod?