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......
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;
}
is there a better way to create this style of "underline" through CSS, other than creating a background image for it?
To be clear, I'm only interested in the "duplicated line" effect, a thicker and shorter line sitting directly atop a thinner and longer line of a different color. Thanks!
You can use pseudo elements here, i.e. :before and :after. Here, what am doing is, using an h1 element which am displaying it as inline-block. Later, we need to use CSS positioning to set both the bottom borders in place, as the borders are smaller than your element.
Later, again by using CSS positioning, we position the small border on top of the bigger one. Note that am using left: 50%; and transform: translateX(-50%) to position the border in horizontally center.
Make sure you don't miss out the z-index as it is important to use here, else the other border will render on top of the smaller one.
#import url('https://fonts.googleapis.com/css?family=Varela+Round');
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
h1 {
position: relative;
display: inline-block;
font-family: Varela Round;
font-size: 24px;
text-transform: uppercase;
font-weight: bold;
color: #401f1c;
margin: 40px; /* not required, only for demo purpose */
}
h1 span {
color: #efcc4c;
}
h1:before,
h1:after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
}
h1:before {
bottom: -11px;
width: 40px;
border-bottom: 3px solid #efcc4c;
z-index: 1;
}
h1:after {
width: 80%;
border-bottom: 1px solid #ddd;
bottom: -10px;
}
<h1>Our <span>Services</span></h1>
Edit: Refactored my code and making the demo more precisee.
Try this
HTML
<div class="text">
<span>our</span>
Services
</div>
CSS
.text{
font-weight:600;
font-size:25px;
color:red;
position: relative;
display:inline-block;
}
.text::after,
.text::before{
content:"";
position: absolute;
left: 0;
right: 0;
bottom: -5px;
margin:auto;
border-radius:5px;
height:0px;
}
.text::before{
width:100%;
border:1px solid #ccc;
}
.text::after{
width:50%;
border:2px solid red;
bottom:-6px;
}
.text span{
color:#000000;
}
Link for reference
hope this helps..
I always create "divider", like:
<div class='divider'>
<div class='divi-1'></div>
<div class='divi-2'></div>
<div class='divi-3'></div>
</div>
CSS:
.divider{
padding-top:15px; //or other
text-align:center;
display:block; // or column in bootstrap like col-md-12
}
.divider .divi-1{
display:inline-block;
height:2px; //or other
width:50px; // or other
background:#e5e5e5;
.
.divider .divi-2{
display:inline-block;
height:2px;
width:50px;
background:#000000;
}
.divider .divi-1{
display:inline-block;
height:2px; //or other
width:50px; // or other
background:#e5e5e5;
}
And that's it. You can also use vertical-align for inline-block so You have some more options to move lines verticaly ... and also it's in the flow so You know what size it have and can be sure that other elements won't overlap it.
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
I have some text on a page, when someone mouses over it, it will highlight (using outline) several selected images on the same page. I want this to be one way, so mousing over the text highlights the images, but I want mousing over the images to have no effect, right now it also highlights everything. Is this possible? Note: each image has an id and a class (jquery draggable) already attached to it.
HTML:
<div class="container">
<div class="containerLeft">alignments</div>
<div><img src="http://www.cool-smileys.com/images/out11.jpg" id="position7" class="ui-widget-content" /></div>
<div><img src="http://www.cool-smileys.com/images/out12.jpg" id="position8" class="ui-widget-content" /></div>
<div><img src="http://www.cool-smileys.com/images/out13.jpg" id="position9" class="ui-widget-content" /></div>
<div> <img src="http://www.cool-smileys.com/images/out14.jpg" id="position12" class="ui-widget-content" /> </div>
</div>
CSS:
/* Normal Styles */
.containerLeft {
color:#333;
width:100px;
}
.containerLeft:hover {
width:100px;
}
/* Hover Styles */
.container:hover .containerLeft {
background-color: none;
}
.container:hover #position12 {
outline:2px solid #CFF;
}
.container:hover #position7 {
outline:2px solid #CFF;
}
.container:hover #position8 {
outline:2px solid #CFF;
}
.container:hover #position9 {
outline:2px solid #CFF;
}
#position7{
position:absolute;
margin: 0;
padding: 0;
border:none;
left: 13em;
top:9em;
z-index:17;
}
#position8{
position:absolute;
margin: 0;
padding: 0;
border:none;
left: 4em;
top:15em;
z-index:2;
}
#position9{
position:absolute;
margin: 0;
padding: 0;
border:none;
left: 7em;
top:5em;
z-index:20;
}
#position12{
position:absolute;
margin: 0;
padding: 0;
border:none;
left: 24em;
top:10em;
z-index:-14;
}
Right now everything is in css, but maybe there is a javascript solution?
The jsfiddle: http://jsfiddle.net/tMzMN/8/
If you want to use JS/Jquery you could achieve what you want this way:
$(".containerLeft").hover(function() {
$(".ui-widget-content").addClass("hover_class");
}, function() {
$(".ui-widget-content").removeClass("hover_class")
});
Then just replace all 4 of your CSS selectors that look like this:
.container:hover #position9 {
outline:2px solid #CFF;
}
...
with this:
.hover_class {
outline:2px solid #CFF;
}
Here is a fiddle of it in action: http://jsfiddle.net/tMzMN/9/
Also, and don't quote me on this, using the Jquery method above will probably have a greater level of backwards compatibility with older browsers as opposed to any CSS tricks you find. I could be wrong and there may very well be something that plays nice with IE<9 but I'm not sure...
I'm having problems because when i'm positioning text into a message, appears an empty space below.
This is the image:
http://img713.imageshack.us/img713/6513/lllmm.jpg
And this is the CSS code i'm using. I don't know where the mistake is.
.thumbnail2{
position:relative;
width:100%;
margin:0 auto;
}
.thumbnail2 img{
width:100%;
height:auto;
}
.thumbnail2 h1{
display:block;
position:relative;
top:-90px;
left: 0;
padding-left:5px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
}
.thumbnail2 h1 span{
font-size:34px;
letter-spacing: -1px;
line-height:40px;
}
.thumbnail2 h1 a{
color:#FFF;
}
This is the HTML / PHP (i'm using it in Wordpress):
<div class="post">
<div class="thumbnail2">
<?php the_post_thumbnail('grandote'); ?>
<h1><span><?php the_title(); ?></span></h1>
</div>
<div class="excerpt2"><p><?php echo get_excerpt(280); ?></p></div>
<div class="clear"></div>
</div>
From what I've gathered what you want is to display the text on top of the thumbnail.
You should give .thumbnail2 position: relative and .thumbnail2 h1 position: absolute. This would do the trick, afterwards you'll just have to locate the h1 tag in the right place, this time when his position is relative to his parent div element.
Try adding a negative margin to your relatively positioned element:
.thumbnail2 h1{
display:block;
position:relative;
top:-90px;
left: 0;
padding-left:5px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
margin-bottom: -90px; // This should fix it
}