I've created an page where users can view images along with the image description although I'm having some issues with the CSS for the description. The description is retrieved via PHP and is shown as a echoed variable. The issue with this is that the descriptions seems to carry on along one single line when it should be carrying on within the div.
As shown below, it displays along one line when it should be wrapping below to the same width as the text area below the description.
I've tried changing the width of the .desc class to a set pixel width of 290px instead 100% (should still take the 290px from the image-desc class container) but I'm having no luck.
My current CSS:
.image-info {
width: 290px;
display: inline;
float: right;
}
.image-info .desc {
text-align: justify;
width: 290px;
margin: 10px 0px;
}
and the HTML:
<div class="image-info">
<? $desc = htmlentities($row['desc'], ENT_QUOTES, 'UTF-8'); ?>
← Back to Gallery
<div class="desc"><? echo $desc; ?></div>
<? if(empty($_SESSION['user'])) { } else { print '<i class="icon-chevron-down"></i>Options<br /><div class="slidingDes"><form action="admin/includes/edit-img.php?id=' . $id . '" method="post"> <textarea type="text" name="description" placeholder="' . $desc . '"></textarea> <br/><input type="submit" value="Change" class="btn btn-primary"/> </form><form action="admin/includes/cover-image.php?id=' . $id . '" method="post"> <input type="submit" value="Cover Photo" class="btn btn-danger"/> </form></div>';}?>
</div>
It seems that your content go beyond the limit when there is no white space in the word
so just add word-wrap:break-word; to imageInfo class
here is your css
.image-info {
width: 290px;
display: inline;
float: right;
word-wrap:break-word;
}
Take a look here in fiddle
Add the new CSS 3 word-break property:
word-break: break-word; /* Will prevent text from bleeding outside container */
Use the CSS3 word wrap
word-wrap:break-word;
This will force the text to go down
Related
I try to center the social media buttons in a <div>, but it keeps on aligning left.
echo '<div class="socialWrapper">';
echo '<div class="fb-like" data-href=" ' . $_SERVER['REQUEST_URI'] . '" data-layout="button_count" data-action="like" data-size="small" data-show-faces="true" data-share="true" style="vertical-align:top;zoom:1;*display:inline;"></div> ';
echo '<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> ';
echo '<div class="g-plusone" data-size="medium"></div>';
echo '</div>';
CSS file
div.socialWrapper{
margin:auto;
width:100%;
text-align:center;
}
try div.socialWrapper{display: flex; justify-content: center; flex-direction: row;}
The parent <div>, socialWrapper, has a width of 100%, and will only appear centered by using margin: 0 auto if you give it a width of less than 100%.
<div> is a block-level element (its default behaviour is to be display as a block, so new elements will appear on a new line). Use <span> instead, because it is an inline element.
This means the nested <div> elements will need to be explicitly set as display: inline-block. (text-align: center will only be applied to elements whose default behaviour is display: inline, I think).
HTML/PHP
echo '<div class="socialWrapper">';
echo '<span class="fb-like" data-href=" ' . $_SERVER['REQUEST_URI'] . '" data-layout="button_count" data-action="like" data-size="small" data-show-faces="true" data-share="true" style="vertical-align:top;zoom:1;*display:inline;"></span> ';
echo '<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> ';
echo '<span class="g-plusone" data-size="medium"></span>';
echo '</div>';
CSS
div.socialWrapper{
margin: 0 auto;
width: 50%;
text-align:center;
}
I made a CodePen demo for you:
See the Pen Social toolbar by Yvonne Aburrow (#vogelbeere) on CodePen.
I manage to center social icons through following code in css:
.wrapper{
margin: auto;
display: flex;
justify-content: center;
flex-direction: row;
max-width: 200px;
try this it worked for me.
(I set max-width to 200px because it suits to me best, you can use
different number or dont need to use att all but in that case icons are spreaded al the way through div width.)
I did a thumbnail with some images . I'm using bootstrap.
Below each image I want to put a title .
The problem is when the title is too large, it breaks to a second line , making the thumbnail become disorganized .
I wonder if there is any way to do the following rule ...
If the title be greater than the width of the picture it displays "..." and when you hover over it displays any title .
<div class="col-xs-4">
<div class="thumbnail">
<img style="width: 150px; height: 150px" src="#Html.DisplayFor(modelItem => item.IMAGE)" alt="imagem" class="img-responsive">
<p>#Html.DisplayFor(modelItem => item.TITLE)</p>
</div>
</div>
Edit
Solution:
Using:
p.classname{
white-space:pre;
overflow:hidden;
text-overflow: ellipsis;
width: 200px;
}
p.classname:hover{
text-overflow: inherit;
overflow: visible;
}
In short and general, you get the automatic ellipsis by using these CSS properties:
white-space:pre;
overflow:hidden;
text-overflow: ellipsis;
(This requires you to have a width constraint on your caption so that it won't be wider than your image in the first place.)
You could do this with a pseudo element :after
.yourElement:after {
content: "...";
display: inline-block;
}
works IE7+
I created a custom attribute with 10 options ( mix10, mix20 .... mix100). What I am trying to do is when I select mix10, to get "mix10" as a custom sticker on product thumbnail image. I have no clue how to add this custom attribute as a small CSS on the thumbnail image of products.
First of all your going to have to look at z-index the styling property and then you're going to need to get the attribute in relation to the image.
Create a simple div over your product image
<div id="mix-sticker" class="mix-sticker_<?php echo $_product->getAttributecode()?>">
<img YOUR PRODUCT IMAGE/>
</div>
Then for your CSS styling you'd need to do something similar to
#mix-sticker {
z-index:500;
width: 400px;
height: 400px;
}
.mix-sticker_1 {
background:url(../images/mix1.png) top left no-repeat;
}
Let's assume you want to put this sticker on the thumbnails in your category listing. Open up /app/design/frontend/[YOURPACKAGE]/[YOURTHEME]/template/catalog/product/list.phtml and find the section that outputs your thumbnail images. It will likely look something like:
<li>
<a>
<img />
<a>
...
</li>
What you will need to do is insert some code right inside the <a> link:
<?php $_product = Mage::getModel('catalog/product')->load($_product->getId()); ?>
<div class="sticker">
<?php if($_product->getData('mix')=='mix10'){echo '<span class="mix10">'.$this->__('Mix10').'</span>'; }
elseif($_product->getData('mix')=='mix20'){echo '<span class="mix20">'.$this->__('Mix20').'</span>'; }
elseif ...
?>
</div>
Added all your options as elseif statements.
Then, in your CSS file, add styling for those stickers. That file will likely be located at /skin/frontend/[YOURPACKAGE]/[YOURTHEME]/css/styles.css:
.sticker {
position: absolute;
left: -5px;
top: -5px;
}
.sticker > span {
font-size: 0;
text-indent: -77777px;
width: 75px; /*image size*/
height: 75px; /*image size*/
background: url(../images/mix10.png) no-repeat left top; /*image location*/
display: block;
}
.sticker > span.mix20 {background: url(../images/mix20.png) no-repeat left top; margin: 1px 0 0 1px}
...
Add styles for all the sticker options you used in your PHTML file and then make sure your images are loaded to the server.
I'm trying to align two divs horizontally. Having tried about 15 different approaches, I still don't manage to get it working.
$html .= '<div class="fotoLinks">';
$html .= ' <img src="'.$image->getWebPath().'"/>';
$html .= '</div>';
$html .= '<div class="tekst">';
$html .= $this->text;
$html .= '</div>';
With corresponding CSS (div.alinea is a wrapper div):
div.alinea
{
float: left;
width: 100%;
margin-bottom: 15px;
}
div.tekst
{
float: left;
}
div.fotoLinks
{
float: left;
margin-right: 15px;
height: 100%;
}
I hope to get some inspiration for a new approach.
Try
display: inline-block;
Instead of float: left;
EDIT:
A method you can try, but is less supported, for your wrapper div, set:
display: table;
And for your inner divs:
display: table-cell;
You have to define the width for your text div and image div, since as is it inherits the parent elements width of 100%. There are a ton of others ways/answers, but this would have you tweak the least amount of code to get it to work right.
This works for me:
<html>
<head>
<style>
.ftext {
border: 1px solid red;
float:left;
}
</style>
</head>
<body>
<div class="ftext">
This is the left text.
</div>
<div class="ftext">
This follows to the left.
</div>
</body>
</html>
It floats the right text beside the left text.
In the CSS for div.tekst, put in clear:both.
Just give the 'tekst' div a left-margin. I didn't test this so I'm not sure that alone will fix it without adjusting something else.
Is it possible to center an image only trough setting a class to the img tag without side effects? The problem is the following: I have an anchor around an image. If I use the following CSS
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
And this (stripped down) HTML:
<a href="/path/to/image.jpg" class="fancybox" rel="fancybox" title="System">
<img src="/path/to/image.jpg" title="System" class="aligncenter">
</a>
the link takes the whole width of the main div. This means not only the image is clickable - also the space around the image (actually the whole width) is clickable. This is through the CSS display: block.
How can I center an image without using a parent div? I don't want the whole area clickable.
Background:
You can read this topic. It is about Wordpress and the built in editor. He automatically generates the class aligncenter on an image (if the user pressed the center button). I need this for my own theme. According to the moderators there this should be only a CSS question and doesn't have to do with changing code in Wordpress.
in aligncenter class add text-align:center
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
text-align:center;
}
I'm not familiar with wordpress, but you might want to try setting the image's and the anchors's css 'display' property to 'inline-block'.
If you are limited in changing the document's DOM, another option is adding an 'onClick' attribute to the image.
This will allow you to run some function once the image is clicked.
So, for example, if you want to redirect to another page:
<img src='myImg.png' onclick='myRedirect()' style='cursor:pointer'/>
And in the page's header:
<script type='text/JavaScript'>
var myRedirect = function(){
window.location.href = 'Some other location';
}
</script>
Notice the style='cursor:pointer', which changes the mouse's cursor to a 'hand' cursor.
To avoid an additional div container or even JavaScript, you can make the anchor display as a block:
.logo {display: block; height: 115px; margin: 0 auto; width: 115px;}
/* height and width must equal your image's values */
<img src="logo.png" alt="Logo" />
Live demo: http://jsfiddle.net/performancecode/Ggk8v/
it still incorporates a div, but the way i do it is:
<div class="megaman">
<img src="img/megaman.jpg" alt="megaman">
</div>
img {
height: 125px;
width: 200px;
}
.megaman{
text-align: center;
margin: 0 auto;
display: block;
}
And yes, I replaced .logo with .megaman because megaman rocks! But it should work. I couldn't figure it out without using a div.
The solution I found. Adding /></a> and width and height to the anchor tag cuts down the hyperlink to the image...
<a class="link" href="URL" target="_blank"> <img width="75px" height="75px" alt="Facebook" src="IMAGE LOCATION"/></a>
Second answer:
paste this in functions.php
add_filter('image_send_to_editor','give_linked_images_class',10,8);
function give_linked_images_class($html, $id, $caption, $title, $align, $url, $size, $alt = '' ) {
// only do this on center
if($align == 'center') {
$html = str_replace('aligncenter', '', $html);
$html = '<p style="width: 100%; text-align: center;" >'.$html.'</p>';
}
return $html;
}
Down side, this won't effect already inserted images...
Also if you can please move the style of the <p> to the stylesheet.