How can I make the dont overlap each other on the thumbnail image?
Supposedly the span stay on their on their own image like this
Here is my CSS
.date-img {
text-transform: uppercase;
font-weight: bolder;
color: #054a8f;
position: absolute;
z-index: 2;
left: 5px;
top: 90px;
line-height: 1;
font-size: 25px;
margin-top: 5px;
}
Here is my HTML code
<li class="clearfix span12">
<span class="date-img"> 19 <br>Oct</span>
<div class="rsepro-image">
<div class="overlay-calendar-img">
<img src="https://event-mbpp.aidan.work/components/com_rseventspro/assets/images/events/thumbs/100/450a0c399c52f59dfc867bf413a6951d.jpg" alt="Program City Walk" width="70">
</div>
</div>
<a target="_blank" href="/index.php/ms/component/rseventspro/event/1-program-city-walk?Itemid=101">Program City Walk</a> <br>
<small>Wednesday, October 10, 12:00 AM - 12:00 AM</small>
</li>
You can also refer here - https://event-mbpp.aidan.work/
i have gone through link
just change css class as,
.date-img {
text-transform: uppercase;
font-weight: bolder;
color: #054a8f;
position: relative;
z-index: 2;
left: -117px;
top: 25px;
line-height: 1;
font-size: 25px;
margin-top: 5px;
}
You are using position: absolute, which makes them overlap, as they are absolutely positioned. Right now, any siblings will be overlapped.
But absolute refers either to the page, or to the closest parent item that has a position rule applied.
So a quick and dirty fix will be setting your list items' position to relative: this will make the subsequent absolute rule refer to their container (you may have to adjust the offsets though):
.rsepro_upcoming li {
position:relative;
}
Note that the position:relative is the default for lists so it shouldn't have other side effects.
A better approach would be using flex.
Related
I am trying to position a very basic div inline with some text.
When I move the div it leaves blank spaces that I can't remove. Would you be kind to guide me with some css tricks for it?
.chord {
color: orangered;
font-weight: bold;
display: inline;
position: relative;
top: -20px;
left: 20px;
}
<br/> Empty
<div class="chord">Bm</div>spaces, what are we living for?<br/><br/> Abandoned
<div class="chord">G</div>places, I guess we know the score <br/>
Fiddle, in case you want to play with it.
https://jsfiddle.net/rondolfo/r3dphgsL/11/
I did search for an answer and I couldn't find it, but I believe it is a very basic problem for someone that is proficient in css.
Use inline-flex instead of inline, set the width to 0. That will remove the space, but still show the chord text. You can also remove the left adjust and add a space before the div.
.chord{
color: orangered;
font-weight: bold;
display: inline-flex;
position: relative;
top: -20px;
width: 0px;
}
Setup some classes to use as before elements and position them accordingly. You can even make one for each chord as demonstrated below.
.chord{
position: relative;
}
.chord:before{
color: orangered;
font-weight: bold;
display: block;
position: absolute;
content: "";
top: -20px;
}
.chord.b-minor:before {
content: "Bm";
}
.chord.g:before {
content: "G";
}
<br />
Empty <span class="chord b-minor"></span> spaces, what are we living for?<br/><br/> Abandoned<span class="chord g"></span> places, I guess we know the score <br/>
I'm trying to make a visual effect, best illustrated with this image:
I'm accomplishing this effect with a lot of text-shadows, all of them offset in a circle. It works. But I want to do the same effect with a div, so that I can put the effect on images to.
I tried this:
<div style="position:relative;top:0;left:0;">in a new adventure!
<div style="position:relative;top:5;left:5;">in a new adventure!
</div>
</div>
So never mind the coloring or whatnot... what I expected was the text drawn on top of the other text directly, so that it looked a little thicker. I.E. this:
But instead, I'm getting the second div UNDERNEATH the first div, with the offset there, like so:
Is there any way to position a div with content directly 100% over another div with content? My intention is to offset the bottom z-order div in order to make a bottom-heavy stroke like in the top image.
[TBN!] Run the snippet in full screen to see the effect (it's not responsive :p)
you need three elements to add the effect one behind the text and one under the text to add dimension and I used -webkit-text-stroke to add the padding, and using word-spacing and letter-spacing I control the text
#outer {
font-size: 70px;
color: #3993cc;
letter-spacing: -1px;
position: relative;
font-weight: 900;
word-spacing: -17px;
font-family: arial;
-webkit-text-stroke-width: 14px;
-webkit-text-stroke-color: #3993cc;
}
#outer2 {
font-size: 70px;
color: #3993cc;
letter-spacing: -1px;
position: absolute;
font-weight: 900;
word-spacing: -17px;
top : 10px;
left : 0px;
font-family: arial;
-webkit-text-stroke-width: 11px;
-webkit-text-stroke-color: #3993cc;
}
#inner {
color: white;
font-size: 70px;
font-weight: 600;
letter-spacing: 4.4px;
position: absolute;
top: 14px;
left: 3px;
-webkit-text-stroke-width: 0px;
}
body {
background: #a3efff;
}
<div id="outer">
in a new adventure!
<div id="outer2">
in a new adventure!
</div>
<span id="inner">
in a new adventure!
</span>
</div>
Use absolute positioning
<div style="position:relative;top:0;left:0;">in a new adventure!
<div style="position:absolute;top:1px;left:1px;">in a new adventure!
</div>
</div>
By the way, don't forget to add the unit after your value.
Or you can use negative margins:
<div style="position:relative;top:0;left:0;">in a new adventure!
<div style="position:relative;margin-top: -20px;">in a new adventure!
</div>
</div>
I'm trying to get 2 items to display inline-block within a div but nothing I've tried is working.
The html I've used is
<div class="quotation">
<ul>
<li><img src="images/quotes.png" alt="" class="quotemarks"></li>
<li><p class="words">All honour to the Enderbies, therefore, whose house, I think, exists to the present day; though doubtless the original Samuel must long ago have slipped his cable for the great South Sea of the other world.</p></li>
</ul>
</div>
Whilst my CSS at the moment is as follows:
.quotation {
position: absolute;
margin: 20% 5% 10% 5%;
width: 88.2%;
max-height: 100px;
padding: 0.5%;
background-color: red;
color: #bdc3c7;
}
.quotation ul li {
position: relative;
display: inline-block;
text-decoration: none;
font-family: 'PT Sans', sans-serif;
font-weight: 100;
}
.quotemarks {
max-width: 20%;
}
.words {
width: 60%;
}
I cannot understand why .quotemarks and .words won't a) stay within .quotation and b) won't render inline.
You have quite some things wrong in your code and understanding of how css layout works.
You tell your list items to be display: inline-block. This tells them to be just as wide as their content.
You tell the content of your list items - the img and the paragraph - to have their width based on % - which refers to % of the width of the parent element - which happens to be the list item.
So basically the list item asks its content "How wide am I needed to be?" - while the content asks the parent list item "How wide are you? I'll be xy % of that."
It's easy to see that each element needs an answer before it can give one, creating an infinite loop of unanswered questions.
Apart from that, as soon as there is any whitespace (even a linebreak only) between two or more inline-block elements whose summed up width is 100% will make (at least) the last element wrap to a new line.
How to solve the inline-block whitespace issue: Either make your list-items float: left; (which has its own pitfalls!) or set font-size: 0; on the parent element (in this case the ul) , and re-set it on children as needed.
Also, put the width-controlling classes on the list items.
.quotation {
position: absolute;
margin: 20% 5% 10% 5%;
width: 88.2%;
max-height: 100px;
padding: 0.5%;
background-color: red;
color: #bdc3c7;
}
.quotation ul {
/*set this to avoid linebreak due to whitespace */
font-size: 0;
}
.quotation ul li {
display: inline-block;
text-decoration: none;
font-family: 'PT Sans', sans-serif;
/* re-set font-size here to what you need */
font-size: 14px;
font-weight: 100;
vertical-align: text-top;
}
.quotemarks {
max-width: 20%;
}
.words {
width: 60%;
}
.quotemarks img {
max-width: 100%;
}
<div class="quotation">
<ul>
<li class="quotemarks">
<img src="http://placekitten.com/g/200/300" alt="" />
</li>
<li class="words">
<p>All honour to the Enderbies, therefore, whose house, I think, exists to the present day; though doubtless the original Samuel must long ago have slipped his cable for the great South Sea of the other world.</p>
</li>
</ul>
</div>
Move your classes .quotemark and words to parent elements
<div class="quotation">
<ul>
<li class="quotemarks"><img src="images/quotes.png" alt=""></li>
<li class="words"><p>All honour to the Enderbies, therefore, whose house, I think, exists to the present day; though doubtless the original Samuel must long ago have slipped his cable for the great South Sea of the other world.</p></li>
</ul>
</div>
Make sure that you added necessary vertical-align rule (top, middle or bottom... ) to your list items.
Check out demo
I hope this will help.
Thanks guys, your solutions worked and, whilst my CSS is still ugly as sin, everything fits in the box and I was able to change the size of the quotemarks too.
<div class="quotation">
<ul>
<li class="quotemarks"><img src="images/quotes.png" alt=""></li>
<li class="words"><p>All honour to the Enderbies, therefore, whose house, I think, exists to the present day</p></li>
</div>
And the CSS
.quotation {
position: absolute;
margin: 20% 5% 200px 5%;
width: 88.2%;
max-height: 100px;
padding: 0.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
.quotation ul li {
position: relative;
display: inline-block;
text-decoration: none;
font-family: 'PT Sans', sans-serif;
font-weight: 100;
vertical-align: middle;
}
.quotemarks {
max-width: 20%;
margin: 0 10px 0 0;
}
.quotemarks img {
height: 40px;
}
.words {
width: 80%;
line-height: 15px;
font-size: 20px;
}
I need the ///////// to appear after the heading text, the heading may vary for each block.
Output :
tag ///////////////
Contact ///////////
HTML
<div class="exp-tags exp-left-detail-block">
<h4><span>Tags</span></h4>
</div>
<div class="exp-tags exp-left-detail-block">
<h4><span>Contact</span></h4>
</div>
CSS
.exp-left-detail-block h4 > span{background:#fff;padding:0 12px 0 0;position:relative;}
.exp-left-detail-block h4 > span:after{
content: "////////////////////////////////////";
color: #e4e4e4;
position: absolute;
display: block;
left:0;
right: 0px;
top: 5px;
width: 500%;
height: 28px;
font-size: 15px;
font-style: italic;
}
jsFiddle
Demo
Remove position: absolute and disply:block from your pseudo css
If you want these two properties, you can use without pseudo. Just to that dom.
I have the task of using CSS to create a stylized text box that looks like this:
I've been the server developer for many sites and occasionally do jump in to CSS, and usually figure things out in a reasonably clean way. However, I'm really stuck with this one - it's been an hours-long drag slowly working my way through things, to begin to get this going.
I have not yet begun the colorizing or borders. For now, I'm stuck trying to position the first line of text vertically. I would rather not force the height or width of any of the lines of text, as this seems to me to risk breaking if text/size is slightly changed.
Instead, I'd rather use semantics such as centering and vertical-align: top; (etc) (at least partially).
The green colorization is optional for this question. I'm much more concerned about the positioning of the text. Also, please don't be concerned about the choice of font (I'll hopefully be able to figure that out myself) - but font SIZE (and bolding) is important.
The current state of my attempted CSS is shown below - which doesn't work. My current CSS (below) leaves the image on the page looking like this:
(The blue colorization is just Chrome Web Developer highlighting, which I've provided to indicate the size of the div that includes the text of the first line. The actual background color is white.)
In the above image, I have not begun worrying about the colorization or borders. The current status of the above image is that I'm just trying to get the text "CLICK HERE for a" to appear at the TOP of its div - as noted, WITHOUT setting the height or width of the div to "collapse" onto the text, if possible.
My current trouble positioning the "CLICK HERE for a" text vertically is just one issue I've been dealing with. I would like to have a complete, working sample of the text and text positioning for this image, done "the right way" (or at least done in not a bad way). Perhaps the right way really is to set the width and height of the click-here-for-a div (see CSS below) to be nearly equal to the text dimensions, in order to force its absolute positioning (but as noted, I'd rather not unless answers here correct me, by telling me that this is a good way to do it).
Here is the HTML / CSS for the above (incorrect) image:
HTML:
<div class="smooth-click-region">
<div class="click-here-for-a">
CLICK HERE for a
</div>
<div class="intro-offer-on-home-delivery">
<div class="intro-offer">Special Introductory Offer</div>
<div class="on-home-delivery">on Home Delivery</div>
</div>
<div class="discount-description">2 weeks # 30% off - as low as $78/week</div>
</div>
CSS:
.intro-offer-smooth-click-region {
position: relative;
display: inline-block;
overflow: hidden;
width: 258px;
height: 61px;
}
.click-here-for-a {
position: absolute;
display: block;
left: 0;
right: 0;
top: 0;
vertical-align: top;
font-size: 8pt;
}
.intro-offer-on-home-delivery {
font-size: 9pt;
text-align: center;
}
.intro-offer {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
.on-home-delivery {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
.discount-description {
position: absolute;
font-size: 9pt;
height: 12px;
}
What is the right way to use CSS to create the image above - at least in terms of text formatting and positioning?
Posting as an answer at your request. It helps to add span tags around single lines of text that you want to style independently.
JSFiddle Example
HTML:
<div class="smooth-click-region">
<div class="click-here-for-a">
<span>CLICK HERE</span> for a
</div>
<div class="intro-offer-on-home-delivery">
<div class="intro-offer">Special Introductory Offer</div>
<div class="on-home-delivery">on Home Delivery</div>
</div>
<div class="discount-description">2 weeks # 30% off - as low as $78/week</div>
</div>
CSS:
.smooth-click-region {
display: inline-block;
overflow: hidden;
width: 258px;
height: 61px;
background: #cebd44;
border: inset 1px dotted;
border-style: double;
}
.click-here-for-a span {
font-weight: bold;
}
.click-here-for-a {
display: block;
text-align: center;
vertical-align: top;
font-size: 8pt;
}
.intro-offer-on-home-delivery {
font-size: 9pt;
text-align: center;
font-weight: bold;
}
.intro-offer {
margin-left: auto;
margin-right: auto;
}
.on-home-delivery {
margin-left: auto;
margin-right: auto;
}
.discount-description {
font-size: 9pt;
height: 12px;
text-align: center;
}
Here you are, as simple as it gets http://jsfiddle.net/1dmhLm9c/
.smooth-click-region{
text-align: center;
width: 300px;
background: green;
padding: 10px;
}
p, h2{
margin: 0px;
}
You can style it as you want :)
You can find some site with a similar boxes that works well and inspect it with firebug. That will show you the html layout.. You can get some good ideas for how you want to create your own.
Very simple.
Demo http://jsfiddle.net/7xtf1f8m/
CSS:
.smooth-click-region {
display: inline-block;
border: 2px solid #aa6;
padding: 2px;
background-color: #cc0;
box-sizing: border-box;
text-align: center;
font-family: Arial;
}
.smooth-click-region span {
font-weight: 700;
}
.inner {
padding: 0.3em 3em;
background-color: #aa6;
}
.click-here-for-a {
font-size: 0.8em;
}
.intro-offer-on-home-delivery {
font-weight: 700;
}
.discount-description {
font-size: 0.7em;
}
HTML:
<div class="smooth-click-region">
<div class="inner">
<div class="click-here-for-a"><span>CLICK HERE</span> for a</div>
<div class="intro-offer-on-home-delivery">
Special Introductory Offer<br/>
on Home Delivery
</div>
<div class="discount-description">2 weeks # 30% off - as low as $78/week</div>
</div>
</div>
You can create the multiple borders by using the CSS3 box-shadow property. HTML tags have by default some CSS attributes so you do not have to define them in your CSS. For example the tag <div> is a block level element and by default has display: block; (you defined it for div.click-here-for-a).
You do not have to write too much unnecessary css.
This is my example for you:
.smooth-click-region {
background:#acb014;
width:260px;
padding:5px;
position:relative;
box-shadow: 0 0 0 5px #FFF,0 0 0 10px #acb014;
text-align:center;
}
<div class="smooth-click-region">
<div class="click-here-for-a">
CLICK HERE for a
</div>
<div class="intro-offer-on-home-delivery">
<div class="intro-offer"><strong>Special Introductory Offer</strong></div>
<div class="on-home-delivery"><strong>on Home Delivery</strong></div>
</div>
<div class="discount-description">2 weeks # 30% off - as low as $78/week</div>
</div>
I did not changed your html code but I advise you to use other HTML tags that have their default css. Use h1, h2, h3 for headlines and p for paragraphs, etc.