AFAIK, there is no dedicated element--like <caption> for tables, <figcaption> for figures, etc.--to mark the header of a list. What markup should I use?
In HTML 3.0, there was an element <LH> but it is deprecated now.
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nulla
eget enim nec metus feugiat porta.
Suspendisse convallis dictum
tincidunt. Vestibulum ante ipsum
primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Morbi
vitae erat in nisl suscipit rutrum.
Fruits I love:
Ananas
Raspberry
Banana
In in mauris vel diam eleifend
adipiscing. Proin id neque quam, eu
mattis ipsum. Nulla facilisi. Sed id
sapien eget mi cursus placerat vel sed
justo. Integer vel pellentesque magna.
Donec quis nisi lacus, accumsan
rhoncus leo. Quisque tempor metus
vitae nisl eleifend aliquet. Maecenas
adipiscing purus magna.
It looks like you want a HTML5 answer. If all your lists have header I would use a <dl> (now meaning description list) with a single <dt> header and the list items as <dd>'s:
<dl>
<dt>Fruits I love:</dt>
<dd>Ananas</dd>
<dd>Strawberry</dd>
</dl>
If you mix a lot of lists with/without headers I would stick with <ul>/<ol> and use normal <hX>'s. Wrap the <hX> and the list in a <div> to preserve the semantics:
<div class="list">
<h2>Fruits I love:</h2>
<ul>
<li>Ananas</li>
<li>Strawberry</li>
</ul>
</div>
I'd use a regular header, preferably in the level below your previously used one.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget enim nec metus feugiat porta. Suspendisse convallis dictum tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi vitae erat in nisl suscipit rutrum.</p>
<p>Fruits I love:</p>
<ul>
<li>Ananas</li>
<li>Raspberry</li>
<li>Banana</li>
</ul>
<p>In in mauris vel diam eleifend adipiscing. Proin id neque quam, eu mattis ipsum. Nulla facilisi. Sed id sapien eget mi cursus placerat vel sed justo. Integer vel pellentesque magna. Donec quis nisi lacus, accumsan rhoncus leo. Quisque tempor metus vitae nisl eleifend aliquet. Maecenas adipiscing purus magna.</p>
There's no reason to use anything else than a paragraph in this case. figcaption would be appropriate in another circumstance:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget enim nec metus feugiat porta. Suspendisse convallis dictum tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi vitae erat in nisl suscipit rutrum.</p>
<p>I love <a href=#fruits>some fruits</a>!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget enim nec metus feugiat porta. Suspendisse convallis dictum tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi vitae erat in nisl suscipit rutrum.</p>
<p>In in mauris vel diam eleifend adipiscing. Proin id neque quam, eu mattis ipsum. Nulla facilisi. Sed id sapien eget mi cursus placerat vel sed justo. Integer vel pellentesque magna. Donec quis nisi lacus, accumsan rhoncus leo. Quisque tempor metus vitae nisl eleifend aliquet. Maecenas adipiscing purus magna.</p>
<figure id=fruits>
<figcaption>List 1: Fruits I love</figcaption>
<ul>
<li>Ananas</li>
<li>Raspberry</li>
<li>Banana</li>
</ul>
</figure>
There are few things you can do:
Use HTML5, as schot pointed out
Use HTML3, as you noticed :)
I'd use the headings, which are very good for navigation and marking general semantic structure of the page:
<h3>Things I love</h3>
<h4>The list</h4>
<ul>
<li>Ananas</li>
<li>Raspberry</li>
<li>Banana</li>
</ul>
<h4>Elaborated description</h4>
<p>Lorem ipsum…</p>
(Sorry for this formatting)
If you use Firefox, I'd recommend HeadingsMap to clearly see the page structure:
HeadingsMap :: Add-ons for Firefox
Related
How can I apply a CSS rule to groups of header-and-multiple-paragraphs, based on pattern/position?
See that the below text contains three sets of <h3>s and multiple <p>s beneath them. Let's regard them all as article segments by, say, wrapping a border around each group.
How can this be achieved without actually applying class="classname" or adding new <div>s anywhere? Ie. Can it be inferred, achieved by using positioning, maybe nth items/preceding-type stuff?
I note that CSS pseudo-classes and pseudo-elements may be what is relevant here.
Qualifying attributes:
Where there is a <h3>
... followed by multiple <p>s (unpredictable number)
... until (but not including) the next header...
... or until the end
... (ie. up to the last <p> before some different element - may not always be a header tag)
... wrap it in a border: 1px box.
<h3>Cross-heading 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum lectus ac justo dapibus dapibus.</p>
<p>Maecenas ipsum quam, tincidunt sed condimentum quis, pharetra eget lorem. Praesent ultrices non nisi sit amet iaculis.</p>
<p>Maecenas ultricies ipsum enim, lobortis pharetra metus scelerisque eu. Nulla lacus dolor, venenatis quis interdum quis, euismod vel turpis.</p>
<h3>Cross-heading 2</h3>
<p>Aenean mi elit, elementum ut diam sed, maximus euismod neque. Nulla convallis malesuada eleifend.</p>
<p>Nulla efficitur rhoncus orci, cursus vestibulum urna volutpat a. Etiam molestie ligula non leo pulvinar, a vulputate arcu maximus.</p>
Nullam faucibus sollicitudin sapien sit amet aliquam. Aliquam scelerisque, nisl sit amet convallis tempor, ante mauris lacinia arcu, sit amet rutrum nulla ante at tortor.</p>
<p>Etiam sed turpis in nunc sodales molestie ac vestibulum nulla. Suspendisse hendrerit in dolor a porttitor.</p>
<p>Aenean eget bibendum diam. Nam pulvinar enim eu lacus aliquam auctor. Fusce nec posuere elit, ac ultricies nisl. Ut lacinia vitae est sed sodales.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<h3>Cross-heading 3</h3>
<p>Sed posuere justo nec ex maximus, sit amet lacinia nisl finibus.</p>
<p>Curabitur nec mauris a velit pellentesque commodo eget quis ipsum.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam auctor quam malesuada pretium feugiat.</p>
<p>Fusce vel purus posuere, ultrices urna et, elementum augue. Pellentesque nec auctor dolor.</p>
<p>Nunc eget consectetur diam. Suspendisse quam urna, posuere nec libero id, bibendum dapibus est. Phasellus nulla ex, facilisis eu mi non, varius eleifend enim.</p>
In a div I put on the right with Bootstrap, I want the outer text to continue where the text inside the div ends. the shape I want is in the picture. how can I do it?
You can float the image to the right, and not clear the float after. Any text after the image will wrap to the next line.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body class="m-4 border">
<div>
<h2 class="p-4 border-bottom">Title</h2>
<div class="p-4">
<img src="https://data.whicdn.com/images/323513059/original.jpg" alt="Random Image" style="height: 300px; width: auto;" class="float-end">
<p>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur arcu erat,
accumsan id imperdiet et, porttitor at sem. Pellentesque in ipsum id orci porta dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta. Vestibulum ac diam sit amet quam vehicula elementum
sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur aliquet quam id dui posuere blandit. Curabitur aliquet quam id dui posuere blandit. Curabitur aliquet quam id dui posuere blandit. Nulla porttitor accumsan
tincidunt. Nulla porttitor accumsan tincidunt. Donec sollicitudin molestie malesuada. Donec rutrum congue leo eget malesuada. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat. Pellentesque
in ipsum id orci porta dapibus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Proin eget tortor risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Curabitur arcu erat, accumsan id imperdiet
et, porttitor at sem. Curabitur aliquet quam id dui posuere blandit. Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec
velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Donec sollicitudin molestie malesuada. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
Curabitur aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur arcu erat, accumsan id imperdiet et, porttitor at
sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Proin eget tortor risus. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Donec sollicitudin molestie malesuada. Nulla porttitor accumsan tincidunt. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla porttitor accumsan tincidunt.
Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel,
ullamcorper sit amet ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis lorem ut libero malesuada feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor
sit amet aliquam vel, ullamcorper sit amet ligula. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus suscipit tortor eget felis porttitor volutpat.
</p>
</div>
</div>
</body>
</html>
I have a div with a specific class name when a specific link is clicked I wanted to jump into the div. How can I achieve this?
HTML
<a class="my_link" href="#"> This is my link </a>
<div class="Home"> This is my target </div>
Thanks
you can do that with ids
<a class="my_link" href="#Home"> This is my link </a>
<div id="Home"> This is my target </div>
if you need you classes to stay:
<div class="Home" id="someId"> This is my target </div>
and just replace #Home in your link with #someId
just link to your page and put # behind the link
It works with Ids because the should be unique per page
Full example:
<a class="my_link" href="some-of-your-pages#Home"> This is my link </a>
You can do with this
<a class="my_link" href="#Home"> This is my link </a>
<div class="Home" id="Home"> This is my target </div>
$(".my_link").click(function() {
$('html,body').animate({
scrollTop: $(".Home").offset().top},
'slow');
});
.first {
width: 100%;
height: 1000px;
background: #ccc;
}
.Home {
width: 100%;
height: 1000px;
background: #999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first"><a class="my_link" href="#"> This is my link </a>
</div>
<div class="Home"> This is my target </div>
Would you please check my above snippet?
try something like this, it utilizes jQuery, as an added bonus it has smooth scrolling
$(document).ready(function () {
$("a#smooth_scroll").on('click', function(event) {
var el = $(this)
var href = el.attr('href') // can be an id or a class
var nav_element_height = $(".navbar").outerHeight();
var target = $(href);
var target_offset = target.offset().top;
var offset = Math.round(target_offset - nav_element_height);
if (target.length) {
event.preventDefault();
$('html, body').stop().animate({
scrollTop: offset
}, 1000);
}
});
})
But as others have suggested, i would recommend utilizing ids for this purpose
An alternative would be to use jQuery, in which case you can just use classes. This would be handy if you want a nicer effect like smooth scrolling, but you should only implement once per page.
$(".origin").click(function () {
$('html,body').animate({
scrollTop: $(".destination").offset().top
}, 'slow');
})
Just give the link the class of origin, and the div you want to scroll to the class of destination. Then these can be repeated in different parts of the website (not on same page).
Give name attribute for anchor tag just above your div and mention that name in the link href
<a class="my_link" href="#home"> This is my link </a>
<a name="home"></a>
<div class="Home"> This is my target </div>
<a class="my_link" href="#home"> This is my link </a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam, purus sed rutrum congue, mauris diam placerat nibh, id fringilla neque mi vel elit. Nulla aliquam mauris nisl. Ut sed interdum sapien, ac tincidunt mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam eu convallis urna. Aliquam elit ipsum, tincidunt eget euismod eu, mattis feugiat magna. Sed congue mollis odio, at consequat enim interdum ac. Vestibulum iaculis, nisi a vulputate posuere, elit magna lacinia purus, sed lacinia mi massa ut neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc turpis est, tincidunt at semper quis, faucibus nec sapien. Integer dictum malesuada lectus ac luctus. Sed vestibulum justo sed dolor faucibus rutrum. Proin porta condimentum nisl id ullamcorper. Integer in ligula in libero consectetur pharetra. Nam turpis nibh, venenatis ac accumsan ac, posuere eu arcu.
Nunc sagittis turpis quis laoreet volutpat. Donec facilisis, dui sit amet commodo porta, lorem ipsum consequat nulla, sit amet porta sem risus non sapien. Integer efficitur malesuada neque vel malesuada. Fusce non ante euismod, elementum urna tristique, molestie dolor. Nullam ipsum leo, pellentesque sit amet diam sed, lacinia bibendum magna. Maecenas ac congue dui, sit amet sagittis est. Nam eget est at tellus cursus tempus.
</p>
<a name="home"></a>
<div class="Home"> This is my target </div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam, purus sed rutrum congue, mauris diam placerat nibh, id fringilla neque mi vel elit. Nulla aliquam mauris nisl. Ut sed interdum sapien, ac tincidunt mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam eu convallis urna. Aliquam elit ipsum, tincidunt eget euismod eu, mattis feugiat magna. Sed congue mollis odio, at consequat enim interdum ac. Vestibulum iaculis, nisi a vulputate posuere, elit magna lacinia purus, sed lacinia mi massa ut neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc turpis est, tincidunt at semper quis, faucibus nec sapien. Integer dictum malesuada lectus ac luctus. Sed vestibulum justo sed dolo Nam sit amet ex pharetra, fermentum dolor quis, posuere tortor. Sed gravida ac justo vel efficitur. Nullam ut diam nec sem imperdiet rhoncus. Ut et nisl non nisl tempor cursus. Sed tincidunt, eros quis tristique congue, augue dolor faucibus dui, a porta arcu lectus quis diam. Aenean sagittis dui quis eros fringilla, non laoreet nibh elementum. Cras porta eget mi at placerat. Maecenas non condimentum massa, eget faucibus arcu. Curabitur vel velit non velit placerat lacinia sit amet sit amet purus. Mauris id condimentum risus, ut fermentum turpis.
</p>
I have attached some content so you can view the demo
I have an image that needs a description below (name and title) and then a biography of a couple paragraphs to display wrapped around the image. I tried floating the text to the left and using align="left" in the img tag, but how can I make sure the name and description are fixed below while the paragraph text wraps around the image? Here is a sample:
<div class="info">
<img src="../img/test.jpg" alt="test pic">
<br>
John Doe
<br>
President
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam convallis pellentesque orci a pulvinar. Donec rutrum ipsum eget justo venenatis ultricies vel ac mi. Praesent pellentesque libero at porta ultrices. Nullam venenatis velit ut molestie aliquet. Nullam ac justo vestibulum, rhoncus nibh id, tempus ante. Nulla vel enim eu massa congue mattis ut nec erat. In vel rutrum quam, non pellentesque nisi. Vivamus rutrum purus et pellentesque ultricies. Aenean feugiat diam nec lacus placerat, ac elementum nulla iaculis. Nunc accumsan adipiscing arcu sit amet ultrices.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam convallis pellentesque orci a pulvinar. Donec rutrum ipsum eget justo venenatis ultricies vel ac mi. Praesent pellentesque libero at porta ultrices. Nullam venenatis velit ut molestie aliquet. Nullam ac justo vestibulum, rhoncus nibh id, tempus ante. Nulla vel enim eu massa congue mattis ut nec erat. In vel rutrum quam, non pellentesque nisi. Vivamus rutrum purus et pellentesque ultricies. Aenean feugiat diam nec lacus placerat, ac elementum nulla iaculis. Nunc accumsan adipiscing arcu sit amet ultrices.</p>
Alright, extending from comment:
Instead of floating the image, you can actually float the whole div:
div.info {
float:left;
text-align:center; /* so the text is centered */
}
Fiddle demo
I have a large text. I've made 3 columns with the following CSS:
.columns {
-webkit-column-count: 3;
text-align: justify;
}
It has to work in Safari. This works just fine. But now I would like to place an image to the top of the second column.
How can I have this result?
Edit: This was my start of doing the thing, but I would like to say that the important thing is to have the result in any way, so I can drop this css in case it can be solved without this.
Edit 2: I've solved it with the jquery colonizer plugin. I had to add 3-5 lines of code to the plugin. I need this for the iPad, where I have arrange the text and image like I mentioned before. I think this is the simplest method to have this job done.
In case you need the solution, feel free to e-mail me.
#flynfish, please post it as an answer, so I can accept it.
I'm not sure that this is possible. The browser determines where to break the content and there's no way via CSS to insert something at those points. The closest thing I've been able to come up with uses the column-break-before: property (-webkit-column-break-before, -moz-column-break-before, column-break-before).
For example:
CSS:
div#multicolumnElement {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.special {
-webkit-column-break-before:always;
-moz-column-break-before:always;
column-break-before:always;
}
HTML:
<div id="multicolumnElement">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis, lectus
nec tempor auctor, urna urna venenatis nisi, ac pellentesque est felis egestas lorem!
Duis lectus dui, commodo in varius sed, bibendum at eros. Donec ultricies, est quis
pretium porttitor, neque arcu auctor dui, sit amet adipiscing erat est id massa.
Morbi at elementum <img class="special" src="http://dummyimage.com/200x150/000/fff" />lectus. Donec fermentum massa sit amet nisi tempus sed vestibulum
tortor pellentesque. Aliquam dictum, sapien a luctus ultricies, ipsum erat dignissim
tellus, in ultricies mi lorem tempor velit. Vivamus ornare nulla sed arcu elementum
pharetra. </p>
<p>Phasellus cursus felis sed felis porta tempor. Vestibulum at eleifend ligula.
Vestibulum hendrerit ligula at elit lacinia at ultricies metus fringilla! Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi
ultrices tortor vel ipsum imperdiet imperdiet. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
eu leo quis lectus aliquet elementum. Aenean porta interdum nibh id posuere? Phasellus
nisl lorem, semper bibendum semper at, malesuada non odio. </p>
<p>In ullamcorper eros quis nisi pharetra tincidunt. Vestibulum ac elit nunc, sed
laoreet leo! Duis et nulla sit amet lorem gravida lacinia. Cras massa ipsum, semper
in mattis ut, fringilla in nisi. Nulla mauris urna, feugiat sed convallis id, facilisis
et sem. Donec egestas ultricies commodo. Aliquam eget nulla enim, et dictum nisi.
In faucibus, leo vitae congue convallis, elit eros venenatis leo, nec lobortis sapien
orci at nunc. </p>
</div>
This produces four columns of text with an image at the top of the second column, however depending on the amount of text and the space available, it's possible that this may not always turn out as you want.
I'd have linked to a jsFiddle example but it seems to be down ATM.