I am creating a website using wordpress and I just integrate Google language translator . Everything works fine but the problem is that when I translate language it changes the font size . So by default (without translating) I am getting
<h1 class="intro-text">iDEAS , Solutions , Strategies for your Business <br>
</h1>
from the inspect element . But when I translate it to Spanish or any other languages it reduce the size . I inspect in the Inspect element and I am getting
<h1 class="intro-text">
<font><font>ideas, soluciones, estrategias para su negocio </font></font>
<br> </h1>
. That is why the problem occurs how to over come this . If I translate I need a result like ,
<h1 class="intro-text">
ideas, soluciones, estrategias para su negocio
<br> </h1>
any help will be really appreciated .
If you want same font-size even when you translate the page, then you should write CSS for font tags which are being appended while the translation within class="intro-text".
<!-- Bofore Translation -->
<h1 class="intro-text">
iDEAS , Solutions , Strategies for your Business <br>
</h1>
<!-- After Translation -->
<h1 class="intro-text">
<font><font>ideas, soluciones, estrategias para su negocio </font></font><br>
</h1>
CSS:
.intro-text,
.intro-text font { font-size:20px;}
This will maintain the same font-size after the translation.
Related
I am trying to make a text collapsible when I press the word 'Abstract' in my webpage, https://rubencioak.github.io/research.html, I thought the following code was going to be enough:
<ol class="lead">
<li> <p> <b>Free-riding in Collective Agreements,a Search and Matching Model of Minimum Wages</b>
<br />
<span id="abstract-link" class="abstract-click">Abstract</span>
<p class="abstract-text" style="display:none; font-size:.90em">Does free riding in collective... unemployment, at a cost of employed earning less</p>
</p> </li> </ol>
I am using a templeate from HTML5 and also looking at this webpage: https://messertodd.github.io/research.html. for reference.
Now, although I thought it was basically the same, something is obviously wrong with this code.
All in all, the question is: is there a simple way to make my text under the word abstrac collapsible?
Any help would be much appreciated.
KR
You can use <details> and <summary> tags:
<details>
<summary>Abstract</summary>
<p class="abstract-text" style="font-size:.90em">Does free riding in collective... unemployment, at a cost of employed earning less</p>
</details>
A little background about what I am trying to do— As of recent I have started to read Jon Ducketts “HTML&CSS” book which I am enjoying thoroughly. I finished HTML and now am beginning the CSS side of the book.
What I am trying to accomplish is making a website that shows everything the book has covered and essentially have a navigation bar to give users easier access to go throughout my website to learn about topics that are not yet clear to them (myself).
The problem is that while I am trying to style my text color it isn’t changing color and for the life of me I cannot figure out why.
Is the problem within my link with the wrong file paths I specified in the head or is it a problem with how I have my classes set up in HTML and CSS?
My CSS code is at the bottom of the page that I tried to create classes with. Since you need a “10 reputation” to post photos I’ll be writing my HTML / CSS file name and folder path here.
Name- newWebsiteFinalCSS.css
Folder Path- C:\Users\MyName\Desktop\Website
Name- newWebsiteFinal.html
Folder Path- C:\Users\MyName\Desktop\Website
.headingcolors {
color: red;
}
.p {
color: red;
}
<!doctype>
<html>
<head>
<title>Final HTML CSS Website</title>
<link type="text/css" href="Website/newWebsiteFinalCSS.css" rel="stylesheet">
</head>
<!-- This section i want to create a link to different topics within my own website so it is easier to go throughout the site and
only look at things you want to be reasearching about if you come across a problem with a topic about HTML or CSS. -->
<header class="topnav">
Home
Text
Lists
Links
Images
Tables
Forms
Extra Markup
</header>
<!-- insert navigation bar here -->
<body>
<h1 id="top" class="headingcolors"> Welcome to my first Web Page created with HTML & CSS </h1>
<p>//// During the process of making this website, I will be showing you how I learned to do simple webpage making with very easy to understand the code. This code includes languages called HyperText Markup Language (otherwise known as HTML), and a styling
language called Cascading Style Sheets (otherwise known as CSS). This website was made possible by reading a book called <i>HTML&CSS; design
and build websites</i> by Jon Duckett. I am a fan of Jon Duckett's book and it made me feel excited to read something that was so interesting and brought color to such a fundamental topic of learning a computer language. This website will be a work in
progress with perfecting every single topic covered in HTML as well as styling my webpage and making it a professional looking website that any CEO or businessman would be interested in reading. I hope you enjoy browsing casually throughout my website and enjoying some of the topics as much as I did learning about them! ////</p>
<h2 id="text" class="p">Texts</h2>
<p>This is some text, hopefully i can figure out how to add color.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<h3 id="lists" class="p">Lists</h3>
<p>This is some text, hopefully i can figure out how to add color.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<h4 id="links" class="p">Links</h4>
<p>This is some text, hopefully i can figure out how to add color.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<h5 id="images" class="p">Images</h5>
<p>This is some text, hopefully i can figure out how to add color.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<h6 id="tables" class="p">Tables</h6>
<p>This is some text, hopefully i can figure out how to add color.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<h7 id="forms" class="p">Forms</h7>
<p>This is some text, hopefully i can figure out how to add color.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<h8 id="extramarkup" class="p">Extra Markup</h8>
<p>This is some text, hopefully i can figure out how to add color.</p>
Top of Webpage
</body>
</html>
<link type="text/css" href="Website/newWebsiteFinalCSS.css" rel="stylesheet">
is relative to the html file.
If the html file is in C:\Users\MyName\Desktop\Website.
Then the link is pointing at C:\users\MyName\Desktop\website\Website\newWebsiteFinalCSS.css
It should be
<link type="text/css" href="newWebsiteFinalCSS.css" rel="stylesheet">
I'm trying to extract certain details from articles which are combined in an html file. The html file will consist of 1000s of articles so trying to automate the extraction using BeautifulSoup. For the first article I can get it to extract but do not seem to get it to automatically move on to the next article. This is how the html looks like:
<DOCFULL> -->
<br/>
<div class="c0">
<p class="c1">
<span class="c2">
2 of 4 DOCUMENTS
</span>
</p>
</div>
<br/>
<div class="c0">
<br/>
<p class="c1">
<span class="c2">
The New York Times
<br/>
</span>
...
</DOCFULL>
...
<DOCFULL> -->
<br/>
<div class="c0">
<p class="c1">
<span class="c2">
1 of 4 DOCUMENTS
So, somehow I need the following commands, once fulfilled, to again apply to the next article, that will start again will -->. But I just cannot get it to work the way needed. For example to extract 'The New York Times' in the partial html above I use, and it should automatically also been done to the 2nd/3rd/4th etc article.
journal = soup.find_all('span', class_='c2')[1].getText()
If anyone can point me in the direction I should start thinking it would be really appreciated!
EDIT:
Just to put more into perspective what I am trying to achieve. I can get the latter parts to work, but do not get it to check each article after the former.
For Each Article:
* Determine Newspaper
* If newspaper = x
.
.
.
* Else
Continue
I'm trying to create a description by using <small> tag,
and I also have a large title with <h2> tag, and they are all inside a <header> tag,
this is what it looks like now:
<header>
<h2>User settings</h2>
<small>Yep, here's the settings for you.</small>
</header>
But I'm not sure if the following usage would be better to make those tags meaningful?
<header>
<h2>
User settings
<small>Yep, here's the settings for you.</small>
</h2>
</header>
Should I put <small> in <h2> instead of putting <small> in <header>?
well, it depends
if you put your <small> tag inside <h2> it will be more important (note that using <small> also affects importance)
on the other hand, some tools like html outliners will also list <small> content, which might not be desired behaviour
These options are not semantically equivalent. Putting small inside h2 means that the whole content of h2, including small content, is the heading that identifies the current section (or the whole page). For example, screen readers may read this whole long text as a document navigation option. With small outside h2, the section (or page) is identified with the short text that is the content of h2 element only.
Also, I doubt that the small element is the right choice for such sub-description. Wouldn't just p element (as suggested in W3C HTML spec for sub-headings) be more appropriate here?
Mozilla says: https://developer.mozilla.org/tr/docs/Web/HTML/Element/header
<header>
<hx></hx>
</header>
prefer <small> in <hx>
twitter bootstrap docs prefer small in hx
http://getbootstrap.com/css/#type-headings
I have a sidebar with latest news and random blog posts etc
<nav id="sidebar">
<section id="latest_news">
<h1>
Latest News
</h1>
<h2>
News Item 1
</h2>
<p>
Truncated text from the news item in question
</p>
View all news items
</section>
<section id="random_blog_post">
<h1>
Random Blog Post
</h1>
<h2>
Blog Post 1
</h2>
<p>
Truncated text from the random blog post in question
</p>
View all blog posts
</section>
</nav>
As you can see, I've got sections, h1's and paragraphs inside my nav.
I'm just wondering if this allowed or considered good practice. Is there a better more semantic (or less) approach to marking-up and structuring such sidebar content?
Yes, this appears to be pretty valid html5. w3org have an example of navigation with h1 tags in it.
Yes, you can do that, as also denoted in the spec
Quotes specifically relevant to your question:
The nav element represents a section
of a page that links to other pages or
to parts within the page: a section
with navigation links.
and
A nav element doesn't have to contain a list, it can contain other kinds of content as well. In this navigation block, links are provided in prose:
<nav>
<h1>Navigation</h1>
<p>You are on my home page. To the north lies <a href="/blog">my
blog</a>, from whence the sounds of battle can be heard. To the east
you can see a large mountain, upon which many school papers are littered. Far up thus mountain
you can spy a little figure who appears to be me, desperately
scribbling a thesis.</p>
<p>To the west are several exits. One fun-looking exit is labeled "games". Another more
boring-looking exit is labeled ISP™.</p>
<p>To the south lies a dark and dank <a href="/about">contacts
page</a>. Cobwebs cover its disused entrance, and at one point you
see a rat run quickly out of the page.</p>
</nav>
Actually, you could even write an h1 element as a direct child of the nav element so that the nav element would be named in the document's outline.
I suggest this reading about the importance of headings and document's outline:
http://dev.w3.org/html5/spec-author-view/headings-and-sections.html#outline
You can check your document's outline with this on-line tool:
http://gsnedders.html5.org/outliner/
Regards.