I am trying to add two different color underline in same text but not able to set 2nd underline its gone down from the first line.
Here is the link example "click here for exmple"
check the title's underline of this page Other Meetings , Church Services.
.zaptitle {
margin-bottom:20px !important;
}
.home_widget .page_title_s2, .home_widget .page_title_s3, .home_widget .page_title_s4,
.page_title_testimonials, .zaptitle {
border-bottom-color:#EDEDED;
border-bottom-style:solid;
border-bottom-width:1px;
color:#545454;
float:left;
font-family:Arial, sans-serif;
font-size:16px;
font-weight:bold;
margin:0 0 20px;
min-height:30px;
padding:0;
position:relative;
width:100%;
}
And
<div class="zaptitle page_title_s2 ">
<span class="page_info_title_s2" style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(16, 185, 185);">Latest News</span>
</div>
The beauty about CSS is that things don't really have to be like they seem to be. You can create such a line using other elements.
JSfiddle
HTML:
<div id="hello">hello</div>
<div id="left_line"></div>
<div id="right_line"></div>
CSS:
#left_line {
background-color:black;
margin-right:90%;
float:left;
width:10%;
height:1px;
}
#right_line {
background-color:red;
float:right;
width:80%;
height:1px;
position:absolute;
left:10%;
}
Please add the following code in your existing CSS:--
.page_info_title_s2{
position: relative;
float: left;
padding-bottom: 10px;
line-height: 20px;
top: 1px;
vertical-align: baseline;
}
use above code to exact line overwriting. See the working fiddle:--
http://jsfiddle.net/npsingh/RgE2h/1/
you just need to add this class
.page_info_title_s2{
display:block;
float:left;
min-height:30px;
}
this is working Fiddle
Related
I want to be able to write a style in less, where I can apply it to 4 span tags. I want each span to have all the same properties, but I want to have be 30px; of space between each one. An finally, I want the 2nd span to have a different distance from the right than all the others.
Is there a way to do this, or do you need to write a separate style for span 2?
So here is my style for each span, which works fine. But there must be a better way with less...??
.right-lines {
z-index:100;
display:block;
position:absolute;
width:80px;
height:2px;
background-color:#fff;
right:-80px;
margin:40px;
top:140px;
}
.right-lines2 {
z-index:100;
display:block;
position:absolute;
width:80px;
height:2px;
background-color:#fff;
right:-50px;
margin:40px;
top:180px;
}
.right-lines3 {
z-index:100;
display:block;
position:absolute;
width:80px;
height:2px;
background-color:#fff;
right:-80px;
margin:40px;
top:220px;
}
.right-lines4 {
z-index:100;
display:block;
position:absolute;
width:80px;
height:2px;
background-color:#fff;
right:-80px;
margin:40px;
top:260px;
}
If you want the lines to be 30px from one another, use 30px of margin. There is no need for so much absolute positioning. This also allows for fewer specific styles.
body {
background: black;
}
.right-lines {
position: absolute;
top: 140px;
right: 0;
z-index: 100;
font-size: 0;
text-align: right;
}
.right-lines span {
display: block;
width: 80px;
height: 2px;
background-color: #fff;
margin: 0 80px 30px auto;
}
.right-lines span:nth-of-type(2) {
margin-right: 50px;
}
.right-lines span:last-child {
margin-bottom: 0;
}
<div class="right-lines">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
Try making a common class or use the span tag itself to style the common features. You can, of course get even more efficient with other class stylings. And a sample span tag might look like <span class="span_class right-lines">...</span>
/* common styles */
.span_class {
z-index:100;
display:block;
position:absolute;
width:80px;
height:2px;
background-color:#fff;
margin:40px;
}
/* And now make the special ones */
.right-lines {
right:-50px;
top:180px;
}
.right-lines2 {
right:-50px;
top:180px;
}
.right-lines3 {
right:-80px;
top:220px;
}
.right-lines4 {
right:-80px;
top:260px;
}
I'm trying to create in a single box, two arrows, one as a pointer and the other one into the box just behind.
Can not find the way to get the arrow right behind.
Someone can help me??
here i post the link with the sample: http://jsfiddle.net/7Esu2/
CSS:
.arrow {
width:210px;
height:40px;
background-color:#CBCBCB;
border: 1px solid #CBCBCB;
position:relative;
text-align:center;
font-size:20px;
font-weight:bold;
line-height:40px;
}
.arrow:after {
content:'';
position:absolute;
top:-1px;
left:210px;
width:0;
height:0;
border:21px solid transparent;
border-left:15px solid #CBCBCB;
}
.arrow:before {
content:'';
position:absolute;
top:-1px;
left:211px;
width:0;
height:0;
border:21px solid transparent;
border-left:15px solid #CBCBCB;
}
HTML:
<div class="arrow">
FLECHA
</div>
I prefer using inline-blocks over absolute positioning. Also, :before and :after create child elements (inside) the element you specify them on (at the beginning and end). For this, it would probably be best to have a wrapper (or inner) block, like so:
<div class="arrow">
<div class="inner-arrow">
FLECHA
</div>
</div>
Then the inner block is going to get most of the styling, as the wrapper is primarily there to contain the :before and :after. The wrapper (.arrow) needs to have font-size: 0 (or some other method to make the white-space around the inner block, .inner-arrow, go away).
.arrow {
font-size: 0;
}
.inner-arrow {
width:210px;
height:40px;
display: inline-block;
background-color:#CBCBCB;
text-align:center;
font-size:20px;
font-weight:bold;
line-height:40px;
vertical-align: middle;
}
Most of the styles for .arrow:before and .arrow:after will be the same, so we'll group those. Then specify the differences below (they have to be below to override the common styles).
.arrow:before,
.arrow:after {
content:'';
display: inline-block;
width:0;
height:0;
border:20px solid transparent;
vertical-align: middle;
}
.arrow:before {
border-top-color: #CBCBCB;
border-bottom-color: #CBCBCB;
border-right-color: #CBCBCB;
}
.arrow:after {
border-left-color: #CBCBCB;
}
This is all in the a fiddle.
The post on my website are set to show information regarding the post when the mouse hovers over it.
Currently when I hover over a post the information shows to the right, and I would like it to show on top of the post. I want to be able to margin the information to show ontop of the post in the center but nothing I input is working.
After everything I tried didn't work I went back and set them to blank and that still didn't work. You can see a live version at http://fallbackryleighamor.tumblr.com/
This is the current css. Any idea how I can edit it to make it work?
#info #date{ color:#000; border: 2px #000 solid;
text-transform: uppercase; letter-spacing: 2px; font: 10px Consolas;}
#info a{ color: #000;}
#date a { width: 280px; color: #000;}
#posts{ position:;}
#date #info{position:;} #date #info{float:;}
{background: rgba(0, 0, 9, 0.1); float:left; width: auto; height: auto;
margin-top: ;}
#textpost #photopost #photosetpost #quotepost #quotelink #audiopost
#videopost{background: rgba(0, 0, 9, 0.1); float:left; width: auto;
height: auto; margin-top: ;}
#date { display:none;}
#posts:hover #date {display:block;}
#textpost:hover #photopost:hover #photosetpost:hover #quotepost:hover #quotelink:hover
#audiopost:hover #videopost:hover{display:block;}
#date #info{
margin-top:0px;
margin-bottom:0px;
margin-right:0px;
margin-left:0px;
}
#date #info{
padding-top:0px;
padding-bottom:0px;
padding-right:0px;
padding-left:0px;
}
#date #info{
z-index:;}
html
<div id="date">
{block:Date}
{DayOfWeek} {ShortMonth} {DayOfMonthWithZero}, {Year}, {TimeAgo}{/block:Date}
{block:NoteCount}
{NoteCountWithLabel}
{/block:NoteCount}
<div id="info">{block:RebloggedFrom}
reblog: <a href="{ReblogParentURL}" title="{ReblogParentTitle}">
{ReblogParentName}
</a>
origin: <a href="{ReblogRootURL}" title="{ReblogRootTitle}">{ReblogRootName}<a/>{/block:RebloggedFrom}
</div></div>
UPDATED WITH SOLUTION.
CSS
#date{
position:relative;
left:-430px;
top:95px;
z-index:1;
}
#info{
position:relative;
left:-420px;
top:190px;
z-index:1;
}
#controls { display:none;}
#posts:hover #controls {display:block;}
HTML
<div id="controls"><div id="date">
{block:Date}
{DayOfWeek} {ShortMonth} {DayOfMonthWithZero}, {Year}, {TimeAgo}{/block:Date}
{block:NoteCount}
{NoteCountWithLabel}
{/block:NoteCount}
</div>
<br>
<div id="info">{block:RebloggedFrom}
reblog: <a href="{ReblogParentURL}" title="{ReblogParentTitle}">
{ReblogParentName}
</a>
origin: <a href="{ReblogRootURL}" title="{ReblogRootTitle}">{ReblogRootName}<a/>{/block:RebloggedFrom}
</div></div>
AWESOME STUFF! I want to thank everyone who commented and helped me through this frustration. I hope my solution to this helps someone else.
You can try using with style z-index:1; and position: absolute;
Something like this:-
#date #info{
position: absolute;
margin-top:0px;
margin-bottom:0px;
margin-right:0px;
margin-left:0px;
z-index: 0;
}
#date #info{
position: relative;
padding-top:0px;
padding-bottom:0px;
padding-right:0px;
padding-left:0px;
z-index: 1;
}
#date #info{
z-index:;}
set post z-index to
#posts{
z-index:1;
}
and info like
#date #info{
position: absolute;
z-index: 2;
}
or set z-index any value greater than 1.
hope it helps......
I want to make a reusable tooltip. The span following the image is not showed, when you go over it the span must appear. But is doesn't work. Does anybody has an idea? The span stay forever in display none.
Html code
<div>
<div>Sharing</div>
<img class="info-tooltip" src="system-help.png" alt="Info">
<span>sdfmhdsjlfhsdljkqhfjkldsqfhljkqdshflsqd</span>
</div>
ccs code
.info-tooltip + span{
display: none;
}
.info-tooltip:hover + span{
display:block;
position:absolute;
width: 105px;
line-height:8px;
top:10px;
left:15px;
background-color: #E9F2FF;
padding:5px;
font-size:10px;
color:#444444;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
z-index:100040000;
}
you should try to surround your image with a div tag:
<div class="info-tooltip"><img src="system-help.png" alt="Info"></div>
This CSS creates a nice effect when applied against a single blockquote within the content its attached to.
However, when there is more than one blockquote, everything works except the generated content.
In other words, the quote symbol is only applied to the first instance of the blockquote.
blockquote{
border:1px solid #ccc;
border-width:1px 0;
margin:20px 0;
padding: 2px 10px;
padding-left:50px;
font-style:italic;
font-size:1.2em;
font-weight:bold;
quotes:'\201C';
clear:both;
}
blockquote:before{
content:open-quote;
font-size:5em;
position:absolute;
color:#ccc;
margin:0 0 0 -45px;
font-family:georgia,serif;
font-style:normal;
font-weight:normal
}
Update: Thanks to Alex Morales, the issue is resolved by adding:
blockquote:after{content:close-quote;position:absolute;visibility:hidden;}
Change your first statement to:
blockquote {
border:1px solid #ccc;
border-width:1px 0;
margin:20px 0;
padding: 2px 10px;
padding-left:50px;
font-style:italic;
font-size:1.2em;
font-weight:bold;
quotes:'\201C''\201C';
}
See jsFiddle demo
You need to apply the close-quote for the :after pseudo-element. This should take care of your issue.
Here's some sample code:
blockquote:after{
content:close-quote;
font-weight:bold;
font-size:5em;
position:absolute;
color:#ccc;
margin:0 0 0 45px;
font-family:georgia,serif;
font-style:normal;
font-weight:normal
}