I am using a marquee, it's going fine in chrome, but in firefox it shows only the first div again and again. Here's the code :
<marquee direction="up" scrollamount="3">
<div class="eachnews">
<a href="#"> <div class="news-date"><span class="day_news">15</span><span class="month_news">Apr</span>
</div>
<div class="news-descript"><h2>News Title</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen.
</p>
</div></a>
</div>
<div class="eachnews">
<a href="#"> <div class="news-date"><span class="day_news">16</span><span class="month_news">Jan</span>
</div>
<div class="news-descript"><h2>News Title</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen.
</p>
</div></a>
</div>
<div class="eachnews">
<a href="#"> <div class="news-date"><span class="day_news">17</span><span class="month_news">Oct</span>
</div>
<div class="news-descript"><h2>News Title</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen.
</p>
</div></a>
</div>
<div class="eachnews">
<a href="#"> <div class="news-date"><span class="day_news">18</span><span class="month_news">Mar</span>
</div>
<div class="news-descript"><h2>News Title</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen.
</p>
</div></a>
</div>
</marquee>
the div where it is written "15 apr" is just repeating itself in ff, in chrome all divs are cycling fine. pls help
Marquee and Blink are not standard, and are no longer supported in many newer browsers, including versions of FF and IE. Sorry.
https://en.wikipedia.org/wiki/Marquee_element
However you can simulate them/reimplement them using javascript, if you really must.
http://themarqueeblink.com/
You should not use the marquee tag as it is not part of the standard and you can't assure support by the browsers (theoretically the vendors could drop the support anytime). Instead try a simple scripted solution like stated in this answer or by using this supersmall script I wrote:
http://jsfiddle.net/4kN5q/1/
It runs smoother in all browser that I tested (Ch,FF,IE) than the "native" marquee.
Related
I have the following HTML code (a wrapper and a list of elements)
<div class="items">
<div class="item">
1. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</div>
<div class="item">
2. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="item">
3. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Dhen an unknown printer took a galley of type and scrambled.</div>
<div class="item">
4. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</div>
<div class="item">
5. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Dhen an unknown printer took a galley of type and scrambled.</div>
<div class="item">
6. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Dhen an unknown printer took a galley of type and scrambled.</div>
</div>
and I'd like to get this using CSS:
The real challenge is that this has to be solved only using CSS since I'm using AMP and I don't have access to JS.
So far I am here:
.items {
margin: 0 -10px
}
.items:after {
display: table;
content: ''
}
.items .item {
width: calc(50% - 42px);
float: left;
padding: 10px;
margin: 0 10px 10px 10px;
border: 1px solid blue
}
<div class="items">
<div class="item">
1. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</div>
<div class="item">
2. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="item">
3. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Dhen an unknown printer took a galley of type and scrambled.</div>
<div class="item">
4. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</div>
<div class="item">
5. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Dhen an unknown printer took a galley of type and scrambled.</div>
<div class="item">
6. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Dhen an unknown printer took a galley of type and scrambled.</div>
</div>
Try this:
.items {
margin: 0 -10px;
display: flex;
flex-wrap: wrap;
align-items: baseline;
}
.items {
margin: 0 -10px;
display: flex;
flex-wrap: wrap;
align-items: baseline;
}
.items:after {
display: table;
content: ''
}
.items .item {
width: calc(50% - 42px);
float: left;
padding: 10px;
margin: 0 10px 10px 10px;
border: 1px solid blue
}
<div class="items">
<div class="item">
1. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</div>
<div class="item">
2. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="item">
3. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Dhen an unknown printer took a galley of type and scrambled.</div>
<div class="item">
4. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</div>
<div class="item">
5. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Dhen an unknown printer took a galley of type and scrambled.</div>
<div class="item">
6. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Dhen an unknown printer took a galley of type and scrambled.</div>
</div>
You could set it as a two column grid.
Obviously you'll want to set the gap and the padding to suit your usage.
.items {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3vw;
}
.item {
border: solid blue 1px;
display: inline-block;
height: fit-content;
padding: 1vw;
}
<div class="items">
<div class="item">
1. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</div>
<div class="item">
2. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="item">
3. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Dhen an unknown printer took a galley of type and scrambled.</div>
<div class="item">
4. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</div>
<div class="item">
5. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Dhen an unknown printer took a galley of type and scrambled.</div>
<div class="item">
6. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Dhen an unknown printer took a galley of type and scrambled.</div>
</div>
when use the code col-xl-6 the remaining portion stays blank and next content displays in the next raw. what is the problem?
<div class="raw">
<div class="col-12 col-lg-6">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a gal</p>
</div>
<div class="col-12 col-lg-6">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a gal</p>
</div>
</div>
row is the proper class not raw.
<div class="row">
<div class="col-12 col-lg-6">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a gal</p>
</div>
<div class="col-12 col-lg-6">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a gal</p>
</div>
</div>
Can anyone help me to identify an HTML tag that I can use for writing the first letter of a word in "Drop Cap" form as we do it in MS word?
You can try this.
div.first {
line-height: 1.4em;
}
div.first:first-letter {
font-size: 2.8em;
float: left;
margin-top: 0.25em;
}
<div class="first"><span class="second">Ž</span>ed Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<div class="first"><span class="second">Z</span>as Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
The following CSS style definition will cause the first letter of all <p> tags to be rendered using a larger font and a red color:
p::first-letter{
color: red;
font-size: 3.5em;
}
This question already has answers here:
How can I make a div take the full width of the page when it is inside another div that have 90% width
(3 answers)
How can I expand a child div to 100% screen width if the container div is smaller?
(7 answers)
Make child div stretch across width of page
(13 answers)
Closed 3 years ago.
I want full div without container-fluid but not change container width i want container width fix because my another div want in container so. Also structure will not change i want this structure.
.main {
padding: 100px 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section class="main">
<div class="container">
<div class="row"></div>
<div class="col-12">
<div class="half">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</div>
<div class="full">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</div>
</div>
</div>
</section>
Thanks in advance
Try this it will be worked fine for you, i have added some CSS
.main {
padding: 100px 0;
}
.full{
background:red;
width: 100vw;
position: relative;
margin-left: -50vw;
left: 50%;
padding:0 25px
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section class="main">
<div class="container">
<div class="row"></div>
<div class="col-12">
<div class="half">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</div>
<div class="full">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</div>
</div>
</div>
</section>
I'm using html/css and text-align: justify; When I use the text below the 2nd line has a big gap between words . The rest of the stuff is fine.
<p style="text-align: justify;">Lorem Ipsum is simply dummy text of the example and Lorem Ipsum is simply dummy text of the lorem. I'm also printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic </p>
I'm getting many extra spaces between each word in this line 2nd line. How ca I fix it ?
Like this:
Lorem Ipsum is simply dummy text of the Lorem Lorem Lorem Lorem Lorem
text of the lorem. I'm also printing and typesetting industry.
Lorem Ipsum has been
The
text-align: justify; spreads out a line to make sure there's no gap at the end of it. To do this, it has to add extra spaces in the middle.
If you don't want this, don't do text-align: justify;, or tell us what you want it to do? Perhaps you want text-align: left?
:)
<html>
<head>
<style>
p.b {
word-spacing: -3px;
}
</style>
</head>
<body>
<p>This is some text. This is some text.</p>
<p class="b">This is some text. This is some text.</p>
</body>
</html>