Within posterous when you hover on an image it displays a box enabling the user to download or view the full size image. Here is the example of how this should work.
I am trying to find out why this does not work in the theme I created Here. Any and all help would be greatly appreciated.
I took a quick look at your code. The span that's supposed to show up; 1 has no id associated with it and two is not showing when you hover over the image. Make sure your javsacript is correct. I think it is most likely being referenced wrong.
<span id="" class="show">
<div id="-dl3" style="font-size: 14px; position: absolute; right: 10px; bottom: 0px;">
<div id="-dl2" class="posterousGalleryLink" style="font-size: 14px; display: none;">Download this gallery (ZIP, null KB)</div>
</span>
something like this
http://jsfiddle.net/amkrtchyan/jCcnC/
Related
I've searched the existing questions and found some similar issues, but the suggestions there didn't solve my problem.
Here is the issue:
We are using the Visual Editor plugin for Wordpress. My boss wanted this plugin to be used for a special promotion area in the header - he wants to display images that are clickable or have a button. I wrote some custom CSS so this plugin will do that. The issue, as you know, is you can't make a link in CSS. So for the background image, I needed a button. However in this particular case there was so much text on the image, a button would not work.
So, I wrote an ID that I could call in HTML. I made a link, called the ID, and then inside the ID I put a text indent that would push the text off the page and the image would be clickable.
The issue here is that for some reason the image would not fully load. It was cutting off height-wise. I had set width: 100%; and height: auto;, but neither of those things worked.
So, I ended up simply inserting the IMG normally, and linking it normally, but now the problem is I need it to be responsive.
I wrote a class called .responsive-image and made the width: 100%; and height: auto; but this still doesn't work.
Do I need to put the responsive image information elsewhere? Do I need to write some other class? I'm at a loss and have looked at this too long at this point.
You can see this header widget right here - 100daysofrealfood.com/carrot-top-almond-pesto-sustainable-almond-recipes/
And if you inspect you can see what I mean about it not being responsive.
Here's what I've written to insert it into the widget:
<div class="days100-background-header-widget"><div class="responsive-image"><a
href="https://www.100daysofrealfood.com/spring-reset-real-food-mini-pledge-
program/?utm_source=headerwidget">
<img src="https://www.100daysofrealfood.com/wp-
content/uploads/2017/04/WidgetHeaderAreaMP2017.png" border="0"
class="responsive-image" alt="Real Food Mini Pledge Program" />
</a>
</div>
</div>
I have the class in there two places. Maybe that's the issue?
Here's the CSS for the main header widget class:
.days100-background-header-widget{
display: flex;
align-items: center;
justify-content: center;
}
Any feedback is really appreciated. Thanks for reading this super long question!!
The problem is not on the image itself, but on the parent <div> with the class of .days100-background-header-widget. It is set to display: flex so that div is not 100%.
If you want to center things on the screen you can use margin: 0 auto on a block element.
.days100-background-header-widget{
display: block;
margin: 0 auto;
}
.responsive-image {
width: 100%;
height: auto;
}
<div class="days100-background-header-widget">
<div class="responsive-image">
<a href="https://www.100daysofrealfood.com/spring-reset-real-food-mini-pledge-
program/?utm_source=headerwidget">
<img src="https://www.100daysofrealfood.com/wp-
content/uploads/2017/04/WidgetHeaderAreaMP2017.png" border="0"
class="responsive-image" alt="Real Food Mini Pledge Program" />
</a>
</div>
</div>
I'm trying to create a highlight effect for a headline using css, see css-tricks article for background.
Here's a stackoverflow question that has solutions that work in the browser using box-shadow declaration, but email clients like Gmail don't support a lot of the newer CSS3 features.
Is there a workaround for doing CSS-based text highlighting that works and can be used in email templates?
When working with HTML email, you have to go really old-fashioned with your code. I don't think you can give a block of inline text a background color, but you can give a box like a table cell a background color fairly reliably.
The following text is highlighted: <table><tr><td bgcolor="eeff00">Highlighted Text</td></tr></table>
This probably won't even be highlighted in email clients: <span style="background-color: #eeff00">Highlighted Text</span>
An old trick could be using double texts (adjust the shadow color to fit your requirements).
Updated, with opacity, which might work and will give it even more "shadow-ish" look
<h1 style="text-align: center">
<span style="font-family: Verdana; position: relative">
<span style="position: absolute; left: 2px; top: 2px; width: 100%; color: #f00; opacity: 0.5; ">
Service Request Created
</span>
<span style="position: relative">
Service Request Created
</span>
</span>
</h1>
In order to teach the different components of a website, I have a giant image (made in photoshop) with a bunch of boxes labeled header, sidebar, content, footer etc all in one image. Using absolutely positioned divs with images inside, I have made it so that when moused over certain parts of the image, like for example the logo, a box appears with information about that specific part of the website and this box appears on top of the logo.
The problem is that this doesn't seem to work in internet explorer (the images never appear) and the images are out of place on a Mac in Safari. The feature I am describing can be seen here
and some samples from my code are below. Is there a better way I can accomplish this task, or solve the problem of the images not appearing in internet explorer and being positioned differently on Macs in Safari?
HTML
<div class="look" id="look1"><img src="images/extensive_look/logo_info.jpg" width="326" height="109" alt="Logo Information"></div>
<div class="look" id="look2"><img src="images/extensive_look/header_info.jpg" width="236" height="74" alt="Header Information"></div>
<img src="images/extensive_look/website_layout.jpg" width="1200" height="890" alt="Website Layout">
CSS
.look:hover img{
visibility:visible;
}
.look {
position: absolute;
left: 320px;
top: 328px;
}
#look1 {
top:211px;
left:53px;
}
#look2 {
top: 205px;
left: 487px;
}
#look3 {
top: 282px;
left: 403px;
Something like this to complement the comment:
<div>
<h1 align="center">Extensive Look at a Website</h1><p style="width:800px;margin:0 auto;">As you can see in step 1 of the 7 steps, web design begins with an understanding of a website. Below is a model website featuring the different components of a website. As you scroll, make sure to mouse over the different components to get information on that component. It is important to note that while these are common parts of most websites, not every website will have every component.</p>
<p style="width:800px;margin:0 auto;"> </p>
</div>
<div class="content" style="position:relative;width:1200px;height:890px;background-image:url('images/extensive_look/website_layout.jpg');">
<div class="look" id="look1"><img src="images/extensive_look/logo_info.jpg" alt="Logo Information" height="109" width="326"></div>
rest of look things here.
</div>
I'm having a little trouble with a button I'm making as part of a SharePoint site. It currently appears like this http://imgur.com/n9M6ffX
I would like to edit my code so the grey border does not appear around the blue image but I've had no luck getting anything to work. My current code is pretty simple and can be found below:
<button onclick="HideShow()" type="button">
<img src="Training%20Libraries.png" style="width: 117px; height: 33px;"/>
</button>
Use
border: none;
for the button
Below is the image, where I have text on the image. I am wondering on how the text on the Image can be changed. Actually someone else wrote the code and I am not getting. Please Help me out Friends.
And this is the code which is working on this.
<div class="TabsV">
<div id="Tab0" class="TabV Selected" style="height: 86px;">
<a style="background-position: -8px -12px; padding-bottom: 70px;" href="javascript: SelectTab(0)"></a>
</div>
<div id="Tab1" class="TabV" style="height: 116px;">
<a style="background-position: -40px 0px; padding-bottom: 100px;" href="javascript: SelectTab(1)"></a>
</div>
<div class="TabVEmpty" style="height: 50px;"></div>
</div>
It looks like the text is part of the image.
So you need to edit the actual images and change the text there.
If you look at the stylesheet used in that page you will find something similar to
.TabV a{
/*in here you will see the url of the image being used
background:...
or background-image: url('..');
*/
}
It looks like the image itself contains text and it is applied via the TabV class - notice how the background-position coordinates changes between one tab and the other.
If you look in your CSS file, you should see something like:
.TabV
{
background-image: url(...)
}
What you need to do, therefore, is to manipulate the existing image used as background and add the text you want to that image. Then you need to modify the background-position of the corresponding anchor element. One way to do that with jQuery is:
$('#Tab0').attr("background-position","-16px 20px;"); //-16px and 20px are just an example
Where #Tab0 is the css selector for the first tab. #Tab1 would be the css selector for the second tab... "#<something>" maps to id="<something>" in the html markup.
The technique itself is called CSS sprites. You can read more about this technique here.
You can not! You must edit those image files in an image editor. The text from the tabs isn't coded in the html code.