I've got this HTML:
<article class="smallCaps">
Cap Anson <span><em>my</em></span> outboard<br />
Anyway...the reign in Spain falls mainly on the common folk<br/>
Note: This is a big secret. Don't tell <em>them</em>
</article>
<p> </p>
<hr />
...but the HR displays to the right of "Don't tell them" instead of on a separate line.
Here's the CSS:
<style type="text/css">
.smallCaps {
font-variant: small-caps;
font-family: "Segoe UI", sans-serif;
}
.comicSansLarge {
font-size: 32px;
font-family: "Comic Sans", Consolas, serif;
color: hsl(30, 100%, 50%);
}
</style>
Add this to your css:
hr {
clear:both;
display: block;
}
One possible cause would be that the article is floated. like this:
http://codepen.io/seraphzz/pen/jyngu
Something in your CSS is causing it but it's impossible to say what it is without seeing your css.
Related
new to coding but wanting to impress with my website.
Currently have an "On this Page" HTML embedded element that I would like to disappear when the user is scrolling down the page.
I have got the element on the left side and know how to set it to fixed. However, this then makes the other content disappear behind the element. So have left the CSS positioning at static, and don't mind that.
Just curious what the code would look like if I wanted to have it scroll with the content but disappear after a certain amount of time or when a user scrolls down in general.
<style>
.sidebar-content
{
position:static;
background-color:#F9F9F9;
padding:15px;
text-decoration: none;
font-weight: 300;
font-size:20px;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
}
h2 {font-weight:400px;
color: #460E72;
font-size: x-large;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}
a:link {text-decoration:none;
color:#B6B6BA;
}
a:visited {text-decoration:none;
color:#404041;
}
a:hover {color:#404041;
background-color:#eeeeee;
cursor: pointer;
}
a:active {text-decoration:none;
color:#FF6712;}
<style>
.sidebar-content
{
top: 0;
position:fixed;
width: 256px;
max-widtH:296px;
left: - 275px;
transition:top 0.3s;
}
</style>
<div class="sidebar-content">
<h2>On this Page </h2>
<hr>
Blackboard Login Steps
<br />
Troubleshooting Login Issues
<br />
</div>
This is not able to fix only with the css or HTML. You have to use js.
This code will make your object dissapear after the user scrolls down a 100px.
$(window).bind('scroll', function() {
if ($(window).scrollTop() > 100) {
$('#divID').hide();
}
else {
$('#divID').show();
}
});
So I'm not unable to use margin that consists of three texts. I tried adding it both in html and css, none of them worked. Am I supposed to format it in a different way?
.middlelectureread {
margin-left: 740px;
font-family: Arial, Helvetica, sans-serif;
font: bold;
font-size: 20px;
}
.middlecaptivityread {
margin-left: 210px;
font-family: Arial, Helvetica, sans-serif;
font: bold;
font-size: 30px;
}
.middleprotestread {
margin-left: 210px;
font-family: Arial, Helvetica, sans-serif;
font: bold;
font-size: 30px;
}
<span class="middlelectureread">READ MORE</span><span class="middlecaptivityread">READ MORE</span><span
class="middleprotestread">READ MORE</span>
Like Neffy wrote you shouldn't use span here. Span element is inline and shouldn't be a container to postion elements. For such things we have divs or HTML5 semantic elements like Section, Header, Footer etc. span can be useful when we want to style for example a part of some text, paragraph.
<p>If you do it you will see a <span class="warning">warning</span>sign</p>
And if we apply color to this span it will work.
I learned to change the font family of text in the body by doing <p style="font-family:;></p>, but how would I do it for the title? Also, is there a way to fixing a font family for the entire document?
You want to use (html{}) in your style.css Therefore, it will apply to any element inside your (HTML). unless you explicitly specify otherwise.
Further on the matter, on the example, I gave you if you are to remove the child1 or child2 font-family it will default to whatever is in the body section if you are to remove the font-family from the body it will default to the HTML.
[
/*Change the font style on the Entire Document */
html{
font-family: "Montserrat", sans-serif;
font-size: 1rem;
color: Gray;
}
/*Change on the Body*/
body{
font-family: "Montserrat", sans-serif;
font-size: 2rem;
color: white;
background-color: #333;
text-align:center;
}
/*Change on a specific elements*/
#container .child1{
font-family: cursive;
font-size: 2rem;
color: white;
text-align:center;
background-color: blue;
}
#container .child2{
font-family: cursive;
font-size: 2rem;
color: white;
background-color: green;
text-align:center;
}
footer{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
<header>
<p>I am the Header</p>
</header>
<div id="container">
<div class="child1">
<p>I am a Body Child</p>
</div>
<div class="child2">
<p>I am another body Child</p>
</div>
</div>
<footer> I am the Footer</footer>
]1
If you REALLY wanted to set the entire document you could use the below noting that more specific selectors will over-ride it unless you specify !important (though I strongly recommend against using !important on a selector this vast):
body {
font: normal 10px Verdana, Arial, sans-serif;
}
You can code a style element within the head element your HTML file to apply styles globally throughout your document:
<style>
title {
font-family:; /* usually the name of your font goes here */
}
</style>
in above image you can see text "acceptable".
i want to change this font as text "contact us" font which is present below.
we are using
font-family: 'Roboto Condensed', sans-serif;
but it didt worked for us.
Well according to your code, you just have to change the font-size of p tag and you are done. To check the changes try to add Contact us next to acceptable and then you will see both are same. Happy to help :)
Use <span class="red">text</span> and some basic CSS like .red { color: red; }
lOOK AT THIS EXAMPLE
HTML
<span class="red">acceptable</span>
</p>
CSS
p {color: black;
font-size: 13px;
line-height: 26px;
text-align: justify;
}
.red { color: red;
font-family: 'Roboto Condensed', sans-serif; }
I want the footer of my site to hold 2 links: one to the cookies policy and one to the privacy policy (to the bottom right of the footer).
I also want it to include the address of the business (the bottom left of the footer), the links have already been formatted using this CSS (and show as I want them to):
a:link { color: #ff8132; text-decoration: none }
a:active { color: #79888c; font-weight: bold }
a:visited { color:#ff8132; text-decoration: none }
a:hover { color: #404f55; text-decoration: underline}
but when I try to format the address using the this CSS:
#footer {
margin:auto;
height: 100px;
width:60%;
background-color: #101f3e;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-color: #EF0E12;
}
It doesn't work?
The HTML I have for it:
<div id= "footer">
The Dry Otter</br>
Headingley Lane</br>
Leeds</br>
LS6 1BL
Cookie Policy
Privacy Policy
</div>
any ideas? Please bare in mind I'm quite new to coding!
thank you!