I have a 2-column grid, and I'm trying to put my in the left column, and the (#footer-info) text in the right column. I have assigned grid-areas, but they won't move to their respective columns. Both the h1 and article are stuck on top of each other in the left column.
Text is all stacked on top in the left column, I want to move the below text to the right (indicated in red)
footer {
background-color: $navy;
color: $white;
text-align: center;
>div {
position: relative;
#include md {
display: grid;
grid-template-columns: 50% auto;
grid-template-areas: "glazetitle location";
}
section {
position: relative;
z-index: 20;
h1 {
font-family: 'Caveat', cursive;
font-size: rem-calc(35);
font-weight: 700;
color: $white;
z-index: 1;
#include md {
grid-area: glazetitle;
}
}
#footer-info {
#include md {
grid-area: location;
}
p {
font-family: 'Padauk', sans-serif;
font-size: rem-calc(16);
line-height: rem-calc(22);
color: $white;
}
ul {
display: flex;
justify-content: center;
padding: 15px 0px;
li {
margin: 0px 10px;
a:link,
a:visited {
color: $white;
&:hover,
&:active {
color: $gray;
}
}
}
}
}
}
#footer-scribble {
background-image: url('../img/Footer/footer-scribbles.svg');
height: 300px;
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
width: 120%;
z-index: 10;
margin-left: -200px;
#include md {
width: 100%;
height: 250px;
margin-left: -150px;
}
}
}
}
<footer class="grid-container content-spacing subhead-spacing">
<div>
<section>
<h1>Glaze Studio</h1>
<article id="footer-info">
<p>1488 Lunetta Street<br> Philadelphia, PA 19106</p>
<ul>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-facebook-square"></i>
</li>
<li><i class="fab fa-instagram"></i>
</li>
<li><i class="fab fa-youtube"></i></li>
</ul>
<p>215-925-3453<br> info#glazestudio.org
<br> Icons: icons8.com</p>
</article>
</section>
<aside id="footer-scribble"></aside>
</div>
</footer>
Please let me know if I need to supply more info, I'm still new to this platform. **Also the address/phone number are phony! No worries.
A couple of things I have noticed.
You defined a grid-template-areas: "glazetitle location" in a medium breakpoint, but then never assigned them to there respected tags. In this case, it would be your section tag and your aside tag at the medium breakpoint size.
Why is the div directly inside of the footer tag set to relative. A follow-up question would be why is the aside tag set to an absolute position?
I would say fix those 2 issues first and this might then solve your overall grid problems.
Related
Today, I am comming with a problem from work. First of all, the code was created some time ago and I have to correct it now. Of course I've made the sandbox easier to avoid unnecessary styles.
<div>
<a id="perfect" href="https://css-tricks.com/">
<span class="perfect">
<p>Perfect</p>
</span>
<span class="maker">Solution</span>
</a>
</div>
<div>
<a href="https://css-tricks.com/">
<span class="problem">Problem</span>
<span class="maker">Makes me cry</span>
</a>
</div>
<div>
<a href="https://css-tricks.com/">
<span class="problem">Problem</span>
<span class="maker">Makes me cry</span>
</a>
</div>
div {
display: block;
width: 150px;
height: 150px;
background: lightblue;
text-align: center;
float: left;
margin: 10px;
}
a {
display: block;
width: 150px;
height: 150px;
text-decoration: none;
color: black;
}
.problem {
display: block;
padding: 30px 10px 0;
}
.maker {
display: block;
padding: 20px 10px 0;
}
p {
padding: 0;
margin: 0;
}
p:hover {
color: red;
}
I have three tile there. First of all works what I expect, but I would like to receive the same result on the second and third tile without paragraph.
The clue is that red color appears, if I put a mouse on random place above right content. I mean all span called "problem" is on hover.
How to ensure a similar behaviour like in first tile on the others without using paragraph? Do you have some idea?
I've tried to do that using margin, but it was wrong.
Try to add this into your stylesheets:
div > a > span:hover {
color: red;
}
Here is a solution:
Your issue is that your applying padding: 30px 10px 0; to span. The link is applying itself to the entire span with its padding.
I removed padding on your span and instead applied it to the div. - You can now adjust the padding on the div instead of the span.
Additionally, I moved the #perfect id to the first div because it had a different background-color.
div {
display: block;
width: 150px;
height: 150px;
background: lightblue;
text-align: center;
float: left;
margin: 10px;
padding: 30px 10px 0;
}
a {
display: block;
width: 150px;
height: 150px;
text-decoration: none;
color: black;
}
.problem {
display: block;
}
.problem:hover {
color: red;
}
.maker {
display: block;
}
p {
padding: 0;
margin: 0;
}
p:hover {
color: red;
}
.perfect {
display: block;
}
#perfect {
background-color: pink;
}
<div id="perfect">
<a href="https://css-tricks.com/">
<span class="perfect">
<p>Perfect</p>
</span>
<span class="maker">Solution</span>
</a>
</div>
<div>
<a href="https://css-tricks.com/">
<span class="problem">Problem</span>
<span class="maker">Makes me cry</span>
</a>
</div>
<div>
<a href="https://css-tricks.com/">
<span class="problem">Problem</span>
<span class="maker">Makes me cry</span>
</a>
</div>
Just change the display for the .problem from 'block' to 'inline-block', change the padding-top to 0 and give a margin-top of 30px
.problem {
display: inline-block;
padding: 0px 10px 0;
margin-top: 30px;
}
.problem:hover {
color: red;
}
I'am making a Navbar to a website and I want it to be fixed at the top , so that when I scroll down the navbar is still acessible.
However, the NavBar position is relative (should be fixed , I know) because I have absolute elements which are relatively positioned to it.
If I change the position from relative to fixed the navbar looks and background color fall apart.
You can see the code below :
CSS
#cabeçalho{
position: relative;
background-color: rgba(0, 0, 0, 0.6);
height: 110px;
}
header h1{
margin: 3px;
color: white ;
font-size: 55px;
font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, Georgia, sans-serif;
}
header p{
position: absolute;
color: white;
font-size: 25px;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif ;
transform: translate(95px , -20px);
}
ul {
margin: 0px;
padding: 0px;
position : absolute;
transform: translate(950px , -20px);
}
li{
display: inline ;
border: 1px solid white;
font-size: 15px;
padding: 10px;
margin: 5px;
color : white
}
HTML
<div id="cabeçalho">
<header>
<h1>Joana Bonvalot</h1>
<p>Artista - Pintora Clássica<p>
</header>
<ul>
<li>Página Inicial</li>
<li>Galeria</li>
<li>Encomendas</li>
<li>Contactos</li>
</ul>
</div>
I would like to know if there is any way I can make the navbar element position fixed but also relative in order to make the absolute elements stay in place.
Put all the elemets in the navbar tag and give it style position: relative so the absolute positioned elements stays in the nav.
Put the nav element in the header, and style it position: fixed.
header {
position: fixed;
}
nav {
position: relative;
}
<header>
<nav>
<ul>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
</ul>
<div class="absolute-div">
</div>
</nav>
</header>
This is a rather simple solution, when changing the position from relative to fixed, create and set a width style equal to 100%.
#cabeçalho {
position: fixed;
width: 100%;
background-color: rgba(0, 0, 0, 0.6);
height: 110px;
}
It is possible to use flexbox layout. If it is used, then it will be simple to make columns to be set like row. And then there will be no need to use absolute positioning. In addition, your unordered list can be responsive, if we use flexbox layout. So the code would look like this:
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.container {
display: flex;
flex-direction: row;
background-color: rgba(0, 0, 0, 0.6);
height: 110px;
}
.left {
flex-basis: 50%;
}
header h1 {
margin: 3px;
color: white;
font-size: 55px;
font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, Georgia, sans-serif;
}
header p {
color: white;
font-size: 25px;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
margin: 0px;
padding: 0px 0px 0px 95px;
}
.right {
flex: 1;
align-self: center;
}
li {
display: inline;
border: 1px solid white;
font-size: 15px;
padding: 10px;
margin: 5px;
color: white
}
.horizontal-list {
display: flex;
flex-flow: row wrap;
}
.list-item {
border: 1px solid white;
font-size: 15px;
padding: 10px;
margin: 5px;
color: white;
}
.order-1 {
order: 1;
}
.order-2 {
order: 2;
}
.order-3 {
order: 3;
}
.order-4 {
order: 4;
}
<div class="navbar">
<div class="container">
<div class="left">
<header>
<h1>Joana Bonvalot</h1>
<p>Artista - Pintora Clássica<p>
</header>
</div>
<div class="right">
<div class="horizontal-list">
<div class="list-item order-1">
Página Inicial
</div>
<div class="list-item order-2">
Galeria
</div>
<div class="list-item order-3">
Encomendas
</div>
<div class="list-item order-4">Contactos</div>
</div>
</div>
</div>
</div>
I'm trying to get four different layouts, some text with either another bit of text to the left, to the right, above or below.
I have this code:
<div>
<span class="icon">H</span>
<span class="text">Hello</span>
</div>
Then this CSS
div { background: grey; position: absolute;}
.icon {font-family: calibri; position: absolute;}
//.text {padding-left: 15px;} .icon {left: 0;} // Icon left of text
//.text {padding-right: 15px;} .icon {right: 0;} //Icon right of text
//.text { padding-top: 15px; } .icon {top: 0;} // Icon top of text
//.text { padding-bottom: 15px; } .icon {bottom: 0;} // Icon bottom of text
Then depending on which one of the last four lines I uncomment out should determines the position of icon text in relation to the main text. However, it doesn't seem to work, and I'm only able to really achieve the "Icon left of text" position.
Can anyone explain where I am going wrong.
You have two issues that are effecting the output:
Incorrect comments
CSS only supports /**/ comments and not //, this means that the browser is getting confused and is implementing/ignoring rules.
.text and .icon are inline elements
.text and .icon are spans which makes them inline elements by default. inline elements don't support top and bottom padding so your top and bottom rules will not have the desired effect. This can be rectifed by making .text and .icon block elements instead.
div {
background: grey;
position: absolute;
}
.icon {
font-family: calibri;
position: absolute;
}
span {
display: block;
}
.left {
top: 0;
}
.left .text {
padding-left: 15px;
}
.left .icon {
left: 0;
}
.right {
top: 3em;
}
.right .text {
padding-right: 15px;
}
.right .icon {
right: 0;
}
.top {
top: 6em;
}
.top .text {
padding-top: 15px;
}
.top .icon {
top: 0;
}
.bottom {
top: 9em
}
.bottom .text {
padding-bottom: 15px;
}
.bottom .icon {
bottom: 0;
}
<div class="left">
<span class="icon">H</span>
<span class="text">Hello</span>
</div>
<div class="right">
<span class="icon">H</span>
<span class="text">Hello</span>
</div>
<div class="top">
<span class="icon">H</span>
<span class="text">Hello</span>
</div>
<div class="bottom">
<span class="icon">H</span>
<span class="text">Hello</span>
</div>
I am new to css and am currently trying to split the screen in two parts and place text on the left and the right side. However, for some reason the right "box" doesn't cover the whole right part of the screen, only like 200-300 px...
JSFiddle:
https://jsfiddle.net/19mw8hzL/
The black text should reach to the right side of the screen.
<div class="wrapper">
<div id="one">
<p class="w-text-1">Strategy</p>
</div>
<div id="two">
<ul>
<li>Visioning</li>
<li>Strategic Analysis</li>
<li>Strategy Formulation</li>
<li>Business Model Innovation</li>
<li>Financial Modeling</li>
</ul>
</div>
</div>
Flexbox can do that.
.w-text-1 {
font-family: 'Garamond', serif;
color: rgba(163, 42, 46, 1);
font-size: 35px;
}
.wrapper {
display: flex;
}
.wrapper div {
color: #fff;
}
#one {
width: 20%;
}
#two {
flex: 1;
background: lightblue;
text-align: right;
}
#two a {
text-decoration: none;
font-family: 'Gotham', sans-serif;
font-size: 17px;
color: #000;
border: 1px solid grey;
}
#two ul {
overflow: hidden;
padding: 0;
}
#two li {
display: inline-block;
margin: 5px 0 0 0;
}
<div class="wrapper">
<div id="one">
<p class="w-text-1">Strategy</p>
</div>
<div id="two">
<ul>
<li>Visioning
</li>
<li>Strategic Analysis
</li>
<li>Strategy Formulation
</li>
<li>Business Model Innovation
</li>
<li>Financial Modeling
</li>
</ul>
</div>
</div>
Change your css for #two, to add in the 20% of #one, to make 100%:
#two {
float: left;
overflow: hidden;
width: 76%; /* this is completing the width with the 4% padding */
padding-top: 17px;
padding-right: 4%;
}
Hi please modify these
Lets make the parent element as 100% and make the children div as 50% each
.wrapper {
width : 100%;
}
#one {
float:left;
width:50%;
}
width to 46% because we have given padding right as 4% so (46+4 = 50)
#two {
float: right;
width: 46%;
padding-top: 17px;
padding-right: 4%;
}
:)
*{
box-sizing: border-box;
}
This will remove padding as part of the width of all elements. Don't use '*' as a selector as it's quite heavy on the DOM.
#two {
width: 80%;
}
Because 20% + 80% = 100%
#two li {
display: inline-block;
}
This will add a width and a height to the li's
I am trying to middle align icons inside a circle. I am using icon fonts by font-awesome. My code is as follows
<ul>
<li><i class="icon-5x icon-camera"></i></li>
<li><i class="icon-5x icon-camera"></i></li>
<li><i class="icon-5x icon-camera"></i></li>
</ul>
CSS
ul {
list-style: none;
}
ul li {
display: inline-block;
margin: 15px;
height: 100px;
width: 100px;
border-radius: 50%;
}
ul li a {
font-size: 1em;
color: #000;
display: table-cell;
vertical-align: middle;
text-align: center;
text-decoration: none;
}
and also I tried
a {
line-height: 100%;
text-align: center;
}
But these approaches does not work.
Your solution is valid, you just need to move the width and height declarations into the a:
ul {
list-style: none;
li {
display: inline-block;
background-color: pink;
margin: 15px;
border-radius: 50%;
a {
color: #000;
display: table-cell;
vertical-align: middle;
text-align: center;
height: 100px;
width: 100px;
&, &:hover, &:active {
text-decoration: none;
}
}
}
}
Result:
You can do this with flexbox quite easily. That is my go to and then fallback to the above solution for browsers that don't support flexbox. Flexbox support is awesome these days especially with IE 8 9 & 10 going away.
The trick is to use justify-content: center to align the icon center in the circle and use align-items: center to vertically align the icon in the circle.
Check out this great resource on flexbox. See here for an example pen http://codepen.io/celsowhite/pen/pgVegE.
The HTML:
<ul class="social_links">
<li><a href="" target="_blank">
<i class="fa fa-envelope"></i>
</a></li>
<li><a href="" target="_blank">
<i class="fa fa-twitter"></i>
</a></li>
<li><a href="" target="_blank">
<i class="fa fa-facebook"></i>
</a></li>
</ul>
The SCSS:
ul.social_links {
display: block;
padding: 20px 0px 0px;
li {
display: inline-block;
font-size: 23px;
padding: 0px 10px;
}
}
ul.social_links i {
background: black;
border-radius: 50%;
width: 50px;
height: 50px;
color: #fff;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
transition: all .5s ease-in-out;
&:hover{
background: #555555;
}
}
Use line-height property, that's best, I had same problem I used line-height and it's done.
Example
height:20px;
width:20px;
line-height:20px;
good to go
Example of list :
<ul class="list-unstyled list-coordonne">
<li><i class="fa fa-coordonne" aria-hidden="true"></i><p> 293, Boulevard Abdelmoumen 20360 - Casablanca Maroc</p></li>
<li><i class="fa fa-coordonne" aria-hidden="true"></i><p> 293, Boulevard Abdelmoumen 20360 - Casablanca Maroc</p></li>
<li><i class="fa fa-coordonne" aria-hidden="true"></i><p> 293, Boulevard Abdelmoumen 20360 - Casablanca Maroc</p></li>
</ul>
CSS code to center icon in circle :
.footer-text .fa-coordonne {
color: white;
background-color: #dad918;
border-radius: 50%;
font-size: 25px;
width: 40px;
height: 40px;
text-align: center;
}
.footer-text .list-coordonne>li:first-child .fa-coordonne:before{
content: '\f041';
text-align: center;
font-weight: 600;
vertical-align: sub;
z-index: 12;
}
.footer-text .list-coordonne>li:nth-child(2) .fa-coordonne:before{
content: '\f003';
text-align: center;
font-weight: 600;
vertical-align: sub;
z-index: 12;
}
.footer-text .list-coordonne>li:last-child .fa-coordonne:before{
content: '\f095';
text-align: center;
font-weight: 600;
vertical-align: -webkit-baseline-middle;
z-index: 12;
}
What I simply like to do is first set the height and width of the icon. Plop it in a div. Apply border radius of 50%(to get a circle) to the div. And give it a background-color(obviously). Set the display property of the div to "flex". justify-content: center and align-items: center. And there you go! Works out for me!
add this padding in 'li'
li{
padding:10px; //or anyvalue
}
or use specific padding
li{
padding-top:10px; //or any value
}
remember when you add padding value then the size would also increases, adjust and balance them.