.header{
position: fixed;
width: 2000px;
height: 70px;
background-color: #ff509a;
}
.subTitle{
width: 100px;
line-height: 70px;
float: right;
margin-right: 20px;
color: white;
font-size: 50px;
}
.content{
width: 2000px;
height: 3000px;
}
<div class="header">
<div class="subTitle">
hello
</div>
</div>
<div class="content">
</div>
Here is the code. The hello element should appear in the right when I scroll to the very right side. Please help!
Simply add
position: fixed;
right:0;
to .subTitle
Job done!
Add z-index:1; to .header, and position:absolute; z-index:2;left: 64%;/* or whatever spacing you want*/ to .subTitle. Don't forget to remove the float since it's no longer needed. Here is a pretty good article on z-index from MDN. So the CSS would look like this:
.header {
position: fixed;
width: 2000px;
height: 70px;
background-color: #ff509a;
z-index: 1;
}
.subTitle {
width: 100px;
line-height: 70px;
/* float: right; */
/* margin-right: 20px; */
color: white;
font-size: 50px;
z-index: 2; /*z-index of 2 to overlay the .header element*/
position: absolute; /*absolute positioning*/
left: 64%; /*change this if needed*/
}
Related
I want to align the bottom of my mat icon and that of the img next to it. I've tried multiple things, and this is what it currently looks like:
Here's my HTML:
<div class="container">
<p class="triage"><mat-icon>assignment_ind</mat-icon></p>
<p class="O2"><img src="../../assets/med_O2.png"></p>
</div>
CSS:
.O2, .triage{
display: inline-block;
vertical-align: middle;
}
.container img {
width: 50px;
height: 50px;
}
.container mat-icon{
font-size: 60px;
width: 60px;
}
Use line-height:
.container
{
line-height: 60px; //or what ever height your container is
}
Can you push mat-icon down with a little bit of margin or padding?
.container mat-icon{
font-size: 60px;
width: 60px;
margin-top: 5px;
}
What about something like this?
<style>
.container {
position: relative;
width: 65px;
height: 100px;
}
p.triage {
background: blue;
width: 30px;
height: 40px;
position: absolute;
bottom: 0;
right: 0;
}
p.O2 {
width: 30px;
height: 20px;
background: red;
position: absolute;
bottom: 0;
left: 0;
}
</style>
<div class="container">
<p class="triage"></p>
<p class="O2"></p>
</div>
I have the following code:
<body>
<div id="boarder">
<div id="player-time"></div>
.
.
.
</body>
#player-time{
background-color: green;
height:30px;
width: 150px;
position:absolute;
top: 0px;
left:100px;
border-top-right-radius: 30px;
border-top-left-radius: 30px;
text-align: center;
color: white;
z-index: -10;
}
#boarder{
background-color: #5FBAAC;
height: 350px;
width: 350px;
position: relative;
margin: 10% auto auto auto;
padding-top: 30px;
border-radius: 30px;
z-index: 10;
}
The id #player-time is being displayed in front of the boarder element. Can someone explain me why the z-index property is not working?
check the two example I posted:
1st child/parent z-index not same level, by default child will above parent. but if you use negative z-index at child and do not define z-index at parent, your child can go below parent.
2nd same level z-index at same level, z-index indicate how it stack
#player-time{
background-color: green;
height:100px;
width: 300px;
position:absolute;
top: -50px;
left:-50px;
text-align: center;
color: white;
z-index: -10;
}
#boarder{
background-color: red;
height: 50px;
width: 350px;
position: relative;
margin: 10% auto auto auto;
text-align: center;
padding-top: 30px;
border-radius: 30px;
}
#player-time-test{
background-color: green;
height:100px;
width: 300px;
text-align: center;
color: white;
z-index: -10;
}
#boarder-test{
top: -50px;
left: 50px;
background-color: red;
height:100px;
position: relative;
width: 300px;
text-align: center;
border-radius: 30px;
z-index: 10;
}
<h2>child/parent z-index</h2>
<div id="boarder">
<div id="player-time">[child] Player-time(z-index: -10)</div>
[parent] boarder (no z-index)
</div>
<h2>same level z-index</h2>
<div>
<div id="player-time-test">Player-time(z-index: -10)</div>
<div id="boarder-test">boarder(z-index: 10)</div>
</div>
z-index has only an effect on siblings (i.e. on the same level), not children...
Just remove the z-index of the parent element --> duplicate question
#player-time{
background-color: green;
height:30px;
width: 150px;
position:absolute;
top: 0px;
left:100px;
border-top-right-radius: 30px;
border-top-left-radius: 30px;
text-align: center;
color: white;
z-index: -10;
}
#boarder{
background-color: #5FBAAC;
height: 350px;
width: 350px;
position: relative;
margin: 10% auto auto auto;
padding-top: 30px;
border-radius: 30px;
}
<div id="boarder">
<div id="player-time"></div>
</div>
How do I create this in css? I'm having trouble aligning the circle divs vertical middle.
See image:
Here what I've done: https://jsfiddle.net/5odbwkn5/
.gray-btn1 {
width: 50px;
height: 50px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: url(../images/ico/9.png) no-repeat center 70%;
background-color: #5dd6e4;
margin-left:-20px;
position: relative;
float:left;
}
.gray-btn {
width: 50px;
height: 50px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: url(../images/ico/9.png) no-repeat center 70%;
background-color: #5dd6e4;
margin-right: -20px;
position: relative;
float:right;
}
.gray-mid {
background-color: #5dd6e4;
text-align:center;
}
<div class="gray-mid">
<div class="gray-btn1"><span class="fa-connectdevelop">left</span>
</div>
<div class="gray-btn"><span class="fa-connectdevelop">right</span>
</div>
<div style="height:100px">middle</div>
</div>
you can use pseudoelements as before and after to make easily that effect:
.container:before {
content:' ';
display:block;
height: 30px;
width:30px;
background-color:#999;
border-radius:15px;
position:absolute;
left:-15px;
top:7px;
}
.container:after {
content:' ';
display:block;
height: 30px;
width:30px;
background-color:#999;
border-radius:15px;
position:absolute;
right:-15px;
top:7px;
}
here is the FIDDLE I made for you as an example.
Edited: I updated the fiddle to be sure that the circles ("before" and "after") are positioned behind the container. And move slightly the elements to make it more simillar to your image.
First of all, you should not duplicate styles. Instead, extend common btn styles with specific for left button.
You can position buttons in the middle with the help of position: absolute relatively to the parent and top: 50%, margin-top: -25px fixes vertical offset in this case.
As the result it will become:
.gray-mid {
margin-left: 30px;
width: 400px;
background-color: #5dd6e4;
text-align:center;
position: relative;
}
.gray-btn {
width: 50px;
height: 50px;
border-radius: 50%;
background: url(../images/ico/9.png) no-repeat center 70%;
background-color: #5dd6e4;
right: -20px;
position: absolute;
top: 50%;
margin-top: -25px;
}
.gray-left {
left: -20px;
right: inherit;
}
<div class="gray-mid">
<div class="gray-btn gray-left"><span class="fa-connectdevelop">left</span></div>
<div class="gray-btn"><span class="fa-connectdevelop">right</span></div>
<div style="height:100px">middle</div>
</div>
Is this what you're looking for?
There are multiple ways which you can achieve vertical centering. There's even a really easy to follow guide posted by Chris Coyier here that you can reference whenever you need.
This is basically what I go to when I need to center something vertically.
.parent-with-centered-content {
position: relative;
}
.parent-with-centered-content > .child-element {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
You could use pseudo elements for this kind of functionality, and position them accordingly.
div {
position: relative;
display: inline-block;
height: 30px;
width: 200px;
background: gray;
margin: 30px;
text-align: center;
line-height: 30px;
}
div:before,
div:after {
content: "";
position: absolute;
height: 20px;
width: 20px;
border-radius: 50%;
background: gray;
top: 5px;
z-index: -1;
}
div:before {
left: -10px;
}
div:after {
right: -10px;
}
<div>This is some text</div>
I did not try to match your fonts, but using background image, and just a little css, here you go:
https://jsfiddle.net/z8z3h75h/
<div id="background">
<div class="left">
FACEBOOK
</div>
<div class="right">
become a fan
</div>
</div>
#background {
background-image:url(http://s28.postimg.org/loa285ugt/1_SEOh.jpg);
width:409px;
height:41px;
}
.left {
float:left;
margin-left:30px;
color:white;
margin-top:10px;
}
.right {
float:right;
margin-right:40px;
color:white;
margin-top:10px;
}
The correct way to do that is to set top: 50% and translate or set margin on :pseudo elements
:root{text-align: center;padding: 40px 0 0 0}
.container{
display: inline-block;
position: relative;
padding: 6px 10px
}
.container, .container:before, .container:after{
background: #a6a195;
}
.container:before, .container:after{
content: '';
position: absolute;
top: 50%;
margin-top: -10px; /** height/2 **/
width: 20px;
height: 20px;
border-radius: 50%
}
.container:before{left: -10px}/** width/2 **/
.container:after{right: -10px}
.container div{display: inline; color: white}
.container .txt1{margin-right: 20px}
.container .txt2{font-size: 12px}
<div class="container">
<div class="txt1">FACEBOOK</div>
<div class="txt2">Become a fan</div>
</div>
My problem is that I wanted to have split page by two divs side by side (50% width). Inside of them I wanted to place another divs and make them aligned vertically and horizontally at the same time.
I think that it is possible to make it without JS, but I'm not able to do that.
Can anybody make my two circles placed in the center (V,H) of their parent DIV, which are 50% of width and 100% of height so that when I will resize my window the circles will always be in center (and side by side as is now)?
Here is my code:
<div id="container">
<div class="left">
<div class="kolo1">
sometext1
</div>
</div>
<div class="right">
<div class="kolo2">
sometext 2
</div>
</div>
</div>
And a JSFiddle for that: http://jsfiddle.net/m5LCx/
Thanks in advance in solving my quest :)
It's actually quite simple, all you need to do is to simulate a table-like behaviour:
HTML markup:
<div id="container">
<div>
<div class="half left">
<div class="circle">hello</div>
</div>
<div class="half right">
<div class="circle">world</div>
</div>
</div>
</div>
CSS styles:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#container {
display: table;
width: 100%;
height: 100%;
}
#container > div {
display: table-row;
}
.half {
display: table-cell;
width: 50%;
text-align: center;
vertical-align: middle;
}
.half.left {
background: red;
}
.half.right {
background: blue;
}
.circle {
display: inline-block;
padding: 50px;
border-radius: 50%;
}
.half.left .circle {
background: blue;
}
.half.right .circle {
background: red;
}
Final result http://jsfiddle.net/m5LCx/11/:
Working here http://jsfiddle.net/3KmbV/
add position: relative in .left and .right class and than add margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; in .kolo1 and .kolo2 class. and remove top position from .left class
try it
body {
background-color: #006666;
margin: 0 auto;
height: 100%;
width: 100%;
font-size: 62.5%;
}
#container {
width: 100%;
min-height: 100%;
height: 100%;
position: absolute;
}
.left {
width: 50%;
min-height: 100%;
float: left;
top: 0;
background-color: #660066;
position: relative;
}
.right {
width: 50%;
min-height: 100%;
float: right;
min-height: 100%;
background-color: #003366;
position: relative;
}
.kolo1 {
background-color: #0f0;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.kolo2 {
background-color: #00f;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
you can give postion: relative to .left and .right.
and give below CSS for to .kolo1 and .kolo2
margin: -5em 0 0 -5em;
position: absolute;
left: 50%;
top: 50%;
Updated demo
Another fiddle. This one uses absolute positioning with negative margins to ensure the circles are always in the centre. CSS looks like this
.kolo1 {
position: absolute;
top: 50%;
left: 50%;
margin-left: -5em; /* this must be half of the width */
margin-top: -5em; /* this must be half of the height */
}
As #Tushar points out, you need to set the position of the parent element to relative also.
Working Fiddle
.kolo1 {
background-color: #0f0;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: 50% auto 0 auto;
}
.kolo2 {
background-color: #00f;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: 50% auto 0 auto;
}
Try adding padding-top:50% for parent divs (having class left and right)
This is my current HTML structure. The footer div is sitting alone in the BODY.
<div id="footer">
<div class="container">
<div id="footer-bg">
<div class="footer1">
<p class="p1">asd</p>
<p class="p2">asd</p>
</div>
<div class="footer2">
<p class="p1">asd</p>
<p class="p2">asd</p>
<p class="p3">asd</p>
</div>
<div class="footer3">
<p class="p1">asd</p>
</div>
</div>
</div>
</div>
Here's the CSS for it:
#footer
{
position: relative;
background: url('../footer-bg-repeat.jpg') repeat-x;
height: 307px;
}
#footer #footer-bg
{
background: url('../footer.jpg') no-repeat top left;
height: 528px;
width: 1587px;
position: absolute;
left: -380px;
top: -221px;
}
#footer .footer1
{
position: absolute;
top: 137px;
}
#footer .footer1 .p1
{
position: absolute;
left: 500px;
background: #dcdcdc;
height: 23px;
width: 80px;
text-align: center;
line-height: 25px;
font-weight: bold;
}
#footer .footer1 .p2
{
position: absolute;
left: 1000px;
top: -20px;
background: url() no-repeat top right;
height: 40px;
width: 249px;
text-indent: -9999px;
z-index: 6;
}
#footer .footer2
{
position: absolute;
top: 159px;
height: 23px;
width: 100%;
background: #000;
}
#footer .footer2 p
{
display: inline;
line-height: 25px;
color: #636466;
height: 23px;
}
#footer .footer2 .p1
{
position: absolute;
left: 500px;
background: url() no-repeat center right;
width: 175px;
}
#footer .footer2 .p2
{
position: absolute;
left: 700px;
background: #dcdcdc url() no-repeat 60px 8px;
width: 75px;
padding-left: 15px;
}
#footer .footer2 .p3
{
position: absolute;
left: 800px;
}
#footer .footer3
{
position: absolute;
top: 190px;
}
#footer .footer3 .p1
{
position: absolute;
left: 500px;
width: 1000px;
}
I'm trying to get .footer2 and .footer3 to extend the width of the container allowing me to have a background colour set for what ever width the screen may be.
Setting 100% width just gets it to the size of the container - As I'd expect. How can I, though, get it to the width of the page?
Try setting both left and right property to 0;
you didn't define question well.
if you want to set it in middle set margins
margin:0 10px;
width:%your pages width%;
if you mean something else download Firebug plugin for Firefox and inspect a page's footer that did what you want to do and take a look at structure and css rules. it always works