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.
Related
can anyone tell me why is my nav bar not following sticky position property.
HERE IS THE LINK TO MY CODE--https://codepen.io/prashant_verma/full/yLMKMQL
Use position: fixed
header {
position: fixed;
background-color: lightblue;
}
p {
width: 150px;
}
<header>
<h1>Hello World</h1>
</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eleifend, est at consequat facilisis, sapien nunc pharetra nunc, eu gravida quam massa vel sapien. Vivamus suscipit dui quis erat consectetur, a euismod enim varius. Curabitur quis dolor sed dolor aliquet pharetra. Phasellus eu malesuada turpis. Sed condimentum, augue et condimentum laoreet, leo enim ultrices justo, sit amet congue est lacus a ipsum. Ut posuere mi ac mi sagittis, ut fermentum dolor condimentum. Morbi aliquam egestas lacus et suscipit. Fusce sodales sollicitudin ex eget pulvinar. Nunc velit dui, rutrum vitae lacinia id, sodales vitae sem. Vivamus interdum nibh auctor massa tempus, non sollicitudin risus tincidunt. Donec tortor enim, volutpat a nunc non, placerat semper ex.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eleifend, est at consequat facilisis, sapien nunc pharetra nunc, eu gravida quam massa vel sapien. Vivamus suscipit dui quis erat consectetur, a euismod enim varius. Curabitur quis dolor sed dolor aliquet pharetra. Phasellus eu malesuada turpis. Sed condimentum, augue et condimentum laoreet, leo enim ultrices justo, sit amet congue est lacus a ipsum. Ut posuere mi ac mi sagittis, ut fermentum dolor condimentum. Morbi aliquam egestas lacus et suscipit. Fusce sodales sollicitudin ex eget pulvinar. Nunc velit dui, rutrum vitae lacinia id, sodales vitae sem. Vivamus interdum nibh auctor massa tempus, non sollicitudin risus tincidunt. Donec tortor enim, volutpat a nunc non, placerat semper ex.
</p>
This is because position sticky always follows its parent height and width. In your case, #sticky is inside its parent <header> and header has the least minimum height, that's why when you are passing the header, #sticky is following so. So,the solution is, you rather keep the #sticky in such a position so that <body> can be its parent. like this,
<body>
<div id="sticky">
...
</div>
<body>
then it will stick on top always across the page.
And if you want to place it under the h1 - Flexbox challenge 2,
give it top: (the height of the h1)
Though position: fixed is an easy solution for you, you must know position sticky well also
I am trying to change the text colour on alternate lines of a paragraph. The problem is, the number of lines in a paragraph will depend on things like screen size. Is there a way in CSS where I can have alternate text colours for each line inside a <p> tag?
For example, in the following code
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel metus sapien. Duis eleifend justo eu enim venenatis, quis malesuada eros rhoncus. Sed id orci sed nulla ultrices lobortis. Nam ultricies nibh dictum odio posuere porttitor. Vivamus vitae diam felis. Duis dapibus eget velit id tempor. Integer tristique viverra lorem sit amet congue. Suspendisse vitae ex condimentum, volutpat nisi eu, cursus dolor. Curabitur suscipit hendrerit semper. Vestibulum egestas lorem vitae aliquet egestas. Nulla non faucibus velit, sit amet sagittis velit. Nulla fringilla efficitur erat, sed porttitor mi fringilla non. Phasellus dictum gravida ligula at elementum. Phasellus nec dui suscipit, mollis turpis eu, posuere erat.</p>
Each line of text should be an alternate colour regardless of which words are actually on which lines (which will obviously depend on the screen size).
My first instinct was to try and calculate the number of lines based on screen size, but then I'm not sure where to go from there.
Nice question! For a CSS only implementation of this, you can use the magic of webkit-background-clip, along with a gradient.
You can try out my solution at https://jsfiddle.net/kavot054/, I've also put the HTML and CSS code for it below.
Notice the relationship between the line-height of the text and the gradient; if you were to change the font for example, you would need to update both of these.
It is also worth noting that the webkit-background-clip only works on webkit browsers, so this is something to be wary of when thinking about your site's accessibility.
p {
line-height: 30px;
background: -webkit-repeating-linear-gradient(red, red 30px, blue 30px, blue 60px);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel metus sapien. Duis eleifend justo eu enim venenatis, quis malesuada eros rhoncus. Sed id orci sed nulla ultrices lobortis. Nam ultricies nibh dictum odio posuere porttitor. Vivamus vitae diam felis. Duis dapibus eget velit id tempor. Integer tristique viverra lorem sit amet congue. Suspendisse vitae ex condimentum, volutpat nisi eu, cursus dolor. Curabitur suscipit hendrerit semper. Vestibulum egestas lorem vitae aliquet egestas.
Nulla non faucibus velit, sit amet sagittis velit. Nulla fringilla efficitur erat, sed porttitor mi fringilla non. Phasellus dictum gravida ligula at elementum. Phasellus nec dui suscipit, mollis turpis eu, posuere erat.</p>
I'm sure this is baby stuff for many, but I'm afraid I just can't get it right. The more I tweak, the further away I get with the results. No need to describe the consequences of my efforts. Instead here is the desired effect as the viewport shrinks:
The lower image is NOT what I'm actually producing; it's what I'd like to happen. Instead I've got the elements doing everything but this, the most annoying being the text wrapping under the images.
If someone can point me toward the most efficient code for this, including media queries, I'm grateful.
I trust you're using #media queries in your CSS, so I'll assume this unless told otherwise.
One way you could look at it is this:
Set the display property to inline-block of the Items 2 & 3.
Then, set the width of items 2 & 3 to 50% when the viewport is at more than 600px (desktop/tablet) wide. This will make them sit side-by-side.
Note: you might need to use box-sizing: border-box; for this to work properly; depending if you're using borders or not.
Then, on your media query for less than 600px (for mobile), set Items 2 & 3's widths to 100% to fill the width of the screen.
This will make them cascade neatly underneath one another.
Furthermore, I would recommend looking at using Bootstrap as this makes responsive website coding a doddle.
Hope this helps!
I think that the eassier solution here is using media queries. I give you a bit of background, just in case you don't know what they are.
When you create a stylesheet, the styles created are applied to the elements you target using selectors, like class, ids, etc.
Media queriesallow you to set conditions to that CSS rules, for example, you can create rules depending on the screen size.
See this fiddle to check how it works.
.short {
width: 50%;
float: left
}
#media screen and (max-width: 500px) {
.short {
width: 100%;
float:none;
}
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum purus vel purus tempor, id lobortis sem placerat. Phasellus sed magna varius, fermentum velit sed, vestibulum ante. In enim est, iaculis in neque sed, dictum venenatis nulla.
Fusce sit amet auctor augue. Vestibulum at dui ipsum. Sed vehicula bibendum eros sed feugiat. Fusce cursus mi non eros eleifend, viverra tempus massa accumsan. Maecenas venenatis purus sit amet metus ornare, at feugiat ex bibendum. Aliquam erat volutpat.
Vivamus tristique odio non elit imperdiet, vel ornare diam suscipit. Pellentesque ultrices, tortor vitae varius vehicula, metus mi porta est, tincidunt posuere lorem turpis non justo. Nulla ullamcorper dolor a mattis ornare.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum purus vel purus tempor, id lobortis sem placerat. Phasellus sed magna varius, fermentum velit sed, vestibulum ante. In enim est, iaculis in neque sed, dictum venenatis nulla.
Fusce sit amet auctor augue. Vestibulum at dui ipsum. Sed vehicula bibendum eros sed feugiat. Fusce cursus mi non eros eleifend, viverra tempus massa accumsan. Maecenas venenatis purus sit amet metus ornare, at feugiat ex bibendum. Aliquam erat volutpat.
Vivamus tristique odio non elit imperdiet, vel ornare diam suscipit. Pellentesque ultrices, tortor vitae varius vehicula, metus mi porta est, tincidunt posuere lorem turpis non justo. Nulla ullamcorper dolor a mattis ornare.
</p>
<p class="short">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum purus vel purus tempor, id lobortis sem placerat. Phasellus sed magna varius, fermentum velit sed, vestibulum ante. In enim est, iaculis in neque sed, dictum venenatis nulla.
Fusce sit amet auctor augue. Vestibulum at dui ipsum. Sed vehicula bibendum eros sed feugiat. Fusce cursus mi non eros eleifend, viverra tempus massa accumsan. Maecenas venenatis purus sit amet metus ornare, at feugiat ex bibendum. Aliquam erat volutpat.
Vivamus tristique odio non elit imperdiet, vel ornare diam suscipit. Pellentesque ultrices, tortor vitae varius vehicula, metus mi porta est, tincidunt posuere lorem turpis non justo. Nulla ullamcorper dolor a mattis ornare.
</p>
<p class="short">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum purus vel purus tempor, id lobortis sem placerat. Phasellus sed magna varius, fermentum velit sed, vestibulum ante. In enim est, iaculis in neque sed, dictum venenatis nulla.
Fusce sit amet auctor augue. Vestibulum at dui ipsum. Sed vehicula bibendum eros sed feugiat. Fusce cursus mi non eros eleifend, viverra tempus massa accumsan. Maecenas venenatis purus sit amet metus ornare, at feugiat ex bibendum. Aliquam erat volutpat.
Vivamus tristique odio non elit imperdiet, vel ornare diam suscipit. Pellentesque ultrices, tortor vitae varius vehicula, metus mi porta est, tincidunt posuere lorem turpis non justo. Nulla ullamcorper dolor a mattis ornare.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum purus vel purus tempor, id lobortis sem placerat. Phasellus sed magna varius, fermentum velit sed, vestibulum ante. In enim est, iaculis in neque sed, dictum venenatis nulla.
Fusce sit amet auctor augue. Vestibulum at dui ipsum. Sed vehicula bibendum eros sed feugiat. Fusce cursus mi non eros eleifend, viverra tempus massa accumsan. Maecenas venenatis purus sit amet metus ornare, at feugiat ex bibendum. Aliquam erat volutpat.
Vivamus tristique odio non elit imperdiet, vel ornare diam suscipit. Pellentesque ultrices, tortor vitae varius vehicula, metus mi porta est, tincidunt posuere lorem turpis non justo. Nulla ullamcorper dolor a mattis ornare.
</p>
The CSS is easy. The first thing is the class short, which applies always to the elements. Then you find the media query which says that the CSS rules that encloses are applied only when the width is under 500px.
I had a project on responsive webpage and I'm a new learner so it's all basics:
https://github.com/nirupaboricha/Responsive_Webpage
Let me know if it's helpful.
I am trying to create an HTML newsletter with three columns. I have tried using the columns tag:
<span style="-webkit-column-count: 3; -moz-column-count:3; column-count:3; -webkit-column-width: 160px; -moz-column-width:160px; column-width:160px; -webkit-column-gap:40px; -moz-column-gap:40px; column-gap:40px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a consectetur mi, a volutpat orci. Morbi id metus eget sem sollicitudin luctus volutpat ac sapien. Maecenas et metus maximus nisl aliquet consequat. Morbi rutrum justo id felis posuere tempus. Nulla sollicitudin sodales augue, eu varius urna fermentum at. Integer euismod suscipit nunc. Maecenas fermentum tristique libero in sagittis....
</span>
But it shows up as one paragraph in gmail.
Columns is not supported in emails.
See this chart for a list of supported css properties.
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