My problem is that the :after element is on the text in an element. Here is an example:
On CodePen
I want the :after to be below the text.
How can I fix this?
body {
text-align: center;
}
a {
display: inline-block;
text-decoration: none;
padding: 10px;
background: #222;
color: #f3f3f3;
font-size: 2em;
margin: 20px auto;
position: relative;
}
a:after {
content: "";
width: 100%;
height: 50%;
background: #00A3A3;
position: absolute;
left: 0;
top: 0;
}
Home page
Just change top:0 to top:50px; in after css. By keeping top:0
The top property sets the top edge of an element to a unit above/below the top edge of its nearest positioned ancestor.
you are making the element to stay on the top by keeping it 0
body {
text-align: center;
}
a {
display: inline-block;
text-decoration: none;
padding: 10px;
background: #222;
color: #f3f3f3;
font-size: 2em;
margin: 20px auto;
position: relative;
}
a:after {
content: "";
width: 100%;
height: 50%;
background: #00A3A3;
position: absolute;
left: 0;
top: 50px;
}
Home page
Use top: 100% on the :after pseudo element to place it exactly below the main element.
body {
text-align: center;
}
a {
display: inline-block;
text-decoration: none;
padding: 10px;
background: #222;
color: #f3f3f3;
font-size: 2em;
margin: 20px auto;
position: relative;
}
a:after {
content: "";
width: 100%;
height: 50%;
background: #00A3A3;
position: absolute;
left: 0;
top: 100%;
}
Home page
Related
Only Firefox seems to ignore the bottom: 0; declaration. Even when I try to set the height of the h1:before element to 100%, it won't change anything in Firefox.
Is there any explanation for this behaviour and is there any workaround out there?
Chrome screenshot
Firefox screenshot
.title {
position: absolute;
}
.title h1 {
position: relative;
display: inline;
color: #fff;
line-height: 0.8;
white-space: pre-wrap;
border-top: 0.3em solid #0089C0;
border-bottom: 0.1em solid #0089C0;
background-color: #0089C0;
}
.title h1:before {
content: "";
background-color: red;
display: inline-block;
width: 0.3em;
height: 100%;
padding-top: 0.1em;
position: absolute;
left: -0.3em;
top: 0;
}
.title h1:after {
background-color: #0089C0;
}
.title h1 span {
position: relative;
z-index: 1;
}
<div class="title">
<h1><span>Almost before <br>we knew it, we had <br>left the ground. </span></h1>
</div>
Set the .title h1 to display: inline-block; like this:
.title h1 {
position: relative;
display: inline-block;
}
Or...set the position to fixed like this:
.title h1 {
position: fixed;
display: inline;
}
I want to get some practice with pseudo elements in combination with transitions and animations. But I have one little problem.
Have a look at this:
HTML:
<nav id="navBar" class="clearfix">
Test
</nav>
CSS:
.clearfix:after {
content: ".";
clear: both;
display: block;
visibility: hidden;
height: 0px;
}
#navBar {
width: 100%;
padding: 30px;
border-top: 1px solid #808080;
border-bottom: 1px solid #808080;
box-sizing: border-box;
}
#navBar a {
text-decoration: none;
display: inline-block;
}
a.nav {
padding: 10px;
background-color: #7492b6;
color: #fff;
float: left;
font-weight: bold;
font-size: 1em;
min-width: 150px;
text-align: center;
}
a.nav::before {
content: "";
display: block;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 3px;
background-color: #fff;
padding: 0;
}
a.nav::after {
content: "";
display: block;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 3px;
background-color: #fff;
padding: 0;
}
http://codepen.io/anon/pen/rVbeLa
the two red lines are my pseudo elements. But I want them to have width 100% but it's not working in combination with the padding.
It should look like this but then I have no padding :/
http://codepen.io/anon/pen/RPOaRj
I have tested it on Firefox 39 and Chrome 43, both on OSX yosemite. Result is the same on both.
Any Idea how this problem could be solved?
Cheers
You can fix that by doing this.
Add position:relative; to the <a>:
#navBar a {
text-decoration: none;
display: inline-block;
position:relative;
}
Then, change your :before and :after to position:absolute; and change their position from top and bottom:
.navGroup1 a.nav::before {
content: "";
display: block;
position: absolute;
top: 10px;
left: 0;
width:100%;
height: 3px;
background-color: red;
}
.navGroup1 a.nav::after {
content: "";
display: block;
position: absolute;
bottom:10px;
left: 0;
width: 100%;
height: 3px;
background-color: red;
}
Updated Codepen
I have a wired problem, i have a regular nav with ul and li and i am trying to make after one of the li red box with number inside, but the problem is that the number from some reason going out of the box, what is the problem?
This is the code:
#mainHeader .rightNav {
float: right;
li {
position: relative;
}
img {
vertical-align: middle;
}
li:nth-child(4)::after {
content:attr(data-value);
color:#fff;
border-radius: 2px;
background-color: #d94a3e;
text-align: center;
width: 18px;
height: 18px;
position: absolute;
top:0;
right:0;
}
}
http://plnkr.co/edit/ys7Wy3EJPlA4VlXDt6hE?p=preview
There was wrong on your line height.
Should have : line-height: normal;
Add that to #mainHeader .rightNav li:nth-child(4)::after
Update your css to this:
#mainHeader .rightNav li:nth-child(4)::after {
content: attr(data-value);
color: #fff;
border-radius: 2px;
background-color: #d94a3e;
text-align: center;
width: 18px;
height: 18px;
position: absolute;
top: 0;
right: 0;
line-height: normal;
}
Sample link
Replace your styles with this:)
#mainHeader .rightNav li:nth-child(4)::after {
content: attr(data-value);
color: #fff;
border-radius: 2px;
background-color: #d94a3e;
text-align: center;
position: relative;
top: -10px;
right: 0;
padding: 1px 4px;
}
I am building my first website and I am having some hidden speech bubbles appear when you hover over image like this demo
However I don't know how to affect the positioning measurements of the speech bubble, how could I make it so the speech bubble is aligned in the center of the box bellow it?
Any help would be much appreciated!
HTML:
<div id="container">Hover over me!<span>Hidden message here.</span></div>
CSS:
#container {
background-color: #FF0;
margin: 100px;
float: left;
height: 200px;
width: 200px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
a.hoverbubble {
position: relative;
text-decoration: none;
}
a.hoverbubble span {display: none;
}
a.hoverbubble:hover span {
display: block;
position: absolute;
padding: .5em;
content: attr(title);
min-width: px;
text-align: center;
width: auto;
height: auto;
white-space: nowrap;
top: -40px;
background: rgba(0,0,0,.8);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: #fff;
font-size: 0.86em;
font-family: Arial, Helvetica, sans-serif;
}
a.hoverbubble:hover span:after {
position: absolute;
display: block;
content: "";
border-color: rgba(0,0,0,.8) transparent transparent transparent;
border-style: solid;
border-width: 10px;
height: 0;
width: 0;
position: absolute;
bottom: -20px;
left: 1em;
}
Set your container div to position:relative
remove position:relative from your a tag
Changing position:relative from your a tag to your div container will allow your absolutely positioned span to align relative to the container rather than the a tag.
set your span to position:absolute
align your span by editing the values top:40%; left: 11%;
you can now position your span element relative to your container.
http://jsfiddle.net/e4q7K/18/
On the assumption that the hidden message is to be centered on the link..
JSFiddle Demo
HTML
<div id="container">
<a href="#" class="hoverbubble">Hover over me!
<span>Hidden message here.</span>
</a>
</div>
CSS
#container {
background-color: #FF0;
margin: 100px;
float: left;
height: 200px;
width: 200px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
a.hoverbubble {
position: relative;
text-decoration: none;
background-color: lightblue;
}
a.hoverbubble span {display: none;}
a.hoverbubble:hover span {
display: block;
position: absolute;
padding: .5em;
text-align: center;
width: auto;
height: auto;
white-space: nowrap;
top: -40px;
left:50%; /* push the block halfway over to the right */
-webkit-transform:translate(-50%, 0); /* move it back left half it's own width */
background: rgba(0,0,0,.8);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: #fff;
font-size: 0.86em;
font-family: Arial, Helvetica, sans-serif;
}
a.hoverbubble:hover span:after {
position: absolute;
display: block;
content: "";
border-color: rgba(0,0,0,.8) transparent transparent transparent;
border-style: solid;
border-width: 10px;
height: 0;
width: 0;
position: absolute;
bottom: -20px;
left: 1em;
}
(Apologies in advance if this is answered elsewhere. I looked around and couldn't find anything that seemed to apply.)
I have a layout with absolute and relative positioning for divs to sit in their appropriate positions, which almost works.
http://jsfiddle.net/dex3703/TZzKN/
The #centercontainer (red) is intended to let #mainsection (orange) sit inside all the other content. I have absolute and relative positioning that I thought should work, but I have these problems:
#mainsection's bottom extends beyond #centercontainer by about 20px.
bottom, left, right, top don't have an effect. Using bottom: 20px to lift the bottom up doesn't work.
If I don't have height: 100% on #mainsection--which I sense is wrong--it and the divs inside have no height! Only a little sliver of #contentsection is visible at the top of #mainsection.
I'm only interested in this working in Chrome and IE9 as well. Hope that makes things easier.
I'm sure this is some noob problem so am grateful in advance. Thanks.
When you set width and height for #mainsection to be 100%, you are telling it to be the same width and height as #centercontainer, excluding padding. There are 60px on each side because the padding of #centercontainer is 60px left and right.
The reason #mainsection extends below #centercontainer is that #breadcrumbcontainer is pushing it down by 40px (the height of #breadcrumbcontainer). It only extends down 20px because there is also 20px bottom padding for #mainsection.
If you set the bottom padding of #centercontainer to the height of #breadcrumbcontainer (INCLUDING #breadcrumbcontainer's top and bottom margins), that should fix the problem. It's probably not the most elegant way to fix it. but it should work.
I have made some changes to your CSS. It's still no nice stylesheet, but the design is not broken anymore.
#charset "utf-8";
/*
HTML4 layout
using absolute positioning to get layout to work without HTML5/CSS flexbox
colors:
#1E242D - html frame bg
#F3F3F3 - left nav
#FFFFFF - main content, inner menu
#267EB9 - drawer bg
#DBDBDB - nav and left nav border
#4F9DD7 - selected item blue
#FFFFFF - white text
#4A4A4A - darkest text, dividers
#767676 - middle dark text
#C1C1C1 - light text
*/
html {
font-size: 62.5%;
height: 100%;
background: White;
margin: 0;
}
body
{
font-size: 1.2em;
font-family: "Segoe UI";
height: 100%;
margin: 0;
}
p
{
margin: 0;
}
/* from html5boilerplate */
nav ul, nav ol
{
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
}
#layoutdiv
{
z-index: 100;
height: 100%;
position: relative;
}
#maindiv
{
margin: 10px 60px;
position: absolute;
top: 60px;
}
header
{
position: absolute; /* change to absolute positioning */
width: 100%;
top: 0;
height: 60px;
}
header p
{
color: #FFFFFF;
}
header span
{
vertical-align: middle;
}
#logodiv
{
width: 300px;
display: inline-block;
}
#notifypanel
{
width: 40px;
position: fixed;
left: 0;
top: 110px;
bottom: 70px;
background-color: LemonChiffon;
}
#notifypanel img
{
width: 24px;
height: 24px;
}
.left
{
float: left;
}
.right
{
float: right;
}
ul
{
list-style-type:none;
list-style: none;
margin: 0;
-webkit-padding-start: 0;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
}
li
{
display: inline-block; /*need inline-block or height==0! */
cursor: pointer;
vertical-align: middle;
text-align:center;
}
#topnav
{
/* position: absolute;*/
/*width: 100%;*/
/* top: 55px; with absolute positioning, move its top to the header's bottom */
display: inline-block;
vertical-align: top;
}
#topnav ul
{
/*margin-left: 15px;*/
/*height: 100%;*/
}
#topnav li
{
margin-left: 15px;
padding: 5px 10px;
font-weight: bold;
color: #767676;
height: 100%;
/*line-height: 5em; for vertical alignment */
}
#topnav li:hover
{
color: #1E242D;
background-color: #F3F3F3;
}
#topnav .selected
{
background-color: #4F9DD7;
color: White;
}
#centercontainer
{
position: absolute;
overflow:hidden;
top: 60px;
bottom: 60px;
padding: 0 60px 20px 60px;
left: 0;
right: 0;
border: 1px solid red;
}
#breadcrumbcontainer
{
top: 0;
height: 40px;
width: 100%;
margin: 0 0 10px 0;
font-family: Segoe UI Light;
font-size: 3.6em;
line-height: 0.8em;
}
#breadcrumb
{
display: inline-block;
}
#viewcontrols
{
display: inline-block;
width: 320px;
text-align: right;
}
#mainsection
{
width: 100%;
height: auto; /* mainseciton won't display unless 100%, but height is off, doesn't quite sit in containing div */
position: relative;
top:30px;
background-color: Aqua;
border: 2px solid orange;
}
#contentsection
{
position: absolute;
left: 220px;
bottom: 0;
top: 0;
padding: 5px;
box-sizing: border-box; /* makes padding, margins behave like XAML */
overflow-x: auto;
overflow-y: auto;
background-color: AliceBlue; /* remove later */
display: inline-block;
}
#leftnav
{
width: 200px;
/*position: absolute;*/
left: 0;
bottom: 0;
top: 0;
background: #F3F3F3;
overflow-y: auto;
display: inline-block;
}
#leftnav li
{
display: block;
text-align: left;
padding: 7px 0 7px 20px;
border-bottom: 1px solid #DBDBDB;
}
#leftnav img
{
display: inline-block;
vertical-align: middle;
width: 24px;
height: 22px;
}
#leftnav p
{
display: inline-block;
vertical-align: middle;
margin: 0 0 0 10px;
}
#leftnav .selected
{
background-color: #4F9DD7;
}
#leftnav .selected:hover
{
background-color: #4387B7;
}
#leftnav li:hover
{
background-color: #FdFdFd;
}
footer
{
background: #267EB9;
height: 60px;
position: absolute;
bottom: 0;
width: 100%;
line-height: 1em; /* vertically centers header content .. see http://phrogz.net/CSS/vertical-align/index.html */
text-align: center; /* centers the center button div */
}
footer img
{
margin-right: 15px;
height: 24px;
width: 24px;
}
footer p
{
display: inline-block;
margin: 0;
vertical-align: super;
color: #FFFFFF;
font-size: 0.8em;
}
.footerleft
{
margin-left: 20px;
position: relative;
top: 17px;
}
.footerright
{
margin-right: 10px;
position: relative;
top: 17px;
}
.footercenter
{
display: inline-block;
position: relative;
top: 13px;
}
.footercenter div
{
display: inline-block;
margin-right: 20px;
}
.footercenter p
{
display: block;
}
.footercenter img
{
margin: 0;
}