**Note all <> tags have been removed to allow code to display
**
i have been playing around with this for hours and am not really getting it to work without using a workaround at the design end of things (ie Corel draw)
*Before i go any further,
First, website URL is AdventistAviation.com.au
Second, can i just say...i know this can be done with style sheets...however, in this case...i am not doing it that way!!! (so please dont bother pestering me with that option unless there is absolutely no way the method below can work)
Third, a workaround to my problem below, is to create the image already centered in its own background (the same size as the logo next to it) then import it (this is a bad idea because if in the future someone changes the main header background to a different color other than white...its gonna look awful!)
First i add the image (this works no problem)
However because the Logo on the left in the avada theme is approx 250×250 square, Tagline text is no longer centered in the header (as you can imagine comparing above with logo below)
I am using the themeforest AVADA Theme. In theme options>Banner Code For Header #4…
I would like to add the following inline css styling in an iframe for example, to vertically centre the Tagline (ie bring it down level with the middle of the logo)
style="vertical-align: middle;"
<iframe src="http://image_URL.png" style=”vertical:align: middle;” width="200" height="200"></iframe>
This doesnt seem to do anything different to the method in 1.
<div style="vertical-align: middle;"><iframe src="http://image_URL.png" width="200" height="200"></iframe></div>
I was hoping that if i place the iframe inside a tag containing the styling i might achieve my goal...alas it still doesnt work.
I have got to the point where my head is so full of nonworking methods i cant progress further.
Can someone help with this one?
p.s i have tried to find some inline css styling tutorials (specifically about vertical alignment styling) for the tag in html 5 without any luck.
damn w3c for depreciating the html vertical alignment method in html5!
# adam:
A simple solution is to change this code:
<div id="header-banner">
<div style="vertical-align: middle;" height="170" width="500">
<img src="https://googledrive.com/host/...etc..." width="400" height="200">
</div>
</div>
To just this:
<div id="header-banner" style="margin-top: 70px;">
<img src="https://googledrive.com/host/...." width="400" height="200">
</div>
There's no good reason to use inline styles for this, but anyhow, I've edited a chunk of your HTML with inline styles that will get what I think you want:
<div class="avada-row" style="margin-top:0px;margin-bottom:0px; display: table; width: 100%">
<div class="logo" style="display: table-cell;margin-right:0px;margin-top:0px;margin-left:0px;margin-bottom:0px; vertical-align: middle;">
<a href="http://adventistaviation.com.au">
<img src="http://adventistaviation.com.au/wp-content/uploads/2014/02/AAA-QLD-LogoType5_outlinedSQC1-e1398740621697.jpg" alt="Adventist Aviation Association" class="normal_logo">
</a>
</div>
<div id="header-banner" style="display: table-cell; vertical-align: middle; float: none; text-align: right;">
<div style="/* vertical-align: middle; */" height="170" width="500">
<img src="https://googledrive.com/host/0B7IkcUtUKfX8SkpLS1NuTlR4cDA/AAA_Tagline.png" width="400" height="200">
</div>
</div>
</div>
Related
I'm creating a table containing images and want to refer to the src of the image as a base64 data-URI from a style sheet. This style sheet would contain muliple images encoded. I could do this within the body of the page or in the head, but that makes the document difficult to edit. How should I be coding the image tag in the body and table to refer from the external CSS?
I've tried using the image as a base64 data-URI within the body.
<img alt="B" src="data:image/png;base64,iVBORw0KG..." align="bottom" border="0" height="186" width="120">
That works. Also within the head as a style.
I've looked around stackoverflow and other places and found similar code but not with a external CSS file.
<!-- within the page body -->
<td style="vertical-align: top; height: 186px; width: 120px;">
<div class="parent">
<div class="child"><img src="C" align="bottom" border="0" height="186" width="120"> </div>
</div>
</td>
Here is a JSfiddle
https://jsfiddle.net/mL5fkung/
As you can see in the 1st row the images are shown in the traditional way.
In the 2nd row I've use the base64 image code in the img code.
The 3rd row shows the desired code that isn't working.
Your solution will work, if you add the class C to each <img>:
<img src="" align="bottom" border="0" height="186" width="120" class="C" />
JSfiddle: https://jsfiddle.net/a40qnzuf/
I have an image, single character in a span (equal sign), and then a div where child elements are added/replaced via js.
However, I can't for the life of me figure out how to get it all aligned properly (fear I'm over thinking and complicating it.)
I'm using bootstrap's grid (row/col) system as well.
Something akin to...
<div class="container">
<div class="row">
<div class="col-lg-2 col-offset-lg-1">
<div class="response-part">
<img src="foo" />
<span class="opensans">=</span>
<div id="rp1" class="opensans inline" style="width: 50px;">
</div>
</div>
</div>
<div class="col-lg-2">
<div class="response-part">
<img src="foo" />
<span class="opensans">=</span>
<div id="rp2" class="opensans inline" style="width: 50px;">
<span class="opensans">X</span>
</div>
</div>
</div>
</div>
</div>
See jsfiddle
Wanting image centered middle along equal sign (vertical-align) as well as span within neighboring div (and the text in that span appearing just a few pixels off the bottom line.)
I saw this but none of the solutions are addressing the problem for me (I can only guess it is because of the third element and font, etc.)
UPDATE1: Edited sample html to correctly reflect the scenario in which the response-part.div is empty (initial state, possible transition state as user interacts with the page.) Updated fiddle
UPDATE2: I "fixed" the issue occurring with no child elements by adding an initial element in the initial html for the response-part, and then adding one back in when the user removes all other elements. A bit hackish, would appreciate a fix that didn't involve this workaround if possible. Updated fiddle
PS: I initially considered using bootstrap v4 (with flexbox support) but it is still alpha. Alternatively, I also looked into using FlexboxGrid, however I still need bootstrap for other features and FlexboxGrid uses similar classes ("row", etc) as bootstrap, which I assumed would cause name conflicts (if I included both in my project, eg: which "row" class would be used!)
Try using display: flex; on your response-part class. Something like this:
.response-part {
display: flex;
align-items: center;
}
I edited your fiddle. Take a look on it: https://jsfiddle.net/gusLnyyh/6/
Hey guys I'm trying to implement Paper unfoding effect in a webpage of a wesite I'm developing. Im using the pfold jquery plugin, but I want a text to appear on hover and I did it many times but doesnt work. Here is my code:
HTML:
<div class="uc-container">
<div class="uc-initial-content">
<!--<img src="fm.png" alt="FM" /> -->
<img src="fm.png" alt="Fm" title="Fm" id="hoverFm">
<p class="textSponsor">92.7 BIG FM</p>
<span class="icon-eye"></span>
</div>
<div class="uc-final-content">
<img src="fm.png" alt="FM" />
<div class="title"><h4>FM</h4> </div>
<span class="icon-cancel"></span>
</div>
</div>
And This is the CSS For same:
#hoverFm .textSponsor{
position: relative;
margin-right: auto;
margin-left: auto;
visibility: hidden;
}
#hoverFm:hover .textSponsor{
visibility: visible;
}
When Im doing this the text just simply comes below my picture . I'm not getting where I'm going wrong. And when I'm creating a new div which contains only <img> and <p> tag then my image is getting small (I guess its because of the code I wrote for resizing and paper folding effect which is gettin hampered due to this and then also text on hover is not coming)
If you guys wanna see what actually I'm making :
The link to the demo site is: http://tympanus.net/Development/PFold/index3.html
and the code for same is available at link: http://tympanus.net/codrops/2012/10/17/pfold-paper-like-unfolding-effect/comment-page-2/#comment-450779
And the github link for code is: https://github.com/codrops/PFold
I tried it a lot to figure out but was unable so please help someone. It will really be appreciated. Thanks in Advance!!
#hoverFm:hover .textSponsor
This does never really happen, because .textSponsor is not a child of #hoverGM, it is a sibling. You need to use the next selector, which is +:
#hoverFm:hover + .textSponsor
You could also change the structure to
<div class="uc-initial-content" id="hoverFm">
<img src="fm.png" alt="Fm" title="Fm">
<p class="textSponsor">92.7 BIG FM</p>
Then your original selector would work because now it really is a child.
This is Wordpress-related question, but since desired solution is purely CSS-related, I posted it in here, not at wordpress.stackexchange.com.
In my current style, if image has no following caption, it is placed using HTML code like that:
<p>
<a href="http://cnn.com/file.jpg">
<img src="http://cnn.com/file-300x225.jpg" alt="" width="300" height="225" class="aligncenter size-medium wp-image-55">
</a>
</p>
In my current style, it is styled like that:
img {
display: block;
padding: 5px;
background-color: #eee;
border: 1px solid #ddd;
}
Which draws simple border around it.
If there is a caption following image, entire HTML in this part is a little bit more complex:
<div id="attachment_55" class="wp-caption aligncenter" style="width: 310px">
<a href="http://cnn.com/file.jpg">
<img src="http://cnn.com/file-300x225.jpg" alt="" width="300" height="225" class="size-medium wp-image-55">
</a>
<p class="wp-caption-text">Caption</p>
</div>
Currently caption is not styled at all (as per my currently selected theme).
What I would like to achieve is to have entire div styled (image and caption), if there is any caption. If I'm not mistaken, that would require to style img (as currently) only, if it is not followed by <p class="wp-caption-text">. If it is, then img should not be styled at all and it second-in-row parent (<div class="wp-caption">) should be styled instead.
That's all for the algorithm. But how to code this in CSS (and whether it is possible at all) -- I don't know.
The simpliest solution would be to never style img and always style <div class="wp-caption"> instead, no matter if there is caption following image or not. But the problem is, that Wordpress is adding that div only, if there is a caption. So styling only it, would result in no border at all, if there is only image.
if you can use Jquery.
you can manipulate the markup then. if the pattern of your img and img with caption is going to be like that, you can do this.
$('img').each(function(){
if($(this).parent().parent().hasClass("wp-caption")){
$(this).parent().parent().addClass('img');
}
});
am sure this code can be optimized even better, but it should give you an idea.
see this fiddle
Say I have something like the following code, where I want to display some text between two images that I am floating left and right.
<img src="testImage1.png" alt="Test Image 1" style="float:right;" />
<img src="testImage2.png" alt="Test Image 2" style="float:left;" />
<p>Test Text</p>
I want to add a border around the two images and the text. I tried putting a <div> around all 3 of the above tags and using style="border:2px black solid;". While this adds a border, it seems to not take the images into account. That is, we get something like the following (using StackOverflow and Google logos).
I am guessing this is happening because the floating elements are not being considered as part of the <div>. I am a software developer, not a web developer, so I am no expert in CSS. But I do think I recall that floating elements are kind of "ignored" in a way. Can anyone give a detailed description of what is going on and how to fix it?
Adding an overflow in this case with a value of hidden or auto remedies the issue.
Check the fiddle below:
http://jsfiddle.net/XMrwR/
Clearing floats the overflow way
http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html
In CSS, floated elements do not add height to a parent by default.
The solution is simply to set overflow: hidden.
<div style="border: 2px solid black; overflow: hidden;"
<img src="testImage1.png" alt="Test Image 1" style="float:right;" />
<img src="testImage2.png" alt="Test Image 2" style="float:left;" />
<p>Test Text</p>
</div>
fiddle: http://jsfiddle.net/JNets/
Add this line to your CSS properties:
overflow: hidden