I have a layout, that looks as following:
I am trying to place the div circle on buttom and right as following:
$menu-btn: 65px;
.portfolio-container {
width: 100%;
height: 100%;
.show-menu-btn {
display: flex;
justify-content: center;
align-items: center;
height: $menu-btn;
width: $menu-btn;
border-radius: 50%;
background-color: #24344b;
position: sticky;
bottom: 10;
right: 10;
.fa-align-justify {
color: white;
}
}
}
But as you can see, it does not work. What am I doing wrong?
The html code is:
<div class="portfolio-container">
<div class="show-menu-btn">
<i class="fas fa-align-justify fa-2x" />
</div>
</div>
I see two issues with this, firstly, you need to be stating whether the bottom and right are using px, em, rem etc:
bottom: 10px;
right: 10px;
Secondly, you should change your position to absolute rather than sticky
Related
Page Example: https://codepen.io/anthonyhvelazquez/pen/qBBVjBX
The example I posted is a working example of the template I want to have. I have 2 fixed height headers and the rest of the content-container will fill the height of the parent. Anything within the content-container will auto scroll if the child's content is larger than the the content-container. I know there are other functions like minmax, and fit-content and wanted to make sure there isnt a better/more responsive way of setting up the page.
Some other questions I had regarding grids:
If I wanted to have a hidden header that appears and disappears on the click of a button, would it be better using a grid system and trying to animate the grid rows to a height of 0 or would it be better setting up the container as a vertical flex container and modifying the height of the navbars themselves
If I tried to implement this in Angular, would I have to wrap my components in div containers with the grid location style to place them in a grid template properly or can I add the styling to the component itself like so:
<div style="grid-row: 1/2">
<app-component></app-component>
</div>
// or
<app-component style="grid-row: 1/2"></app-component>
The codepen demo is not responsive and to your question. Is it the most responsive method? No, it is not.
With grid system you can make any layout you can think of, but not everywhere you need it.
You can simply use Flex and it will be responsive as well.
I am adding code for a normal web layout. having Header, hero section
content and para and all be responsive. Feel free to go through them and understand them. Feel free to ask anything regarding it. I will help as much I can.
In Angular, you can make components like header, footer and add the respective HTML tags and CSS for the components and imports it in your home page component. Hope this helps.
For two fixed header you can just increse the height of the header in its class. But you have to use js for adding click function and doing the changes in height of that header class.
For the particular example, I had just used flex here.
body, html{
padding: 0px;
margin: 0px ;
box-sizing: border-box;
}
.header{
z-index: 10;
height: 80px;
width: 100%;
position: fixed;
background: linear-gradient( 160deg, #00689b 0%, #00adef 100%);
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.06);
}
.header .logo{
width: 190px;
height: auto;
position: absolute;
top: 54%;
left: 135px;
transform: translate(-50%, -50%);
cursor: pointer;
color: white;
}
.header-links{
display: flex;
flex-direction: row;
float: right;
padding: 9px 20px;
color: white;
font-size: 18px;
}
.header-links span{
padding: 20px;
}
.hero-section{
width: 100%;
height: 80vh;
position: relative;
background-color: turquoise;
top: 80px;
}
.hero-section img{
width: 100%;
height: 80vh;
object-fit: cover;
position: absolute;
}
.hero-section h1{
position: absolute;
text-align: center;
color: white;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.contents-container{
padding: 5% 5%;
position: relative;
width: 100%;
min-height: 100vh;
}
.h-features-container{
padding-top: 20px;
height: auto;
width: 100%;
position: relative;
background-color: white;
z-index: 1;
}
.h-features-container >h3{
justify-content: center;
text-align: center;
font-size: 28px;
color: #111;
}
.features-card-container{
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
margin-top: 10px;
padding: 50px 9%;
box-sizing: border-box;
}
.features-card{
width: 300px;
height: 412px;
background-color: red;
padding: 20px;
margin: 19px;
border-radius: 2px;
background: #fff;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16);
}
.features-card h3{
text-align: center;
}
.features-card p{
font-size: 16px;
}
/* footer */
.h-footer{
min-height: 50vh;
width: 100%;
position: relative;
bottom: 0px;
padding: 0%;
background: linear-gradient( 90deg, #00689b 0%, #00adef 100%);
}
.h-footer-flex{
display: flex;
flex-direction: row;
flex-wrap: wrap;
color: white;
white-space: nowrap;
padding: 20px 20px;
}
.h-copywrite{
text-align: center;
color: white;
position: relative;
}
.f-box{
height: 60%;
width: 25%;
padding: 20px;
margin: 20px;
}
.f-box p{
position: relative;
}
.f-box>p>a{
cursor: pointer;
}
.f-box-links:before {
content: '';
position: absolute;
background: white;
width: 0px;
height: 1px;
top: 20px;
opacity: .8;
transform: translate(0%, 0%);
transition: all 0.3s ease;
}
.f-box-links:hover:before {
width: 25px;
}
.social-icon-1{
margin-left: -8px;
}
#media screen and (max-width:1200px){
.f-box{
height: 60%;
width: 28%;
padding: 20px;
margin: 20px;
}
}
#media screen and (max-width:999px){
.f-box{
height: 60%;
width: 26%;
padding: 20px;
margin: 20px;
}
}
<header class="header">
<div class="logo">
<h2>Main Logo</h2>
</div>
<div class="header-links">
<span>Products</span>
<span>Features</span>
<span>Contact</span>
</div>
</header>
<div class="hero-section">
<img src="https://source.unsplash.com/random">
<h1>This is a simple heading</h1>
</div>
<div id="features-container" class="h-features-container">
<h3>Our Products</h3>
<div class="features-card-container">
<div class="features-card">
<h3>Inventory Management</h3>
<p>Inventory Management Software enables you to Manage Your assets The way you want you can
arrange your assets in a way that helps you to keep easy track.
</p>
</div>
<div class="features-card">
<h3>Order Management</h3>
<p>Stock Management Software enables you to Manage Your asstes The way you want you can
arrange your assets in a way that helps you to keep easy track.
</p>
</div>
<div class="features-card">
<h3>Employee Management</h3>
<p>Stock Management Software enables you to Manage Your asstes The way you want you can
arrange your assets in a way that helps you to keep easy track.
</p>
</div>
<div class="features-card">
<h3>Payroll Management</h3>
<p>Stock Management Software enables you to Manage Your asstes The way you want you can
arrange your assets in a way that helps you to keep easy track.
</p>
</div>
<div class="features-card">
<h3>Attendence System</h3>
<p>Stock Management Software enables you to Manage Your asstes The way you want you can
arrange your assets in a way that helps you to keep easy track.
</p>
</div>
</div>
</div>
<!-- footer -->
<footer class="footer">
<div class="h-footer">
<div class="h-footer-flex">
<div class=" f-box">
<p> <a class="f-box-links">Home</a></p>
<p> <a class="f-box-links">Features</a></p>
<p><a class="f-box-links">Clients</a></p>
<p><a class="f-box-links">Why Us</a></p>
<p><a class="f-box-links">Contact Us</a></p>
</div>
<div class=" f-box">
<p> <a class="f-box-links">Terms and Condition</a></p>
<p> <a class="f-box-links">Privacy Policy</a></p>
</div>
<div class=" f-box">
<p>Follow us</p>
<p>Facebook</p>
<p>Instagram</p>
</div>
</div>
<p class="h-copywrite">© 2019 website.in All Rights Reserved</p>
</div>
</footer>
I have something like this
<div class="container">
<div class="img-container">
<img class="thumbnail" src="https://via.placeholder.com/250x250" />
<div classe="img-icon-container">
<i class="photo-icon fas fa-camera-retro" />
<span>10</span>
</div>
</div>
</div>
.container{
height: 200px;
display: flex;
margin-bottom: 20px;
.img-container {
position: relative;
.thumbnail {
height: 100%;
}
.img-icon-container {
position: absolute;
bottom: 0;
width: 100%;
left: 0;
background-color: rgba(110, 110, 110, 0.8);
i {
margin-left: 5px;
margin-right: 5px;
font-size: 20px;
color: white;
}
&:hover {
background-color: blue;
}
}
}
}
In chrome it looks as I wanted.
but in IE 11 & FF
What do I need to add to keep the gray bar contained in the div?
Instead of width:100%; just add right:0;. This will always keep the edges of the inner box against the left and right sides.
The problem is the fixed height of the .container. If you have control of the sizing of these images I would just remove the fixed height of the .container and display: block; on the image to remove the spacing under it.
If you need it to accomodate varying aspect ratios then it's more complicated and there's never a perfect solution that looks neat.
I have the following code for putting my signature in the footer of a website: https://codepen.io/BarrieO/pen/ayQxoZ
However, when implemting the code on my Wordpress website (http://bartoml215.215.axc.nl/), the icons within the divs are not centered as in the Codepen. I think this has to do with the css property align-items: center for my .icon-footer class, but not sure?
To be clear: I want to allign the icons perfectly in the middle of the rounded squares, not in the bottom-middle as currenctly on the website. I want the same result as in the Codpen.
How come my icons are not alligned in the .icon-footers divs?
You need to do 3 modifications for it to work for your website:
1- Change the main wingedHelmet element class to main-icon-footer
<div id="starter" class="main-icon-footer ">
<img src="https://www.petasos.be/wp-content/uploads/2017/05/wingedHelmetSmall.png" class="petasos">
</div>
2- Add the class main-icon-footer to your CSS file
.main-icon-footer {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
border-radius: 25%;
background: white;
border: 1px #818181 solid;
}
3- Remove align-items: center; from .icon-footer in your CSS file
.icon-footer {
position: absolute;
display: flex;
justify-content: center;
width: 50px;
height: 50px;
border-radius: 25%;
background: white;
border: 1px #818181 solid;
}
This is a fix. I tested it on your site.
I really prefer if you do this. but if you don't want this... go below..
note that for this to work you have to replace this code below with the "bottom-bar" div that you already have...
<div id="bottom-bar" class="solid-bg" role="contentinfo">
<div class="wf-wrap">
<div class="wf-container-bottom">
<div class="wf-table wf-mobile-collapsed" style="
text-align: center;
padding-top: 15px;
">
<div id="starter" class="icon-footer" style="
transform: none;
position: static;
margin: auto;
">
<img src="https://www.petasos.be/wp-content/uploads/2017/05/wingedHelmetSmall.png" class="petasos">
</div>
</div>
</div><!-- .wf-container-bottom -->
</div><!-- .wf-wrap -->
</div>
ok the second solution:
just change this css selectors to what i have provided below:
#starter {
cursor: pointer;
width: 70px;
height: 50px;
z-index: 5;
/* left: 215px; */
/* transform: translate(-100%, -100%); */
transition: all 0.6s linear;
filter: invert(100%);
}
.iconHolder {
position: absolute;
/* top: 57px; */
width: 215px;
/* right: 20px; */
}
I have this hamburger I'm creating. I'm trying to understand how to position the bars with precise calculation without eyeballing it. The hamburger height is 24px
so I would assume in order to position the middle bar it would be half the height so 12px(top: 12px;) or incase of the example 0.5em but that doesn't look centered to the overall menu. (top: 10px looks right or 0.625em).
Overall whats a better way to calculate anything in css?
http://codepen.io/anon/pen/Bjjqez
<div class="hamburger">
<div class="hamburger__top"></div>
<div class="hamburger__middle"></div>
<div class="hamburger__bottom"></div>
</div>
SASS
.hamburger {
position: relative;
width: 3em;
height: 1.5em;
cursor: pointer;
div {
background-color: red;
position: absolute;
width: 100%;
height: .25em;
}
&__top {
top: 0;
}
&__middle {
background-color: green;
top: 0.5em;
}
&__bottom {
bottom: 0;
}
}
Flexbox can do that....no positioning required.
Here's a couple of options.
.hamburger {
width: 3em;
height: 1.5em;
cursor: pointer;
display: flex;
flex-direction: column;
margin: 1em auto;
}
.hamburger div {
background-color: red;
height: .25em;
}
.around {
justify-content: space-around;
background: lightblue;
}
.between {
justify-content: space-between;
background: lightgreen;
}
<div class="hamburger around">
<div class="hamburger__top"></div>
<div class="hamburger__middle"></div>
<div class="hamburger__bottom"></div>
</div>
<div class="hamburger between">
<div class="hamburger__top"></div>
<div class="hamburger__middle"></div>
<div class="hamburger__bottom"></div>
</div>
Replace your top: 0.5em with:
top: 50%;
transform: translateY(-50%);
From my understanding of how this works, the top: 50% will move the top of the element to be half way down. The translateY(-50%) will then move the element up by half it's own height, and therefore centrally position it.
Example: http://codepen.io/anon/pen/RrrqWP
I am trying to make my text appear ontop of my background image. I have tried playing around with the z-index and positioning, but cannot seem to get it right.
Here is my HTML:
<div id="float-left">
<div id="triangles">
<img src="img/trianglebackground.png" id="tripic">
</div>
<div id="float-left-text">
<img src="img/portrait.png" id="port">
</div>
</div>
Here is the CSS I have currently:
#tripic {
z-index:1;
height: 550px;
width: 500px;
text-align: center;
opacity: 0.2;
position: relative;
}
#float-left {
float: left;
/*background: url('img/trianglebackground.png') no-repeat center;*/
background-size:500px 550px;
background-color: #03C9A9;
height: 550px;
width: 50%;
z-index:0 ;
position: relative;
}
#float-left-text{
text-align: center;
z-index: 100;
position: absolute;
}
#port {
height: 200px;
width: 125px;
}
Right now, the entire #floatlefttext section is below the background image, whereas I would like it to be ontop. I have tried to use background-image, but I am not sure it's going to be the best way to get the results I would like. Any advice would be great, thanks!
I created a fiddle for you here: https://jsfiddle.net/0w1max4f/
#floatlefttext{
text-align: center;
z-index: 100;
position: absolute;
top: 0px;
left: 0px;
}
Is this what you were looking for? Since your html didn't actually include any text elements (just an image) to be placed on top of the background, but hopefully this will help you anyway.
What I did was to clean up your html (you had some tags that were not properly closed, for example the images and some divs) and add top and left to you absolute positioned div.
You were using absolute and relative positioning correctly but forgot to specifiy where the absolute positioned item were supposed to be placed.
here's a good article about positioning if you want to learn more:
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Something like this
<div style="position: relative; background: url(path to image); width: (width)px; height: (height)px;">
<div style="position: absolute; bottom: 0; left: 0.5em; width: 400px; font-weight: bold; color: #fff;">
<p>(text to appear at the bottom left of the image)</p>
</div>
<p style="position: absolute; top: 1em; right: 2em; width: 120px; padding: 4px; background-color: #fff; font-weight: bold; font-size: 11px;">
(text to appear at the top right of the image)
</p>
</div>
Be aware that you should separate the css from the html
Fiddle: Text ontop of an image and linkage
CSS:
div.image-container
{
width: 400px;
}
a.imagewrapper
{
width:inherit;
}
img.theimage{
width:inherit;
}
a.teasertext
{
position: absolute;
padding-top: 1%;
color: #fff;
line-height: 1.2em;
text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
letter-spacing: .02em;
font-size: 1.5em;
overflow-wrap: break-word;
overflow-y: hidden;
-webkit-transition: all .3s;
transition: all .3s;
font-size: 41px;
width:inherit;
}
HTML:
<div>WOOP DE DOO</div>
<div class="image-container">
<a class="teasertext" href="www.stackoverflow.com">Text on the image, wow amazing !</a>
<a class="imagewrapper" href="www.stackoverflow.com">
<img class="theimage" src="http://img.thesun.co.uk/aidemitlum/archive/01667/THUNDER620_1667926a.jpg">
</a>
</div>
<div class="image-container">
<a class="teasertext" href="www.stackoverflow.com">Text on the image, wow amazing !</a>
<a class="imagewrapper" href="www.stackoverflow.com">
<img class="theimage" src="http://img.thesun.co.uk/aidemitlum/archive/01667/THUNDER620_1667926a.jpg">
</a>
</div>
<div>WOOP DE DOO</div>