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.
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.
Can someone help me with this CSS, jquery problem please! I have a simple website. I have as you can see a class named code (that I assume overrides the original code tag that I also have). I also have a class named codeComment. In the later class I would like to add a smaller line-height than for the code-blocks because I don't want to wrap all the code in code-blocks. Im lazy and was thinking it will work somehow to just have one big code-block and separate comments with different classes and it seems to work fine with the other properties in codeComment like for example color. I guess my custom code-tag overrides it. I also tried by using jQuery but I guess the correct way doing it would be using css?
ps. Also when I try a simple jQuery line like this (the test-class contains only line-height). I get the same line-height as from original code-tag:
$("span").addClass("test");
(snip from my code).
html:
<div class="border1">
<p class="code"><code>
document.querySelector("h1");<br>
<span class="codeComment">Javascript library for shorter, more efective code. We need to get the CDN from jQuery to use it. The CDN has to be placed before the custom js-link
so that it can recognize the code from this js-file.<br></span>
$("h1");<br>
<span class="codeComment">//Change h1 to green.<br></span>
$("h1").css("color", "green")<br>
css:
.code { text-align: left; font-size: 1.5rem; font-weight: bold;
}
.codeComment { font-size: 1.0rem; padding: 2% 0 2% 0; color: #000000; line-height: 10px; }
Picture: As you can see below the line-height seems a bit big!
In Blazor razor page if I place an HTML anchor such as
My Text
the text doesn't show until the mouse is moved over it.
I have worked around this by making it a Button.
Is there any solution to this or or better linkage component to use?
I cannot reproduce this in a new project.
The behaviour seems to suggest this might be a CSS problem. To confirm this, try giving your a an id and set a specific style
#tester {
visibility: visible;
display: inline-block;
color: white;
background-color: red;
font-size: 1rem;
}
Then
<a id="tester" href="http://example.com">My Text</a>
When you run the app you should now hopefully see the link. Right-click it, and select "Inspect Element", then look down the CSS rules for that element for anything that has a strike-through font (meaning it has been overridden by a more specific rule).
One of these should be something hiding your element. Once you've found the culprit, kill it :)
In a post of mine in wordpress I'm posting source code as described here.
An example of the code goes like this:
[code language="csharp"]
// Code goes here
[/code]
The result looks like this:
What I want to do is change the font size and make it smaller.
I've inspected the element of the code which gives the following:
I've tried adding custom css using the Simple Custom CSS plugin to change the font size but to no avail.
The CSS that I've tried is the following:
code {
font-size: 10px;
}
.csharp plain {
font-size: 10px;
}
.csharp keyword {
font-size: 10px;
}
How can I change the font-size of the code?
Your element seems to be part of the page therefore custom CSS should work. Most probably it is not working as the CSS rules of another stylesheet (probably the WordPress.com default) are stronger or more specific.
Try with the CSS !important rule:
code {
font-size: 10px !important;
}
.csharp plain {
font-size: 10px !important;
}
.csharp keyword {
font-size: 10px !important;
}
If this still does not work use more specific CSS selectors with the important rule.
If this still does not work your custom stylesheet is not applied yet and you have to check your configuration.
You are trying to style elements based on their css classes, but your code doesn't have the "." before their names. Based on the example of the link:
.syntaxhighlighter { font-size: 10px; }
should do the trick.
Changing the font size of your code on WordPress is pretty easy. This is what you need to do.
1. Switch from the Visual tab to the html tab in the editor
2. Surround your codes with these tags:
<pre><code><span style="font-size: small;"> YOUR CODE GOES HERE</span></code></pre>
for example:
That's it.
This was what my code looked like in preview mode BEFORE I used those tags (While I used [language= "java"])
And this is what it looks like AFTER using the tags:
The available font sizes are xx-small, x-small, small, medium, large, x-large, xx-large.
If you are not familiar with html, it is advisable to switch back to the visual tab. Hope this was helpful
We have had a site re-designed by a company who also maintains and hosts it, as well as providing us with our CRM system. The issue I am facing is they add a bit of a backlink to the footer, which I am unable to edit as its not part of the page until the server generates it.
I would like to use On Page CSS to style this to white, or completley remove it. Either is fine
<span style="width: 100%; text-align: center; display: block; color: #999999; font-family: verdana; font-size: 7pt;margin-bottom:4px;">Powered by <a style="color: #999999;" href="http://www.prospectsoft.com/ecommerce" target="_blank">ProspectSoft eCommerce</a> and <a style="color: #999999;" href="http://www.prospectsoft.com/crm" target="_blank">CRM</a></span>
The above is the code I can see when I look at the source of the page in Firefox. I cannot see this code in the editor they provide, however I can edit the css files.
Is it possible to use on page CSS to style this out?
Well in my mind with pure CSS, no since there doesn't seem to be something unique to reference it by.
Alternate Solution:
If you can use Jquery it should be relatively easy though.
Do following in head:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$().ready(function () {
$('footer').child().hide();
});
</script>
Depending on the build of the page you should be able to isolate that HTML element. For instance, if that span is the only element in the
<footer>
tag, you could simply use:
$('footer').hide();
Note: They may already be referencing jquery, which means you could just do the code.
One More:
$().ready(function () {
$("a:contains('ProspectSoft eCommerce')").parent().hide();
});
Will delete all parents of anchor tags that contain that text though, so be careful.
EDIT:
$("span:contains('Powered by')").hide();
In line CSS will typical override stylesheets declared in the document head.
If you find certain properties remain stubbornly unaffected, try using the "!important" modifier.
Example:
color: #ff0000 !important;
Beyond this, I can't give you any further advice given that you haven't specified exactly what your problem is.
Not good looking but works:
div span, span a { color: #FFF !important; }
Bad thing is you would have to set the color to all other similar nests "div span" and "span a"