PDA

View Full Version : Change From Vertical to Horizontal, please hellp..



mjs
Mar 13th, 2010, 08:37 AM
Hi all,

I looking for your nice suggestions, please help mee..

I want to change the style from Vertical Style to Horizontal Style.. and the text from buttom of image to right of image

here the existing View
http://promoiklan.com/images/sample.jpg


Here the HTML/PHP code:


if($item->imagename!=NULL){ $img=$item->imagename;}else{$img='noimage.jpg';}
?>
<div class="prop_last_uni">
<div class="thumb">
<a href="<?php echo $link; ?>">
<img src="images/properties/images/thumbs/<?php echo $item->id; ?>/<?php echo $img;?>" alt="<?php echo str_replace('"',' ',$item->name); ?>" style="width:<?php echo $widthThumb;?>px;height:<?php echo $heightThumb;?>px; border: <?php echo $BorderThumbPx;?>px solid #<?php echo $BordeThumbC;?>" /></a>
</div>
<?php if ($showShadow) { ?>
<div class="thumb_shadow"></div>
<?php } ?>
<?php if ($showName) { ?>
<div class="latest_text"> <?php echo $item->name; ?></div>
<?php } ?>
<?php if ($showCategory) { ?>
<div class="latest_text"><?php echo JText::_($item->name_category); ?></div>
<?php } ?>
<?php if ($showType) { ?>
<div class="latest_text"><?php echo Text::_($item->name_type); ?></div>
<?php } ?>
<?php if ($showLocality) { ?>
<div class="latest_text"><?php echo Text::_($item->name_locality); ?></div>
<?php } ?>
<?php if ($showHits) { ?>
<div class="latest_text"><?php echo Text::_('Visits').' : '. $item->hits; ?></div>
<?php } ?>
<?php
if ($showPrice) {
$number = $item->price;
if ($FormatPrice==0) {
$formatted_price = number_format($number);
} else if ($FormatPrice==1) {
$formatted_price = number_format($number, 2,".",",");
} else if ($FormatPrice==2) {
$formatted_price = number_format($number, 0,",",".");
} else if ($FormatPrice==3) {
$formatted_price = number_format($number, 2,",",".");
}
if($PositionPrice==0){
echo '<div class="latest_text">'. $SimbolPrice.' '. $formatted_price .'</div>';
}else{
echo '<div class="latest_text">'. $formatted_price .' '. $SimbolPrice.'</div>';
}
echo '<br />';
}
?>
</div>
<?php } ?>
</div>
<div style="clear:both"></div>

the CSS code:


#prop_last {
margin-bottom:5px;
width:100%;
text-align: center !important;
}
#prop_last .prop_last_uni {
padding: 10px 0px 10px 0px;
width:100%;
}
.thumb {
width:100%;
text-align: center !important;
padding-top: 5px;
}
.thumb img{
vertical-align:top;
border: 1px solid #cccccc;
/*padding: 5px;*/
}
#prop_last .prop_last_uni .thumb_shadow{
/*width:110px;*/
height: 10px;
background: url(prop_pic_shadow.gif) no-repeat 50% top;
}
.featured_lt {
/* font-size: 14px;*/
font-weight: bold;
color: #7F95B1;
text-align: center !important;
}
.latest_text {
padding-left:180px;
padding-right:2px;
font-size: 10px !important;
line-height:1.4em;
text-align: left !important;
}

any advice would be welcome and great thanks

abduraooft
Mar 13th, 2010, 08:59 AM
This is HTML&CSS forum. We can't run the above code at our end to see the output. Can we have a link to your page?

mjs
Mar 14th, 2010, 07:09 AM
Thank you abduraooft,

i sorry this not published to web server but running on my desktop, here the HTML out put:


<div id="prop_last">
<div class="prop_last_uni">
<div class="thumb">
<a href="./index.php?option=show&amp;cyid=1:honkong&amp;sid=1:honkong&amp;lid=1:honkong&amp;cid=1:expensive&amp;tid=2:rent&amp;id=7:jns &amp;Itemid=2">
<img src="./images/thumbs/7/24_7.jpg" alt="Title:" style="width:100px;height:100px; border: 1px solid #CCCCCC" /></a>
</div>
<div class="thumb_shadow"></div>
<div class="latest_text">Expensive</div>
<div class="latest_text">For Rent</div>
<div class="latest_text">Honkong</div>
<div class="latest_text">Visits : 0</div>
<div class="latest_text">$ 200</div><br /></div>
<div class="prop_last_uni">
<div class="thumb">
<a href="./index.php?option=show&amp;cyid=1:honkong&amp;sid=1:honkong&amp;lid=1:honkong&amp;cid=3:cheapp&amp;tid=1:for-use&amp;id=5:plaz&amp;Itemid=2">
<img src="./images/thumbs/5/27_5.jpg" alt="Rumah" style="width:100px;height:100px; border: 1px solid #CCCCCC" /></a>
</div>
<div class="thumb_shadow"></div>
<div class="latest_text">Cheapp</div>
<div class="latest_text">For use</div>
<div class="latest_text">Honkong</div>
<div class="latest_text">Visits : 0</div>
<div class="latest_text">$ 200</div><br /></div>
<div class="prop_last_uni">
<div class="thumb">
<a href="./index.php?option=show&amp;cyid=2:usa&amp;sid=2:usa&amp;lid=2:usa&amp;cid=1:expensive&amp;tid=2:rent&amp;id=6:apartemen&amp;Itemi d=2">
<img src="./images/thumbs/6/29_6.jpg" alt="Apartemen" style="width:100px;height:100px; border: 1px solid #CCCCCC" /></a>
</div>
<div class="thumb_shadow"></div>
<div class="latest_text">Expensive</div>
<div class="latest_text">For Rent</div>
<div class="latest_text">USA</div>
<div class="latest_text">Visits : 2</div>
<div class="latest_text">$ 200</div><br /></div>
</div>
<div style="clear:both"></div>

Best Regards,

Arbitrator
Mar 14th, 2010, 11:36 AM
I want to change the style from Vertical Style to Horizontal Style.. and the text from buttom of image to right of imageThis isn't hard. Basic code:

HTML:

<div>
<a><img /></a>
<div><!-- text --></div>
</div>

CSS:

a { float: left; }

mjs
Mar 15th, 2010, 08:57 AM
This isn't hard. Basic code:

HTML:

<div>
<a><img /></a>
<div><!-- text --></div>
</div>

CSS:

a { float: left; }
Nice assist Arbitrator, thank so much..
becauser that for text only
and how to change all from vertical to horizontal ?:) e.g.

imge
text
|
|
image
text
|
|
image
text
|
|
image
text


become

image text --- image text --- image text

Arbitrator
Mar 15th, 2010, 09:46 AM
and how to change all from vertical to horizontal ?:) e.g.

imge
text
|
|
image
text
|
|
image
text
|
|
image
text


become

image text --- image text --- image textFloat the "image text" containers for horizontal and leave them alone for vertical (this is the default display).

If you want to center the "image text" containers in horizontal fashion, the easiest way would be display: inline-block or display: inline-table on the "image text" containers and text-align: center on the container of the containers. Note that you may run into browser compatibility problems though (these are relatively recently supported in Firefox and IE).