New Zenner
- Join Date:
- Apr 2009
- Location:
- France
- Posts:
- 3
- Plugin Contributions:
- 0
Product Boxes : how to align text next to image ?
Hi there, I was wondering how to fix this issue : I'd like to fit the text at right side of the image on main page. I've kind of get my nerves on it so I tried so separate which value could interfer in this way.
here's the website : http://watcheye.com.hk/shop/
the theme is based on Apple Zen (might help)
sorry for the mess in the css syntax, I'm a beginner....
/**
- Main CSS Stylesheet
*/
#navMainWrapper {background:#none;}
#logoWrapperOuter {background:#fff;}
#navEZPagesTopWrapper {background:#none;}
#navCatTabsWrapper {background:none;}
#navBreadCrumb {background:url(../images/sideboxBREAD.gif) repeat; margin-left: 180px; margin-top: 52px;}
body {background: none;/*remove this background image for narrow header, unless of course you want it there (green stripe background) */}
h3.leftBoxHeading, h3.rightBoxHeading {background:url(../images/sideboxleft2.gif) no-repeat top left;}
#centerColumnOuter {background:url(../images/headerborder.gif) repeat-y;}
#centerColumnWrapper2 {background:url(../images/content_bg.gif) repeat-y 80% 0;}
#hup {
float:right;
font-family:Arial, Helvetica, "sans-serif #FFFFFF";
font-size:10px;
color: #FFFFFF;
position: absolute;
width: 165px;
list-style-position: outside;
top: 0px;
text-align: right;
right: 55px;
height: 43px;
}
#minilogin {
float: middle;
width:71em;
text-align:center;
vertical-align:top;
position:relative;
margin:0 auto;
}
#bann {
float: middle;
margin-top: -50px;
}
/* If you'd like a narrow top header (to match the width of the main content, please follow the instructions below.
If you want the diagonal stripe background removed, you'll also need to remove that from the body tag near the top of this stylesheet. /
#headerWrappera {
width:100%; / change to width:71em; for narrow header*/
margin:0 auto;
text-align:center;
}
#navMainWrapper, #navCatTabsWrapper, #navEZPagesTopWrapper {
width:71em; /* change to width:70em; for narrow header*/
margin:0 auto;
text-align:center;
}
#navMain {
width:70em; /* remove width:70em; for narrow header /
margin:0 auto;
}
#dropMenuWrapper {
width:100%;
background:#929292; / remove background:#929292; for narrow header*/
margin:0 auto;
height:2.18em;
position:absolute;
top:0;
left:0;
}
/* uncomment the section below for narrow header */
#banner_left {
float: left;
padding: 0;
width: 760px;
background-image:url([url]http://watcheye.com.hk/img/top1.jpg);[/url]
background-repeat: no-repeat;
background-position: left top;
}
#banner_right {
float: left;
padding: 0;
width: 100%;
background-image:url(img/top2.jpg) repeat-x;
}
#footer {
background-image: url([url]http://watcheye.com.hk/img/footer.jpg);[/url]
background-repeat: repeat-x;
height: 230px;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: left;
margin-top: 20px;
position: bottom;
}
#footertxt {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
padding-top: 20px;
color: #CCCCCC;
padding-right: 20px;
text-align: right;
}
#left_foot {
width: 200px;
float: left;
margin-top: 5px;
margin-left: 5px;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 15px;
margin-bottom: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #CCCCCC;
}
#mid_foot {
width: 350px;
margin-top: 5px;
margin-bottom: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #CCCCCC;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 35%;
vertical-align: middle;
display: block;
position: center;
}
#right_foot {
width: 220px;
float: right;
margin-left: 5px;
padding-right: 15px;
padding-left: 15px;
padding-top: 100px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #CCCCCC;
text-align: right;
}
/*
#headerWrapperb {
background:url(../images/shadowRight.png) repeat-y 100% 0;
width:71em;
}
#headerWrapperc {
background:url(../images/shadowLeft.png) repeat-y 0 0;
width:71em;
}
#dropMenuWrapperb {
width:71em;
margin:0 auto;
position:relative;
}
#dropMenuWrapperc {
background:url(../images/shadowRight.png) repeat-y 100% 0;
width:71em;
margin:0 auto;
position:absolute;
left:0;
height:2.18em;
}
#dropMenuWrapperd {
background:url(../images/shadowLeft.png) repeat-y 0 0;
width:71em;
margin:0 auto;
position:absolute;
left:0;
height:2.18em;
}
/
/ end of changes for narrow header */
- html #centerColumnWrapper, * html #centerColumnWrapperb, * html #headerWrapperb, * html #headerWrapperc, * html #dropMenuWrapperc, * html #dropMenuWrapperd, * html #bottomLine {
background:none!important; /* Hides the transparent shadows from older versions of IE */
} - html #centerColumnWrapper2b, *html #centerColumnOuter {
border:1px solid #999;
border-top:none;
}
*html #centerColumnOuter {
border-bottom:none;
}
#centerColumnWrapper {
background:url(../images/shadowRight.png) repeat-y 100% 0;
}
#centerColumnWrapperb {
background:url(../images/shadowLeft.png) repeat-y 0 0;
}
#bottomLine {
background:url(../images/shadowAlpha_bot.png) repeat-x top;
} - {
margin:0;
padding:0;
}
body {
font-family:tahoma, verdana, arial, helvetica, sans-serif;
font-size:73.5%;
color:#000; /main site font color/
}
a img {
border:none;
}
a:link {
color:#4f4f4f; /*site links color /
text-decoration:none;
}
a:visited {
text-decoration:none;
color:#313131;
}
a:hover {
color:#000; / color when links are hovered over /
text-decoration:none;
}
ul, ol {
text-align:left;
padding-left:25px;
margin-left:10px;
margin-bottom:10px;
}
h1 {
font-size:1em;
}
h2 {
font-size:1em;
}
h3 {
font-size:1em;
}
h4, h5, h6, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger {
font-size:1em;
}
LEGEND {
color:#333;
}
.biggerText {
font-size:1.1em;
}
h1, h2, h3, h4, h5, h6 {
margin:.3em 0;
}
CODE {
font-family:tahoma, arial, verdana, helvetica, sans-serif;
font-size:1em;
}
FORM, SELECT {
display:inline;
font-size:1em;
margin:.5em;
}
#categoriesselectContent select {
font-size:.9em
}
option {
padding-right:.5em;
}
INPUT {
margin:.3em .5em;
}
html>//body input[type=checkbox], html>//body input[type=radio] {
float:left;
clear:both;
}
html>//body .checkboxLabel, html>//body .radioButtonLabel {
margin:0 .2em .5em 0;
float:left;
}
.ratingRow input[type=radio] {
float:none;
margin:0 .5em;
}
TEXTAREA {
margin:auto;
display:block;
width:97%;
}
input:focus, select:focus, textarea:focus {
background:#F3F9E1;
}
FIELDSET {
padding:.5em;
margin:.5em 0;
border:1px solid #ccc;
}
LEGEND {
font-weight:700;
padding:.3em;
}
h4.optionName {
line-height:1.5em;
padding-right:1em;
}
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg img {
float:left;
text-align:left;
}
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg a {
text-align:right;
}
#logo {
float:left; / to center your logo, uncomment the "text-align:center;margin:0 auto" below. Also remove "float:left" // text-align:center;
margin:0 auto; /
}
#logo {
width:19.1em; / To prevent the logo from resizing, simply delete or comment out this section /
}
#logo img {
width:100%;
}
LABEL.inputLabel {
width:85%;
float:left;
margin:.3em 0;
}
LABEL.inputLabelPayment {
width:15em;
float:left;
padding:.5em;
}
#checkoutpaymentBody input[type=radio] {
margin:15px 0
}
#checkoutpaymentBody .radioButtonLabel {
padding:10px
}
LABEL.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel {
width:12em;
float:left;
}
ADDRESS {
padding-right:40px;
}
.clearBoth {
clear:both;
height:0;
font-size:0;
line-height:0;
margin:0;
padding:0;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/ Hides from IE-mac */ - html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide from IE-mac */
HR {
height:1px;
margin:.5em 0;
border:none;
border-bottom:1px solid #9a9a9a;
}
/warnings, errors, messages/
.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
padding:0.2em;
}
.messageStackWarning, .messageStackError {
background:#900;
color:#fff;
}
.messageStackSuccess {
background:#929292;
}
.messageStackCaution {
background:#ff9;
}
/wrappers - page or section containers/
#mainWrapper {
text-align:center;
vertical-align:top;
position:relative;
padding-bottom:0px;
}
/* Start hide from IE-Mac */
- html #mainWrapper {
height: 1%;
}
/* End Hide from IE-Mac */
#headerWrapper {
width:100%;
text-align:center;
margin:0 auto;
background:#fff;
}
#logoWrapperOuter {
width:70em;
margin:0 auto;
overflow:hidden;
}
#tagline {
font-size:1.3em;
text-align:center;
padding-top:15px;
}
#navCatTabs, #navEZPagesTop {
font-weight:700;
margin:0 auto;
padding:.5em 0;
}
#sendSpendWrapper {
border:1px solid #cacaca;
float:right;
margin:0 0 1em 1em;
}
.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {
width:47%;
}
.wrapperAttribsOptions {
line-height:2em;
padding-bottom:1em;
}
/navigation/
.navPrevCounter {
font-size:.9em;
}
.navNextPrevList {
display:inline;
white-space:nowrap;
padding:0 1em;
list-style-type:none;
position:relative;
}
#bottomLineWrapper {
width:100%;
margin:0 auto;
position:relative;
}
#bottomLine {
margin:0 auto;
text-align:center;
width:70.3em;
padding-top:1em;
}
#navSuppWrapper {
width:100%;
margin:0 auto;
margin-top:-6px;
float:left;
position:relative;
top:2.18em;
}
#navSupp {
margin:0 auto;
text-align:center;
width:70.3em;
padding-top:1em;
}
#navMainLinks {
float:left;
position:relative;
list-style-type:none;
text-align:left;
font-size:1.2em;
}
#navEZPagesTOC ul, #navCatTabs ul, #navSupp ul, #bottomLine ul, #navMainLinks ul {
list-style-type:none;
text-align:center;
line-height:1.4em;
padding: 0;
margin:0;
}
#navSupp li, #navCatTabs li, #navMainLinks li, #bottomLine li {
display:inline;
padding:0 .5em;
}
#navSupp ul li a, #navCatTabs ul li a, #bottomLine ul li a {
text-decoration:none;
margin:0;
white-space:nowrap;
display:inline;
font-weight:700;
width:0;
}
#navEZPagesTOCWrapper {
font-weight:700;
float:right;
height:1%;
border:1px solid #000;
}
#navEZPagesTOC ul li {
white-space:nowrap;
}
#navEZPagesTOC ul li a {
padding:0 .5em;
}
#navCategoryIcon, .buttonRow, #indexProductListCatDescription {
margin:.5em;
}
#navMainSearch {
margin:0 auto;
text-align:right;
padding:2px 5px 1px;
}
#navMainSearch input {
margin:0 auto;
text-align:right;
padding:2px 5px;
}
#navMainSearch input[type=text] {
margin: 2px 0 0 1em;
}
#navMainSearch input.topSearch {
margin: 0 0 5px 2px;
vertical-align: bottom;
}
#navBreadCrumb {
text-align:left;
padding:.5em;
font-family:Arial, Helvetica, "sans-serif #CCCCCC";
font-size:10px;
color: #CCCCCC;
}
#navBreadCrumb a {
padding:.5em 1em;
font-family:Arial, Helvetica, "sans-serif #CCCCCC";
font-size:10px;
color: #CCCCCC;
}
.custim {
font-size: 11px;
font-family:Arial, Helvetica, "sans-serif #CCCCCC";
}
#navColumnTwo, #navColumnOne {
float:left;
position:relative;
width:160px;
padding-bottom:20px;
}
/The main content classes/
#contentMainWrapperOuter {
float:left;
width:100%;
}
#contentMainWrapper {
width:71em;
margin:0 auto;
text-align:center;
position:relative;
top:1em;
}
#centerColumnWrapper, #centerColumnWrapperb {
width:71em;
}
#centerColumnOuter {
margin:0 .5em;
width:70em;
height:15px;
}
#centerColumnWrapper2 {
margin:0 .5em;
width:70em;
}
#centerColumnWrapper2b {
margin:0 auto;
overflow:hidden;
width:70em;
}
.centerColumn {
width:75%;
float:left;
margin:0 2% 2% 3%;
text-align:left;
line-height:1.6em;
display:inline; /* fixes IE Bug in IE6 and earlier - do not remove /
}
#contentColumnMain, #navColumnOne, #navColumnTwo {
vertical-align:top;
text-align:center;
}
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
vertical-align:top;
float:left;
}
.centerBoxContents img {
float:left;
}
.additionalImages {
float:left;
}
#productDescription, .shippingEstimatorWrapper {
padding:.5em;
}
.productPriceDiscount {
text-align:right;
}
.important {
font-weight:700;
}
.gvBal {
float:right;
}
#bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {
padding:.8em;
}
.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {
font-size:.9em;
color: #CCCCCC;
}
#siteinfoLegal, #siteinfoIP, #bannerFive, #bannerSix, .parseTime {
clear:both;
position:left;
top: -1em;
}
#cartAdd {
float:right;
text-align:center;
margin:1em;
border:1px solid #000;
padding:1em;
}
.tableHeading TH {
border-bottom:1px solid #ccc;
}
.tableHeading, #cartSubTotal {
background:#e9e9e9;
}
#cartSubTotal {
border-top:1px solid #ccc;
font-weight:700;
text-align:right;
line-height:2.2em;
padding-right:2.5em;
}
.tableRow, .tableHeading, #cartSubTotal {
height:2.2em;
}
.cartProductDisplay, .cartUnitDisplay, .cartTotalDisplay, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartInstructionsDisplay, .cartTotalsDisplay {
padding:.5em 0 0;
}
#cartProdTitle {
text-align:center
}
.cartUnitDisplay, .cartTotalDisplay {
text-align:center;
padding-right:.2em;
}
.cartQuantityUpdate input {
margin:0;
padding:0;
}
.cartRemoveItemDisplay input[type=checkbox] {
float:none;
margin-bottom:1em;
}
#scUpdateQuantity {
width:1.8em;
}
#scProductsHeading {
padding-left:2em;
}
.cartQuantity {
width:4em;
}
.cartNewItem {
position:relative; /do not remove-fixes stupid IEbug/
}
.cartOldItem {
position:relative; /do not remove-fixes stupid IEbug/
}
.cartBoxTotal {
text-align:right;
font-weight:700;
margin:.2em .5em;
}
.cartRemoveItemDisplay {
width:5em;
}
.cartAttribsList {
margin-left:1em;
}
#mediaManager {
width:50%;
margin:.2em;
padding:.5em;
}
.mediaTitle {
float: left;
}
.mediaTypeLink {
float: right;
}
.normalprice, .productSpecialPriceSale {
text-decoration:line-through;
}
.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount, .alert {
color:#900;
}
.orderHistList {
margin:1em;
padding:.2em 0;
}
#ezPageBoxList li {
margin:0;
padding:.2em 0;
}
#cartBoxEmpty, #cartBoxVoucherBalance {
font-weight:700;
}
.totalBox {
width:5.5em;
text-align:right;
padding:.2em;
}
.lineTitle, .amount {
text-align:right;
padding:.2em;
}
.amount {
width:5.5em;
}
#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
margin:.5em 1em 1em 0;
text-align:left;
float:left;
}
#cartImage {
margin:.5em 1em;
float:left;
}
.attribImg {
width:20%;
margin:.3em 0;
}
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
margin:0;
}
.additionalImages {
text-align:left;
float:left;
}
/ Titre sur la sidebar /
h3.leftBoxHeading, h3.rightBoxHeading {
font-size:1.2em;
color:#424242;
text-transform:uppercase;
font-weight:400;
height:2em;
padding:0em 0 0;
padding-left:20px;
}
/ Titre Sur l'Index : genre Featured, Nouveautés */
.centerBoxHeading {
margin-left:-15px;
width: 650px;
background:url(../images/barre.gif) no-repeat;
padding-bottom:10px;
align:center;
padding-left: 170px;
padding-top: 5px;
margin-bottom: 15px;
}
.leftBoxHeading, .rightBoxHeading {
margin:0;
border-top:2px solid #fff;
border-bottom:2px solid #fff;
}
.sideBoxContent {
font-size:1.1em;
padding:5px 0;
padding-left: 3px;
}
.sideBoxContent ul {
text-align:left;
list-style-type:none;
padding:0 0 0 15px;
margin:0;
}
.sideBoxContent li {
padding:.2em 0;
}
.sideBoxContent select {
margin:0;
padding:0;
width:150px;
}
#categoriesContent {
text-align:left;
padding-left:15px;
}
.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading, .rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, , .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .attribImg, .gvBal, .parseTime {
text-align:left;
}
/* IMAGE DES BOXES PRODUITS CENTRALES ? */
#productMainImage, #reviewsInfoDefaultProductImage, .additionalImages, #productReviewsDefaultProductImage, #reviewWriteMainImage, {
text-align:left;
float:left;
}
.productListing-data {
border-bottom:1px solid #000;
margin:15px;
padding:15px;
}
.productListing-heading {
border-bottom:1px solid #000;
padding:5px;
}
.productListing-heading a {
border:none;
}
#upProductsHeading {
text-align:left;
}
#upDateHeading {
text-align:right;
}
/misc/
.back {
float:left;
}
.forward, #shoppingCartDefault #PPECbutton {
float:right;
}
.bold {
font-weight:700;
}
.rowOdd {
background:#E8E8E8;
height:1.5em;
vertical-align:top;
}
.rowEven {
background:#F0F0F0;
height:1.5em;
vertical-align:top;
}
.hiddenField {
display:none;
}
.visibleField {
display:inline;
}
#accountLinksWrapper li {
padding:.5em 0;
display:block;
list-style:none;
}
.accountTotalDisplay, .accountTaxDisplay {
width:20%;
text-align:right;
}
.accountQuantityDisplay {
width:10%;
vertical-align:top
}
TR.tableHeading {
background:#cacaca;
height:2em;
}
#siteMapList {
width:90%;
float:right;
}
.ratingRow {
margin:1em 0 1.5em;
}
LABEL#textAreaReviews {
font-weight:400;
margin:1em 0;
}
#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp, #infoShoppingCart {
background:#fff;
}
.information {
padding:10px 3px;
line-height:150%;
}
#shoppingcartBody #shippingEstimatorContent {
clear:both;
}
.seDisplayedAddressLabel {
background-color:#85C285;
text-align:center;
}
.seDisplayedAddressInfo {
text-transform:uppercase;
text-align:center;
font-weight:400;
}
#seShipTo {
padding:.2em;
}
#descSubLink {
padding-left:.7em;
color:#900;
}
.smallProductImage {
padding:1em;
float:left;
text-align:left;
}
#sorter, #indexProductList select {
float:right;
text-align:right;
}
#indexProductList .inputLabel {
width:100%;
text-align:right;
}
#sorter select, #indexProductList select {
margin:0 .1em;
}
please help me ! I'm loosing my hair on this problem :lamo:
