I have written the following HTML code :
My main focus is to align the list items - HOME | All About Kittens | Feeding Your Kitten
properly. It's currently appearing as a simple list. I want to make it like :
Here the list items are Home, Shop and collections and they are aligned horizontally
Plus when you hover over an item it changes in color and a line appears below it
Any ideas how should I go about implementing this way
a {
color: black;
text-decoration: none;
}
.promo_banner {
background-color: #333;
text-align: center;
color: #fff;
font-size: 12px;
position: relative;
width: 100%;
z-index: 5000;
top: 0;
overflow: hidden;
}
div.logo img {
max-width: 205px;
width: 100%;
margin: 0 auto;
display: block;
max-width: 100%;
height: auto;
}
<html>
<head>
<link rel="stylesheet" href="home.css" />
</head>
<div class="promo_banner">
<div class="promo_banner__content">
<p>
<strong>Our Guide on Caring for Your Furry Feline Friend</strong>
</p>
</div>
<div class="promo_banner-close"></div>
</div>
<div class="top_bar clearfix">
<ul class="social_icons">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<div class="container">
<span><i class="fab fa-twitter"></i><a href="https://www.twitter.com"></span>
<span><i class="fab fa-facebook-f"></i></span>
<span><i class="fab fa-youtube"></i></span>
<span><i class="fab fa-instagram"></i></span>
</div>
</ul>
</div>
<div class="logo text-align--center">
<a href="https://store.linefriends.com" title="LINE FRIENDS INC">
<img
src="logo.jpeg"
class="primary_logo lazyloaded"
alt="LINE FRIENDS INC"
/></a>
</div>
<div class="nav">
<ul class="menu center">
<li >
<span>HOME</span>
</li>
<li >
<span>All About Kittens</span>
</li>
<li >
<span>Feeding Your Kitten</span>
</li>
</ul>
</ul>
</div>
</html>
This is the logo.jpeg I am using in the HTML.
I wanted to make it like How the image line items appears in middle
You can use display: flex; to show navigation like the UI you mentioned.
Here's the demo: https://codepen.io/shubhamp-developer/pen/gOmmxOg
.nav .menu{
display: flex;
list-style: none;
}
Preview:
To learn more about display flex, I would prefer to follow this super helpful link: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Basically these two properties will fix this.
display: flex;
justify-content: center;
Add these classes and remove background color from .nav .menu
.nav .menu{
display: flex;
gap: 1rem;
list-style: none;
}
.nav{
display: flex;
justify-content: center;
}
.nav_wrapper {
background: #f1f1f1;
}
Also wrap your <div class="nav"></div> in another div.nav_wrapper
<div class="nav_wrapper">
<div class="nav">
</div>
</div>
Related
Suppose I have a Navbar wrapped by header tag with links on it, I structured it this way
<header id="header" class="header active">
<nav class="nav">
<!-- NAV LOGO -->
<div class="nav__logo">
<a href="">
<img src="./img/logo.svg" alt="" class="nav__img">
</a>
</div>
<!-- NAVLINKS -->
<ul class="nav__list">
<li class="nav__item">
Home
</li>
<li class="nav__item">
About
</li>
<li class="nav__item">
Courses
</li>
<li class="nav__item">
Contact
</li>
</ul>
<!-- ACTIONS -->
<div class="nav__actions">
<button>
<i class='bx bx-search'></i>
</button>
<button>
<i class='bx bx-cart' ></i>
</button>
<button>
<i class='bx bx-menu' ></i>
</button>
</div>
</nav>
</header>
And on my CSS,
header{
background: white;
padding: 1.25rem;
position: relative;
z-index: 10;
}
.header .active{
position: fixed;
background: white;
box-shadow: rgba(0, 0, 0, 0.3);
}
nav{
display: flex;
align-items: center;
justify-content: space-between;
}
.nav__logo{
flex-shrink: 0;
flex-wrap: nowrap;
}
.nav__list{
display: flex;
align-self: center;
justify-content: center;
padding: 0 1.25rem;
gap: 2.25rem;
}
.nav__link{
}
.nav__actions{
display: flex;
gap: 1.25rem;
padding: 0px 1rem;
}
My questions are quite simple, yet I would like to confirm them somehow.
If I set my media queries and change my CSS nav__list - if it hits (max-width: 420px) to become a side menu by taking it out of the flow by .nav__list: position:fixed, will that cause problems and can be seen in dev tools? Like overlapping, layouts/performance, Is this the right way? Just take out certain elements even if they are under one root layout (header>nav - nav_list)?
Or do I need to create a new dedicated (menu list) for the sidebar menu?
P.S: I come from Android background, XML layouting is different, they are structured in a way by not taking certain elements out of the tag/flow.
I'm new to HTML and CSS and to improve my skills i've been trying to recreate differnt sites by myself. I'm currently trying to recreate the notion home page but i have an issue. my img div is not centring? This is probably an easy fix but if someone could help i'd apprectiate it :)
Here is my HTML:
#import url("https://fonts.googleapis.com/css2?family=Inter:wght#400;500;700&display=swap");
:root {
--primary-text: #111111;
--secondary-text: #91908f;
--background: #fffefc;
--btn-primary: #e16259;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--b);
font-family: "Inter", sans-serif;
}
/* NAV */
.nav {
width: 100;
}
.logo {
max-width: 100%;
height: 55px;
margin-right: 70px;
margin: 15px 50px;
}
a,
a:link,
a:visited {
color: #111111;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.nav ul {
display: flex;
padding: 35px;
list-style: none;
}
.nav ul li {
padding-right: 20px;
text-decoration: none;
color: #91908f;
}
.nav {
float: right;
}
/* HERO */
.nav-img {
display: flex !important;
align-items: center;
justify-content: center;
}
<img class="logo" src="img/logo.png" alt="Notion Logo">
<div class="nav">
<ul>
<li>Product</li>
<li>Download</li>
<li>Resources</li>
<li>Pricing</li>
<li>Careers</li>
<li><span>|</span></li>
<li>Sign Up</li>
<li>Log In</li>
</ul>
</div>
<div class="hero">
<div class="hero-img">
<img src="img/hero.webp" alt="Illustration of 3 people using laptop computers on seperate desks with different expressions">
</div>
<h1>All-in-one workspace</h1>
<h4>One tool for your whole team. Write, plan, and get organized.</h4>
<form action="">
<input type="text" placeholder="Enter your email...">
<button class='btn-primary' type="submit">Sign Up</button>
</form>
<p>For teams & individuals - web, mobile, Mac, Windows</p>
</div>
..
There are different things you need to consider when learning to code, first of all, it's important to use the new html5 semantic element header where you can place your logo and nav
<header>
<img src="logo.png" alt="Notion Logo">
<nav>
Product
Download
Resources
Pricing |
Careers
Sign Up
Log In
</nav>
</header>
*note: a nav element doesn’t have to contain a list as mentioned in MDN, and you can style them easily. The img centering issue came from the header wrong styling .nav{float: right;} .nav{ width: 100} needs to have px, %, or vw example .nav{width: 100px;}, .nav{width: 60vw;}, .nav{width: 60%;} then you can easily center the other elements vertically like below
.center-vertically {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
<header>
<div class="header-sub">
<img class="logo" src="img/logo.png" alt="Notion Logo" />
<nav>
Product
Download
Resources
Pricing |
Careers
Sign Up
Log In
</nav>
</div>
</header>
<div class="center-vertically">
<div class="centered-item">
<img src="https://www.notion.so/cdn-cgi/image/f=auto,w=1080,q=100/front-static/pages/product/hero.png" alt="Illustration of 3 people using laptop computers on seperate desks with different expressions" />
</div>
<h1>All-in-one workspace</h1>
<h4>One tool for your whole team. Write, plan, and get organized.</h4>
<form action="">
<input type="text" placeholder="Enter your email..." />
<button class="btn-primary" type="submit">Sign Up</button>
</form>
<p>For teams & individuals - web, mobile, Mac, Windows</p>
<div class="centered-item">anything you want to add</div>
</div>
You can style your header, and there is an awesome resource to follow to learn properly Freecodecamp
I am trying to customise the following icon bar (as shown in w3schools) - code pasted below along with link, to display like the image shown. The icons need to have text right underneath them (labels). This is NOT trivial as you'll see if you continue to read the description of the problem.
Furthermore, I'd like to add hover-over text to these icons, as shown.
Any solutions/suggestions appreciated.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_icon_bar_h
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {margin:0;}
.icon-bar {
width: 100%;
background-color: #666;
overflow: auto;
}
.icon-bar a {
float: left;
width: 20%;
text-align: center;
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 36px;
}
.icon-bar a:hover {
background-color: #000;
}
.active {
background-color: #44444 !important;
}
</style>
<body>
<div class="icon-bar">
<i class="fa fa-user"></i>
<i class="fa fa-mortar-board"></i>
<i class="fa fa-eye"></i>
<i class="fa fa-download"></i>
</div>
</body>
</html>
In the image shown, the icon bar is placed over a green background image. I would like the text to appear directly underneath, and for there also to be hover-over text to appear.
I have tried the below, but it is incredibly difficult to get the layout correct. Is there a better way?
<div class="icon-bar">
<i class="fa fa-user"></i>
<i class="fa fa-mortar-board"></i>
<i class="fa fa-eye"></i>
<i class="fa fa-download"></i>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<p><font color="white">Topic1 Topic2 Topic3 Topic4</font></p>
<br>
<br>
<br>
<br>
Furthermore, a design flaw with adding text that way is on mobile sites the formatting will be entirely lost. see image below.
Any ideas to most effectively do this would be a great help!
this is for the w3 school code
I just changed the way of writing the icon and the text .
its not possible to look the iconbar same way in all screen size either put dropdown button or vertical display ,I have written that for vertical display ,. I havent changed padding . Since i dont know much what you want
I can help you with bootstrap if you want in bootstrap i think that will be easy for you .
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<style>
body {margin:0;}
.icon-bar {
width: 100%;
background-color: #555;
overflow: auto;
}
.icon-bar a {
float: left;
width: 20%;
text-align: center;
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 36px;
}
.icon-bar a:hover {
background-color: #000;
}
.icon-bar a{
text-decoration:none;
}
.active {
background-color: #4CAF50 !important;
}
#media only screen and (max-width: 700px) {
.icon-bar a {
width:100% !important;
}
}
</style>
<body>
<div class="icon-bar">
<a class="active" href="#">
<ul style="list-style:none">
<li><i class="fa fa-home"></i></li>
<li>home</li>
</ul>
</a>
<a href="#">
<ul style="list-style:none" class="menu_ul">
<li><i class="fa fa-search"></i></li>
<li>search</li>
</ul>
</a>
<a href="#">
<ul style="list-style:none" class="menu_ul">
<li><i class="fa fa-envelope"></i></li>
<li>mail</li>
</ul>
</a>
<a href="#">
<ul style="list-style:none" class="menu_ul">
<li><i class="fa fa-globe"></i></li>
<li>web</li>
</ul>
</a>
<a href="#">
<ul style="list-style:none" class="menu_ul">
<li><i class="fa fa-trash"></i></li>
<li>delete</li>
</ul></a>
</div>
</body>
Try this,
.icon-bar{
width: 100%;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.icon-bar a {
width: 20%;
text-align: center;
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 36px;
}
This will affect all the a tags of .icon-bar class.
Also here's some documentation on how display flex works, https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Can someone help me understand how can I vertical align this?
JSFIDDLE
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/2.0.46/css/materialdesignicons.css"
></link>
<aside class="menu column is-2 full-height">
<ul class="menu-list">
<li>
<a href="#" class="">
<i class="mdi mdi-file-document-box mdi-48px"></i>
<span>Document</span>
</a>
</li>
<li>
<a href="#" class="">
<i class="mdi mdi-file-document-box mdi-48px"></i>
<span>Document</span>
</a>
</li>
</ul>
</aside>
I need align icon and text next to it?
there is some more css since I'm using bulma.io and something custom but not so relevant I think
You can delete that css and create new one if it is not ok
There's a few options at your disposal, depending on your needs.
Updated jsFiddle
Use display: inline-block; on the element(s) that are next to each other and need to be aligned. Then you can use vertical-align: [top|middle|baseline] as needed for each element
i, span {
display: inline-block;
vertical-align: middle;
}
If that alignment doesn't work for you, then you should set the vertical-align to top, to get them positioned how you like, and then you can use line-height to fine-tune the vertical positioning of each element. Example:
i, span {
display: inline-block;
vertical-align: top;
}
i {
line-height: 39px;
}
span {
line-height: 39px;
}
You can add display: flex and align-items: center rules to li a
fiddle
aside {
background-color: #0067ad;
height: 100%;
}
li a {
display: flex;
align-items: center;
}
.menu-list {
list-style: none;
}
i {
color: white;
}
a:hover,
a:active,
.router-link-active {
background-color: black;
}
span {
color: white;
}
}
a {
color: white
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/2.0.46/css/materialdesignicons.css" rel="stylesheet"/>
<aside class="menu column is-2 full-height">
<ul class="menu-list">
<li>
<a href="#" class="">
<i class="mdi mdi-file-document-box mdi-48px"></i>
<span>Document</span>
</a>
</li>
<li>
<a href="#" class="">
<i class="mdi mdi-file-document-box mdi-48px"></i>
<span>Document</span>
</a>
</li>
</ul>
</aside>
As my title suggests, my content goes off screen.
I've looked through my css file, and there's isn't any margins with minus something. So why is the content going off screen at both sides?
Appreciate any suggestions to why this is.
Thanks.
body{
background: linear-gradient(rgb(100,50,50), rgb(80,20,20)) no-repeat;
color: white;
text-align: center;
font-family: 'Open Sans', sans-serif;
}
img{
margin: 1%;
}
/*Header*/
header {
background-color: #1d1e21;
height: 100vh;
position: relative;
}
header span {
color: #fff;
}
header input {
margin-top: 20px;
}
p#slogan {
color: #fff;
letter-spacing: 2px;
}
ul {
list-style-type: none;
}
ul li {
display: inline;
padding: 0 0 0 10px;
}
ul li a {
color: #fff;
list-style-type: none;
}
ul li a:hover {
color: black;
list-style-type: none;
text-decoration: none;
}
/*Main*/
/*sloganAndSocial*/
#sloganAndSocial {
background-color: #1d1e21;
position: absolute;
bottom: 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NBC 2011</title>
<link rel="stylesheet" href="css/main.css" type="text/css" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="js/scripts.js" type="text/javascript"></script>
</head>
<body>
<!--Header section-->
<header>
<div id="topBar">
<div class="row">
<h1 class="pull-left"><span>NORDIC </span>BARISTACUP</h1>
<form class="pull-right">
<input type="text" name="search" placeholder="Search..">
</form>
</div>
<div class="row">
<p class="pull-left" id="slogan">be together act together learn together</p>
<ul class="pull-right">
<li>ABOUT NBV</li>
<li>2011 EVENT</li>
<li>NORDIC ROASTER</li>
<li>RESULTS</li>
<li>LINKS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<!--Main section-->
<div class="main">
<img src="" alt="bo!" class="cover" />
</div>
<div id="sloganAndSocial">
<div class="container">
<div class="row">
<h2 class="pull-left">"To create an environment in which knowledge<br>about coffee and its sphere can be obtained"</h2>
<ul class="share-buttons">
<li><img alt="Share on Facebook" src="images/flat_web_icon_set/inverted/Facebook.png"></li>
<li><img alt="Tweet" src="images/flat_web_icon_set/inverted/Twitter.png"></li>
<li><img alt="Share on Google+" src="images/flat_web_icon_set/inverted/Google+.png"></li>
<li><img alt="Pin it" src="images/flat_web_icon_set/inverted/Pinterest.png"></li>
<li><img alt="Send email" src="images/flat_web_icon_set/inverted/Email.png"></li>
</ul>
</div>
</div>
</div>
</header>
<!--Section1-->
</body>
</html>
You have two divs in your topBar with class row but which are not inside an element with class container. That is not intended by Bootstrap and therefore leads to unintended behaviour. You have to wrap those two divs in another div with class container.
Also, as #nik_m mentioned: Why are you wrapping the whole page in a header? That's not, what headers are supposed to do.
Remove pull-left and pull-right classes from the elements and better use flexbox for your alignments. It will make your life much easier!
Also, why the wrapper of the whole site is inside a header???