In my web i allow user to post comment with there name and picture. I have notice one issue that when some one post bigger picture in comment using html code it run out of comment box. so all i want is thing should stay inside a comment box. not matter how big picture they post. i have posted all detail below kindly help thanks :|
My html
<div class="mycomment">
<div id="postpic">
<img id="profile_pic" width="50px" height="150px" src="image/user/1.gif" class="">
</div>
<div class="mycommentpost">
<a class="postername" href="profile.php?userID=1">Deepak Kumar: </a><br>
<img src="http://i00.i.aliimg.com/wsphoto/v0/789295022/-font-b-Easter-b-font-day-font-b-Bunny-b-font-ears.jpg" width="650" height="350" alt="">
</div>
</div>
My css:
.mycomment {
font-weight: normal;
color: #000000;
border: 2px solid #DEDEDE;
letter-spacing: 1pt;
font-family: arial, helvetica, sans-serif;
float: left;
width: 550px;
margin: 20px 0;
}
#postpic {
float: left;
width: 70px;
}
.mycommentpost {
font-weight: normal;
color: #000000;
letter-spacing: 1pt;
width: 480px;
float: right;
}
.postername {
color: #580000;
font-weight: bold;
font-size: 1em;
text-decoration: none;
}
Comment here is just a picture:
<img src="http://i00.i.aliimg.com/wsphoto/v0/789295022/-font-b-Easter-b-font-day-font-b-Bunny-b-font-ears.jpg" width="650" height="350" alt="">
Solved : By adding this ->
.mycommentpost > img{
max-height: XXXpx !important;
max-width: XXXpx !important;
}
Add to your CSS
.mycommentpost > img{
max-height: XXXpx !important;
max-width: XXXpx !important;
}
This way you will limit the max sizes of added images..
no matter what size of image they upload using this css set the image to default size in your mycommentpost div.
> .mycommentpost img{
> border: 1px solid #DEDEDE;
> padding: 10px;
> width: 130px; }
Try this
<div class="mycomment">
<div id="postpic">
<img id="profile_pic" width="50px" height="150px" src="image/user/1.gif" class="">
</div>
<div class="mycommentpost">
<a class="postername" href="profile.php?userID=1">Deepak Kumar: </a><br>
<img src="http://i00.i.aliimg.com/wsphoto/v0/789295022/-font-b-Easter-b-font-day-font-b-Bunny-b-font-ears.jpg" width="650" height="350" alt="">
</div>
.mycommentpost {
font-weight: normal;
color: #000000;
letter-spacing: 1pt;
width: 480px;
float: left;
}
.mycommentpost img{
width :450px;
}
Related
visit link1
search for "check" using CTRL + F, than you can see :
I wanted to display like this as link2
we are using following code :
css
font: 12px/1.35 Arial, Helvetica, sans-serif;
padding: 2px 8px !important;
border: 1px solid FFFFFF;
color: FFFFFF;
height: 29px;
line-height: 29px;
border-radius: 0;
}
.catalog-product-view button.button span span {
color: #fff;
float: left;
font-size: 16px;
font-weight: normal !important;
text-align: center;
Phtml
<?php if ($this->isFieldVisible('postcode')): ?>
<li class="item">
<label for="estimate_postcode"<?php if ($this->isFieldRequired('postcode')):?> class="required" <?php endif;?>><?php if ($this->isFieldRequired('postcode')):?><em>*</em><?php endif;?><?php echo Mage::helper('webdevlopers_productpageshipping')->__('') ?></label>
<div class="input-box">
<img src ="http://totaltoys.com/media/font-100.png" height= '35' width= '70'>
<input placeholder="Enter your PIN Code" class="input-text validate-postcode<?php if ($this->isFieldRequired('postcode')):?> required-entry<?php endif;?>" type="text" id="estimate_postcode" name="estimate[postcode]" value="<?php echo $this->htmlEscape($this->getFieldValue('postcode')) ?>" />
</div>
</li>
<?php endif; ?>
Edit your HTML like this:
li.item {
align-items: center;
display: flex;
}
li.item img {
opacity: .3;
height: 20px;
width: 40px;
}
li.item label {
color: #aaa;
font-family: 'ubuntu';
}
li.item .search {
margin-left: 6px;
}
li.item .search input {
border: 1px solid #ddd;
border-radius: 3px;
padding: .5rem;
}
li.item .search button {
background-color: #00bfff;
border: none;
border-radius: 3px;
color: #fefefe;
padding: .5rem .5rem;
}
<li class="item">
<img src="http://totaltoys.com/media/font-100.png" alt="" />
<label for="search">Check availability</label>
<div class="search">
<input type="text" id="search" placeholder="Enter your PIN code"/>
<button>Check</button>
</div>
</li>
Add this classes to your CSS file:
.actions {
float: left;
margin-top: 9%;
}
ul#shipping-estimation-form {
float: left;
}
this might be a stupid question so please accept my apologies.
I have written a code snippet for a wordpress website that lists restaurants. You enter the instagram id of the venues (if they have one) and it shows the latest instagram photos they've uploaded. If the instagram id value is left empty, i want it to echo nothing. I've written the code and it works fine for places with instagram id's, but as I'm unable the last piece of code (that starts with foreach) inside the echo section, it tries to show it even when the id is empty hence i get a "Invalid argument supplied for foreach() in" error. Can you help me out so that I can include that code inside the echo part, so that it won't call that code when id is empty? Thanks very much in advance.
<?php
if ( $instagramid ) {
echo "
<br><br>
<span style=\"float:left; -webkit-border-radius: 3px;
border-radius: 3px;
font-size: 14px;
float: left;
line-height: 32px;
margin-right: 5px;
margin-top:12px;
padding: 0px 3px 0px 5px;
\">
<a target=\"_blank\" href=\"http://instagram.com/".$username."\"><img width=\"80\" border=\"1px\" src=\"".$profilepic."\"></a></span>
<br>
<div style=\"margin-left: 50px;\">
<div style=\"position: relative;
float: left;
left: 0.00%;
width: 75.00%;
background-color: #f4f4f4\">
<span style=\"
font-weight: bold;
font-style: normal;
font-size: 12px; letter-spacing: 0px; padding: 0px 0px 0px 0px; \"><a style=\"color: #3f729b; font-weight: bold; \" target=\"_blank\" href=\"http://instagram.com/".$username."\">".$username."</a> # instagram</span>
</div>
<div style=\"position: relative;
float: left;
left: 0.00%;
width: 82.00%;\">
<div style=\"position: relative;
float: left;
left: 0.50%;
width: 33.00%;\">
<span style=\"
font-weight: lighter;
font-style: normal;
font-size: 11px; letter-spacing: 0px; padding: 0px 0px 0px 0px; \">Photos<br>
<span style=\"
font-weight: bold; \"><span style=\"
letter-spacing: 0px;\">".$sayi."</span></span></span>
</div>
<div style=\"position: relative;
float: left;
left: 1.50%;
width: 33.00%;\">
<span style=\"
font-weight: lighter;
font-style: normal;
font-size: 11px; letter-spacing: 0px; padding: 0px 0px 0px 0px; \">Followers<br>
<span style=\"
font-weight: bold;\"><span style=\"
letter-spacing: 0px;\">".$takipci."</span></span></b></span>
</div>
<div style=\"position: relative;
float: right;
right: 0.50%;
width: 31.00%;\">
<span style=\"
font-weight: lighter;
font-style: normal;
font-size: 11px; letter-spacing: 0px; padding: 0px 0px 0px 0px; \">Following<br><span style=\"
font-weight: bold;\"><span style=\"
letter-spacing: 0px;\">".$takipediyor."</span></span></span>
</div>
</div>
</div>
<br><br>
";
}
else {
echo "";
}
?>
<?php foreach ($result->data as $fotos): ?>
<!-- Renders images. #Options (thumbnail,low_resoulution, high_resolution) -->
<span style="font-size: 12px; float:left;
margin:5px 0 2px 10px;">
<a target="_blank" class="group" rel="group1" href="<?= $fotos->link ?>">
<img width="90" src="<?= $fotos->images->thumbnail->url ?>"></a>
<span style="font-weight:bold; float:left;"></span>
<span style="float:right;"><span style="color:red; font-weight: bolder;">❤ </span><?= $fotos->likes->count ?></span>
</span><?php endforeach //Biter ?>
Maybe like someone said you need to put your loop in if statment like this
<?php
if ( $instagramid ) {
// Your old code is here "your echo"
// but before end of if statment, and after echo"" put loop
foreach ($result->data as $fotos){ ?>
<!-- Renders images. #Options (thumbnail,low_resoulution, high_resolution) -->
<span style="font-size: 12px; float:left; margin:5px 0 2px 10px;">
<a target="_blank" class="group" rel="group1" href="<?= $fotos->link ?>">
<img width="90" src="<?= $fotos->images->thumbnail->url ?>"></a>
<span style="font-weight:bold; float:left;"></span>
<span style="float:right;"><span style="color:red; font-weight:bolder;">❤ </span><?= $fotos->likes->count ?></span>
</span><?php } //Biter ?>
}
else {
echo "";
}
?>
As you might see, im having some problems aligning 4 divs next to each other:
For some reason i cant get them to be aligned.
Can anybody tell me whats wrong?
html:
<?php foreach ($postslist as $post) : setup_postdata($post); ?>
<div class="frontPost">
<a href="<?php the_permalink();?>">
<div class="crop">
<img class="postImg" src="<?php the_field('frontimg')?>" alt="frontImg">
</div>
<p class="postTitle"> <?php the_title()?> </p>
<p class="postIntro"> <?php the_field('introduction') ?> </p>
</a>
</div>
<?php endforeach; ?>
css:
.crop {
width: 250px;
height: 150px;
overflow: hidden;
}
.frontPost{
width: 250px;
display: inline-block;
margin-left: 5px;
margin-top: 25px;
margin-right: 5px;
}
.bigTxt{
letter-spacing: 10px;
font-size: 16px;
}
.postTitle{
text-transform: uppercase;
letter-spacing: 1.5px;
font-weight: bold;
}
.postIntro{
text-align: left;
}
What about using vertical-align property. Use the code below for css
.crop {
width: 250px;
height: 150px;
overflow: hidden;
}
.frontPost{
vertical-align:top;
width: 250px;
display: inline-block;
margin-left: 5px;
margin-top: 25px;
margin-right: 5px;
}
.bigTxt{
letter-spacing: 10px;
font-size: 16px;
}
.postTitle{
text-transform: uppercase;
letter-spacing: 1.5px;
font-weight: bold;
}
.postIntro{
text-align: left;
}
Hope this helps you
Where your CSS code is showing inline-block add this rule to it.
vertical-align:top;
Output:
.frontPost{
width: 250px;
display: inline-block;
margin-left: 5px;
margin-top: 25px;
margin-right: 5px;
vertical-align:top;
}
This will then make all of the divs align at the top of the parent div.
A useful link to read through! - http://css-tricks.com/almanac/properties/v/vertical-align/
Aligning image at start and
I am using following code
<div id="ringName" style="background-color: #701344;height: 50px; border-radius: 4px; width: 800px; ">
<img style="margin-top:5; margin-left:20;" src="images/about_us_logo.png" alt="" width="40" height="40" />
<div style="font-size: 24px; color: #FFF; text-align: center; line-height: 50px; height: 50px; border-radius: 4px; width: 760px; " ><?php echo $store['name'] ?></div>
</div>
What i want to do is, make a Voilet bar of width 800px , height 50px.
The <img> tag will show logo at like margin left 5 and margin top 5. Means at start in center vertical at start of The bar.
However I want to show the store name in the middle of the MAIN DIV, CEnter horizontal, center vertical.
In above code, the Text is not showing, and the margins to the logo are not working either.
What are the fixes
Here's the debugged code: http://jsfiddle.net/u7G2M/.
HTML:
<div id="ringName">
<img style="" src="http://placehold.it/40x40" alt="" />
<div>Store Name</div>
</div>
CSS:
#ringName {
background-color: #701344;
height: 50px;
border-radius: 4px;
width: 800px;
}
#ringName > img {
margin-top:5px;
margin-left:20px;
width: 40px;
height: 40px;
}
#ringName > div {
display: inline-block;
font: 24px/50px Sans-Serif;
color: #fff;
text-align: center;
vertical-align: top;
width: 700px;
}
.className{
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
}
http://www.gwendolynbarnes.com/shop/
<ul class="products">
<li class="product first">
<a href="http://www.gwendolynbarnes.com/product/finis/">
<img width="117" height="150" src="http://www.gwendolynbarnes.com/wp-content/uploads/2013/11/1418362_10202191776019152_824444076_n-117x150.jpg" class="attachment-shop_small wp-post-image" alt="1418362_10202191776019152_824444076_n" />
<strong>Finis</strong>
<span class="price">$3,000</span>
</a>
Add to cart
</li>
</ul>
There the HTML im talking about heres the css involved
.products li .price {
color: #fff;
font-weight: bold;
font-size: 18pt;
color: #248022;
}
.products li strong {
font-size: 16pt;
padding-bottom: 10px;
color: #000;
}
.products li {
padding: 10px;
margin: 12px;
}
ul.products li {
width: 30%;
float: left;
padding-left: 100px;
}
.products li a img {
border: 20px solid #fff;
width: 175px;
height: auto;
margin-left: 15px;
margin-right: auto;
}
.products li a img:hover {
border: 20px solid #fff;
}
ul.products {
width: 100%;
float: left;
padding-left: 50px;
}
.products li {
padding: 0px 15px 0px 15px;
background-color: #fff;
border: 20px solid #fff;
}
a.button:hover, button.button:hover, input.button:hover, #review_form #submit:hover {
background: #71d56e;
text-decoration: none;
color: #000;
font-weight: bold;
}
a.button, button.button, input.button, #review_form #submit {
background: #ddd;
text-decoration: none;
color: #000;
font-weight: bold;
}
.products li strong {
font-size: 16pt;
color: #000;
}
You can see it better at
http://www.gwendolynbarnes.com/shop/
But when you hover over the text "Finis"
It removes the border from the image?
Why would the Text have anything to do with the image border anyways? because its inside a
The problem is the following rule in you stylesheet:
.products li a:hover img {
border:1px solid #BBBBBB;
}
Just remove that one and it will work.
Since the border is already set for the image, you could also remove the following rule:
.products li a img:hover {
border:20px solid #FFFFFF;
}
The better solution would be to change the markup in this case as the css may get applied to some other section for which it was created
So I'd suggest
Instead of the code below:
<a href="http://www.gwendolynbarnes.com/product/finis/">
<img width="117" height="150" alt="1418362_10202191776019152_824444076_n" class="attachment-shop_small wp-post-image" src="http://www.gwendolynbarnes.com/wp-content/uploads/2013/11/1418362_10202191776019152_824444076_n-117x150.jpg">
<strong>Finis</strong>
<span class="price">$3,000</span>
</a>
Use this one:
<a href="http://www.gwendolynbarnes.com/product/finis/">
<img width="117" height="150" alt="1418362_10202191776019152_824444076_n" class="attachment-shop_small wp-post-image" src="http://www.gwendolynbarnes.com/wp-content/uploads/2013/11/1418362_10202191776019152_824444076_n-117x150.jpg">
</a>
<strong>Finis</strong>
<span class="price">$3,000</span>