This is my css code:
The hr line must be directly underneath the h1 heading
#Logo{
position: relative;
background: url(/IMAGES/Photo\ by\ aldain-austria\ on\ unsplash.jpg);
width: 100%;
height: 100%;
}
#Logo h1{
position: absolute;
top: 26%;
left: 50%;
transform: translate(-50%, 50%);
}
The following is my html:
<div id="Logo">
<h1>Basil Carolus</h1>
<hr>
</div>
As far as I can see, you are not setting any styles for the hr tag, but instead of using an hr, I may recommend setting a border for the h1 element, like so:
#Logo{
position: relative;
background: url(/IMAGES/Photo\ by\ aldain-austria\ on\ unsplash.jpg);
width: 100%;
height: 100%;
}
#Logo h1 {
position: absolute;
top: 26%;
border-bottom: red solid 4px;
width: 100%;
text-align: center;
}
<div id="Logo">
<h1>Basil Carolus</h1>
</div>
Absolute positions can be a little tricky. When you make a position absolute you remove it from the the DOM flow and hence it's height (for the absolute element) isn't used to calculate the height of the wrapper. Also for the hr element you need to specify a width.
Since an h1 is font-size 55px we make the div height 55px and remove margin from the h1 tag. Then we can absolute position the h1 to the top of the div and the hr to the bottom of the div. Notice we need to offset the hr the 5px
#Logo{
position:relative;
width: 100%;
height:55px;
padding-bottom:15px;
}
#Logo h1 {
width: 100%;
position:absolute;
text-align: center;
top:0;
margin:0;
}
hr{
position:absolute;
bottom:0;
width:100%;
border:solid 1px black;
}
<div id="Logo">
<h1>Basil Carolus</h1>
<hr>
</div>
Related
My text has a background as an icon, so I need half of icon be visible out of block, but overflow:hidden; won't allow me to, I tried giving text-overflow:visible; but I don't know too much about css Html, here's a little example
.example{
position:relative;
overflow:hidden;
height: 277px;
width: 150px;
background: #000;
}
.example-title{
position:absolute;
top: -6%;
left: 63%;
background:#0d3351;
padding: 35px 0;
}
<div class="example">
<span class="example-title">
Visible
</span>
</div>
Here is screenshot
enter image description here
An element with position: absolute could be visibile outside of its parent with overflow: hidden only if the parent does not have a position rule, so I think that you'll need a common parent element with position: relative rule and no position rule on the .example element.
.container {
position: relative;
width: 150px;
}
.example{
overflow:hidden;
height: 277px;
width: 150px;
background: #000;
}
.example-title{
position:absolute;
top: -6%;
left: 63%;
background:#0d3351;
padding: 35px 0;
}
<div class="container">
<div class="example">
<span class="example-title">
Visible
</span>
</div>
</div>
body{
max-width:1366px;
}
.gotop{
position:fixed;
right:9px;
bottom:7px;
cursor:pointer;
width:25px;
}
gotop is a button to scroll page on top and it must not be scrollable, i.e. must be fixed.
Problem is on monitors greater than 1366 px. The button is far right from the body.
How to keep it fixed, but inside body?
One possible solution is to omit top, right, bottom, left values for the fixed button. This way it will be sticked to the container:
.container {
position: relative;
max-width: 800px;
height: 200vh; /* for scrolling demo */
margin: 0 auto;
border: 1px solid black;
}
.button-wrapper {
position: absolute;
right: 35px; /* button width plus margin */
top: 30%; /* or whatever you need */
}
.button {
position: fixed;
width: 25px;
height: 25px;
cursor: pointer;
background: black;
}
<div class="container">
<div class="button-wrapper">
<div class="button"></div>
</div>
</div>
Try This
body{
max-width:1366px;
background:#f1f1f1;
}
.gotop{
position:absolute;
right:25px;
bottom:25px;
cursor:pointer;
}
<body>
<button class='gotop'>TOP</button>
</body>
I wouldn't recommend using max-width on the body... you should put it on a div that wraps everything in the page instead.
Then place your button at the bottom of wrapper with the following CSS applied. Tweak the values to get a better position if you need it.
.wrapper{
position: relative;
height:200vh;
width: 100%;
max-width:400px;
background: #000;
}
.holder{
position: absolute;
top:92.5%;
right:0;
background: #ccc;
}
.button{
height:30px;
width: 70px;
position: fixed;
margin-left:-70px; /* minus width */
bottom:10%;
}
<div class="wrapper">
<div class="holder">
<button class="button">Test</button>
</div>
</div>
What you asking is rather an old way of doing things but it can be achieved.
Set the width of body.
Set fixed element to center.
Offset center by width of body and fixed element.
html,
body {
position:relative;
height: 100%;
max-width: 200px;
margin: 0 auto;
border:1px solid #111;
}
.gotop {
position: fixed;
left:50%;
bottom: 7px;
cursor: pointer;
width:40px;
background:#eee;
margin-left:60px;/*half width of body minus width of gotop*/
}
<div class="gotop">TOP</div>
There is a simple example where a div element contains h3.
But the h3 element drops down its parent div when h3 has position relative.
Changing h3 position to absolute solves this problem.
What is the reason?
.personal-details{
background-color: green;
}
.personal-image{
display: inline-block;
width: 150px;
height: 150px;
background-color: white;
}
.personal-description {
display: inline-block;
width: 150px;
height: 150px;
background: black;
}
.personal-description h3 {
position: relative; /*absolute solves the problem*/
}
<div class="personal-details">
<div class="personal-image"></div>
<div class="personal-description"><h3 class="name">My Name</h3></div>
</div>
This is caused by the default vertical-align: baseline; property of inline-block elements.
Overriding the default with vertical-align: top for your element will get you somewhere like correct:
.personal-details {
background-color: green;
vertical-align: middle
}
.personal-image {
display: inline-block;
width: 150px;
height: 150px;
background-color: green;
}
.personal-description {
display: inline-block;
width: 150px;
height: 150px;
background: black;
vertical-align: top;
}
.personal-description h3 {
position: relative;
background: yellow;
}
<div class="personal-details">
<div class="personal-image"></div>
<div class="personal-description"><h3 class="name">My Name</h3></div>
</div>
Notice I say "somewhere like correct" as you will still have issues with space around the elements (notice the gap below the black square and space between the two child divs). But that is out of the scope of your question and has been dealt with many times before.
.personal-details{
background-color: red;
}
.personal-image{
display: inline-block;
width: 150px;
height: 150px;
background-color: green;
margin:0;
}
.personal-description {
float:left;
display: inline-block;
width: 150px;
height: 150px;
background: black;
margin:0;
padding:0;
}
.personal-description h3 {
margin:0;
background-color:blue;
padding:0;
position: relative; /*absolute solves the problem*/
}
<div class="personal-details">
<div class="personal-image"></div>
<div class="personal-description"><h3 class="name">My Name</h3></div>
</div>
May be your are familiar with all the positioning.Firstly, you need to understand about it.There are four possible useful positioning in css which are given below.
Static
Relative
Absolute.
Fixed
-Static positioning:
It is basically a default position of every element or tag, use of this position will never effect on your element’s state or position.In static we can not use top,left, bottom & right properties.
position:static;
-Relative:
Relative positioning,makes element or tag movable.Yes, we can move it any where on container.By default it works like an static but we can use left,top,bottom & right in it.
position: relative;
top:50px;
left:50px;
-Absolute:
Absolute positioning, get the space according to browser window or container(that may be parent or ancestor) window.If container window’s position set to relative than absolute will get the position according to container.
position:absolute;
left:0px;
right:0px;
Task: Now, make a parent div and it’s two child's and check both relative and absolute.
/* Example */
</div>
<div class='box2'>
<h3>Here my name</h3>
</div>
</div>
.parent_box{
background-color:grey;
margin-top: 20px;
}
.box1{
height:200px;
width: 200px;
background-color:red;
display: inline-block;
}
.box2{
height: 200px;
width: 200px;
background-color:yellow;
display: inline-block;
position: relative;
}
.box2 h3{
position: absolute;
/* Working according to it's parent because it's parent div contains relative position now check it by given it left top and remove the position relative of box2*/
}
When we have some absolute DIVs in page and one fixed DIV as a child of one of those absolute DIVs that has bigger z-index than those absolute DIVs, the fixed DIV goes behind of absolute DIVs!
Like this: http://jsfiddle.net/3qRaR/1/
HTML:
<div class='l1'>
<div class='data'></div>
</div>
<div class='l1'>
<div class='data'></div>
</div>
<div class='l1'>
<div class='data'></div>
</div>
<div class='l1'>
<div class='data'></div>
</div>
CSS:
.l1{
display: block;
width: 100px;
height: 100px;
background-color: yellow;
z-index:1001;
margin: 5px;
position: absolute;
}
.l1:nth-child(1){
left: 5px;
top: 5px;
}
.l1:nth-child(2){
left: 110px;
top: 5px;
}
.l1:nth-child(3){
left: 220px;
top: 5px;
}
.l1:nth-child(4){
left: 330px;
top: 5px;
}
.data{
display:none;
position: fixed;
left:0px;
top:0px;
right:0px;
bottom:0px;
z-index:2000;
background: black;
}
.l1:first-child .data{
display: block;
}
Why?
How can I make it to go to the front of them?
Thanks
Remove the z-index from the .li rule and the black .data div will sit ontop of the yellow .li divs. I am assuming that is what you are trying to do?
.l1{
display: block;
width: 100px;
height: 100px;
background-color: yellow;
// Removed the z-index from here
margin: 5px;
position: absolute;
}
fixed makes divs fixed to document, not the element, even if it is absolute. Make .data divs of position absolute, not fixed.
http://jsfiddle.net/3qRaR/7/
.data{
display:none;
position: absolute;
left:0px;
top:0px;
right:0px;
bottom:0px;
z-index:2000;
background: black;
}
Edit:
If you want that fixed div to cover the entire document then just make the fixed div's container higher z-index than the rest:
http://jsfiddle.net/3qRaR/11/
.l1:nth-child(1){
z-index: 10000;
left: 5px;
top: 5px;
}
I would like to align a image in the middle. Very easy by giving the div a width and a margin: auto;. But the div should also carry the position: fixed; property, which doesn't go together as it turns out.
Here is my HTML:
<div class="header_container">
<div class="header">
<div class="header_links_icon">
<a href="https://www.facebook.com target="_blank" class="header_facebook">
<div class="header_facebook_icon"> </div>
</a>
<a href="https://twitter.com/" target="_blank" class="header_facebook">
<div class="header_twitter_icon"> </div>
</a>
</div>
</div>
</div>
And here is the CSS I'm using:
.header_container {
background-color: black;
padding-top: 35px;
}
.header {
background-image: url('../images/css/header.png');
background-repeat: no-repeat;
height: 605px;
margin: auto;
width: 1440px;
position: fixed
}
And it's the header.png image that should be aligned in the middle of the screen AND being positioned fixed... How can I manage to do this?
You could make your header container fixed, then your .header would work:
.header_container {
background-color: black;
padding-top: 35px;
position: fixed;
top:0;
left:0;
right:0;
}
.header {
background-image: url('../images/css/header.png');
background-repeat: no-repeat;
height: 605px;
width: 1440px;
margin: auto;
}
The other way would be with negative margins:
.header {
background-image: url('../images/css/header.png');
background-repeat: no-repeat;
height: 605px;
width: 1440px;
position: fixed;
left: 50%;
margin-left: -720px;
}
You have to set the left position to fifty percent and the margin-left to one half the element's width. This only works for items that have a set width.
http://jsfiddle.net/W9ZcY/
.header_container {
background-color: black;
padding-top: 35px;
border: 1px solid red;
}
.header {
border: 1px solid blue;
background: gray;
height: 105px;
left: 50%;
margin-left: -70px;
width: 140px;
position: fixed
}
The issue is that you can either position a fixed element with percentages or pixels. Neither of them will do the proper offset calculation to make it truly centered. So you must sortof hack the placement to make it behave properly.
Positioning by percentage and offsetting with negative margins:
//assuming the block is 200px wide and 100px tall
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
Alternatively, you can center it by fixing placement of a container then center your object within that container (as mentioned by #rgthree), this also works.
This will probably work:
.center {width:1440px;margin:0 auto;}
.header {width:1440px;position:fixed;etc...} // don't use margin:auto here
where
<div class='header_container>
<div class='center'>
<div class='header'>
<!-- contents -->
</div>
</div>
<div>
Hi you can give the fixed position to the main header_container class so that will work.
.header_container {
background-color: black;
position: fixed;
top:0;
left:0;
right:0;
}
.header {
background:green;
height: 100px;
width: 500px;
margin: auto;
}
please see the demo:- http://jsfiddle.net/rohitazad/W9ZcY/17/
Give position fixed in your parent header class rather than using fixed position in header child class...
.header_container {
position: fixed;
top:0;
left:0;
right:0;
}