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
}
Related
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.
Want to achieve
I have a header with 0.8 transparency and a button with a border of 0.8 in the same color.
The button need to be aligned so that the center is equal to the bottom of the header.
Problem
When you place a 0.8 transparency border on a header that is the same color and also 0.8 transparency it is going to be darker.
possible solution
https://jsfiddle.net/extranion/fnz1ccf0/2/
* {
margin:0; padding:0;
}
body {
background-image: url("http://gallery.photo.net/photo/8551440-md.jpg");
}
button {
background:none; border:none;
}
header {
height:100px;
background-color: rgba(41, 52, 61, .8);
}
.contact {
float:right;
height:100px;
width:200px;
position:relative;
}
.wrap-btn {
position:absolute;
top:100%;
left:50px;
height:30px;
width:100px;
border-radius: 0 0 20px 20px;
background-color: rgba(41, 52, 61, .8);
}
button {
position:absolute;
bottom:10px;
left:10px;
width:80px;
height:40px;
background:orange;
border-radius:15px;
}
<body>
<header>
<div class="contact">
lorem ipsum
<div class="wrap-btn">
<button>inloggen</button>
</div>
</div>
</header>
</body>
Question
Is there a better solution where only the bottom part have a border?
not sure if its a better solution, but its a different approach.
Working with after elements and gradients:
button {
top: 100%;
position: absolute;
width: 90px;
margin-top:-28px;
height:56px;
border-radius:0px 0px 14px 14px;
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 49%,rgba(41, 52, 61, .8) 50%,rgba(41, 52, 61, .8) 100%);
}
button:after{
content:'login';
position:absolute;
left:10px;
top:10px;
width:70px;
height:15px;
padding:10px 0px;
background:orange;
border-radius:10px;
}
https://jsfiddle.net/dm8654ga/1/
Using gradients could be a good way, using after elements also - the only thing I don not like is that I used the content attribute for the text -> makes it difficult for translations etc.
PS: If the border would not be rounded, the whole thing would be lot easier (workin with boxshadows..)
I tried looking for a solution to this problem here but it seems that the closest solution I "MAY" have is this. However this is for tables. Since I am still quite new to this, I'm not sure how to apply this solution to my problem. Or if this is even the right solution for this.
My issue is that the border(bottom) of my blog post titles disappear when the nav bar sticks. The particular border-bottom I'm referring to is the dashed line under the blog-post date, share, and like button. I would've liked to add a screenshot but since I'm new here, SO won't let me yet.
This issue only happens on iPad I believe. So I'm not sure if my iPad (1st gen) is the problem or not. My blog is bizinformant.tumblr.com
Many thanks!
Here's the following html css jQuery:
/*blog post box*/
#content #posts {
width:800px;
margin:20px auto 50px;
text-align:center;
background-color:#f7f3ef;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
padding:10px 20px 24px;
}
/*this border-bottom of this element disappears when nav bar sticks*/
#permy {
font-style:normal;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:1.3em;
text-align:left;
margin-bottom:15px;
padding-bottom:8px;
border-bottom:1px dashed #000;
}
#mainnav {
list-style-type: none;
width:100%;
z-index:3;
text-align:center;
margin:0;
}
#mainnav ul {
display:inline-block;
margin-top:0px;
margin-bottom:0px;
list-style-type: none;
padding: 0;
z-index:3;
}
#mainnav li {
display:inline;
text-align:center;
margin:0px;
z-index:3;
}
/*stickydiv*/
#stickyalias {
display: none;
height: 10px;
}
$(function(){
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('#mainnav').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop ) {
$('#mainnav').css({position: 'fixed', top: '0px', left: '0px'});
$('#stickyalias').css('display', 'block');
} else {
$('#mainnav').css({position: 'static', top: '0px'});
$('#stickyalias').css('display', 'none');
}
});
});
{block:Text}
{block:Title}
<h1 class="title">
{Title}
</h1>
<div id="permy">
<a href="{Permalink}" class="date">
{block:Date}{ShortMonth} {DayOfMonth}, {ShortYear} {/block:Date}
</a>
{block:NoteCount}
<span id="dashy">-</span>
<a href="{Permalink}#notes" class="notes">
<span class="perm">{NoteCountWithLabel}
</a>
{/block:NoteCount}
<div class="my-like" title="Like">{LikeButton color="black"}</div>
{block:HasTags}
<a href="{ReblogURL}" class="reb">
<img src="http://static.tumblr.com/tnbktxc/HWun9rla7/reblog.png" class="reblogbutton">
</a>
{/block:HasTags}
</div>
{/block:Title}
<div class="text">{Body}</div>
{block:More}
<div class='rmlink'>
Read more
</div>
{/block:More}
{/block:Text}<!--textpost-->
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......
although my questions has been answered lots of times before, but all the proposed solution I have tried and nothing seems to work.
what am trying to do is a big div that contains li tags; the li tags will also contain anchor tag, 2 divs and p tag.
to understand the big picture.. am trying to make a posting wall (activity-board), the wall will have posts looks like a bubble (div post) and the bubble will point (post-arrow) to a thumbnail image (a thumb3), to make the bubble style I made the post div absolute positioned with z-index less than the arrow-post.
and here is my css:
.activity-board {
background:#fff;
width:600px;
min-height:652px;
height:auto;
border:solid 2px #e7d28d;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-webkit-box-shadow: inset 0px 0px 0px 3px rgba(255, 255, 255, 1);
box-shadow: inset 0px 0px 0px 3px rgba(255, 255, 255, 1);
float:left;
margin-left:20px;
}
.post-body{
position:relative;
display:block;
list-style-type:none;
width:600px;
height:auto;
background:#f9f9f9;
border-bottom:1px solid #CBCBCB;
border-radius:4px 4px 0 0;
-moz-border-radius:4px 4px 0 0;
-webkit-border-radius:4px 4px 0 0;
background: #fff;
float:left;
overflow:visible;
clear:both;
z-index:9;
}
.post{
position:absolute;
width:500px;
line-height:20px;
height:auto;
background:#FFF;
display:block;
margin-top:22.5px;
margin-left:77px;
text-align:left;
float:left;
z-index:1;
}
.post-arrow{
position:relative;
margin-top:32px;
margin-left:6px;
width:12px;
height:18px;
background:url(images/post-arrow.png);
float:left;
z-index:5;
}
.post p{ color:#025373; padding:8px; word-wrap:break-word; }
a.thumb-3 {
margin-top:18px;
display:block;
margin-left:18px;
width:46px;
height:46px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
z-index:10;
float:left;
}
a.thumb-3 img{
padding:0;
margin:0 auto;
width:46px;
height:46px;
float:left;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
here is my html:
<ul>
<li class="post-body">
<a class="thumb-3"><img src="images/Alsheikh Center (177).jpg" /></a>
<div class="post-arrow"></div>
<div class="post">
<p>
Hi there!
</p>
</div>
</li>
</ul>
http://jsfiddle.net/r9YpX/
Everything worked fine but the li tag does not expand to the content.. it only expands if I change the position of the post div to relative not absolute, which I cant change because it must be absolutely positioned under the arrow image to give it the bubble look.
any help would be appreciated.
Thanks.
ok Thanks guys i figuered it out.. I made position:relative and changed margin for post div and it worked! I thought I did this but perhaps I did something wrong that make it not work