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.
Related
I'm dynamically generating cards for a board game and for the sake of brevity on-screen I want all of the extra rules captions to only be displayed when the rule keyword is hovered over. I'm trying to avoid nested div tags here for a few behind-the-scenes reasons.
I have the alternate text setup with tags (shorted here with '...'):
<span title="Beasts of Nurgle secrete a Slime Trail ... "><b>Slime Trail</b></span>
and above, in the style section, I have:
[title]:hover:after {
position: absolute;
content: attr(title);
background-image: url('images/spanbg.jpg');
padding: 5px;
width: 250px;
border-radius: 8px;
border: 2px solid;
z-index: 100;
}
Initially when I hover over the text I get the title text formatted as desired, but a second later if the mouse cursor stays there I also get the default formatting for title show up on top (see attached image). The attached image shows what the initial display looks like before hovering for the extra second... with the unappealing and unformatted second copy of the title I can't seem to get rid of.
Weird second title text from formatted title
Anyone have suggestions how to get just the formatted title text that shows up for the span element without the additional default one? I'm not sure it's needed, but this is hosted on a node.js server being served via proxy from apache2 on the same host, and the behaviour has been confirmed in the latest version of Chrome and Firefox.
I don't believe there's any way of disabling the browser's default behavior for title. To get around this, you could use the aria-label attribute, instead:
<span aria-label="Beasts of Nurgle ... "><b>Slime Trail</b></span>
[title]:hover:after {
/* ... */
content: attr(aria-label);
/* ... */
}
I'm new to CSS. I have copied a CSS from existing code and changed as below:
.feedback_h1 {
width: 100%;
float: left;
margin: 0px;
font-family: Arial;
font-size: 12px;
font-width: 400;
color: #000000;
margin-bottom: 15px;
}
<div Class="feedback_h1">
We will use only personal information. Our <a href="https://example.com" target="_blank">privacy
policy</a> agreed?
</div>
Right now I'm getting result as below:
We will use only personal information. Our
privacy policy
agreed?
However, I'm expecting a result like (in one line) :
We will use only personal information. Our privacy policy agreed?
I think, I need a right alignment (as left is aligned properly) OR
Am I missing something in CSS? What additional attribute can I consider in CSS to make this in a single line?
Is VS 2013 provides a designer view to align cshtml page?
It seems as though your <a> anchor element might have a display of block. This will cause the words wrapped between the anchor elements to have a width of 100% by default.
Try putting the following in your css
.feedback_h1 a {
display: inline-block;
}
<a> elements are display: inline by default, so not sure why it might be like this. But from the code, that seems to be the most obvious reason your code is having this result.
To figure out what's going on, I would suggest using your browser's inspector tools and directly inspecting the element. It usually helps with debugging to look at the CSS styles applied to an element, and test by unchecking them, or changing them, to see the live effect of this on your site.
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.
I would like to know if there is a framework that can make standard html forms look more web 2.0 style, I would like to have rounded corners on text boxes and a more casual looking submit button, other than the out of box html one, which looks very old school.
If you know of something that's quick to implement, and open source, thank you in advance.
Try NiceForms a Javascript library for styling forms.
Or JqTransform for jQuery.
You can find some other resources below:
http://www.noupe.com/css/form-elements-40-cssjs-styling-and-functionality-techniques.html
http://speckyboy.com/2009/08/26/20-jquery-plugins-and-tutorials-to-enhance-forms/
http://devsnippets.com/reviews/using-jquery-to-style-design-elements-20-impressive-plugins.html
You will have to style the form elements with a combination of css and image backgrounds. This is fairly easy to do though and you should be able to find a lot of examples out there...
http://www.assemblesoft.com/examples/form/
http://pupungbp.erastica.com/css/rounded-corner-input-form/
It's called CSS.
The plain old HTML look is created by the default CSS settings. If you want to change the look, then you need to change the CSS. Find a website that has a look similar to what you want, and look at the HTML source. You will see a lot of CSS near the begining wrapped by STYLE tags. For instance:
<style type="text/css">
input {
border: none;
background: #FFF;
width: 165px;
}
.rounded {
background: url(rounded.gif) no-repeat left top;
padding: 8px;
width: 180px;
}
</style>
In order to get the actual rounded corners you are going to need some images that can cover the sharp corners. In the example CSS it refers to a single image of a box, but generally you will need four corner images, and four separate line images (top, bottom, left, right).
Check this article about creating forms with rounded elements: http://www.picment.com/articles/css/funwithforms/
Regarding rounded corners, you can use a background image which is rounded off using transparencies or if a user is using mozilla based browser or opera, you can use:
#formbox {
-moz-border-radius: 5px;
background-image: url('roundededges.jpg');
}
In your CSS to add rounded corners to any div. Either that or use some simple flash.
Edit: closing anchor fixed. This issue exists when testing on the following browsers:
Google Chrome
Firefox 3.5
Safari
Works with no problems on IE 8
I'v a really weird problem here. In short, take a look at the following html:
<a href="login_page.html" class="img">
<span class="img_holder">
<img src="images/columnists/mike_zeisberger248.jpg" onerror="this.src='default.jpg'"/>
</span>
<span class="btn">track him</span></a>
Here's the img_holder css class:
.img_holder{
border: 1px solid #c8c8c8;
display:block;
background:#fff;
height: 100px
}
and the img class:
.img{
_margin:0 12px 12px 0;
}
Now, the problem is that clicking the image nested inside the anchor tag doesn't take you to its href link (thought, the href link shows in the status bar when hovering over the image, and opens perfectly fine when opening in new tab).
Any ideas?
Some browsers have issues with anchors that are display: inline (the default) containing elements that are display: block.
Add display: block to the ruleset with the .img selector.
Also see http://validator.w3.org/ — it makes a good first pass to find the low hanging fruit of QA issues. Your sample code seems to have some errors that it would pick up.
Well, there area few obvious problems that spring out; one is the / before your onerror, and the second is that the <a> in question doesn't seem to be closed.
Apart from that, there doesn't seem to be any obvious reasons why it wouldn't work; perhaps a more complete post of source code is in order?