When I center my menu items using justify-content: center the left border of the left icon disappears. (View issue on JSFiddle)
My workaround is to manually assign a border using .add-left-border. However I'm not sure why this is required. Anybody know what's going on here?
#header-menu {
justify-content: center;
}
/* Why do I have to add this for border to show up? */
.add-left-border {
border-left: 1px solid rgba(34,36,38,.15);
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css"/>
<div class="ui icon menu" id="header-menu">
<a class="item add-left-border">
<i class="code branch icon "></i>
</a>
<a class="item">
<i class="github icon"></i>
</a>
<a class="item">
<i class="envelope icon"></i>
</a>
</div>
None of the buttons have a left border as they all apply borders to their right side (see below), while the first button depends on the menu's border to provide its visual boundary.
.ui.menu .item::before {
position: absolute;
content: '';
top: 0;
right: 0;
height: 100%;
width: 1px;
background: rgba(34,36,38,.1);
}
You will always need to use a bespoke solution as the framework doesn't appear to provide a centered menu. For purposes of consistency and cleaner HTML, you can achieve it with only CSS modifications:
#header-menu {
justify-content: center;
}
#header-menu .item:first-child::after {
position: absolute;
content: '';
top: 0;
left: 0;
height: 100%;
width: 1px;
background: rgba(34,36,38,.1);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css"/>
<div class="ui icon menu" id="header-menu">
<a class="item">
<i class="code branch icon"></i>
</a>
<a class="item">
<i class="github icon"></i>
</a>
<a class="item">
<i class="envelope icon"></i>
</a>
</div>
Related
So i have a HTML list where each List item has an image with a header title above it and a box behind the image that transforms on hover. I'm close to getting it to appear the way I'd like, but the list items don't seem to co-operate the way they should. I'm trying to get the box to be directly behind the image and the text to be centered above the box, but currently they are slightly misaligned. Here is a JSFiddle JSFiddle showcasing the List.
an example of one of the list items looks like this:
<li>
<a href = "" class="linkChange">
<h6 class ="headings">Appointment App</h6>
<img class="imgs" id="imgs" src = "https://img.icons8.com/clouds/2x/calendar.png"/>
<span class="box rotate" id = "box"></span>
</a>
</li>
The css is detailed in the JSFiddle. I'm slightly new to Web Dev so forgive me if some of the CSS is redundant.
Instead of using a <span> after your <img> tag, instead put your image in a <div> and apply the background to that div. Also remove the position: absolute; that you have on .imgs and .box.
<div class="box rotate" id = "box">
<img class="imgs" id="imgs" src = "https://img.icons8.com/clouds/2x/calendar.png"/>
</div>
I think you have far too much CSS going on, and many of the styles are redundant, or being overwritten by other styles. But I don't want to focus too much on that, since this isn't a code review, but rather, a solution. I did trim away styles that were unnecessary.
Here is what I changed:
Moved the h6 outside of the link, since users are likely going to click on the large target area of the image, rather than the heading text.
Added display: flex to your anchor and justified its contents to the center.
I set white-space: nowrap on the h6 so that it looks cleaner above the boxes. Here's the result.
.appsList {
list-style: none;
display: flex;
margin: 0 auto;
}
.appsList li {
position: relative;
padding: 100px;
}
.appsList .headings {
color: purple;
white-space: nowrap;
margin: 0 0 .75rem;
font-size: 1.2rem;
}
.linkChange {
display: flex;
justify-content: center;
}
.imgs {
position: absolute;
z-index: 1;
display: inline-block;
}
.box {
position: absolute;
background: #5FCF80;
width: 200px;
height: 200px;
z-index: -1;
}
/* Box comes immediately after imgs, so it can be selected to transform on hover with imgs */
#imgs:hover+#box {
transform: rotate(360deg);
background: #9351A6;
border-radius: 50%;
transition: all 1s ease-in-out;
z-index: -1;
}
.box:hover {
transform: rotate(360deg);
background: #9351A6;
border-radius: 50%;
z-index: -1;
}
.rotate {
transition: all 0.5s ease-in-out;
}
.rotate:hover {
transition: all 1s ease-in-out;
}
<ul class="appsList">
<li>
<h6 class="headings">Appointment App</h6>
<a href="" class="linkChange">
<img class="imgs" id="imgs" src="https://img.icons8.com/clouds/2x/calendar.png" />
<span class="box rotate" id="box"></span>
</a>
</li>
<li>
<h6 class="headings">Second App</h6>
<a href="" class="linkChange">
<img class="imgs" id="imgs" src="https://img.icons8.com/clouds/2x/brain.png" />
<span class="box rotate" id="box"></span>
</a>
</li>
<li>
<h6 class="headings">Banking App</h6>
<a href="" class="linkChange">
<img class="imgs" id="imgs" src="https://img.icons8.com/clouds/2x/bank-building.png" />
<span class="box rotate" id="box"></span>
</a>
</li>
<li>
<h6 class="headings">Reimburement App</h6>
<a href="" class="linkChange">
<img class="imgs" id="imgs" src="https://img.icons8.com/clouds/2x/cash-in-hand.png" />
<span class="box rotate" id="box"></span>
</a>
</li>
</ul>
jsFiddle
The problem is, I'm trying to test my template for all the browsers, it looks fine in Chrome (I use it primarily) but it looks off in Firefox and Explorer.
I tried to use prefixes, I used auto prefix in brackets to make sure everything is as it should. in Firefox, the background is not showing, and the search bar doesn't have the correct padding that I gave it. Same thing with explorer but the search bar is fine but the background not so much.
.header {
background-image: url(images/headerimg.webp);
background-size: cover;
background-position: center;
height: 300px;
padding: 0;
margin: 0;
text-align: center;
}
.searchContainer {
float: left;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.search {
padding: 7px 10px !important;
border-radius: 0 4px 4px 0;
font-size: 17px;
border: 2px solid #363a5e;
border-left: none;
width: 360px;
color: #666a8c;
margin: 1px 0 0 -3px;
background-color: #363a5e;
-webkit-transition: .2s;
transition: .2s;
}
<header class="header jumbotron" role="heading" aria-level="1">
<div class="filter">
<div class="container">
<div class="mobileOpenContainer">
<span onclick="openNav()" class="showNavSearch"><i class="fas fa-bars"></i></span>
<span onclick="openSearch()" class="showNavSearch" id="search"><i class="fas fa-search"></i></span>
</div>
<div class="logoNavContainer" role="img">
<img class="logo" src="images/Logo.svg" alt="logo">
<nav>
<ul class="navbar" role="navigation">
<a href="#">
<li class="nav">خانه</li>
</a>
<a href="#">
<li class="nav">تبلیغات</li>
</a>
<a href="#">
<li class="nav">تماس با ما</li>
</a>
<a href="#">
<li class="nav">خرید قالب</li>
</a>
</ul>
</nav>
</div>
<div class="reqSearchContainer">
<button class="request" role="button"><i class="fas fa-film"></i>درخواست انتشار</button>
<button class="request" role="button"><i class="fas fa-heart"></i>حمایت از ما</button>
<div class="searchContainer">
<label>
<input class="search" placeholder="جستوجو..." aria-label="Searchbar">
<span class="searchBtn" aria-label="Search button"><i class="fas fa-search"></i></span>
</label>
</div>
</div>
</header>
This is how it looks like in Chrome (how it should):
This is Firefox:
IE is the same as Firefox, but the search bar is fine.
Okay I found a way to do it, but it may not be the best for some who have the same problem as I had:
First of all, to be able to see the background, I had to update to Firefox 65+ because .webp is supported from that version, it seems (for IE, it doesn't support it at all, which is a shame, so I just changed it to jpg)
For the searchbar however, I didn't find any good way to fix the padding, so I just used height in CSS to give it fixed height and that also fixed that problem, but may not be the best option for some.
As you will tell from this question I'm still new with Flexbox as well as with SASS. I have an MVC app where I'm trying to align the header login information depending on if they are authenticated or not.
What I'm trying to accomplish is to have my header with a logo to the left and some login/register buttons flush to the bottom in a single row if you are not authenticated or their username and logoff/account info stacked on top of each other if they are authenticated.
I'm trying to use flexbox to accomplish these. The idea is I would have an overall parent container "header_account-info", the logo in the "header__logo" child container, and other login parts in either "header_account-user" or "header-account-login". For testing I'm using the "header-account-login" container.
With the code below I can not get the "header-account-login" container to have a background color (using for testing) nor can I get it to align to the bottom.
I put this in Code Pen and see the same results.
https://codepen.io/anon/pen/WgGxQL
Why would I not see a background color in my "header-account-login" container and I thought I had the correct setting to make the buttons go to the end (bottom) of the container?
HTML
<div class="header">
<div class="header__logo">
<img src="~/images/logo.png" class="header-logo" />
</div>
<div class="header_account-info">
<div class="header-account-login">
<a href="#Url.Action("Register", "Account")" id="registerLink" class="btn btn-outline-secondary">
<i class="far fa-user-plus"></i> Register
</a>
<a href="#Url.Action("Login", "Account")" id="loginLink" class="btn btn-outline-secondary">
<i class="fas fa-sign-in-alt"></i> Log In
</a>
</div>
</div>
</div>
SASS
.header {
display: flex;
padding: 3px;
&__logo {
/*flex: 1;*/
margin-right: auto;
background-color: aqua;
height: 100px; /*TESTING*/
}
&__account-info {
display: flex;
background-color: aquamarine;
}
&__account-user {
background-color: blanchedalmond;
}
&__acount-login {
align-items: flex-end;
background-color: aquamarine;
}
}
Why would I not see a background color in my "header-account-login" container and I thought I had the correct setting to make the buttons go to the end (bottom) of the container?
Because you have typos in your HTML/CSS - in some cases you are using a single underscore and in others two. Also "account" is incorrectly spelled in some places.
As for the lauot, I think this will suffice:
.header {
display: flex;
padding: 3px;
justify-content: space-between;
}
.header__logo {
/*flex: 1;*/
margin-right: auto;
background-color: aqua;
height: 100px;
}
.header__account-info {
display: flex;
align-items: flex-end;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="header">
<div class="header__logo">
<img src="http://www.fillmurray.com/g/140/100" class="header-logo" />
</div>
<div class="header__account-info">
<div class="header__account-login">
<a href="#Url.Action(" Register ", "Account ")" id="registerLink" class="btn btn-outline-secondary">
<i class="far fa-user-plus"></i> Register
</a>
<a href="#Url.Action(" Login ", "Account ")" id="loginLink" class="btn btn-outline-secondary">
<i class="fas fa-sign-in-alt"></i> Log In
</a>
</div>
</div>
</div>
Here is one way to make it work:
.header-account-info {
position: relative;
}
.header-account-login {
background-color: red;
position: absolute;
bottom: 0px;
right: 0px;
width: 158px;
}
The way you are trying to call your class (i.e. "&__acount-login") is wrong - just give yourself the full class name like my example.
This question already has answers here:
Bootstrap 4 - Sticky footer - Dynamic footer height
(3 answers)
Footer in Bootstrap, that extends with content or sticks to the bottom
(3 answers)
Closed 4 years ago.
I’m trying to make a sticky footer using bootstrap 4. How do I make sure regardless of how much content it always stays at the bottom of the screen? I've looked up other answers for sticky footers and haven't been able to get it to work so I wanted to share my code. I've tried changing out the position from fixed, absolute and relative none of which work.
On another project I was able to get it to work with absolute. Does it have to do with my css for html and body?
HTML
<footer class="footer">
<!-- <div class="container-fluid"> -->
<a href="https://www.facebook.com/lucas.stahl.75">
<i class="fa fa-facebook"></i>
</a>
<a href="https://twitter.com/LucasStahl11">
<i class="fa fa-twitter"></i>
</a>
<a href="https://www.linkedin.com/in/lucasstahl">
<i class="fa fa-linkedin"></i>
</a>
<a href="https://lucasstahl.wordpress.com/">
<i class="fa fa-wordpress"></i>
</a>
<p id="copyRight">#Copyright 2018 www.lucasstahl.com</p>
<!-- </div> -->
</footer>
CSS
body,
html {
width: 100%;
height: 100%;
/* min-height: 100%;
position: relative; */
background-position: center;
background-image: url("clark.png");
background-size: cover;
}
.footer {
/* clear: both; */
/* position: absolute; */
background-color: rgb(229, 240, 136);
text-align: center;
color: rgb(175, 167, 166);
border-top: 5px solid rgb(175, 167, 166);
overflow: hidden;
padding-top: 20px;
bottom: 0;
width: 100%;
height: 100px;
}
The problem I have is that it's moving the footer depending on the size of the screen. It won't stay there all the time.
For different screens you will need to use media queries This will allow you define at each size of your screen how the footer will look.
http://getbootstrap.com/docs/4.0/examples/sticky-footer-navbar/ Is what you need by the looks of things
Look at the code I've provided jsfiddle
<footer class="footer">
<!-- <div class="container-fluid"> -->
<nav>
<li><a href="https://www.facebook.com/lucas.stahl.75">
<i class="fa fa-facebook"></i>
</a></li>
<li><a href="https://twitter.com/LucasStahl11">
<i class="fa fa-twitter"></i>
</a></li>
<li><a href="https://www.linkedin.com/in/lucasstahl">
<i class="fa fa-linkedin"></i>
</a></li>
<li><a href="https://lucasstahl.wordpress.com/">
<i class="fa fa-wordpress"></i>
</a></li>
<li id="copyRight">#Copyright 2018 www.lucasstahl.com</li>
</nav>
<!-- </div> -->
</footer>
CSS
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
background-color: yellow;
}
nav {
display: flex;
list-style: none;
}
At this site, there is a div.social below the Online Bookings at top right of the screen.
http://imgur.com/a/QhlIL
Note: I've not been able to upload images to SO for months - always says the image is too large (> 2MB) when it is 140 KB.
For some reason .social is not displaying, nor its sub-elements:
<div class="social">
<a title="Trip Advisor" href="#" target="_blank">
<div class="tripAdvisor"></div>
</a>
<a title="Facebook" href="#" target="_blank">
<div class="facebook"></div>
</a>
<a title="Instagram" target="_blank" href="#">
<div class="instagram"></div>
</a>
<a title="YouTube" target="_blank" href="#">
<div class="youtube"></div>
</a>
</div>
<style>
.headRight .tripAdvisor {
background: url(../images/social/tripadvisor.png) no-repeat;
width: 28px;
height: 22px;
}
</style>
.social is set to display: block; and there is enough room to fit the icons in.
Help appreciated.
Just checked the bug on your website.
You must apply the style to the child divs of .social
.social div {
display: inline-block;
margin-right: 15px;
display: inline; // remove this line
zoom: 1;
}
remove the
"display: inline"
Just keep
.social div {
display: inline-block;
margin-right: 15px;
zoom: 1;
}
from that class. Will work perfectly.