<div class="message-unread-headline" id="message-unread-headline" style="display: none;">
<span>Unread Messages</span>
</div>
.message-unread-headline {
color: #e91e63;
display: none;
margin: 0 10px -10px;
position: relative;
text-align: center;
&:before {
background: #e91e63;
content: '';
height: 2px;
left: 0;
padding: 0 10px;
position: absolute;
top: 0;
width: 100%;
}
span {
background: transparent;
display: inline-block;
height: 30px;
padding: 0 10px;
position: relative;
top: -11px;
}
}
this is how it looks
I would like that pink line stops as soon as reaches the Unread Message Text
I tried with z-index, but it doesn't work. Don't know the way how to prevent that overlaying
That's how I achieved this:
.message-unread-headline {
margin:0;padding:0 10px;
background:#fff;
display:inline-block;
color: #e91e63;
}
h2{
text-align:right;
position:relative;
z-index:2;
}
h2:after{
content:"";
position:absolute;
top:50%;
left:0;
right:0;
border-top:solid 2px #e91e63;
z-index:-1;
}
<h2>
<span class="message-unread-headline">Unread Messages</span>
</h2>
Check if this could help you.
I have removed width: 100% and added right: 0 to :before
And give background: #fff; to span
.message-unread-headline {
color: #e91e63;
position: relative;
text-align: right;
}
.message-unread-headline:before {
background: #e91e63;
content: '';
height: 2px;
left: 0;
padding: 0 10px;
position: absolute;
top: 0;
right: 0;
}
.message-unread-headline span {
background: #fff;
padding: 0 10px;
position: relative;
top: -11px;
}
<div class="message-unread-headline" id="message-unread-headline" >
<span>Unread Messages</span>
</div>
If your purpose is just strike over a text you can go for strike tag in html
Related
I want to place my nav in 4 different places. Top, Right, Bottom, And middle. But I cant seem to get it to work. And when i for example mean Right, it should still be in the center of top and bottom. I donät know if you understand but i don't really know how to describe it better.
#navOne {
display: block;
text-align: center;
padding-top: 1em;
}
#navTwo {
display: block;
position: relative;
float: right;
margin-top: 43vh;
transform: rotate(90deg);
}
#navThree {
display: block;
position: absolute;
text-align: center;
margin-left: 50%;
transform: translateX(-50%);
margin-top: 86vh;
}
#navFour {
display: block;
position: relative;
transform: rotate(-90deg);
float: left;
margin-top: 42vh;
margin-left: 0.5em;
}
<p id="navOne" class="navs">About me</p>
<p id="navTwo" class="navs">Portfolio</p>
<p id="navThree" class="navs">Skills</p>
<p id="navFour" class="navs">Contact</p>
I add the following CSS and Found that none of your link is perfectly centered! here is the code:
body {
margin: 0;
padding: 0;
}
.box {
height: 50vh;
width: 100vw;
position: absolute;
border: 1px solid red;
top: 0;
box-sizing: border-box;
}
.box.two {
height: 100vh;
width: 50vw;
position: absolute;
border: 1px solid rgb(255, 0, 64);
top: 0;
}
a {
outline: 1px solid green;
}
The image is the outcome of my code which you see. So I'm rewriting the code for you.
body {
margin: 0;
padding: 0;
}
.navs {
text-align: center;
margin: 0;
}
.navtop {
margin-top: 15px;
}
.navright {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%) rotate(90deg);
}
.navbottom {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-bottom: 15px;
}
.navleft {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%) rotate(-90deg);
}
/* below code is for checking every thing is perfectly centered*/
.box {
height: 50vh;
width: 100vw;
position: absolute;
border: 1px solid red;
top: 0;
box-sizing: border-box;
}
.box.two {
height: 100vh;
width: 50vw;
position: absolute;
border: 1px solid rgb(255, 0, 64);
top: 0;
}
a {
outline: 1px solid green;
}
<p id="navOne" class="navs navtop">About me</p>
<p id="navTwo" class="navs navright">Portfolio</p>
<p id="navThree" class="navs navbottom">Skills</p>
<p id="navFour" class="navs navleft">Contact</p>
<!-- below html is for testing purpose -->
<div class="box"></div>
<div class="box two "></div>
I'm trying to achieve headings with border that expands outside of viewport on one side, just like on the picture below.
I've managed to code the one that is aligned to the left and border expands to the left side using code like this:
.wrapper {
width: 1100px;
margin: 0 auto;
box-sizing: border-box;
padding: 1.5rem;
}
h2 {
font-size: 2em; /* 32/16 */
font-weight: 200;
color: #000;
position: relative;
margin: 0 -9600rem;
padding: 1.2rem 9600rem;
background: transparent;
z-index: 0;
display:block;
max-width:660px;
}
h2::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0rem;
right: 9598.5rem;
background: transparent;
border:2px solid #000;
}
h2.right {
font-size: 2em; /* 32/16 */
font-weight: 200;
color: #000;
text-align: right;
position: relative;
margin: 0 -9600rem;
padding: 1.2rem 9600rem;
background: transparent;
z-index: 0;
display:block;
max-width:660px;
}
h2.right::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 9598.5rem;
right: 0rem;
background: transparent;
border:2px solid #000;
}
<section>
<div class="wrapper">
<h2>s každou nehnuteľnosťou možno pohnúť najmä vo váš prospech</h2>
<h2 class="right">s každou nehnuteľnosťou možno pohnúť najmä vo váš prospech</h2>
</div>
</section>
HTML:
CSS:
Problem is with the text that is supposed to be aligned to the right of the wrapper and expand the border to the right. My results so far look like this:
The text still begins on the left edge of the wrapper and is not 660px from the right edge of the wrapper as it is supposed to be. Any idea how to fix this? I've tried playing around with multiple variables but nothing worked.
I have played around a little with it in a fiddle: https://jsfiddle.net/38t1286m/
EDIT: I played with it some more... https://jsfiddle.net/38t1286m/4/ ;)
Basically I have simplified it, so that the HTML looks like this:
<header>
<h2>
This is my LEFT side header
</h2>
</header>
<p>
Here is some text in between...
</p>
<header class="right">
<h2>
This is my RIGHT side header
</h2>
</header>
And with the following css:
p {
width: 660px;
margin-right: auto;
margin-left: auto;
}
h2 {
border: 1px solid black;
max-width: 660px;
margin: 0;
margin-left: auto;
display: inline-block;
padding-top: 20px;
padding-bottom: 20px;
}
header {
position: relative;
max-width: 660px;
padding: 0;
margin: 0;
margin-right: auto;
margin-left: auto;
}
header:before {
content: " ";
width: 660px;
border: 1px solid red;
position: absolute;
left: -660px;
right: -660px;
overflow: hidden;
top: 0;
bottom: 0;
}
header.right {
text-align: right;
}
header.right:before {
left: 660px;
right: 660px;
}
That's at least how I think I would solve it. :)
You could float the second heading to the right, and then clear it using :after
h2.right {
text-align: right;
background: transparent;
z-index: 0;
float: right;
}
h2.right::after {
content: '';
clear: both;
}
codepen
Not sure how to center this hexagon, setting margin: auto; doesn't effect the whole shape. Grateful if anyone could help, thanks in advance.
.hexagon {
position: absolute;
width: 300px;
height: 173.21px;
background-color: #fff;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
margin-left: auto;
margin-right: auto;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 86.60px solid #fff;
position: absolute;
margin-left: auto;
margin-right: auto;
}
.hexagon:after {
position: absolute;
top: 100%;
width: 0;
border-top: 86.60px solid #fff;
}
margin:auto won't work if you have absolutely positioned divs so to center the hexagon, you have to add top:50%, left:50% and margin: -86.6px 0 0 -150px. The -86.6px is half the height of your hexagon and -150px is the half of the width. Also you have to make its parent position relative with a height of 100%.
HTML
<div class="hexagon"></div>
CSS
html,body{
background-color:#333;
height: 100%;
width: 100%;
position:relative;
}
.hexagon {
top: 50%;
left: 50%;
margin: -86.6px 0 0 -150px ;
}
Fiddle
If you just mean centering horizontally, you could do this: http://codepen.io/pageaffairs/pen/fxoHp
.hexagon {left: 0; right: 0; margin: auto;}
You can put it into another div which has margin:auto. see code here http://jsfiddle.net/oswxj9c5/
html:
<div class="parent">
<article>
<div class="hexagon">
</div>
</article>
</div>
css:
.parent {
position:relative;
background:blue;
width:900px;
height:500px;
margin:auto;
}
article {
margin:auto;
width:300px;
height:300px;
background:transparent;
}
.hexagon {
position: absolute;
width: 300px;
height: 173.21px;
background-color: red;
top:150px;
margin:auto;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
margin-left: auto;
margin-right: auto;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 86.60px solid red;
position: absolute;
margin-left: auto;
margin-right: auto;
}
.hexagon:after {
position: absolute;
top: 100%;
width: 0;
border-top: 86.60px solid red;
}
I am on the process in learning css.
I am trying to display the image in the middle of the screen upon user hover their mouse in the gallery.
however, the image hover within the image itself.
this is my code.
jsfiddle.net/y9w5ym72/1/
body {
margin: 0;
padding: 0;
background: #EEE;
font: 10px/13px 'Lucida Sans',sans-serif;
}
.wrap {
overflow: hidden;
margin: 50px;
}
.box {
float: left;
position: relative;
width: 25%;
padding-bottom: 25%;
color: #FFF;
}
.boxInner {
position: absolute;
left: 30px;
right: 30px;
top: 30px;
bottom: 30px;
overflow: hidden;
background: #66F;
}
.boxInner img {
width: 100%;
}
.thumbnail:hover img{
border: 1px solid transparent;
}
.thumbnail span{
position: absolute;
padding: 5px;
left: -1000px;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{
border-width: 0;
width:70%;
height: auto;
padding: 2px;
}
.thumbnail:hover span{
visibility: visible;
top: 0;
left: 230px;
z-index: 50;
}
First point is you need to hide the first image. So that only you can see the second one. Second point is no need position:absolute, left:-1000px; styles for the inside span.
.thumbnail:hover > img{
border: 1px solid transparent;
display:none;
}
.thumbnail span{
/*position: absolute;
left: -1000px;*/
padding: 5px;
visibility: hidden;
color: black;
text-decoration: none;
}
DEMO
you have to use position :absolute to achieve that fiddle
.box:hover{position:absolute; top:38%; left:38%; z-index:200;}
i create image map with css but don't work.
i have a image in background and i want to create a image map for background picture .but when my mouse hover an link background image not change.
this is my html code.
<section id="centersectioncontact" class="colortext">
<ul id="cantact">
<li id="linkin">Link in </li>
<li id="twiter"> twiter</li>
</ul>
</section>
and this is my css code.
#centersectioncontact {
position: absolute;
top: 14%;
left: 31%;
width: 426px;
height: 426px;
bottom: 25%;
right: 25%;
z-index: 2;
}
ul#cantact
{
list-style:none;
background:url(../Images/contact.png) no-repeat 0 0 ;
position:relative;
width:426px;
height:420px;
margin:0;
padding:0;
opacity:0.5;
}
ul#cantact li{
position: absolute;
border: 1px solid #000;
}
}
ul#cantact a{
display: block;
height: 100%;
text-indent: -9000px;
}
#linkin {
width: 215px;
height: 140px;
top: 0px;
left: 0px;
}
#twiter
{
width: 215px;
height: 140px;
top: 0px;
left: 215px;
}
ul#cantact li a:hover {
background:url(../Images/contact.png) no-repeat 0 0;
}
ul#cantact li#linkin a:hover {
background-position: 0 -426px;
}
ul#cantact li#twiter a:hover{
background-position: 0 -426px;}
.colortext{
margin-top: 7px;
margin-left: 16px;
top: 2%;
left: 2%;
color: #FFFFFF;
text-align: left;
font-size: xx-large;
z-index: 10000000;
}
there is a couple of contradictions in your css code. One of these and an extra '}' cause the problem:
from
ul#cantact li{
position: absolute;
border: 1px solid #000;
}
}
delete the extra "}"
and you should remove also:
ul#cantact li#linkin a:hover {
background-position: 0 -426px;
}
ul#cantact li#twiter a:hover{
background-position: 0 -426px;
}
In the code you have already defined background-position as 0 0 in
ul#cantact li a:hover {
background:url(../Images/contact.png) no-repeat 0 0;
}
And besides, with the -426px horizontal setting the img won't reveal on the screen.