I created a div class and called it .center in CSS. When doing all the styling it doesn't react when shown in browser. I made the exact same thing with the same code when creating the home page. However when I do the same thing for the second page nothing happens.
.center {
position: absolute;
left: -25%;
top: 85%;
width: 100%;
text-align: center;
font-size: 18px;
font-family: 'Anton', sans-serif;
color: white;
}
<div style="cursor:pointer; position: absolute; width: 59px; height: 42px; left: 687px; top: 29px;" onclick="openNav()">
<div class="fa fa-angle-double-down" style="font-size:50px; color:white; hover: black;"></div>
<div class="center">Menu</div>
</div>
I have the same attributes for the homepage and the menu text is white with the font family and have the hover effect. However on this page it doesn't react to the CSS it's just plain black with standard font.
Your div.center is positioned absolutely in relation to its parent. Do this:
.center {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
font-size: 18px;
font-family: 'Anton', sans-serif;
color: #FFF;
}
Related
I have this div on my home page and want it to move with me when I scroll:
I tried using position:sticky; and position: fixed and adding top: 600px; but its not moving to the top its stuck at the bottom
.linkss {
color: #8892b0;
font-family: 'NTR', sans-serif;
font-size: 25px;
right: 10px;
top: 680px;
padding-right: 30px;
position: fixed;
}
.linkss h3 {
margin: 0px;
height: 50px;
color: #c9c1f5;
}
.linkss a {
border: 0px;
display: block;
padding: 0px;
margin: 0px;
font-size: 23px;
padding-left: 30px;
color: #c9c1f5;
height: 30px;
width: 110px;
}
<div className="linkss">
<h3>/ Links</h3>
/ Etsy Shop
/ LinkedIn
/ Instagram
</div>
The HTML should be "class" instead of "className"
<div class="linkss">
I tested your CSS after updating the HTML and the menu stayed fixed for me.
I think you can try position sticky.
.linkss {
position: sticky;
top: 0;
}
I used figma to build a design and exported css code below. I added some div classes but it still doesn't fit properly.
I tried making the classes a subclass of the main class but it still didn't work.
I assumed this might work the way columns and rows do, the rows comes first then the columns follow.
.pagingg {
position: absolute;
width: 338px;
height: 61px;
left: 88px;
top: 97px;
background: #FBF6F6;
border: 1px solid #F8EBEB;
box-sizing: border-box;
border-radius: 2px;
}
.pagingg.firstpg {
position: absolute;
width: 88px;
height: 19px;
left: 104px;
top: 106px;
background: #FFFFFF;
border: 1px solid #E6C3C3;
border-radius: 2px;
}
.pagingg.pgnum {
position: absolute;
width: 58px;
height: 14px;
left: 223px;
top: 110px;
font-family: Open Sans;
font-style: normal;
font-weight: normal;
font-size: 10px;
line-height: 14px;
/* identical to box height */
color: #000000;
}
.pagingg.lastpg {
position: absolute;
width: 89px;
height: 16px;
left: 214px;
top: 133px;
background: #FFFFFF;
border: 1px solid #E6C3C3;
border-radius: 1px;
}
.nextpg {
position: absolute;
width: 88px;
height: 19px;
left: 319px;
top: 106px;
background: #FFFFFF;
border: 1px solid #E6C3C3;
border-radius: 2px;
}
.pagingg.fpg {
position: absolute;
width: 22px;
height: 15px;
left: 138px;
top: 106px;
font-family: Open Sans;
font-style: normal;
font-weight: 300;
font-size: 11px;
line-height: 15px;
/* identical to box height */
color: #000000;
}
.pagingg.pgnumtext {
position: absolute;
width: 58px;
height: 14px;
left: 223px;
top: 110px;
font-family: Open Sans;
font-style: normal;
font-weight: normal;
font-size: 10px;
line-height: 14px;
/* identical to box height */
color: #000000;
}
.pagingg.lastpgtext {
position: absolute;
width: 21px;
height: 15px;
left: 247px;
top: 133px;
font-family: Open Sans;
font-style: normal;
font-weight: 300;
font-size: 11px;
line-height: 15px;
/* identical to box height */
color: #000000;
}
.pagingg.nextpgtext {
position: absolute;
width: 26px;
height: 15px;
left: 350px;
top: 107px;
font-family: Open Sans;
font-style: normal;
font-weight: 300;
font-size: 11px;
line-height: 15px;
/* identical to box height */
letter-spacing: 0.075em;
color: #000000;
}
<div class="pagingg">
<div class="pagingg firstpg">
First
</div>
<div class="pgnum">
<div class="pgnumtext">2 0f 5</div>
</div>
<div class="lastpg">
<div class="lastpgtext">Last</div>
</div>
<div class="nextpg">
<div class="nextpgtext">Next</div>
</div>
</div>
Do not use position:absolute on every element. Use it only when absolutely necessary. You can read about it here -> CSS Position
For this requirement you can just use flexBox which is the recommended solution for layout purposes.
Read more about flexbox -> a-guide-to-flexbox or here -> MDN Flexbox
See below:
.pagingg {
display:flex;
flex-wrap:wrap;
width: 300px;
justify-content: space-between;
align-items: center;
}
.lastpg {
width: 100%;
text-align: center;
}
.text {
border: 1px solid black;
background-color: grey;
display:inline-block;
padding: 5px 20px;
}
<div class="pagingg">
<div class=" firstpg">
<div class="firstpgtext text">
First
</div>
</div>
<div class="pgnum">
<div class="pgnumtext ">2 0f 5</div>
</div>
<div class="nextpg">
<div class="nextpgtext text">Next</div>
</div>
<div class="lastpg">
<div class="lastpgtext text">Last</div>
</div>
</div>
Figma will generate you only general styles, like font-size, font-weight, color, background, letter-spacing etc.
For position, display, width, height, padding and other specific style you will need to write code.
Everyone is correct. You don't want to use Figma's absolute positioning in your HTML/CSS.
Instead you need to start by understanding the structure you need and figure out the nesting and positioning. You can position elements in HTML/CSS using grids, which are more modern and work better than previous approaches like tables, floats, etc.
A great tool that will help you get started quicker, is Desech Studio which imports your Figma file and positions elements relatively using grids, automatically. You still have to do some adjustments here and there, but it's a better starting point than absolute zero.
hi i have a problem my code looks like this(I'm a starter)
<div class="backtotop">
<a href="#top">
Back to topˆ
</a>
</div>
and my stylesheet has
.backtotop{
font-size: 30px;
width: 20%;
background-color: #b6aeac;
text-align: right bottom;
}
a{
text-decoration: none;
font-size:30px;
font-style: normal;
color: #23285a;
}
but it doesnt align
I want to show it at the bottom right of page but i dont want it to be fixed. The picture of absolute code used
Its back to top bottom I'm making
.backtotop {
font-size: 30px;
width: 20%;
background-color: #b6aeac;
position: fixed;
bottom: 0; // adjust as per need
right: 0; // adjust as per need
}
Use this Code for bottom right at page in css of
position: fixed;
bottom: 0;
right: 0;
Check the snippest:
.backtotop{
font-size: 30px;
width: 20%;
background-color: #b6aeac;
position: fixed;
bottom: 0;
right: 0;
}
a{
text-decoration: none;
font-size:30px;
font-style: normal;
color: #23285a;
}
<div class="backtotop">
<a href="#top">
Back to topˆ
</a>
</div>
UPDATED :
Checkout This By using position:absolute
.backtotop{
font-size: 30px;
width: 20%;
background-color: #b6aeac;
position: absolute;
right: 0;
bottom: 0;
}
a{
text-decoration: none;
font-size:30px;
font-style: normal;
color: #23285a;
}
<div class="backtotop">
<a href="#top">
Back to topˆ
</a>
</div>
UPDATED 2 :
If You want to div at center then remove bottom:0 and add top:50%;
Like This :
.backtotop{
font-size: 30px;
width: 20%;
background-color: #b6aeac;
position: absolute;
right: 0;
top:50%;
//bottom: 0;
}
And If it is fixed that you want to display BacktoTop Class Exactly Right To the Name Of Institute then simply align the div at right or if you use table structure then text-align:right in last .
My Be This will Helpful To You.
Still Ask If You Have Any Doubt.
I am trying to add a div to the side of my wrapper. It will be a link / button.
I want it to be able to slide up and down, fixed to the right hand side border when scrolling.
The button is:
#booknow {
position: absolute;
right: 0;
margin-left:25px;
text-align:center;
font-family: 'Raleway',sans-serif;
font-size:22px;
color:#ffffff!important;
font-weight:700;
line-height:26px!important;
text-transform:uppercase;
}
And the inner wrapper (Where the border is), is:
.wrapper_inner{
position:relative;
z-index:10!important;
padding:30px!important;
background:#fff!important;
border:1px solid #D4D4D4!important; }
HTML:
<div class="wrapper">
<div class="wrapper_inner">
<div id="booknow">
Book <br> Now
</div>
</div>
</div>
At the minute I have this:
If I set it to fixed it slides up and down but it won't position perfectly to the outside of .wrapper_inner.
The HTML wasn't that helpful, so I just threw something together. The color scheme is to display the elements. I removed .inner_wrapper and added the surrounding layout so it would be possible to demonstrate that #booknow floats. If you click the #booknow it'll scroll down to a faux form at the bottom.
Demo: https://plnkr.co/edit/qACqW4O4rJn7YHoPRWLy?p=preview
Full screen: https://run.plnkr.co/njw73AIIIuHXEooM/
Relevant CSS
body {
position: relative;
overflow-y: scroll;
overflow-x:hidden;
font: 500 16px/1.4 'Arial';
min-height: 100vh;
}
.spacer {
position: absolute;
bottom: -200px;
height: 60%;
}
#booknow {
position: fixed;
top: 30px;
right: 0;
float: right;
margin-left: 25px;
text-align: center;
font-family: 'Raleway', sans-serif;
font-size: 22px;
color: #ffffff;
font-weight: 700;
line-height: 26px;
font-variant: small-caps;
z-index: 10;
background: #fc3;
padding: 10px;
width: 50px;
}
.wrapper {
position: absolute;
top: -110px;
margin: 25px;
padding: 5px 10px;
width: 100%;
border: 3px double grey;
min-height: 70px;
background: #eff999;
}
I have three main main div in a main div and each these three div have small button at the bottom, because they look and feel is same so i have same class "readMore_button" for all three of them is styling them in css. now the button from first block behave fines with hover but rest of two not (mouse has to be very at bottom of div button to behave). I cant figure out why!!
many thanks in advance.
<div id="HighLight_blocks_Wrapper">
<div class="highlight_Block" id="Management_block_01">
<div class="highLight_block_label">Management</div>
<div class="readMore_button">Read More</div>
</div>
<div class="highlight_Block" id="valuation_block_01">
<div class="highLight_block_label">Valuation</div>
<div class="readMore_button">Read More</div>
</div>
<div class="highlight_Block" id="SelectGreen_block_01">
<div class="highLight_block_label">Select Green</div>
<div class="readMore_button">Read More</div>
</div>
</div>
css
#HighLight_blocks_Wrapper {
position: relative;
width: 100%;
height: 400px;
margin-top: 10px;
}
.highlight_Block {
position: relative;
float: left;
width: 321px;
height: 370px;
margin-left: 15px;
margin-top: 15px;
background-color: #F5F5F5;
border: solid;
border-width: 1px;
border-color: #E8E8E8;
}
.readMore_button {
width: 75px;
height: 26px;
position: absolute;
right: 10px;
bottom: 10px;
background-color: grey;
background: url("/assets/Images/view_more_01.png") no-repeat;
}
.readMore_button a {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica;
font-size: 13px;
color: #464444;
margin-left: 6px;
line-height: 26px;
text-decoration: none;
}
.readMore_button:hover {
background: url("/assets/Images/view_more_02.png") no-repeat;
}
.readMore_button:hover a {
color: #fff;
}
I am using squarespace CMS and i am using content block in each of them, issue has arises-ed because of that.
<squarespace:block-field id="BlockField_Management" class="BlockField_02" columns="10"/>
this line creates many div blocks and i have notice through web inspector that in 2nd and 3rd some of div are over-lapping read more button, that is why mouse hover is not behaving correctly.
Solution use z-index to .readMore_button class.
.readMore_button {
width:75px;
height:26px;
position:absolute;
right:10px;
bottom:10px;
background-color:grey;
background:url("/assets/Images/view_more_01.png") no-repeat;
z-index:100;
}