I have a brand logo on Bootstrap Nav.
<a href="http://localhost/SGW" class="logo hero_logo">
<img class="img-responsive" src="http://localhost/SGW/wp-content/uploads/2015/09/unnamed.png" alt="Sai Gon Works">
</a>
Original size of images is 1909 x 406. And I have a style for
.hero_logo {
display: block;
position: absolute;
padding-left: 25px;
padding-top: 15px;
z-index: 100;
width: 300px;
}
But when i refresh page, my logo is expand until my page load done. You can see this issue in my video: https://www.youtube.com/watch?v=MQAZmyWRfbo&feature=youtu.be
How to fix it?
Add your hero_logo class to <img> tag, not <a> and it should work. Or add width=300 to <img> tag.
Related
I've added a logo to the header of my website www.theestablishmenthairdressing.com however it comes out very small (logo in the top-left).
I can see by inspecting the code in Safari that it looks like there is a restriction to the size of the logo built into the theme:
<h1 class="header-logo">
<a href="http://www.theestablishmenthairdressing.com/" rel="home">
<img class="" width="50" height="50" src="//www.theestablishmenthairdressing.com/wp-content/uploads/2017/08/Establishment-LOGO-header.png" alt="The Establishment Hairdressing" />
</a>
</h1>
However it's not clear to me how to change this. I've tried adding
CSS
h1.header-logo {
width: 200px !important;
}
To the child theme's style.css however this did not make a difference.
Please help me out of this.
Copy the file to the child theme folder in which this code is probably header.php and remove width="50" height="50" from the img tag. Now you can do your changes in style.css.
you should use like below.
h1.header-logo img {
width: 200px !important;
}
or
h1.header-logo>a>img {
width: 200px !important;
}
Just remove the width and height attributes of the image tag:
<img class="" src="//www.theestablishmenthairdressing.com/wp-content/uploads/2017/08/Establishment-LOGO-header.png" alt="The Establishment Hairdressing">
It should work fine.
http://wpdemos.themezaa.com/pofo/documentation/knowledgebase/logo-typography-and-colors/change-logo-size/
Code for header logo
header a.logo-light img{ max-height: 26px;}
Code for sticky header logo
header a.logo-dark img {max-height: 26px;}
Code for footer logo
.footer-logo { max-height: 26px; }
Code for Hamburger logo
.hamburger-logo img { max-height: 46px; }
I found cool css to create lightbox. It uses :target to show lightbox div. I tried in in code pen and it works fine, however on my site it doesn't show anything. I can't find what else in my code is blocking it from showing. Here's the basic code:
HTML:
<a href="#img2" class="image">
<img src="https://d2d00szk9na1qq.cloudfront.net/Product/2c6b113d-e972-42cc-a2de-f5dcf1c82e95/Images/Large_0297791.jpg">
</a>
<a href="#_" class="lightbox" id="img2">
<img src="https://d2d00szk9na1qq.cloudfront.net/Product/2c6b113d-e972-42cc-a2de-f5dcf1c82e95/Images/Large_0297791.jpg">
</a>`
CSS:
.lightbox {
display: none;
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0,0,0,0.8)
}
.lightbox img {
max-width: 90%;
max-height: 80%;
margin-top: 2%;
}
.lightbox:target {
outline: none;
display: block;
}
(Codepen: http://codepen.io/anon/pen/jrBrmp)
and here's my site: http://test.fulfeal.co.uk/how-to/ Thanks in advance.
Aleksander
Something in your site installation is preventing the URL from changing when the hashtag links are clicked. The :target selector works on the hashtag in the URL.
You will see if you navigate directly to http://test.fulfeal.co.uk/how-to/#img1 the image pops up as expected. So nothing is wrong with your CSS, the issue is with the URL routing on your site.
In codepen the URL isn't changing because the demo box at the bottom has its own iframe, and it is being updated with the link.
Your site url is been routed. Two ways to solve the issue
You are using wordpress framework for your site, so go to the wordpress content admin panel and change your url type.
OR
Add below code at the end of your site.
<script>
$(function(){
$(".image").on("click",function(){
var image = $(this).attr("href");
$(image).show();
});
});
</script>
I'm unsure if this is the correct approach, or even question, so I will elaborate.
Please visit this live page http://thedinnerparcel.co.uk/index.php?option=com_content&view=article&id=22&Itemid=3
I am basically asking if it is possible to overlay a link somewhere in the header div? Specifically over the sticker background image on the right?
I didn't build the site, but I have just added the sticker to the right corner of the header div. (FYI it's a Joomla site so uses a PHP template file.).
I did this as a background image and used some padding and negative margin to make it overflow, then I realised the sticker needs to link to their order page.
Would an image map be the best way to make this into a link? Or is there a better method?
If an image map is the way has anyone got a code example.
I've tried the below code, which I edited from a tutorial on a similar subject, this doesn't work
<div id="header" usemap="#Image-Maps_2201202140621298">
<map id="Image-Maps_2201202140621298" name="Image-Maps_2201202140621298">
<area shape="rect" coords="0,0,275,44" href="#" alt="Dinner Parcel" title="Dinner Parcel"/>
</map>
</div>
Paste the following code as is and it will work for you
Append a <a> to the end of your header div:
<div id="header">
<div...
<div id="menu">...
<a class="my-map" href="#"></a>
</div>
And then add the following styles:
#header{
position:relative;
}
.my-map{
width: 190px;
height: 190px;
display: block;
position: absolute;
bottom: 26px;
background: #EEE;
border-radius: 95px;
right: 2px;
}
I don't know how popular imagemaps are anymore :). You can position the element absolutely relative to the header with the following (for example). Codepen sketch: http://cdpn.io/klsEp
HTML
<div class='header'>
<a class='sticker'>Click me</a>
</div>
CSS
Consider this simple example.
.header {
background: green;
height: 200px;
position: relative;
width: 800px;
}
.sticker {
background: red url('..') no-repeat center;
bottom: -20px;
color: white;
cursor: pointer;
display: block;
height: 100px;
position: absolute;
right: -30px;
width: 100px;
}
.sticker:hover {
background: black;
}
In your HTML, I cannot find the link to menu_bg6.png, but that is where you must put the usemap= tag, as in:
<img src="menu_bg6.png" alt="an image" usemap="#usethismap">
So, not on the DIV tag, but on the IMG tag.
Then you can create a corresponding <map> tag and it should work for you (although, don't forget to insert a URL for the click to action - currently yours is '#').
Here is a simple jsFiddle with more ideas for positioning clickable areas over an image.
Here is an article that discusses how to create pseudo "image maps" for DIVs - without an IMG tag.
I am trying to setup background images using CSS but I can't seem to get the images to populate correctly.
Here is the CSS for what I want to do
a.fb {
background-image: url('img/Facebook.png');
}
a.fb:hover {
background-image: url('img/FacebookHover.png');
}
Here is the html code that I am using, I have tried a couple of different ways to populate the images with no luck
<div class="footer">
<a class="fb" href="http://www.facebook.com" target="_blank"></a>
</div>
Any help would be greatly appreciated
Okay added the following and still not go any other thoughts
a.fb {
display:block;
width: 33px;
height: 33px
background-image: url('img/Facebook.png');
}
EDIT: Yup got it working now forgot the ; after height, but no I get a white border around it and tried setting border: none; no luck
a.fb {
border: none;
display:block;
width: 33px;
height: 33px;
background-image: url('img/Facebook.png');
}
An anchor tag by default shows as an inline elements, so it depends on its content in order to get a height and width. To do what you want, you should add some styles: display:block; width: 20px; height: 20px.
You could also change the aproach completely and use html + mouseover and mouseout events:
<div class="footer">
<a class="fb" href="http://www.facebook.com" target="_blank">
<img src="http://www.facebook.com/images/fb_icon_325x325.png" alt="fb" name="fb" width="33px" height="33px" name="image_name" onmouseover="fb.src='http://goo.gl/cxiR7'; fb.width='38'; fb.height='38';" onmouseout="fb.src='http://www.facebook.com/images/fb_icon_325x325.png'; fb.width='33'; fb.height='33';" />
</a>
</div>
Here is a jsBin: http://jsbin.com/onehuw/1/edit
background-image only draws in the space that the element occupies. Your a tag has no content, and therefore it's width is 0. You'll not see any content (and background) until you give it at least some width (and height if needed).
You need to add padding to the <a> tag otherwise it has a width and height of 0 for example:
a.fb {
padding: 20px;
background-image: url('img/Facebook.png');
}
a.fb:hover {
background-image: url('img/FacebookHover.png');
}
You could also just set the width and height of the anchor
See js fiddle here http://jsfiddle.net/Ws8ux/
Is it possible to keep the text under logo without hiding it using display:none or text-indent? I want to bring the image up and keep logo behind it. Like is PSD layers. And Don't want to use Logo Image as a CSS background
<a href="/" title="Return to the homepage" id="logo">
<img src="http://lorempixum.com/100/100" alt="Nike logo" />Logo Text
</a>
Like this (fiddle)?
HTML:
<a href="/" title="Return to the homepage" id="logo">
<img src="http://lorempixum.com/100/100" alt="Nike logo" /><span>Logo Text</span>
</a>
CSS:
a { display: block; position: relative; }
a span {
display: block;
position: absolute;
top: 40%;
}
What's the purpose of keeping the text if it's to be hidden? If your goal is to hide the text underneath the image for the purposes of accessibility, you may be interested to know that most search engines won't fault you if you just leave the text as an alt attribute on your image. In contrast, you might find some techniques for deliberately hiding content could prove detrimental to your cause.
If it's important to have both the image and text present, you may want to try wrapping the text in a <span>, using an accessible style on that and then disabling it in your print stylesheet.
#jitendra; may be you have to play with css:
CSS:
a { position:relative; }
img { position:absolute; top:0; left:0 }
HTML:
<a href="/" title="Return to the homepage" id="logo">
Logo Text<img src="http://lorempixum.com/100/100" alt="Nike logo" />
</a>
check the fiddle may that's help your http://jsfiddle.net/sandeep/Ws8ux/11/
You can do this by setting position: absolute for the image. You should probably also make sure the anchor is the same size as the image, so that it doesn't break the layout of other elements on the page.
img {
position: absolute;
}
a {
display: inline-block;
height: 100px;
position: relative;
width: 100px;
}
The updated fiddle: http://jsfiddle.net/Ws8ux/7/