I'm trying to float two elements and make the second element fill the remaining width space using only CSS, but the more answers & research I do looks like I might need to use JS.
I'm trying to float text with a variable width next to span which I want to fill the remaining space.
ul#filter-list {
list-style: none;
padding-left: 0px;
}
ul#filter-list span {
font-size: 14px;
float: l margin: 0px 5px;
}
span.filter-pill {
border-radius: 4px;
width: 100%;
margin-left: 12px;
height: 10px;
display: inline-block;
}
<ul id="filter-list">
<li>
<a href="{{ route('question.index') }}">
<span>All</span>
<span style="background: #5fbeaa" class="filter-pill"></span>
</a>
</li>
<li>
<a href="{{ route('question.index') }}">
<span>a big filter name here</span>
<span style="background: #5fbeaa" class="filter-pill"></span>
</a>
</li>
</ul>
JSFiddle - https://jsfiddle.net/1466qdab/
Note with the width set to 100% it falls to the line under.
If you're willing to use flexbox, it can be pretty easy:
ul#filter-list a {
display: flex;
}
In addition, use align-items: center; for centering vertically.
ul#filter-list {
list-style: none;
padding-left: 0px;
}
ul#filter-list a {
display: flex; /*added*/
align-items: center; /*added*/
}
ul#filter-list span {
font-size: 14px;
margin: 0px 5px;
}
span.filter-pill {
flex: 1; /*added*/
border-radius: 4px;
margin-left: 12px;
height: 10px;
}
<ul id="filter-list">
<li>
<a href="{{ route('question.index') }}">
<span>All</span>
<span style="background: #5fbeaa" class="filter-pill"></span>
</a>
</li>
<li>
<a href="{{ route('question.index') }}">
<span>a big filter name here</span>
<span style="background: #5fbeaa" class="filter-pill"></span>
</a>
</li>
</ul>
Related
I need some help, I'm currently trying to make a portfolio using HTML following a tutorial I'm watching.
I used undraw to add an image but unfortunately, the image is stuck to the right:
I want to put the image underneath my icons but not sure on how to do to this. Any advice on how to get the SVG image in the centre underneath my icons?
#import url('https://fonts.googleapis.com/css2?family=Lato:wght#400;700&family=Poppins:wght#400;500;600&display=swap');
*{
color:black;
font-family: 'Lato', sans-serif;
padding: 0;
margin: 0;
box-sizing: border-box;
}
h1,h2,h3,h4,h5,h6,span{
color:black;
text-align: center;
line-height: 1.25;
}
h1{
font-size: 36px;
}
p{
line-height: 1.5;
font-size: 16px;
}
li{
list-style-type: none;
}
.flex{
display: flex; /* this automatically aligns like columns or rows with auto width and auto height */
}
.flex-1{
flex: 1; /* this makes sure that it is the entire height of the page */
}
/* Navigation bar */
.row{
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.text-pink{
color: #FF69B4 ;
}
nav{
height: 100px;
width: 100%;
max-width: 1000px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__link--list{
display: flex;
}
.nav__link--anchor{
margin: 0 12px;
color: black;
text-decoration: none;
font-weight: 700;
}
.nav__link--anchor-primary{
background-color: #FF69B4;
padding: 8px 20px;
border-radius: 50px;
color: white;
transition: all 300ms ease;
}
.nav__link--anchor-primary:hover{
background-color: #FF69B4;
}
.personal_logo{
font-size: 20px;
color: #FF69B4;
margin: 0 12px;
font-weight: bold;
}
/* About mE */
#about-me{
min-height: 100vh; /* entire height of the page */
display: flex;
flex-direction: column;
}
.about-me__info{
display: flex;
flex-direction: column;
}
.about-me__info--container {
display: flex;
flex-direction: column; /* so it is not side-by-side */
align-items: center;
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.about-me--picture--mask{
width: 180px;
height: 180px;
border-radius: 100%;
overflow: hidden;
box-shadow: 0 8px 16px rgba(0,0,0,1);
margin-bottom: 20px;
}
.about-me__picture{
width: 100%;
transform: scale(1,1.1);
padding-top: 7px;
}
.about-me__info--para{
font-size: 15px;
margin-bottom: 28px;
}
.about-me__info--title{
margin-bottom: 15px;
}
.about-me__link{
font-size: 20px;
color:#FF69B4;
text-decoration: none;
padding: 0 16px;
}
.about-me__img--container{
flex: 1;
display: flex;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Annette</title>
<link rel="stylesheet" href="./css/styles.css">
<script src="https://kit.fontawesome.com/6ad8c9aa3b.js" crossorigin="anonymous"></script>
</head>
<body>
<section id="about-me">
<nav>
<div class="personal_logo">Annette</div>
<ul class="nav__link--list">
<li class="nav__Link">
<a href="#languages" class="
nav__link--anchor
link__hover-effect
link_hover-effect--black"
>Languages</a>
</li>
<li class="nav__link">
<a href="#projects" class="
nav__link--anchor
link__hover-effect
link_hover-effect--black">
Projects</a>
</li>
<li class="nav__link">
<a href="" class=
"nav__link--anchor
nav__link--anchor-primary"
>Contact</a>
</li>
</ul>
</nav>
<div class="flex flex-1">
<div class=".about-me__info row"> <!--inside the row, there is 2 sections: infromation and image-->
<div class="about-me__info--container">
<figure class="about-me--picture--mask">
<img src="./images/Annette2.JPG" class= "about-me__picture" alt="Picture of Me!">
</figure> <!--this contains my image -->
<h1 class="about-me__info--title"> Hey! I'm <span class="text-pink">Jane Doe 👋 </span> </h1>
<h1>
<p class="about-me__info--para">
I recently just completed my <strong class="text-pink">insert text </strong> Throughout both degrees, I have always been interested in creating very engaging and interactive PowerPoints to present my work. This led to my passion for web development and designing projects on topics that I’m interested in such as <strong class="text-pink">Ethical AI, Social Justice and Emerging Technologies. </strong>
</p>
<div class="about-me__links"></div>
<a href="" class="about-me__link">
<i class="fa-brands fa-linkedin"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-brands fa-github"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-solid fa-inbox"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-solid fa-file-pdf"></i>
</a>
</div>
</div>
<figure class="about-me__img--container">
<img src="./Assests/undraw_proud_coder_re_exuy.svg" alt="">
</figure>
</div>
</section>
</body>
</html>
Just need a little to fix the mark up. And to put the image in its own div, below the flex stuff.
#import url('https://fonts.googleapis.com/css2?family=Lato:wght#400;700&family=Poppins:wght#400;500;600&display=swap');
* {
color: black;
font-family: 'Lato', sans-serif;
padding: 0;
margin: 0;
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6,
span {
color: black;
text-align: center;
line-height: 1.25;
}
h1 {
font-size: 36px;
}
p {
line-height: 1.5;
font-size: 16px;
}
li {
list-style-type: none;
}
.flex {
display: flex;
/* this automatically aligns like columns or rows with auto width and auto height */
}
.flex-1 {
flex: 1;
/* this makes sure that it is the entire height of the page */
}
/* Navigation bar */
.row {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.text-pink {
color: #FF69B4;
}
nav {
height: 100px;
width: 100%;
max-width: 1000px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__link--list {
display: flex;
}
.nav__link--anchor {
margin: 0 12px;
color: black;
text-decoration: none;
font-weight: 700;
}
.nav__link--anchor-primary {
background-color: #FF69B4;
padding: 8px 20px;
border-radius: 50px;
color: white;
transition: all 300ms ease;
}
.nav__link--anchor-primary:hover {
background-color: #FF69B4;
}
.personal_logo {
font-size: 20px;
color: #FF69B4;
margin: 0 12px;
font-weight: bold;
}
/* About mE */
#about-me {
min-height: 100vh;
/* entire height of the page */
display: flex;
flex-direction: column;
}
.about-me__info {
display: flex;
flex-direction: column;
}
.about-me__info--container {
display: flex;
flex-direction: column;
/* so it is not side-by-side */
align-items: center;
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.about-me--picture--mask {
width: 180px;
height: 180px;
border-radius: 100%;
overflow: hidden;
box-shadow: 0 8px 16px rgba(0, 0, 0, 1);
margin-bottom: 20px;
}
.about-me__picture {
width: 100%;
transform: scale(1, 1.1);
padding-top: 7px;
}
.about-me__info--para {
font-size: 15px;
margin-bottom: 28px;
}
.about-me__info--title {
margin-bottom: 15px;
}
.about-me__link {
font-size: 20px;
color: #FF69B4;
text-decoration: none;
padding: 0 16px;
}
.about-me__img--container {
flex: 1;
display: flex;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Annette</title>
<link rel="stylesheet" href="./css/styles.css">
<script src="https://kit.fontawesome.com/6ad8c9aa3b.js" crossorigin="anonymous"></script>
</head>
<body>
<section id="about-me">
<nav>
<div class="personal_logo">Annette</div>
<ul class="nav__link--list">
<li class="nav__Link">
<a href="#languages" class="
nav__link--anchor
link__hover-effect
link_hover-effect--black">Languages</a>
</li>
<li class="nav__link">
<a href="#projects" class="
nav__link--anchor
link__hover-effect
link_hover-effect--black">
Projects</a>
</li>
<li class="nav__link">
<a href="" class="nav__link--anchor
nav__link--anchor-primary">Contact</a>
</li>
</ul>
</nav>
<div class="flex flex-1">
<div class=".about-me__info row">
<!--inside the row, there is 2 sections: infromation and image-->
<div class="about-me__info--container">
<figure class="about-me--picture--mask">
<img src="./images/Annette2.JPG" class="about-me__picture" alt="Picture of Me!">
</figure>
<!--this contains my image -->
<h1 class="about-me__info--title"> Hey! I'm <span class="text-pink">Jane Doe 👋 </span> </h1>
<p class="about-me__info--para">
I recently just completed my <strong class="text-pink">insert text </strong> Throughout both degrees, I have always been interested in creating very engaging and interactive PowerPoints to present my work. This led to my passion for web development
and designing projects on topics that I’m interested in such as <strong class="text-pink">Ethical AI, Social Justice and Emerging Technologies. </strong>
</p>
<div class="about-me__links">
<a href="" class="about-me__link">
<i class="fa-brands fa-linkedin"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-brands fa-github"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-solid fa-inbox"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-solid fa-file-pdf"></i>
</a>
</div>
</div>
</div>
</div>
<div>
<figure class="about-me__img--container" >
<img src="https://picsum.photos/200" alt="" style="margin: auto">
</figure>
</div>
</section>
</body>
</html>
I'm releasing a new feature on my website and I want to mark the new a-tag in the navbar with a "NEW" sign top right of the a-tag (little overlapping). But I don't know how to make this overlapping happen and that my span with "NEW" (the text) is shown in full-width. Difficult to describe for me, current status is in the picture. I tried z-index, didn't work.
Here is my code.
navbar html and css:
<li class="nav-item p-1">
<a class="nav-link" routerLink="overview/cases" routerLinkActive="active-link" (click)="collapsed=true">Cases<span class="new-feature">NEW</span></a>
</li>
.new-feature{
width: 50px;
height: 20px;
background: linear-gradient(135deg, #9932cc, #fa490a);
color: #fff;
font-size: 15px;
border-radius: 15px;
text-align: center;
}
It currently looks like this:
try give relative position to <a> or <li> and absolute position to <span>, than z-index will be working
<li class="nav-item p-1" style="position:relative;">
<a class="nav-link" routerLink="overview/cases" routerLinkActive="active-link" (click)="collapsed=true">Cases
<span class="new-feature" style="position:absolute;top:0;left:0;">NEW</span>
</a>
</li>
Give position:absolute to .new-feature and position:relative to its parent class. You can play with values to fit to your need.
*{
margin:0px;
padding: 0px;
}
.nav-item{
list-style: none;
padding: 10px;
}
.new-feature-wrapper{
position: relative;
}
.new-feature{
position: absolute;
width: 30px;
height: 10px;
background: linear-gradient(135deg, #9932cc, #fa490a);
color: #fff;
font-size: 12px;
border-radius: 15px;
text-align: center;
padding: 5px;
top: 2px;
}
<li class="nav-item p-1 new-feature-wrapper">
<a class="nav-link" routerLink="overview/cases" routerLinkActive="active-link" (click)="collapsed=true">Cases<span class="new-feature">NEW</span></a>
</li>
One item will not respond out of three in my secondary navigation menu, held within the footer. The top and bottom links both work when I hover over them, but the middle does not seem to detect me mousing over the option for some reason.
HTML OF FOOTER & MENU ELEMENT:
<footer>
<ul class="social">
<li class="social"> <a href="https://www.facebook.com/Aki-Weininger-104277784411418/" id="profile-link"
target="https://www.facebook.com/Aki-Weininger-104277784411418/"> <i class="fab fa-facebook-f"> </i> </a>
</li>
<li class="social"> <a href="https://www.instagram.com/akiweininger/?hl=en" id="instagram-link"
target="https://www.instagram.com/akiweininger/?hl=en"> <i class="fab fa-instagram"> </i> </a> </li>
<li class="social"> <a href="https://www.behance.net/akiweininger" id="Behance-link" target="https://www.behance.net/akiweininger">
<i class="fab fa-behance"></i> </a> </li>
<li class="social"> <a href="https://www.upwork.com/freelancers/~01d4ae188cd67db90c" id="Upwork-link"
target="https://www.upwork.com/freelancers/~01d4ae188cd67db90c">
<img class="upwork" src="https://i.imgur.com/Z02P8YO.png" alt="upwork">
</a> </li>
</ul>
<div class="navi-title">
Navigation
</div>
<ul class="navi"> <li class="navi">
<a href="PLACEHOLDER">
Home
</a>
</li>
<li class="navi">
<a href="PLACEHOLDER">
Works
</a>
</li>
<li class="navi">
<a href="PLACEHOLDER">
Contact
</a>
</li>
</ul>
</footer>
CSS FOR FOOTER & MENU ELEMENT:
footer {
clear: both;
background-color: #2a7de1;
text-align: center;
padding: 2% 0% 1% 0%;
margin-top: 20%;
position: relative;
}
footer ul.social li.social {
list-style: none;
display: inline;
}
footer > ul.social li.social a {
text-align: center;
font-size: 2vw;
margin: 0% 3% 0% 3%;
overflow: hidden;
text-decoration: none;
}
footer > ul.social li.social a .fab {
color: white;
}
footer > ul.social li.social a:hover .fab {
transform: scale(1.3);
transition: 0.3s;
}
.upwork {
width: 2.2%;
}
.upwork:hover {
transform: scale(1.3);
transition: 0.3s;
}
footer > ul.navi li.navi {
list-style: none;
margin: 0% 0% 0% 75%;
text-align: left;
padding: 0.3%;
}
.navi-title {
color: white;
font-family: 'karla';
font-size: 1.4vw;
text-align:left;
margin: 0% 0% 0.5% 75%;
font-weight: 700;
}
footer > ul.navi li.navi a {
text-decoration: none;
color: white;
font-family: 'karla';
font-size: 1.2vw;
}
ul.social {
position: absolute;
margin-top: 3.8%;
}
footer > ul.navi li.navi a:hover {
text-decoration: underline;
}
Codepen
The element selector below is laying over top of the link. If you add a width:600px; to the element selector below, the hover for the link works. Of course it doesn't look great that way, but it's somewhere to start.
ul.social {
width: 600px;
position: absolute;
margin-top: 3.8%;
}
The issue is with your ul.social in the footer. I looked at it in the inspector.
You can see that it's overlapping the unreachable link, "Works".
As a test, I applied display: none to the ul and the "Works" link was once again clickable. My advice would be to restructure the footer using flexbox, taking care not to use any absolute positioning and overlapping.
First day of me learning to code in html and css.
I'm trying to add navigation bar on a image but i am unable to do so.
The background image i am trying to add is not displaying too.
Can anyone help me out here.
.header {
background-image: url("vent1.jpg");
}
.nav {
overflow: hidden;
float: left;
background-color: #333;
margin: 0px;
padding: 0px;
list-style-type: none;
}
.menu-bar {
list-style-type: none;
text-align: center;
}
.ul {
display: inline-block;
padding: 8px;
margin: 0px;
color: white;
}
<div class="header">
<div class="nav">
<div class="menu-bar">
<ul>
<li> Home</li>
<li>
About Us</li>
<li>
Portfolio</li>
<li>
Contact</li>
</ul>
</div>
</div>
</div>
header class should have these properties.
.header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("vent1.jpg");
background-repeat: no-repeat;
background-size:cover;
}
I'm attempting to center my portfolio gallery. I'm having trouble centering it without losing it's function. When you click on either projects or websites it will narrow down the photos. Whenever i try to center it loses the ability to do that.
Some of the elements are floated left [float: left] which i think is causing centering issues but it needs to be floated left in order to function. Does anyone know how i could center it without losing it's ability to narrow down the pictures? I've tried wrapping it in a div and using text-align: center and margin: 0 auto but no luck. I was able to center it when i got rid of all the float: left but it didn't work and it looked distorted.
Html:
<ul id="filter">
<li class="current">All</li>
<li>projects</li>
<li>websites</li>
</ul>
<div id="center_wrapper">
<ul id="gallery">
<li class="projects">
<a class="imgContainer"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" /></a>
</li>
<li class="projects">
<a class="imgContainer"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" /></a>
</li>
<li class="projects">
<a class="imgContainer"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" /></a>
</li>
<li class="projects">
<a class="imgContainer"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" /></a>
</li>
<li class="projects">
<a class="imgContainer"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" /></a>
</li>
<li class="websites">
<a class="imgContainer"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" /></a>
</li>
<li class="websites">
<a class="imgContainer"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" /></a>
</li>
<li class="websites">
<a class="imgContainer"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" /></a>
</li>
</ul>
</div>
css:
.imgContainer {
width: 400px;
height: 400px;
float: left;
border: solid 1px #999;
}
img {
width: 100%;
height: 100%;
}
ul#filter {
float: left;
font-size: 16px;
list-style: none;
width: 100%;
}
ul#filter li {
border-right: 1px solid #dedede;
float: left;
line-height: 16px;
margin-right: 10px;
padding-right: 10px;
}
ul#filter li.current a {
color: #333;
font-weight: bold;
}
ul#gallery {
list-style: none;
display: inline-block;
}
ul#gallery li {
float: left;
}
.center_wrapper {
text-align: center;
margin: 0 auto;
}
On the parent ul:
ul {
font-size:0;
text-align:center;
}
On li elements instead of floating:
li {
/*float:left;*/
display:inline-block;
font-size:16px;
}
http://codepen.io/nOji/pen/pJGxQE
ul#gallery {
list-style: none;
display: inline-block;
padding-left:0;
padding-right:0;
text-align: center;
}
ul#gallery li {
display: inline-block;
}
Here is a better way to approach this.
Your HTML is the content you are putting out into the world. It needs to be both human and computer readable. You also shouldn’t be using CSS floats for layout in 2015. We have a myriad of better approaches for this such as flexbox or inline-block that are far simpler to work with and less error prone.
* { margin:0; padding:0 }
body {
font-size: 16px;
padding: 1em;
text-align: center;
}
nav {
margin-bottom: 1em;
text-align: start;
}
nav a {
border-right: 1px solid #dedede;
margin-right: 10px;
padding-right: 10px;
}
nav a.current {
color: #333;
font-weight: bold;
}
section {
display: inline-block;
text-align: start;
width: 90%;
}
<nav>
All
projects
websites
</nav>
<section id="gallery">
<img title="title of project" src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png">
<img title="title of project" src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png">
<img title="title of project" src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png">
<img title="title of project" src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png">
<img title="title of project" src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png">
<img title="title of website" src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png">
<img title="title of website" src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png">
<img title="title of website" src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png">
</section>