So Im trying to do a simple header where I have the text aligned central with a 2px border running underneath this.
The code I have works and should work perfectly on every other browser except firefox which is aligning the border right of the page as if the beginning of the border is aligned in the center. If I remove the text align center the border is placed perfectly but the text is aligned to the left obviously. Why is firefox doing this?
CSS:
.my-title {
position: relative;
margin-bottom: 70px;
padding-bottom: 15px;
}
.my-title:after {
position: absolute;
bottom: 0;
height: 2px;
background-color: #ffd500;
content: "";
width: 100%;
}
.align-center {
text-align: center;
}
Html:
<div class="row">
<div class="col-xs-12">
<hgroup class="my-title align-center">
<h1>Header</h1>
<h2>Sub-Header</h2>
</hgroup>
</div>
</div>
since your pseudo element is in position:absolute; it has no width in the flow of your content and follows text-align:center; set on parent.( as absolute it has, in the flow of content, 0 for heigh and width).
3 possibilities:
add the rule : left:0; no matter what text-align on parent will be, it will be drawn from left coordonates.
add the rule : display:block; so it behaves like a block element and ill ignore the text-align, it will do a break line and will be drawn from left or right (follows the direction/dir of document).
keep it in the flow:
.my-title {
position: relative;
margin-bottom: 70px;
padding-bottom: 15px;
}
.my-title:after {
height: 2px;
background-color: #ffd500;
content: "";
width:100%;
display:inline-block;
vertical-align:bottom;
}
.align-center {
text-align: center;
}
Using property left solved the problem:
.my-title:after {
left: 0;
}
Demo
Try this:
#-moz-document url-prefix()
{
.my-title
{
position: relative;
margin-bottom: 70px;
padding-bottom: 15px;
}
.my-title:after
{
position: absolute;
bottom: 0;
height: 2px;
background-color: #ffd500;
content: "";
width: 100%;
}
.align-center
{
text-align: center;
}
}
Related
I am trying to add a pseudo before and after vertical line to a textfield for styling purposes. These elements need to be flush to the text -20px left and -20px right.
This works fine when the text is on one line as an inline-block, but as soon as the text spans multiple lines the width expands to that of the parent and the pseudo elements are no longer just 20px from the text.
Is there a way in which I can accomplish this using CSS?
.container {
width: 500px;
background-color: red;
text-align: center;
margin-left: 40px;
}
h2 {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
background-color: blue;
color: white;
}
span {
position: relative;
background-color: green;
}
h2::before,
h2::after {
content: '';
position: absolute;
top: 0;
width: 4px;
height: 20px;
background: black;
}
h2::before {
left: -20px;
}
h2::after {
right: -20px;
}
<!-- Single line example works as the black bars are 20px away from the start/end of text-->
<div class="container">
<h2><span>This is a title</span></h2>
</div>
<br> <br>
<!-- double line doesn't work because the h2 is now the full width of the container -->
<div class="container">
<h2><span>This is loooonnggggggggggggggggggggggeeeeerrr</span></h2>
</div>
Edit: Here is a working version using tables, but if anyone has a better solution I'd love to hear it: https://codepen.io/anon/pen/MqveLQ
So from what i can see is the issue here is where you are applying the borders with before and after. You need to alter where you apply your borders. Remove them from the h2, and add in a new html element that wraps the h2 and apply there.
eg:
<div class="container">
<div class="headerwrap">
<h2><span>This is loooonnggggggggggggggggggggggeeeeerrr</span></h2>
</div>
</div>
<div class="container">
<div class="headerwrap">
<h2><span>This is a title</span></h2>
</div>
</div>
CSS
.headerwrap::before,
.headerwrap::after {
content: '';
position: absolute;
top: 0px;
bottom:0;
margin:auto;
width: 4px;
height: 20px;
background: black;
}
.headerwrap::before {
left: 10px;
}
.headerwrap::after {
right: 10px;
}
Here is a working example: https://codepen.io/FEARtheMoose/pen/VGbJjO?editors=1100#0
Edit: altered example after comments - https://codepen.io/FEARtheMoose/pen/VGbJjO
I have moved your code to this fiddle: https://jsfiddle.net/n2Lr6xy5/13/ and removed position: absolute along with stripping out some of the other styles as they seemed unnecessary and I think I have created what you're after.
Here is the updated CSS:
.container {
width: 500px;
background-color: red;
text-align: center;
margin-left: 40px;
}
h2{
display: inline-block;
}
h2:after,
h2:before {
content: "";
width: 4px;
height: 20px;
background: #000000;
display: inline-block;
margin: 0 10px;
}
I'm trying to have a background image to the right of a div, which isn't covering the whole div.
Right now it's like this (div1 is background-color):
<div id="div1">
<div id="image"></div>
Text
</div>
CSS:
.div1 {
background: #324458;
color: #FFF;
font-size: 0.9em;
font-weight: bold;
padding: 10px;
width: 100%;
position: relative;
border-radius:4px;
height:40px;
clear:both;
overflow: hidden;
}
.image {
background: url("url here");
background-position: center center;
background-size: cover;
opacity: 0.3;
height: 39px;
margin: -10px;
width: 300px;
position:absolute;
right: 10px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
z-index: 0;
}
But is it possible to have the image shown in it without having it as a div inside div1? Like using :after, :before or something else? I only want the div image to show to the right of div1 and be X width.
For an background image to show on pseudo-elements like ::after and ::before you should include content: ''; on them.
I've fixed (you were trying to target ids with class selectors) and added the mentioned background image on on this fiddle. But it goes like this:
.div1 {
background: #324458;
color: #FFF;
font-size: 0.9em;
font-weight: bold;
padding: 10px;
width: 100%;
position: relative;
border-radius: 4px;
height: 40px;
clear: both;
overflow: hidden;
}
.div1::after {
content: '';
background: url("https://unsplash.it/200/300");
background-position: center center;
background-size: cover;
opacity: 0.3;
height: 39px;
margin: -10px;
width: 300px;
position: absolute;
right: 10px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
z-index: 0;
}
<div class="div1">
Text
</div>
There are several ways to place an image to the right of a div. You should consider displaying the image with an image tag as follows:
Also, in your html you define ids, then in css you need to use # isntead of .. Check Difference between id and class in CSS and when to use it
A way to do this:
HTML:
<div id="div1">content</div>
<img id="image" src="url"/>
CSS:
#div1 {
display:inline-block;
float:left;
}
#img {
float:left;
}
By default, div containers stretch their width all the way to match 100% the width of their parent container. Setting 'display:inline-block' will make it wrap their content and allow stacking different containers (including images) to the sides.
This is a test of :before and :after, with which you can place text or an image before and after each HTML element.
p.test:before {
padding-right: 5px;
content: url(/pix/logo_ppk.gif);
}
p.test:after {
font-style: italic;
content: " and some text after.";
}
I'm running into an issue where if I add an image as a sibling to an element then that element will shift over to accommodate the inserted image. What I want is the element to stay horizontally centered even if the image is inserted. Here is a picture of the issue:
Each row is its own div with a p element and an optional image, which is the red explanation point. I want the p element with text "Corrupted" to stay horizontally aligned even with the inserted sibling.
Here is my CSS:
#friendsList div{
padding-top: 15px;
padding-bottom: 15px;
margin: 0;
display: table
width: 100%;
}
#friendsList div p{
display: inline;
}
The inserted image has css like this:
#friendsList div img {
margin-bottom: 5px,
float: right,
vertical-align:middle
}
Is there a way to have the p element stay horizontally aligned even when it has a sibling?
EDIT*** Here is a CSSdeck example: http://cssdeck.com/labs/2uel0ogm
The following possibilities come to my mind:
Add the image as background image and use background-position.
Apply position: relative to the div and something like position: absolute; right: 5px; top: 5px; to the image. This makes the image absolutely positioned within the div as container.
Place image left to the p tag and give float: right to the img.
see the example
#friendsList div{
padding-top: 15px;
padding-bottom: 15px;
margin: 0;
display: table
width: 100%;
background: orange;
border: 1px solid red;
}
#friendsList div p{
display: block;
margin: 0 auto;
text-align: center;
}
#friendsList div img {
float: right;
height: 25px;
width: 25px;
margin-left: -25px;
}
<div id="friendsList">
<div><p>first</p></div>
<div><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/128/Emotes-face-smile-icon.png" alt=""><p>second</p></div>
</div>
Alternative solution(using position property)
#friendsList div{
padding-top: 15px;
padding-bottom: 15px;
margin: 0;
display: table;
width: 100%;
background: orange;
border: 1px solid red;
position: relative;
}
#friendsList div p{
display: block;
margin: 0 auto;
text-align: center;
}
#friendsList div img {
position: absolute;
right: 0;
height: 25px;
}
<div id="friendsList">
<div><p>first</p></div>
<div><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/128/Emotes-face-smile-icon.png" alt=""><p>second</p></div>
</div>
I have a slideshow which works by absolutely positioning images one on top of the other and then changing the z-index of whatever slide I want to appear. The problem is I'd like to move it to the center and have the "prev" link and the "next" link on either side of the slideshow.
I've been trying to create a container with relative positioning around the absolutely positioned items and can get the slideshow to move around, but the next link doesn't show up on the other side of the slideshow (and I hope not to use hacks with margins to mess up the flow of the page).
My goal is to be able to treat the slideshow box just like any other box that flows with the rest of the page. Is there a way to do that?
my html
<a id="prevLink" href="#">Prev</a>
<div class="container">
<ul id="slideshow">
<li class="current">First</li>
<li>Second</li>
<li>Third</li>
</ul>
</div>
<a id="nextLink" href="#">Next</a>
my css:
.container {
position: relative;
}
#slideshow {
position: relative;
list-style-type: none;
}
.current {
z-index: 99;
}
#slideshow li {
position: absolute;
width: 5em;
height: 5em;
background-color: #333;
font-size: 3em;
color: #fff;
}
Link to the slideshow: http://codepen.io/KenjiCrosland/pen/QyqVaz
A couple changes you need:
Set the #container to display:inline-block and give it a width so that it stays inline.
remove the default padding from #slideshow.
Try this CSS:
.container {
position: relative;
width:15em;
display:inline-block;
}
#slideshow {
position: relative;
list-style-type: none;
padding:0;
}
.current {
z-index: 99;
}
#slideshow li {
position: absolute;
width: 5em;
height: 5em;
background-color: #333;
font-size: 3em;
color: #fff;
}
Here's a fork of your Pen.
You need to give a width and height to .container and center it.
Set in absolute prev and next, add some padding to .container so it has room for buttons. http://codepen.io/anon/pen/MKERWZ
.container {
position: relative;
width: 15em;/* 3x5em of lis */
height:15em;
padding: 0 4em;/* room on left/right for buttons */
margin: auto;
background: gray;/* demo purpose, lets see where it stands */
}
#slideshow {
list-style-type: none;
margin:0 ;
padding:0;
}
.current {
z-index: 99;
}
#slideshow li {
position: absolute;
width: 5em;
height: 5em;
background-color: #333;
font-size: 3em;
color: #fff;
}
#prevLink,
#nextLink {
position:absolute;
top:50%;
line-height:0;/* to set in center without translate() */
}
#prevLink {left:0.75em;
}
#nextLink {right:0.75em;
}
In my navigation I have a protruding red box. I want that red box to overlap all Divs bellow it. I set a margin for it so it would space it out among the other elements I put in the black box. The problem is that it's margin is also effecting the layout of separate elements' children bellow it. When I add a negative margin to the child elements of the section bellow it does overlap but I want the red box to be on-top. I use z-index and it doesn't seem to work.
Here's my example on Jsfiddle:
http://jsfiddle.net/1qsuvhnd/29/
HTML
<nav>
<div id="ribbon"></div>
</nav>
<div id="context">
<div class="link"></div>
</div>
CSS
#context {
width: auto;
padding: 20px;
height: 300px;
background-color: blue;
z-index: 1;
}
#context .link {
float: Left;
height: 260px;
width: 300px;
margin-left: -140px;
background-color: White;
z-index:1 !important;
}
nav {
width: auto;
height: 65px;
background-color: black;
z-index:99 !important;
clear:both;
}
nav #ribbon {
float: left;
margin: 0px 50px;
Width: 65px;
height: 130px;
background-color: red;
z-index= 99;
}
To use z-index, you need to specify a position (like absolute, fixed, or relative).
And the last line written is wrong:
z-index = 99;
The correct way to write it is:
z-index: 99;
How about: http://jsfiddle.net/1qsuvhnd/30/
change the ribbon to position: absolute; and fix the z-index = typo :D
Now you don't need that margin hack!!
nav #ribbon {
float: left;
margin: 0px 50px;
Width: 65px;
height: 130px;
background-color: red;
z-index: 99; /* take that equal out and make it a colon */
position: absolute; /* position: absolute to the rescue!!!! */
}
You need to specify a position CSS rule for the nav div for the z-index to work correctly, like this:
nav #ribbon {
float: left;
margin: 0px 50px;
Width: 65px;
height: 130px;
background-color: red;
z-index:99;
position: relative;
}
Here is the new jsFiddle link:
http://jsfiddle.net/1qsuvhnd/54/