Related
I keep getting designs from agencies with texts breaking in different widths for the same templates, so I was wondering if there is a way using only CSS to force a text to break in at least N number of lines no matter it's size. Something similar to a added to the middle of the sentence, but without using br so it ajusts accordingly on multiple screens.
A text like "lorem ipsum dolor sit amet consectetur adipiscing elit" forced to use 2 lines would look like this (assuming the width available is much larger):
lorem ipsum dolor sit amet
consectetur adipiscing elit
And a text like "lorem ipsum" would look like this:
lorem
ipsum
Of course a single word would use only a single line, and large enough texts would use more than 2 lines.
I'm experienced enough to do this using JS and it feels like dirty work. I was wondering if I'm missing some CSS property like "minimum-lines".
I have a page with some content, and a toolbar to edit this content. The toolbar is positioned fixed to the right of the page. The insides of the toolbar should also be scrollable.
How do I make the insides of this toolbar scrollable? Right now, when I hover over the toolbar and scroll, it results in scrolling the background, not the toolbar content.
I tried
overflow-y: scroll;
and
overflow-y: auto;
these did not help.
UPDATE:
Only one of columns inside the toolbar needs to be scrollable.
Example:
https://jsfiddle.net/kyqr5xst/12/
try this:
.fixed_div
{
overflow: auto;
}
In your fixed nav add height:auto overflow:auto This will make it.
Add overflow:auto; to the .fixed_div
.fixed_div {
position: fixed;
top: 0;
width: 400px;
bottom: 0;
overflow:auto;
right: 0;
border: 1px solid grey;
background: #ffffff;
padding: 10px;
}
.column {
color: grey;
overflow-y: auto;
}
<h1>
Background text
</h1>
<p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.
Pretty cool, isn't it?
</p>
<p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.
Pretty cool, isn't it?
</p>
<p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.
Pretty cool, isn't it?
</p>
<p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.
Pretty cool, isn't it?
</p>
<p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.
Pretty cool, isn't it?
</p>
<p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.
Pretty cool, isn't it?
</p>
<p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.
Pretty cool, isn't it?
</p>
<p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.
Pretty cool, isn't it?
</p>
<div class="fixed_div">
<div class="column">
<h2>Toolbar Content (needs scrolling on hover)
</h2>
<p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.
Pretty cool, isn't it?
</p>
<p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.
Pretty cool, isn't it?
</p>
<p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.
Pretty cool, isn't it?
</p>
<p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.
Pretty cool, isn't it?
</p>
<p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.
Pretty cool, isn't it?
</p>
<p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specifi.
Pretty cool, isn't it?
</p>
</div>
</div>
Fiddle: https://jsfiddle.net/ot9d7kju/5/
So I am trying to highlight some text in my html notes, but it fails if that highlight "region" has another tag in it see this.
I just want it to give pink bg to important text just like a real highlighter does, like so
I tried SPAN, MARK & DIV to achieve this, but all fails.
Note: I understand I can enclose important text in appropriate divs again & again but I am looking for some way that would accomplish real-ish highlighting in one tag
HTML noob, please warn before down-voting
this syntax is too bad you can't open a tag and close it inside another tag like so :
<p>
lorem ipsum sit <mark class="hetro"> amet dolor
</p>
<h2> a heading </h2>
<p>
lorem ipsum sit </mark> amet dolor
</p>
what you can do is applying this mark inside the other tag's too like the following :
<p>
lorem ipsum sit <mark class="hetro"> amet dolor</mark>
</p>
<h2> <mark class="hetro">a heading </mark></h2>
<p>
<mark class="hetro">lorem ipsum sit amet dolor</mark>
</p>
LIVE DEMO
according to Wikipedia :
"tag soup" refers to syntactically or structurally incorrect HTML
written for a web page. Because web browsers have historically treated
HTML syntax or structural errors leniently, there has been little
pressure for web developers to follow published standards, and
therefore there is a need for all browser implementations to be able
to treat what looks like HTML as "tag soup", accepting and correcting
for invalid syntax and structure.
I have the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body {font-family:Arial, Helvetica, sans-serif;font-size:12px;}
.article {width:600px;}
.image_container {float:left;margin-right:10px;}
h1 {height:50px;line-height:50px;background:url(left.png) no-repeat 0 0;}
h1 span {display:block;padding:0 10px;background:url(right.png) no-repeat top right;}
</style>
</head>
<body>
<div class="article">
<div class="image_container">
<img src="test.jpg" alt="test_img" />
</div>
<h1><span>Test heading</span></h1>
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
</p>
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
</p>
<h1><span>Test heading</span></h1>
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
</p>
</div>
</body>
</html>
You can check out a demo here: http://easwee.net/floated_img_article/
Problem:
The image can have 2 different widths (3:2 ratio - horizontal or vertical). The heading has a background image, as you can see, which goes behind the floated image.
Is there a css solution to make the background image start where heading text starts - so that it won't get overlapped by the floated image? The left rounded corners need to be visible.
P.S.: You can also point me to a javascript solution but I'd prefer to solve this with css.
If you are able to determine which image ratio (3:2 vs. 2:3) before spitting out the page, you can assign a class to the h1, then handle it with CSS margins.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body {font-family:Arial, Helvetica, sans-serif;font-size:12px;}
.article {width:600px;}
.image_container {float:left;}
h1 {height:50px;line-height:50px;background:url(left.png) no-repeat 0 0;}
h1.wide{margin-left:260px}
h1.narrow{margin-left:385px}
h1 span {display:block;padding:0 10px;background:url(right.png) no-repeat top right;}
</style>
</head>
<body>
<div class="article">
<div class="image_container">
<img src="test.jpg" alt="test_img" />
</div>
<h1 class='wide'><span>Test heading</span></h1>
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
</p>
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
</p>
<h1><span>Test heading</span></h1>
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
</p>
</div>
</body>
Then, just switch between <h1 class='wide'> and <h1 class='narrow'>
Should we use all H1 to H6 in a website?
i use h1 to h2 usually. now how to judge and decide where to use H3 to h6.
should we use like this
h3 {display:inline}
<div id="content">
<h3> some text in bold:</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<h3> some text in bold:</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
or this
span {font-weight:bold}
<div id="content">
<p><span> some text in bold:</span>
Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
<p><span> some text in bold:</span>
Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
</div>
to get result lke this
alt text http://easycaptures.com/fs/uploaded/226/1452064646.png
Both methods are W3C valid, with css i can achieve same look from both method so which is semantic and accessible?
If the text is functioning as a header level under the H2 level, it would be an H3. Rinse/repeat for H4 to H6.
XHTML is semantic -- use the tags based on what they mean. What they look like is your choice, including whether they are displayed as block elements or inline.
A heading is a title for a section of a page. It describes that section, in a few words.
There’s no simple rule to work out if a given bit of bold text in a document is best marked-up as a heading.
In the example you’ve given, it’s particularly hard to tell if the bold text should be a heading, because the text is meaningless placeholder text. “Semantic” just means “meaning”. The “most semantic” markup is the one that best communicates the meaning of the page. Because the placeholder text has no meaning, you can't choose how to mark it up.
One way to decide whether some text should be marked up as a heading is to imagine what the document would look like if the user could only see an outline of it, generated from its headings. E.g.
<h1>
<h2>
<h3>
<h3>
<h2>
<h3>
<h4>
<h2>
<h3>
Would the text make sense in the outline? Or is it not really a heading, but instead just in bold because the designer wanted to emphasise it?
When writing pages I try to think of it as writing a Book, if the content is related to the parent section in such a way to deserve its own section, then use H3, H4... otherwise you can use other html tags, such as a dd (Definition List) or ul (Unordered List).
Of course, if you are going for SEO, then always use your h1 and h2, for main content titles (or simply the information you want the user to find). And then, as previously stated before go for trying to make it feel like a book (publication).
You use them as you need them, just as you would with any other tag (outside of the obligatory tags: html, head, etc.) Use them when you need them, but use them properly.
You should note that search engines such as Google use header tags(H1) when processing pages for indexing and page rank etc.
See How Google is using HTML tags to enhance the search engine?
HTML is a markup language, which simplified means describing your content semantically. CSS is for styling your content, i.e. the visual part. Just like <p> means a block of text is a parapgraph <Hn> means a block of text is a heading.
Headings describe the structure of your document, a treelike data structure, if you will.
The Web Developer extension for Firefox has a nice feature that allows you to see your marked up document structure. You can find it under Information->Document outline.
From an accessibility standpoint don't use multiple levels of headings unless it makes sence for your content structure. For example the main document should have heading level one, main sections in the document should have heading level two, and subsections should have heading level three. Wikipedia does a good job of this, for an example see the following link that has both sections and subsections.
http://en.wikipedia.org/wiki/Database_normalization
If you intend for the content to be a subsection (i.e. a distinct separation, not merely a paragraph block) of the section you're in, use the next available heading level. Otherwise, just stick it in a paragraph. Unless absolutely necessary, avoid wrapping your elements in a div tag just for the sake of having a div tag. It's not semantic and may throw off search engine spiders.