Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    Question aligning an image vertically

    In my code below, I would like to vertically align the image.gif to the logo holder class

    I tried this:
    Code:
    bottom:0;
    margin:auto;
    position:absolute;
    top:0;
    but that didn't work?!

    my code
    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
    Code:
    .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;
    }

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,858
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Try
    Code:
    .top10 .logoholder {
    	left: 10px;
    	top: 7px;
    	position: absolute;
    	width:133px;
    	height:80px;
    line-height:80px;
    	text-align: center;
    	top:0px;
    	bottom:0px;
    	margin:auto;
    
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    thanks but that didn't work?!

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,858
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Could you post a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    http://www.slots.net/

    can a moderator remove this when afterwards thanks

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,858
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Now just add
    Code:
    .top10 .logo img {/*core.css (line 198)*/
    border:1px solid #E9E8E4;
    vertical-align:middle;
    }
    can a moderator remove this when afterwards thanks
    You may edit your post within three(?) days of posting.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    jarv (10-22-2009)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •