I'm following the Udemy complete web development course. I'm supposed to be making a clone of the BBC website but I'm having a couple of issues. First of all my font is much bigger than this, set to the same 0.75em. Also my h1 tag seems to be to the right of the tag so I am guessing I've messed up with the flow somewhere but can't see how.
http://jsbin.com/yowoyohaja/1/edit?html,output
From what I can gather, you would like the header to be above the date?
If that's the case then simply move the H1 tag to above the date in the HTML and ensure all your open tags are closed, as your H1 tag was left open. See updated jsbin:
http://jsbin.com/cetokibuva/1/edit
Related
Is it ok to use a h1 tag in the header of a site? I don't mean to replace the logo but as a bit of text next to it with keywords.
The body h tags would all be h2.
Only reason im thinking this is because the site is more or less a personel project site and the design is more of a news or directory layout with not much need for a h1 tag in the body.
Or will this somehow get my penalized by google?
From Mozilla Foundation:
...you should consider avoiding using more than once on a page; by convention, it's used for the page's displayed title, with all headings below starting with . When using sections, you should use one per section...
That said here you have the link to it for further knowledge:
Heading elements
I just noticed that on the Wordpress theme I created the H1 article titles are floating up into the subsequent article when you start to shrink the browser window. I can't seem to find the reason for this. Any insights would be greatly appreciated.
ul.info li, .excerpt, .post-link {
float: left;
}
The styles above seem to be pushing the title of the article up but if I remove it then "posted by, written on, date" all turn into a horizontal list. Which I don't want.
I don't know if they're related by I noticed when I look at single post pages if I shrink the browser window the content of the article flows off the screen.
Thanks in advance for you help everyone. Really confused.
You can see the problem here: http://www.blog.theplaybook.co
Assuming you are putting all your articles within a div tag or a section( if in HTML5)
You should use the following CSS for all the article div tags
clear : both
This should solve it.
Can I add a link to heading in HTML?
Something like this
<h2 href="/ingredients">illness</h2>
Somehow it seems to work on simple text only.
(Almost) All elements may contain other elements. So the following is possible:
<h2>Illness</h2>
you need to tag the a anchor tag inside your h2 tag. something like this:
<h2>illness</h2>
Sometimes.
If you can't edit the destination page (e.g. to add an anchor, as per the other answers), you may not be out of luck.
For example, nothing like
href="https://www.hospitalsafetygrade.org/h/ucsf-medical-center-moffitt-long-hospitals#Sepsis infection after surgery"
will open that page and display the section with the heading
<h3>Sepsis infection after surgery</h3>
However, there's a new standard, scroll-to-text-fragment, see https://github.com/WICG/scroll-to-text-fragment, that can often accomplish this purpose. For example,
https://www.hospitalsafetygrade.org/h/ucsf-medical-center-moffitt-long-hospitals#:~:text=MRSA%20infection
works!
(But
https://www.hospitalsafetygrade.org/h/ucsf-medical-center-moffitt-long-hospitals#:~:text=Sepsis%20infection%20after%20surgery
doesn't work.)
To see how widespread support is, see https://wpt.fyi/results/scroll-to-text-fragment?label=experimental&label=master&aligned.
I'm making a website for an organization at my school, using basic HTML and CSS. Right now, I've made several other pages for the site and have run into no problems like this one.
Here is the page I am having trouble with, if you want to view it in context:
http://acacians.net/scratch/officers-slim.html
I tried posting the code here, but it didn't completely work. I suggest following the link and viewing the source.
The final "officer" div is for some reason falling outside of my "info" div, which is nested in the "pagecontent" overall div.
Here is a link to the original CSS:
http://acacians.net/scratch/style.css
I'm really not sure what other information to supply, so I'll do my best to watch for any questions and do my best to respond accurately to them.
Thank you,
-Mike
Put <br style="clear: both;"> just before closing .info div.
I've very new at this. I appreciate any help I can get with this. I haven't found an answer on the internet yet. (At least, not one I understand!)
When I use blockquote in WordPress, it shows up on the right side of the screen. Sometimes, I want it to appear on the left side of the screen. How do I do that? Here is the blockquote (below) I'd like to have on the left side of the screen. It currently appears on the right side of the screen.
<blockquote><p>Living a better life is less about things and more about being thankful.</p></blockquote>"
As the respected members said above, also if you have a plugin such as firebug on firefox or in your chrome browser, right click the blockquote and choose "inspect element". Then you will see all the rules(i.e effects) applied to that element and you can show/hide them to see their effect on the element which will give you a better understanding of what the rules are doing to your element.
Cheers.
<blockquote style="text-align:left;">Test</blockquote>
This will change it on a quote-by-quote basis.
A better solution is to open your theme's style.css file, search for blockquote, and replace the text-align:right; with text-align:left;. This will change the behavior or a blockquote site-wide.
What happens if you wrap up the blockquote element in it's own div element? Such as this:
<div>
<blockquote>
<p>Living a better life is less about things and more about being thankful.</p>
</blockquote>
</div>
You would then possibly be able to control the blockquote as a div block element using float:left, setting the width larger so that it gets moved below any elements to it's left, or using other means of absolutely positioning it.
For the theme that I am using, Twenty Fourteen, the correct answer would be to use:
<blockquote class="alignleft">This is my quote</blockquote>
I found this by using the Chrome devtools to inspect the example on the demo. Since this theme has a special class with nice formatting for the aligned blockquotes it is better to use this than to override the CSS with style settings. Note that while inspecting the element you get direct links into the CSS that can be used to check which other classes the theme has - quite useful! You may need to read a bit about CSS syntax to interpret it though.