jarv
10-22-2009, 12:49 PM
In my code below, I would like to vertically align the image.gif to the logo holder class
I tried this:
bottom:0;
margin:auto;
position:absolute;
top:0;
but that didn't work?!
my code
<div class="item">
<div class="logoholder">
<a href="#" class="logo"><img src="/images/image.gif" width="131" height="78"/></a>
</div>
<div class="details">
<div class="name">company name</div>
<img src="/layoutimages/money.gif" alt="money" width="22" height="22"/>
<div class="amount">£4000</div>
<div class="bonus">100% Up To £4000 Bonus</div>
<div class="usa">Not Accepts USA Players</div>
</div>
<a href="#" class="sprite visit">visit us now</a>
<div class="company">this is a Powered Site</div>
</div>
CSS
.top10 {
border-bottom-color: white;
border-bottom-style: solid;
border-bottom-width: 10px;
position: relative;
}
.top10 .corner {
bottom: 0px;
*bottom: 3px;
right: 0px;
position: absolute;
}
.top10 h2 {
padding-left: 20px;
color: white;
line-height: 21px;
padding-top: 6px;
padding-bottom: 4px;
background-position: left -181px;
}
.top10 .item {
line-height: 1.4em;
position: relative;
border-bottom-color: #bfbfbf;
border-bottom-width: 1px;
border-bottom-style: dotted;
height: 95px;
border-right-color: #e9e8e4;
border-left-color: #e9e8e4;
border-right-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-left-width: 1px;
}
.top10 .logoholder {
left: 10px;
top: 7px;
position: absolute;
width:133px;
height:80px;
text-align: center;
top:0px;
bottom:0px;
margin:auto;
}
.top10 .logo {
}
.top10 .logo img {
border-color: #e9e8e4;
border-width: 1px;
border-style: solid;
}
.top10 .details {
width: 270px;
left: 170px;
top: 6px;
position: absolute;
}
.top10 .details img {
padding-bottom: 5px;
padding-right: 5px;
padding-top: 5px;
float: left;
}
.top10 .details .name {
margin-bottom: 3px;
padding-bottom: 2px;
border-bottom-color: #bfbfbf;
border-bottom-width: 1px;
border-bottom-style: solid;
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
}
.top10 .details .amount {
padding-bottom: 3px;
color: #d7a542;
font-weight: bold;
font-size: 15px;
}
.top10 .details .bonus {
text-decoration: underline;
padding-bottom: 6px;
font-size: 13px;
}
.top10 .details .usa {
padding-left: 28px;
color: #e8290c;
}
.top10 .details .flag {
background-position: 2px center;
background-image: url(/layoutimages/usa-flag.gif);
background-repeat: no-repeat;
}
.top10 .visit {
font-family: Helvetica, Verdana, Arial, sans-serif;
text-decoration: none;
padding-bottom: 6px;
background-position: -197px -276px;
text-align: center;
color: white;
line-height: 20px;
padding-top: 4px;
width: 156px;
right: 20px;
top: 25px;
position: absolute;
font-weight: bold;
}
.top10 .visit:hover {
background-position: -197px -305px;
}
.top10 .company {
font-style: italic;
color: #626262;
right: 10px;
bottom: 15px;
position: absolute;
}
I tried this:
bottom:0;
margin:auto;
position:absolute;
top:0;
but that didn't work?!
my code
<div class="item">
<div class="logoholder">
<a href="#" class="logo"><img src="/images/image.gif" width="131" height="78"/></a>
</div>
<div class="details">
<div class="name">company name</div>
<img src="/layoutimages/money.gif" alt="money" width="22" height="22"/>
<div class="amount">£4000</div>
<div class="bonus">100% Up To £4000 Bonus</div>
<div class="usa">Not Accepts USA Players</div>
</div>
<a href="#" class="sprite visit">visit us now</a>
<div class="company">this is a Powered Site</div>
</div>
CSS
.top10 {
border-bottom-color: white;
border-bottom-style: solid;
border-bottom-width: 10px;
position: relative;
}
.top10 .corner {
bottom: 0px;
*bottom: 3px;
right: 0px;
position: absolute;
}
.top10 h2 {
padding-left: 20px;
color: white;
line-height: 21px;
padding-top: 6px;
padding-bottom: 4px;
background-position: left -181px;
}
.top10 .item {
line-height: 1.4em;
position: relative;
border-bottom-color: #bfbfbf;
border-bottom-width: 1px;
border-bottom-style: dotted;
height: 95px;
border-right-color: #e9e8e4;
border-left-color: #e9e8e4;
border-right-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-left-width: 1px;
}
.top10 .logoholder {
left: 10px;
top: 7px;
position: absolute;
width:133px;
height:80px;
text-align: center;
top:0px;
bottom:0px;
margin:auto;
}
.top10 .logo {
}
.top10 .logo img {
border-color: #e9e8e4;
border-width: 1px;
border-style: solid;
}
.top10 .details {
width: 270px;
left: 170px;
top: 6px;
position: absolute;
}
.top10 .details img {
padding-bottom: 5px;
padding-right: 5px;
padding-top: 5px;
float: left;
}
.top10 .details .name {
margin-bottom: 3px;
padding-bottom: 2px;
border-bottom-color: #bfbfbf;
border-bottom-width: 1px;
border-bottom-style: solid;
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
}
.top10 .details .amount {
padding-bottom: 3px;
color: #d7a542;
font-weight: bold;
font-size: 15px;
}
.top10 .details .bonus {
text-decoration: underline;
padding-bottom: 6px;
font-size: 13px;
}
.top10 .details .usa {
padding-left: 28px;
color: #e8290c;
}
.top10 .details .flag {
background-position: 2px center;
background-image: url(/layoutimages/usa-flag.gif);
background-repeat: no-repeat;
}
.top10 .visit {
font-family: Helvetica, Verdana, Arial, sans-serif;
text-decoration: none;
padding-bottom: 6px;
background-position: -197px -276px;
text-align: center;
color: white;
line-height: 20px;
padding-top: 4px;
width: 156px;
right: 20px;
top: 25px;
position: absolute;
font-weight: bold;
}
.top10 .visit:hover {
background-position: -197px -305px;
}
.top10 .company {
font-style: italic;
color: #626262;
right: 10px;
bottom: 15px;
position: absolute;
}