http://www.facebook.com homepage when displayed in firebug shows that the image/icon of "facebook" on the top left corner has the following HTML:
<i class="fb_logo img sp_ezjerk sx_440431">
<u>Facebook logo
</u>
</i>
Even the media resource list does not show any image/icon in png/ico/gif for the "facebook" image that appears.
I have tried searching for that logo source even in chrome developer tools, but I am unable to locate it.
Firstly, where does the text logo come from?
Secondly, why is it placed under the < i > tag which is primarily used for italicized text.
A quick inspection of that i element shows the following CSS classes being applied:
img
sp_ezjerk
sx_440431
The latter two appear to be dynamically generated and change with each page load.
The first of the latter two, on each page load, shows the following CSS rules:
background-image: url("/rsrc.php/v2/yR/r/7TyBDSy09g8.png");
background-repeat: no-repeat;
background-size: 104px 488px;
display: inline-block;
height: 32px;
width: 24px;
The image file at /rsrc.php/v2/yR/r/7TyBDSy09g8.png contains the logo, and the CSS is positioning it to display only that portion of the image.
As for why they chose an i element, that is beyond me. I wouldn't have chosen it, but I guess they did.
Related
I'm trying to put this settings/gear icon on the same line as a subheading in HTML but the icon/image has a weird outline around it that I can't seem to figure out how to get rid of.
Here is an image
Here is the HTML code for it
<div class="sidenavSubTitleVector">Languages<img class="languagesIconGear"></div>
Here is the CSS code for it
.languagesIconGear {
background: transparent url("Images/gearIcon.svg") no-repeat center top;
border: 0;
min-height: 16px;
min-width: 16px;
float: right;
cursor: pointer;
}
How can I fix this?
You have an invalid HTML syntax, make sure to stick to HTML standards to avoid such issues in the future.
If you specify an image you also need to provide a src attribute. If you don't you will end up with an "img-not-found" state which results in your rendering bug.
To fix this, use this HTML:
<h3 class="sidenavSubTitleVector">Languages<img class="languagesIconGear" src="Images/gearIcon.svg" alt="settings"></h3>
An image also needs an alt attribute to describe it. As an example I used settings, since I guess this gear icon should open some settings.
Note, I also updated your title to an actual title of level 3: <h3> The level 3 is just guesswork on my part, use the appropriate level for your structure.
I need a big banner at the top of the screen going from end to end. It has to be a link and on the banner is an image. I have all that set up and working. However, around it all is a gray box and in the top left corner is the icon that is displayed when no image is found. How do I remove the box and the icon?
header.php
<body <?php body_class(); ?>>
<a class="vcuLink" href="http://www.vcu.edu/" >
<div id="topBanner" class="vcuBanner">
<img class="vcuLogo" src="vcu.png" width="910" height="59">
</div>
</a>
<div id="page" class="site">
<div class="site-inner">
I do not think showing more is necessary.
style.css
.vcuBanner {
position: relative;
background-color: black;
z-index: 100;
margin: 0;
padding: 0;
width: 100%;
height: 62px;
top=0;
}
.vcuLogo {
position: relative;
background:url(vcu.png)no-repeat center;
height: inherit;
width: inherit;
z-index: 101;
}
EDITS: More information and a screen shot.
When either the background:url line in style.css or the img tag in header.php is deleted, the image in the banner stops showing. However, when the img tag is there so is the weird icon and outline, leading me to believe that the img tag is the culprit.
Screenshot:
In the VCU banner at the very top, you can see what I am talking about. In Internet Explorer, the icon at the top left is an X button instead and there is no outline.
There are many possible causes for this, so I’ll try an educated guess at what seems the most likely cause.
I don’t know where your files are located relative to one another, but the way your markup and CSS here is written, the file vcu.png should be in the same folder as the PHP file where you’re displaying it (presumably index.php, given the URL in your address bar) for the <img> tag to work. Similarly, it must be in the same folder as the CSS file for the background declaration to work.
Since the position of the <img> tag itself is not specified in your CSS, it should show up in the top left corner of the container. The background image is centred, so it should show up in the centre. Given that there is an image in the centre and a missing image icon on the left, it would seem it is the HTML <img> tag that points to a nonexistent file. That in turn means that the PNG file is in the same folder as the CSS file, but in a different folder than the PHP file. Perhaps the CSS and PNG files are in a subfolder called style or something like that?
When either the background:url line in style.css or the img tag in header.php is deleted, the image in the banner stops showing.
This makes sense. Since the CSS-defined background is declared on the image tag (not the containing <a> or <div>), removing the tag from the HTML markup naturally also removes the background image. Conversely, since the HTML tag is pointing to an incorrect path, having the tag there also means there will be a missing image icon.
You can solve this in two simple ways:
Figure out where the image is located relative to your index.php file, and make sure you point to the correct location (perhaps src="style/vcu.png" or something like that). Then style the <img> tag with something like margin: 2px auto; to centre the image and give it a couple of pixels of space at the top and bottom, and get rid of the background declaration in your CSS.
Remove the <img> tag from your HTML altogether, replace it with (to make the containing <a> non-empty), and style the container to be display: block.
The first yields more semantic code and would be my preference; but both should render the same in regular browsers. Removing the <img> tag also removes its alt attribute, however, so users relying on text-to-speech systems will have no way of knowing what that link actually does, since the only meaningful content it will contain is a non-breaking space.
I have a form that whenever someone enters information incorrectly it displays a message, I also want an error icon to appear next to the error text. I added span tags for the error message and gave it a .error icon class in CSS. I added a background-image in the selector but it is not appearing when I preview in the browser. I inspected the code and I can't even see the .error icon class in the code. I tried adding between the span tags which was something I saw in a form in a website but that didn't work.
I am unsure of what method to use for inserting this icon as I know it is not good practice to repeat the same image src code for each section I want to apply the error icon to, hence why I am trying to use it as a background-image instead.
Here is my code:
http://jsfiddle.net/HNSM4/2/
HTML
<label for="name">
<span class="textStyle">Full Name*</span><input type="text" id="name"><br>
<span id="nameMessage" class="message"><span class"erroricon"> </span>You must have a valid name</span>
CSS
.message{
display: none;
}
.erroricon {
background-image:url('http://postimg.org/image/v6997l887/')
}
Rather than putting the icon in a span as a background image, just make it the background image of .message and add padding to the left so nothing can occupy the space:
.message{
display: none;
background: url("http://s7.postimg.org/v6997l887/erroricon.png") no-repeat;
padding-left: 20px;
}
The image you provided is blank, so I have nothing to show you there, but you can see that the text is pushed over, and if you use inspect element, you can see that the image is loaded.
JSFiddle
Here is an example with the Google logo as the background image.
I have taken over a website that was coded in tables (looks like DW) and is half coded in typo3 CMS and half hard coded.
Anyway, my boss has asked me to make the logo clickable to link to the homepage from every page that the logo shows. The problem is that the logo is part of the whole image that makes up a third of the page, so linking the whole image is out of the question.
I don't want to have to restructure and slice the images to separate the logo from the BG image, so is it possible to place a link section over the logo only?
I thought about an empty div that sits over the logo section only with a link tag that fills it 100%, is this possible and would it work? The site is here http://overbeckanalytics.com/typo3/menu-top/about-us.html... you can save the BG image and see its not just the logo...
Please tell me how I can make a link that sits over the logo only on that image.
Is the background image on the <body> element? If so, this should work:
<body>
Example Company
</body>
With this CSS:
a#logo_link {
position: absolute;
display: block;
visibility: hidden;
left: 42px;
top: 42px;
width: 42px;
height: 42px;
}
Note the <a> tag needs to be directly inside the <body> tag, or else the position may be incorrect. It can be anywhere in the body tag however, at the beginning or the end.
I've also placed the company name inside the link, since it's a bad idea to have a link without any text. A blank link cannot be understood by browsers designed for disabled users, and it may trigger spam algorithms in search engines. The visibility property will make the link invisible, even though it is still there and can be clicked on.
I provided an example answer. If you're allowed to load a JQuery library and can place the anchor somewhere on the page.
http://jsfiddle.net/XFvQD/
You would be looking for something like this:
<html>
<body>
<img src="http://listphobia.com/wp-content/uploads/honda-v4-concept1.jpg"/>
</body>
</html>
I implemented a simple tab navigation by using <ul><li><a> , the problem is that there are several "layers" on each tab still needed. what I mean is, In my current implementation I have:
-tab text which is <a>text</a>
-on each tab I have a tab icon image, which I put on <li> as background-image of <li>,
But I still need:
-tab seperator image (A vertical bar image) which I intend to put on <a>,and position it on the left side background-position: left , it is working but this implementation is not in my code which I showed below on jsfiddle site because I did not find a suitable image on internet
-tab background image which occupy the whole tab, I have no idea where I should put this image?
Please check & run my implementation here on jsfiddle, in the css code, I used background-color instead of background-image just to express what I want to achieve, but I need to use background-image as the tab background.
What I tried:
I tried to put the tab background image on <li> but it will hide the
icon image which has already on <li>,
I tried to put the tab background image on <a> but it will also hide the tab seperator image when mouse hover
How to get rid of this layer probelm on tab implementation then? (Please do not suggest me to use less image, since it is one requirement of this app to use those images.)
(By the way, all images I mentioned have mouse "hover" counterpart)
If you don't want to change the HTML, you can use pseudo-elements:
Fiddle: http://jsfiddle.net/Pq7LC/39/
li:before{
content: "";
background: pink;
width: 20px;
height: 61px;
display: block;
position:absolute;
}
li:first-child:before{ /* Don't add image border before first li */
content:none;
}
You can do it with css, no need of images.
http://jsfiddle.net/Pq7LC/40/
Hope it helped you :)