I'm trying to put multiple links on the same line so I can have a whole bar of links, I've tried this:
<h2 style="font-family:tempus sans itc;">Home</h2> <h2 style="font-family:tempus sans itc;">Hills Pupil Tailored Website</h2>
but when I test to see if it works, these two links are on seperate lines, does anyone know how I can get them on the same line?
Simply add:
h2{
display: inline;
}
To your CSS and the problem will be solved.
That's because of h2 display property which is block.
Try with:
h2 {
display: inline-block;
}
or
h2 {
display: inline;
}
at the beginning of your file (enclosed by <style> tags) or in your stylesheet file.
See Typical default display properties here
Alternatively replace "h2" with for example "span" and the links will be on the same line.
or you could put:
<h2 style="font-family:tempus sans itc;">Home Hills Pupil Tailored Website</h2>
Putting all the links within one h2 tag instead of using one for each link.
Related
I'm working on creating an email notification within helpdesk software, Sysaid. The software uses HTML markup for its email notifications in combination with email tags starting with $ to act as stand-ins for information submitted within the software. The below tags
$Approve
$Deny
$LinkToSubTab
should all turn into links. and while they do- the first two become pre-wrapped hyperlinks that come with the example text and the last one is just a normal link. Ideally I want to make them all act as buttons, but putting the pre-wrapped $tag breaks the html of all the ways of implementing buttons or styling I've tried. I've found that I can change stuff like the font- size of said hyperlinks by adding the <font size=50> tag before the link, but haven't had success yet with attaching stylings or text decorations to said links. To be clear, this isn't about the Sysaid software itself but rather finding a way to style a hyperlink that comes premade from an email tag, from outside of the tag. the tag $Approve becomes an <a href='link'>Text<a> that's premade, and attempting to fit it into a button or text decoration (in my limited understanding) breaks the element.
While I've never worked with the software you're describing, if you want to style an HTML hyperlink you could try using CSS to apply styles based on a wrapper element:
/*This will directly effect the a tag*/
.hyperlink-wrapper a {
color: green;
}
<div class="hyperlink-wrapper">
Link
</div>
Not for sure how you want them styled but you can do a lot with CSS. Here are two basic examples:
.custom-link a {
font-family: Arial;
font-size: 32px;
/* Remove Underline */
text-decoration: none;
color: black;
}
.button a {
padding: 16px;
/* Remove Underline */
text-decoration: none;
font-size: 22px;
font-family: Arial;
color: white;
background-color: #60ca60;
border-radius: 5px;
transition: background-color 0.2s;
}
.button a:hover {
background-color: #57b357;
}
<div class="custom-link">
Click Me
</div>
<br><br>
<div class="button">
Button
</div>
The way the code is structured, adding a $Approve in place of the a tag won't break it. If you need help putting this code in your email, want different styles, or need inline hyperlinks (this will break the paragraph) just comment below.
I am using meteor and mongo there is a template I am using the h2 tag to display the header. But I want to change the font size of this h2 tag. I tried in CSS but it is not taking. if I refresh the page it will take the previous values. So can anyone suggest me how to solve this issue?
There are multiple ways to do this
1. Using inline css
just do
<h2 style="font-size:40px !important;"></h2>
2. Using Internal css
<style>
h2{
font-size:40px !important;
}
</style>
Using External css
just assign a class to your h2 element and add size to that class on external css
<h2 class="headding"></h2>
and then
.headding{
font-size:40px !important;
}
you can use size like **40px,40%,40vw,**etc.
First define your CSS of with h2 tag at end of header's file and add code like that
!important; is override all previous values
you must have to write !important at end of line to override previous value
<style>
h2 {
font-size: 20px !important;
}
</style>
Using large is a bad practice that should be avoided as much as possible. Instead, work on the accuracy of the selector used, like this little example :
<div class="my_container">
<div class="other_class">
<h2>
</div>
</div>
And...
.my_container {
.other_class {
h2 {
// your override
}
}
}
So you have to be more precise than the old selector to get your hands on it.
I want to style text on my website inside a <pre> tag but it will never work.
I have tried putting this in my CSS:
pre {
font-family: Georgia;
}
And I have also tried putting it inline like this:
<pre style=”font-family: Georgia;”>
But none of these work, the font stays as monospace.
These things work here, but not on my website.
Why is this happening? If there is no solution, is there an alternative to the <pre> tag which lets me have line breaks?
I had two stylesheets on one page which caused the pre text to be monospace. Removing one of them fixed the issue.
try important
pre {
font-family: Georgia !important;
}
<pre style=”font-family: Georgia !important;”>
you can also use the class selector to style the pre tag with CSS.
HTML code
<pre class="code"> Text Here </pre>
CSS code
.code { font-family: Georgia; background-color: #A8CBFF; }
You can check out more uses on an article I wrote here
I have a problem thats kinda driving me nuts. I have an article container and within are several paragraphs. The first paragraph contains a drop cap. This first paragraph does not use text-indent, however every following paragraph does.
When I begin a new paragraph following a h3-header, I don't want any text-indent. Fine, I can get this to work (blue text in example).
My problem is this, when I begin a new paragraph with a header (strong followed by a break), this line will use the text-indent of the paragraph, and I don't want it to. I must have the strong tags inside the paragraph (as one should), not outside.
I'm thinking of a way to select all paragraphs that start with a strong tag. I don't want to use any javascript to solve this. I want to change the text-indent of the paragraph, not the position of the strong text.
I've made a jsFiddle here. I have tried something like this:
p>strong {
color:#f0f;
text-indent: 0 !important;
}
You can add a negative margin to the strong tag, though I assume you'll want a specific class on it.
strong.subhead {
margin-left: -3em;
}
Working example at: http://jsfiddle.net/J5C86/2/
However, this is also assuming you don't want the paragraph associated with the strong tag indented. If you're looking for the paragraph under the subheading to be indented as well, you'll need another tag on the first word or letter after the br.
span.subhead-indent {
margin-left: 3em;
}
Example: http://jsfiddle.net/J5C86/4/
To expand on my comment on your question:
If there's a reason you can't use <h4> - which would be the more suitable tag here - you can simply add a negative margin to your <strong> element:
p > strong:first-child {
margin-left:-3em;
}
JSFiddle example.
Otherwise, use <h4> instead:
<h4>Strong sub header</h4>
<p>Aliquam semper placerat urna...</p>
h3+p, h4+p {
text-indent:0;
margin-top: 0;
padding-top: 0;
}
h3+p {
color:#00f;
}
JSFiddle example with <h4>.
It works for me. Use this:
p>strong {
text-indent: 0 !important;
color: #f0f;
display: block;
}
After doing this, Remove the br tag at the last of p>strong.
Demo
I saw your problem and found that you have not included your paragraph within the h3 tag, so define your css with your strong paragraph with a class for eg.
<p class="no-indent"><strong>Strong Sub Header</strong></p>
define your css this must work.
Here's my h1 problem:[link removed]
i need the h1 to blend into the paragraphs perfectly for seo purposes. the tags are around Long Island.
I have the css set to h1{display: inline;padding:0;margin:0;font-weight:normal;font-size:17px;} still breaking... before. i tried adding similar stuff to "< p >" but it completely took out all the breaks, i still need some breaks!
u can just use a H1. use a span to style specific words within your h1.
<h1>Welcome! My name is Nancy Lewis and I’m from <span>Long Island</span></h1>
Then u can style the words Long Island as you like
h1 span {font-weight:700} /*or whatever you like*/
for the second example, try to put margin yo for your body
body {margin:0}
Both H1 and P are block level elements. In order to get the effect you want, both P and H1 need to have their styles set to display: inline;.
Try:
CSS:
.inline { display: inline; }
HTML:
<p class="inline"> Welcome! My name is Nancy Lewis and I’m from </p>
<h1 class="inline"> Long Island </h1>
<p class="inline"> , New York. </p>
So you need the h1 and it's immediate following p element to be inline. Simple!
The h1:
h1 {
display: inline;
}
The immediate following p:
h1 + p {
display: inline;
}
What's the + up there? It's the adjacent sibling selector +. Go ahead, click the link.
That's it! But, of course, there's no need to repeat yourself. Stick the two together, and you get:
h1,
h1 + p {
display: inline;
}
Here's a fiddle (actually, a "tinkerbin"): http://tinkerbin.com/jy3uoWX9