<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mountains</title>
<link rel="stylesheet" href="/css/style.css">
<style>
/*css stylization*/
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
header{
justify-content: space-between;
align-items: center;
display: flex;
padding: 10px 50px;
}
.logoname{
margin-bottom: 10px;
}
.logo img{
height: 50px;
width: 50px;
cursor: pointer;
}
.navlinks{
list-style-type: none;
}
.navlinks li{
display: inline-block;
padding: 20px;
}
.navlinks li a{
transition: all 0.3s ease 0s;
text-decoration: none;
font-family: roboto;
}
.navlinks li a:hover{
color: aquamarine;
}
/*hero image code*/
.herobanner {
background-image:url(/image/herobanner.jpg);
width: 100%;
}
.herotext {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #000;
}
</style>
</head>
<body>
<header>
<figure class="logo">
<img src="\image/logo.png" alt="logo">
</figure>
<nav>
<ul class="navlinks">
<li>HOME</li>
<li>ABOUT US</li>
<li>GALERY</li>
</ul>
</nav>
</header>
<div class="herobanner">
<span class="herotext">
<h1>LIVE HIGH</h1>
</span>
</div>
</body>
</html>
I have made a simple navigation bar and under it I want to put a hero banner under it, the image URL does not work and the image does not get displayed but the text gets centered as the code for class='herotext' works properly.
please help me out with the code. Thanks to everyone who took their time out to help me.
The hero div has no content inside it which means the height is ZERO(The span positioned absolute so its height will not calculated), just add a 'min-height' and it will work:
/*css stylization*/
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
header {
justify-content: space-between;
align-items: center;
display: flex;
padding: 10px 50px;
}
.logoname {
margin-bottom: 10px;
}
.logo img {
height: 50px;
width: 50px;
cursor: pointer;
}
.navlinks {
list-style-type: none;
}
.navlinks li {
display: inline-block;
padding: 20px;
}
.navlinks li a {
transition: all 0.3s ease 0s;
text-decoration: none;
font-family: roboto;
}
.navlinks li a:hover {
color: aquamarine;
}
/*hero image code*/
.herobanner {
background-image: url(https://www.artonicweb.com/learn/wp-content/uploads/2018/05/12-HERO-IMAGES-1024x536.jpg);
width: 100%;
min-height: 500px;
}
.herotext {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mountains</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<header>
<figure class="logo">
<img src="\image/logo.png" alt="logo">
</figure>
<nav>
<ul class="navlinks">
<li>HOME</li>
<li>ABOUT US</li>
<li>GALERY</li>
</ul>
</nav>
</header>
<div class="herobanner">
<span class="herotext">
<h1>LIVE HIGH</h1>
</span>
</div>
</body>
</html>
**you just use this **
.herobanner {
background-image: url(https://cdn.pixabay.com/photo/2020/06/17/18/03/lights-5310589_960_720.jpg);
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.herotext {
text-align: center;
position: relative;
color: #000;
}
I can see from your code that the .herobanner don't have any height because you defined the position of the span element inside it as absolute so you have several options to fix this either by removing the absolute position so the height of .herobanner will be based on the content or define a fixed height for it.
See the example below:
1st option
.herotext {
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #000;
}
2nd option
.herobanner {
background-image:url(/image/herobanner.jpg);
background-size:cover;
background-repeat:no-repeat;
width: 100%;
height:20vh;
}
and repositon the span element so it fits inside it
i prefer the first solution so it will take the height of it's content.
codepen https://codepen.io/ahamdan/pen/OJXyWrv
Related
I am new to HTM/CSS and was trying to create a navigation bar on in header, using flex and when hover it should animate underline from bottom left to right.
But I am not able to get it to be placed in center and having spaces around each item.
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>XXXXX</title>
</head>
<body>
<header>
<div class="nav">
<ul>
<li>About</li>
<li>Experience</li>
<li>Works</li>
<li>Hobbies</li>
</ul>
</div>
</header>
</body>
</html>
CSS code:
*{
ox-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #333;
color: #fff;
font-family: 'Kalam', cursive;
}
header {
text-align: center;
align-items: center;
}
.nav a {
text-decoration: none;
color: #fff;
position: relative;
}
.nav a::after {
content: "";
display: block;
height: 3px;
width: 0;
background-color: #fff;
transition: width 0.3s ease-in-out;
position: absolute;
bottom: 0;
left: 0;
}
.nav a:hover::after {
width: 100%;
}
.nav li {
display: inline-flex;
justify-content: space-between;
list-style-type: none;
}
currently I am getting something like this:
| About Experience Works Hobbies |
enter image description here
I want output to be like: (having space around)
About Experience Works Hobbies
Thank you in advance!
To apply space-around you need to set display: flex; As you can see your a elements that make up the navbar are inside the ul, which in turn is inside the nav class. So what you have to do is set display: flex; to the direct relative of the elements you want to apply it to, in this case ul.
*{
ox-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #333;
color: #fff;
font-family: 'Kalam', cursive;
}
header {
text-align: center;
align-items: center;
}
.nav ul {
display: flex;
justify-content: space-around;
align-items:center;
}
.nav a {
text-decoration: none;
color: #fff;
position: relative;
}
.nav a::after {
content: "";
display: block;
height: 3px;
width: 0;
background-color: #fff;
transition: width 0.3s ease-in-out;
position: absolute;
bottom: 0;
left: 0;
}
.nav a:hover::after {
width: 100%;
}
.nav li {
display: inline-flex;
justify-content: space-between;
list-style-type: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>XXXXX</title>
</head>
<body>
<header>
<div class="nav">
<ul>
<li>About</li>
<li>Experience</li>
<li>Works</li>
<li>Hobbies</li>
</ul>
</div>
</header>
</body>
</html>
When I hover a menu item it affect other items. All other elements are moving. How to stop other elements to move from its position. Someone please review my code. I want the menu item to be bold when I hover and all the menu item does not move to its position. I tried many different ways to but it always moves and changing other elements positions
Here is the code:
<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>Portfolio</title>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
font-family: "Poppins", sans-serif;
}
.container {
background-color: #242633;
width: 100%;
height: 100vh;
}
.row {
display: flex;
align-items: center;
justify-content: flex-start;
}
.logo img {
margin-left: 50px;
margin-top: 10px;
margin-right: 150px;
height: auto;
width: 120px;
}
.menu {
position: relative;
}
.menu ul li {
display: inline-block;
color: #fff;
margin-inline: 50px;
font-weight: 400;
font-size: 25px;
transition: all 0.5s;
}
.list {
position: relative;
border: 1px solid red;
padding: 0;
margin: 0;
z-index: 10;
}
.menu ul li:hover {
color: #c5c5c5;
cursor: pointer;
background-color: transparent;
font-weight: 900;
z-index: 50;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="logo">
<img src="./Images/logo.png" alt="">
</div>
<div class="menu">
<ul>
<li class="list active">Home</li>
<li>Streets</li>
<li>Merchandise</li>
</ul>
</div>
</div>
</div>
</body>
</html>```
When you increase the font-weight on hover, you are in turn increasing the size of the text in the <li> and if the <li> doesn't already have enough space to contain the text, it needs to adapt its width and this ends up pushing the other elements.
You can simply increase the width of <li> so that the contained text can safely scale within the increased container without altering any of the surrounding elements, like so:
<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>Portfolio</title>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
font-family: "Poppins", sans-serif;
}
.container {
background-color: #242633;
width: 100%;
height: 100vh;
}
.row {
display: flex;
align-items: center;
justify-content: flex-start;
}
.logo img {
margin-left: 50px;
margin-top: 10px;
margin-right: 150px;
height: auto;
width: 120px;
}
.menu {
position: relative;
}
.menu ul {
display: flex;
gap: 50px;
}
.menu ul li {
display: inline-block;
color: #fff;
width: 150px;
font-weight: 400;
font-size: 25px;
transition: all 0.3s ease;
}
.list {
position: relative;
border: 1px solid red;
padding: 0;
margin: 0;
z-index: 10;
}
.menu ul li:hover {
color: #c5c5c5;
cursor: pointer;
background-color: transparent;
font-weight: 900;
z-index: 50;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="logo">
<img src="./Images/logo.png" alt="" />
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Streets</li>
<li>Merchandise</li>
</ul>
</div>
</div>
</div>
</body>
</html>
```
Here is the fiddle: https://jsfiddle.net/gnsho1br/2/
There were similar questions that suggests to set display to inline-block but I have done that. My container is col-1. I also tried to give my logo class of float: left but then the menu is off-center (maybe the left margin starts at the end of the logo???).
Use display: flex instead. If you want items to be centered, try align-items: center, justify-items: center. Refer to Flexbox for more info.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
li,
a,
button {
font-family: "Elliot-Sans", sans-serif;
font-weight: 300;
font-size: 14px;
color: #777777;
text-decoration: none;
}
#wrapper {
margin: 0 15px;
padding: 15px 0;
position: relative;
}
.row {
max-width: 65%;
margin: 0 auto;
padding: 75px 0;
position: relative;
}
.col-1 {
width: 100%;
padding: 20px;
display: flex;
}
#header {
height: 71px !important;
overflow: visible;
z-index: 9999;
width: 100%;
position: absolute !important;
}
#header .row {
padding: 0;
}
#header ul {
text-align: center;
}
.logo {
width: 150px;
height: auto;
cursor: pointer;
margin-right: auto;
background-color: inherit;
display: inline-block;
vertical-align: middle;
}
#topNavBar {
list-style: none;
margin: 0;
background-color: #ffffff;
}
ul{
display: flex;
}
#topNavBar li {
display: inline-block;
padding: 0px 20px;
background-color: inherit;
vertical-align: middle;
}
#topNavBar li a {
transition: all 0.2s ease 0s;
font-weight: 400;
text-transform: uppercase;
}
#topNavBar li a:hover {
color: #04ad9e;
text-decoration: none;
padding-bottom: 4px;
border-bottom: 3px solid #04ad9e;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- <link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
rel="stylesheet"
/> -->
<link
href="https://fonts.googleapis.com/css2?family=Rajdhani:wght#300;400&display=swap"
rel="stylesheet"
/>
<link
href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css"
rel="stylesheet"
/>
<link href="style.css" rel="stylesheet" />
<title>Title</title>
</head>
<body>
<div id="wrapper">
<header id="heroImage">
<div id="header" class="navCollapse">
<div class="row clearfix">
<div class="col-1">
<div class="logo">
<img class="logo" src="image.png" alt="logo" />
</div>
<nav id="topNavBar">
<ul>
<li>Home</li>
<li>About</li>
<li>Read</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
</div>
-i set the background on black
-i set an image and changed the opacity so that it will blend in with the background.
-tried to create a text above the image but it wont show.
Here is a preview of the website:
and the following are the code that i did :)
/* Unfortunately the "---Greetings" text cant be seen in the preview and i tried finding it by changing colors just in case it was just misplaced but it didnt.
I tested another picture without the opacity, it worked but when i tried lessening it it disappears again :( */
body {
background-color: black;
}
.container img {
position: absolute;
top: 430px;
left: 670px;
right: 0;
bottom: 0;
margin: auto;
width: 101%;
min-height: 50%;
}
.container {
display: inline-block;
opacity: 0.8;
position: relative;
top: -50%;
left: -50%;
width: 100%;
height: 100%;
color: red;
}
.mid-left h1 {
position: absolute;
left: 25px;
top: 10px;
}
.navbar {
text-align: center;
width: 100%;
overflow: hidden;
position: fixed;
bottom: 5px;
right: 0px;
background-color: black;
}
.navbar a {
text-decoration: none;
color: white;
font-family: "montserrat-extrabold", sans-serif;
font-size: 15px;
letter-spacing: 3px;
}
.navbar ul {
display: inline-block;
list-style: none;
padding: 10px;
margin: 20px;
}
.navbar li {
float: left;
}
.navbar li+li {
margin-left: 20px;
}
/*changing of color when hover*/
.navbar a:hover {
text-decoration: underline;
color: red;
transition: 0.6s;
}
/*add color to the selective link*/
.navbar a:active {
background-color: transparent;
}
<!DOCTYPE html>
<html>
<head>
<title> R E S U M E</title>
<link rel="stylesheet" href="home.css">
<link rel="stylesheet" type="text/css" href="font.css">
<meta charset="utf-8">
</head>
<body>
<!-- <div id="bg">
<img src="Cover1.jpg" alt="">
</div>
-->
<div class="container">
<img src="Cover1.jpg" alt="Me">
<div class="mid-left">
<h1>----- Greetings!</h1>
</div>
</div>
<header class="flex flex-vertical-center">
<div class="navbar flex flex-horizontal-center">
<ul>
<li class="navitem"> Home </li>
<li class="navitem"> Personal</li>
<li class="navitem"> Education</li>
<li class="navitem"> Experience</li>
s
</ul>
</div>
</header>
</body>
</html>
You don't see .mid-left because
.container {
...
top: -50%;
left: -50%;
}
You have to remove top and left with these value. Furthermore I suggest to you to use background-image: url('Cover1.jpg') on .container and remove <img src="Cover.jpg" alt="Me">
I am trying to center everything vertically inside the container of the navbar, called (header-area) such that everything is inline. At the moment the img, left navigation and right navigation are all aligned differently in the container.
An alternative solution is welcome, too.
/*-----Global Styles-----*/
html {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
border: 0;
}
body {
font-family: 'HKGroteskRegular';
}
*, *:before, *:after {
box-sizing: inherit;
}
/*--------------Header-Navigation--------------*/
.header-area{
position: relative;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
padding: 9px 97px 26px 98px;
height: 105px;
margin: 0 auto;
}
.logo-wrap{
float: left;
width: auto;
}
.main-logo{
width: 212px;
float: left;
}
.main-logo a{
float: left;
}
.main-logo img{
width: 100%;
}
.main-nav{
float: left;
margin: 0;
}
.main-nav ul li{
display: inline-block;
padding: 0 25px;
position: relative;
}
.main-nav ul li:after{
position: absolute;
top: 50%;
right: 0;
width: 24px;
height: 2px;
}
.main-nav ul li:last-child{
padding-right: 21px;
}
.main-nav ul li:last-child:after{
display: none;
}
.main-nav ul li a{
color: #0c225f;
padding: 2.5px 0;
text-decoration: none;
font-family: 'HKGroteskBold';
font-size: 19px;
}
.header-right{
float: right;
width: auto;
display: flex;
align-items: center;
}
.header-right a{
vertical-align: middle;
display: flex;
align-items: center;
text-decoration: none;
}
.phone {
padding: 0 20px 0 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/hk-grotesk" type="text/css"/>
<link rel="stylesheet" href="css/untitled.css">
<title>Document</title>
</head>
<body>
<div class="mainwrap">
<!--Header-->
<header class="header-area">
<div class="logo-wrap">
<div class="main-logo">
<img src="Assets/logo.png" alt="pd-logo">
</div>
</div>
<div class="header-left">
<nav class="main-nav">
<ul id="menu-main-menu" class="menu">
<li>Who We Are</li>
<li>Products</li>
<li>Stories</li>
<li>Career</li>
<li>Contact</li>
</ul>
</nav>
<div class="header-right">
Give us a Call<img class="phone" src="Assets/Phone.svg">0123456789
</div>
</div>
</header>
</div>
</body>
</html>
Add the following styles to menu-main-menu ul
display: flex;
align-items: center;
Your .logo-wrap value has a float value of left, so you'll want to make sure the other children have a similar quality to appear inline. To do this, add a float: left; styling with your header-left class. For this example, I shrunk the font size and padding to demonstrate the new float value and padding.
I highly recommend researching 'flex' to align your navigation. With flex, you can treat each nav item (logo, links, buttons) as child, and align them vertically with justify-content: center;. This way you won't have to worry about floats or padding issues.
html {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
border: 0;
}
body {
font-family: 'HKGroteskRegular';
}
*, *:before, *:after {
box-sizing: inherit;
}
/*--------------Header-Navigation--------------*/
.header-area{
position: relative;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
padding: 9px 97px 26px 98px;
height: 105px;
margin: 0 auto;
}
.header-left {
float: left; /* added */
padding: 24px 0; /* updated */
}
.logo-wrap{
float: left;
width: auto;
}
.main-logo{
width: 48px; /* updated */
float: left;
padding: 24px 0; /* added */
}
.main-logo a{
float: left;
}
.main-logo img{
width: 100%;
}
.main-nav{
float: left;
margin: 0;
}
.main-nav ul {
padding: 0; /* added */
margin: 0; /* added */
}
.main-nav ul li{
display: inline-block;
padding: 0 6px;
position: relative;
}
.main-nav ul li:after{
position: absolute;
top: 50%;
right: 0;
width: 24px;
height: 2px;
}
.main-nav ul li:last-child{
padding-right: 21px;
}
.main-nav ul li:last-child:after{
display: none;
}
.main-nav ul li a{
color: #0c225f;
padding: 2.5px 0;
text-decoration: none;
font-family: 'HKGroteskBold';
font-size: 8px;
}
.header-right {
float: right;
width: auto;
display: flex;
align-items: center;
}
.header-right a {
vertical-align: middle;
display: flex;
align-items: center;
text-decoration: none;
font-size: 8px; /* added */
}
.phone {
padding: 0 20px 0 10px;
}
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/hk-grotesk" type="text/css"/>
<link rel="stylesheet" href="css/untitled.css">
<title>Document</title>
</head>
<body>
<div class="mainwrap">
<!--Header-->
<header class="header-area">
<div class="logo-wrap">
<div class="main-logo">
<img src="Assets/logo.png" alt="pd-logo">
</div>
</div>
<div class="header-left">
<nav class="main-nav">
<ul id="menu-main-menu" class="menu">
<li>Who We Are</li>
<li>Products</li>
<li>Stories</li>
<li>Career</li>
<li>Contact</li>
</ul>
</nav>
<div class="header-right">
Give us a Call<img class="phone" src="Assets/Phone.svg">0123456789
</div>
</div>
</header>
</div>
</body>
</html>
you achieve this using display: flex;align-items:center;. in ..header-area.
please run snippet in full page mode
/*-----Global Styles-----*/
html {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
border: 0;
}
body {
font-family: 'HKGroteskRegular';
}
*, *:before, *:after {
box-sizing: inherit;
}
/*--------------Header-Navigation--------------*/
.header-area{
position: relative;
width: 100%;
z-index: 9999;
padding: 9px 10px 26px 10px;
height: 105px;
margin: 0 auto;
display: flex;
align-items:center;
}
.main-logo img{
width: 100%;
}
.menu {
padding-left: 0;
display: flex;
}
.main-nav{
margin: 0;
}
.main-nav ul li{
display: inline-block;
padding: 0 25px;
position: relative;
}
.main-nav ul li:after{
position: absolute;
top: 50%;
right: 0;
width: 24px;
height: 2px;
}
.main-nav ul li:last-child{
padding-right: 21px;
}
.main-nav ul li:last-child:after{
display: none;
}
.main-nav ul li a{
color: #0c225f;
padding: 2.5px 0;
text-decoration: none;
font-family: 'HKGroteskBold';
font-size: 12px;
}
.header-right{
width: auto;
display: flex;
align-items: center;
margin-left:auto;
font-size: 12px;
}
.header-right a{
vertical-align: middle;
text-decoration: none;
}
.phone {
padding: 0 20px 0 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/hk-grotesk" type="text/css"/>
<link rel="stylesheet" href="css/untitled.css">
<title>Document</title>
</head>
<body>
<div class="mainwrap">
<!--Header-->
<header class="header-area">
<div class="logo-wrap">
<div class="main-logo">
<img src="Assets/logo.png" alt="pd-logo">
</div>
</div>
<div class="header-left">
<nav class="main-nav">
<ul id="menu-main-menu" class="menu">
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</nav>
</div>
<div class="header-right">
Give us a Call<img class="phone" src="Assets/Phone.svg">0123456789
</div>
</header>
</div>
</body>
</html>
I changed your font-size for demonstration purpose