I am learning how to create header and I have problem with proper link href. My logo-box wraps image(logo) and name of the company but in order to align them with display flex it covers full width. I want that href only works when I hover logo or name not whole box. I don't know how to solve this problem.
<!DOCTYPE html>
<html lang='en'>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div class="container">
<div class="logo-block">
<a href="" class="logo-block-link">
<img src="logo.png" alt="" class="logo">
<h3 class="logo-tittle">Company</h3>
</a>
</div>
<ul class="nav-list">
<li>About</li>
<li>Projects</li>
<li>Team</li>
<li>Contact</li>
</ul>
</div>
</nav>
</body>
</html>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
nav{
background-color: salmon;
}
.container{
padding: 15px 0;
background-color: #fdcb9e;
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1140px;
margin: 0 auto;
}
.logo-block{
flex:1;
border:1px solid gold;
}
.logo-block-link{
display: flex;
border:1px solid black;
}
.logo{
width: 50px;
height: 50px;
}
.nav-list{
flex:1;
display: flex;
justify-content: space-between;
}
.logo-tittle{
font-size:20px;
color:#3f3f44;
text-transform: uppercase;
letter-spacing: 2px;
font-family: monospace;
margin-left: 10px;
}
.nav-list li a{
font-size:16px;
color:#3f3f44;
font-family: monospace;
}
To do this, you should break the <img src="logo.png" alt="" class="logo"> and <h3 class="logo-tittle">Company</h3> into 2 div. Then, use float: left to make the 2 div in one row. After that, place the flex: 1 to parent of the 2 div. You will be able to use href working when you click on the logo or the name.
For more detail, see below sample code:
<html lang="en"><head>
<link rel="stylesheet" href="style.css">
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
nav{
background-color: salmon;
}
.container{
padding: 15px 0;
background-color: #fdcb9e;
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1140px;
margin: 0 auto;
}
.logo-block{
border:1px solid gold;
}
.logo-block-link{
display: flex;
border:1px solid black;
}
.logo{
width: 50px;
height: 50px;
}
.nav-list{
flex:1;
display: flex;
justify-content: space-between;
}
.logo-tittle{
font-size:20px;
color:#3f3f44;
text-transform: uppercase;
letter-spacing: 2px;
font-family: monospace;
margin-left: 10px;
}
.nav-list li a{
font-size:16px;
color:#3f3f44;
font-family: monospace;
}
</style>
</head>
<body>
<nav>
<div class="container">
<div style="flex: 1;">
<div class="logo-block" style="float: left;">
<a href="#" class="logo-block-link">
<img src="https://www.gravatar.com/avatar/7d821e531f911facf0f644c1e708dd99?s=32&d=identicon&r=PG" alt="" class="logo">
</a>
</div>
<div style="float: left;">
<a href="#">
<h3 class="logo-tittle">Company</h3>
</a>
</div>
<div style="clear: both;"></div>
</div>
<ul class="nav-list">
<li>About</li>
<li>Projects</li>
<li>Team</li>
<li>Contact</li>
</ul>
</div>
</nav>
</body>
</html>
" I want that href only works when I hover logo or name not whole box "
I recomend you do it in JS, for example you can activate link by adding attribute href with value. So for example:
<a>This is link </a>
You add attribute href='yourlink' by js and you get <a href='yourlink'>This is link </a> and it should works.
So in javaScript:
Aelement.setAttribute('href','yourlink');
Related
I Want to align this header section part in the vertical center with responsiveness. Now if I use margin-top then the page is not fully responsive and I want to align the header part at the start of the input.
{
margin: 0px;
padding: 0px;
color: white;
}
#header{
height: 300px;
width: 100%;
background-image: url(healthy.jpg);
}
#headersection{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#headersection input{
width: 50%;
height: 40px;
border-radius: 20px;
border: none;
}
#navigation{
display: flex;
flex-wrap: wrap;
}
#navigation li{
font-weight: bold;
font-size: 1rem;
padding: 20px;
list-style: none;
}
<nav id="header">
<ul id="navigation">
<li>Home</li>
<li>About Us</li>
<li>Register</li>
<li>Contact Us</li>
</ul>
<div id="headersection">
<h1>
Health is Wealth
</h1>
<input type="search" name="Search" id="" placeholder="Search">
</div>
</nav>
I want to align this input and header part in the blue section and with that, I want to align my header part at the start of this input section as shown with yellow lines.
use the attribut valign="middle" for #headersection so you don't have to use margin-top, it will put it in the middle and then get rid of align-items for #headersection
If the width of the headersection is as wide as the input, you can use
#headersection{
align-items: flex-start;
}
You should add a <div class="container"> </div> first.
Set the max-width value for this div to adjust the start of navigation text.
As you want to align my header part at the start of this input section as shown with yellow lines, you need to add #navigation > li:nth-child(1){padding-left: 0;} in your css.
I hope the following code would help you.
<!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>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
color: white;
background-color: lightgreen;
background-image: url(healthy.jpg);
}
#header {
height: 300px;
width: 100%;
}
#headersection {
display: flex;
flex-direction: column;
/* align-items: center;
justify-content: center; */
}
#headersection input {
width: 100%;
height: 40px;
border-radius: 20px;
border: none;
background: white;
}
#navigation {
display: flex;
flex-wrap: wrap;
}
#navigation li {
font-weight: bold;
font-size: 1rem;
padding: 20px;
list-style: none;
}
#navigation > li:nth-child(1){
padding-left: 0;
}
.container {
max-width: 768px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="container">
<nav id="header">
<ul id="navigation">
<li>Home</li>
<li>About Us</li>
<li>Register</li>
<li>Contact Us</li>
</ul>
<div id="headersection">
<h1>Health is Wealth</h1>
<input type="search" name="Search" id="" placeholder="Search" />
</div>
</nav>
</div>
</body>
</html>
Try this:
*{
margin: 0px;
padding: 0px;
color: white;
}
#header{
height: 300px;
width: 100%;
background-color: red; /*instead your image. only for seen*/
}
#headersection{
display: flex;
flex-direction: column;
/*align-items: center; deleted*/
justify-content: center;
height: 100%; /*added*/
width: 50%; /*added*/
}
#headersection input{
width: 100%; /*edited*/
height: 40px;
border-radius: 20px;
border: none;
}
#navigation{
display: flex;
flex-wrap: wrap;
}
#navigation li{
font-weight: bold;
font-size: 1rem;
padding: 20px;
list-style: none;
}
#container{ /*added*/
display: flex;
justify-content: center;
width: 100%;
height: 60%;
}
<nav id="header">
<ul id="navigation">
<li>Home</li>
<li>About Us</li>
<li>Register</li>
<li>Contact Us</li>
</ul>
<div id="container">
<div id="headersection">
<h1>
Health is Wealth
</h1>
<input type="search" name="Search" id="" placeholder="Search">
</div>
</div>
</nav>
I edited. If it is proper, please comment for me.
I'm trying to position elements in a header displayed as flexbox so that an image (logo) on the left will be vertically aligned to the bottom of a nav on the right. Seems easy enough, however I also have a search button that needs to be positioned about the nav. When I do this the search button seems to push the nav below the baseline of the flexbox and no amount of padding or negative margins seems to fix it.
The logo is contained inside a div that takes up 40% of the screen width and the nav inside a div that takes up 60%. I've taken a screenshot and to illustrate I've added a red background to the logos container div.
Code is below:
<body>
<header class="pageHead">
<div class="logoBox">
<img class="logo" src="images/Logo.png">
</div>
<div class="headRight">
<nav id="mainNav">
<i class="fas fa-search searchIcon"></i>
<li class="active">Products</li>
<li>Support</li>
<li>About</li>
<li>Contact</li>
<li class="orange">Partners</li>
</nav>
</div>
</header>
</body>
body {
background-color: #f7f7f7;
}
header.pageHead {
display: flex;
align-items: baseline;
padding: 30px 10%;
color: #555;
}
.logoBox{
width: 40%;
}
.headRight {
width: 60%;
}
nav#mainNav {text-align: right;}
nav#mainNav li {
display: inline-block;
padding: 0 0 0 2em;
font-size: 1.2em;
font-family: 'Open Sans', sans-serif;
letter-spacing: 0.1em;
}
.searchIcon {
width: 100%;
text-align: right;
}
Any help would be greatly appreciated. Thanks.
You can tried this.
body {
background-color: #f7f7f7;
}
header.pageHead {
display: flex;
align-items: center;
padding: 30px 10%;
color: #555;
}
.logoBox{
width: 20%;
background: red;
}
.headRight {
width: 80%;
}
nav#mainNav {text-align: right;display: flex;}
nav#mainNav li {
display: inline-block;
padding: 0 0 0 2em;
font-size: 1.2em;
font-family: 'Open Sans', sans-serif;
letter-spacing: 0.1em;
}
.searchIcon {
width: 100%;
text-align: right;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header class="pageHead">
<div class="logoBox">
<img class="logo" src="images/Logo.png">
</div>
<div class="headRight">
<nav id="mainNav">
<i class="fa fa-search searchIcon"></i>
<li class="active">Products</li>
<li>Support</li>
<li>About</li>
<li>Contact</li>
<li class="orange">Partners</li>
</nav>
</div>
</header>
</body>
</html>
I am a newbie to css/html and I am trying to create a portofolio website for myself.
I would like to horizontally center my nav_bar in my page just under my image but I can't seem to make it work.
As you can see, the nav_bar is currently aligned vertically.
This is my code:
.index_navigation li {
overflow: hidden;
text-align: center;
float: center;
padding-right: 20px;
}
.index_navigation a {
font-family: arial;
color: black;
text-align: center;
padding: 14 px 16 px;
text-decoration: none;
}
.center {
width: 50%;
text-align: center;
display: block;
background-color: transparent;
margin-left: auto;
border: 1px solid transparent;
margin-right: auto;
margin-bottom: 1px;
float: center;
}
<div class="background_logo">
<img src="img/logo_size.jpg" alt="Background Logo" class="center">
<nav class="index_navigation">
<ul>
<li>Contact</li>
<li>Projects</li>
<li>About</li>
</ul>
</nav>
</div>
Hopefully someone can help me :)
Thanks in advance
Use display:flex; to ul and justify-content: center; to center it
.index_navigation ul{
display:flex;
justify-content: center;
}
.index_navigation li{
overflow: hidden;
text-align: center;
float: center;
padding-right: 20px;
}
.index_navigation a {
font-family: arial;
color:black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.center{
width:50%;
text-align:center;
display:block;
background-color: transparent;
margin-left:auto;
border: 1px solid transparent;
margin-right: auto ;
margin-bottom: 1px;
float:center;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Xander Feliers - Portfolio</title>
<meta name="description" content="Portfolio - Xander Feliers">
<link rel="stylesheet" href="css/screen.css">
</head>
<body>
<div class ="background_logo">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="Background Logo" class ="center" >
<nav class="index_navigation">
<ul>
<li>Contact</li>
<li>Projects</li>
<li>About</li>
</ul>
</nav>
</div>
</body>
</html>
Set display style of li to inline-blocks and apply text-align:center to its parent.
.index_navigation{
text-align:center;
}
.index_navigation li{
overflow: hidden;
text-align: center;
padding-right: 20px;
display:inline-block;
}
.index_navigation a {
font-family: arial;
color:black;
text-align: center;
padding: 14 px 16 px;
text-decoration: none;
}
.center{
width:50%;
text-align:center;
display:block;
background-color: transparent;
margin-left:auto;
border: 1px solid transparent;
margin-right: auto ;
margin-bottom: 1px;
float:center;
}
<div class ="background_logo">
<img src="img/logo_size.jpg" alt="Background Logo" class ="center" >
<nav class="index_navigation">
<ul>
<li>Contact</li>
<li>Projects</li>
<li>About</li>
</ul>
</nav>
</div>
You could restructure the menu using <table>. Replacing <ul> with <tr> & replacing <li> with <td>.
I'd do it like this:
.background_logo NAV {
float: right;
position: relative;
left: -50%;
}
.index_navigation {
position: relative;
left: 50%;
}
.clearfix {
clear: both;
}
And then add the right clearfix DIVs:
<div class ="background_logo">
<img src="img/logo_size.jpg" alt="Background Logo" class ="center" >
<div class="clearfix"/> <!-- added clearfix -->
<nav class="index_navigation">
<ul>
<li>Contact</li>
<li>Projects</li>
<li>About</li>
</ul>
</nav>
</div>
<div class="clearfix"/> <!-- added clearfix -->
I would just made li display: inline-block and ul for text-align: center.
ul {
text-align: center
}
.index_navigation li {
overflow: hidden;
text-align: center;
float: center;
padding-right: 20px;
display: inline-block;
}
.index_navigation a {
font-family: arial;
color: black;
text-align: center;
padding: 14 px 16 px;
text-decoration: none;
}
.center {
width: 50%;
text-align: center;
display: block;
background-color: transparent;
margin-left: auto;
border: 1px solid transparent;
margin-right: auto;
margin-bottom: 1px;
float: center;
}
<div class="background_logo">
<img src="img/logo_size.jpg" alt="Background Logo" class="center">
<nav class="index_navigation">
<ul>
<li>Contact</li>
<li>Projects</li>
<li>About</li>
</ul>
</nav>
</div>
I have a navigational bar as a list- that's required for my assignment. Anyways, I'm trying to center it but it's not quite working. What's happening is I'm having to specifiy specifc margins. I'm quite new to CSS and HTML.
{
background-color: #bdd2ed;
text-align: center;
}
h1,h2
{
font-family: sans-serif;
}
ul.navigbar
{
margin: 0 auto;
display: block;
width: 100%;
}
li.navigbar
{
list-style-type: none;
width: 10%;
text-align: center;
float: left;
}
a.navigbar
{
text-decoration: none;
display:block;
}
<!DOCTYPE html>
<html>
<head>
<title>china_travel.html</title>
<link rel="stylesheet" type="text/css" href="travel.css">
</head>
<body>
<img src="images/flags/china_flag.jpg" height="50" width="75" alt="Flag of China" title="Flag of China" class="center">
<h1 class="center">China Travel Deals</h1>
<ul class="navigbar">
<li class="navigbar">Home</li>
<li class="navigbar">Australia Travel</li>
<li class="navigbar">Brazil Travel</li>
<li class="navigbar"><a href="china_travel.html" class="navigbar">China Travel</li>
<li class="navigbar"><a href="us_travel.html" class="navigbar">United States Travel</li>
</ul>
</body>
</html>
You can use this code:
See live demo: https://output.jsbin.com/vukisat
https://jsbin.com/vukisat/14/edit?html,css,output
HTML:
<!DOCTYPE html>
<html>
<head>
<title>china_travel.html</title>
<link rel="stylesheet" type="text/css" href="travel.css">
</head>
<body>
<img src="images/flags/china_flag.jpg" height="50" width="75" alt="Flag of China" title="Flag of China" class="center">
<h1 class="center">China Travel Deals</h1>
<ul class="navigbar">
<li>Home</li>
<li>Australia Travel</li>
<li>Brazil Travel</li>
<li><a href="china_travel.html">China Travel</li>
<li><a href="us_travel.html">United States Travel</li>
</ul>
</body>
</html>
CSS:
body{
background-color: #bdd2ed;
text-align: center;
}
h1,h2{
font-family: sans-serif;
}
ul.navigbar{
margin: 0px;
padding: 0px;
display: block;
width: 100%;
}
.navigbar li{
list-style-type: none;
width: 10%;
text-align: center;
display:inline-block;
}
.navigbar li a{
text-decoration: none;
display:block;
}
You can use flexbox. Though I am not very sure exactly what you are looking for.
https://jsfiddle.net/8pycp48z/
ul.navigbar
{
margin: 0 auto;
display: flex;
width: 100%;
justify-content: space-around;
padding: 0;
}
Mathy answer (will size and center for any number of items, with any padding)
HTML:
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
CSS:
ul {
padding: 0px;
margin: 0px;
float: left;
position: relative;
left: 50%;
}
li {
padding: 0px;
margin: 0px;
float: left;
position: relative;
right: 50%;
list-style: none;
padding: .5em;
background-color:red;
}
Fiddle: https://jsfiddle.net/xc4yktc5/
Beware: You may run into issues with overflow on the main UL.
Sorry, i am a beginner also i'd like to understand the solution.
I want the text to be floated next to the image also i noticed that the image doesn't fully show up instead a proportion of it is underneath the header.
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
p, h1 {
margin: 0;
padding: 0;
}
header {
background-color: #191919;
position: fixed;
width: 100%;
color: #edf9ff;
min-height: 70px;
border-bottom: #0fe216 3px solid;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
margin-top:0;
}
header a {
text-decoration: none;
text-transform: uppercase;
color: #edf9ff;
}
header ul {
margin: 0;
}
header li {
list-style-type: none;
float: left;
padding-right: 20px;
}
#showtime img {
width:300px;
height:300px;
}
.clearfix {
overflow:auto;
}
#img1 {
float:right;
}
#img2 {
float:left;
}
footer {
margin-top:30px;
background-color:#191919;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
clear:both;
}
footer p{
text-align: center;
color: white;
}
<!doctype html>
<html>
<head>
<title>Photography | Home </title>
<link href="About.css" rel="stylesheet"/>
<script type="application/javascript" src="Home.js"></script>
</head>
<body>
<header>
<div id="branding">
<h2>PHOTOGRAPHY</h2>
</div>
<nav id="links">
<ul>
<li>Home</li>
<li>About</li>
<li>PHOTO GALLERY</li>
<li>VIDEO GALLERY</li>
</ul>
</nav>
</header>
<section id="showtime">
<div>
<img src="./images/Person1.jpg" width="300px;" height="300px;">
<h2>Image</h2>
<p>The image will always try to be unique from the odthers and we will always try to deliver the best photo in our limited time</p>
</div>
</section>
<footer>
<p>Note that any copyright © is reserved</p>
</footer>
</body>
</html>
Use align="left" to float an image next to some text. The section showtime needs blank space to allow for the header height overlapping it.
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
p, h1 {
margin: 0;
padding: 0;
}
header {
background-color: #191919;
position: fixed;
width: 100%;
color: #edf9ff;
min-height: 70px;
border-bottom: #0fe216 3px solid;
display: flex;
align-items: center;
justify-content: space-between;
margin-top:0;
}
header a {
text-decoration: none;
text-transform: uppercase;
color: #edf9ff;
}
header ul {
margin: 0;
}
header li {
list-style-type: none;
float: left;
padding-right: 20px;
}
#showtime {
padding-top:60px;
}
#showtime img {
width:300px;
height:300px;
}
.clearfix {
overflow:auto;
}
#img1 {
float:right;
}
#img2 {
float:left;
}
footer {
margin-top:30px;
background-color:#191919;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
clear:both;
}
footer p{
text-align: center;
color: white;
}
<!doctype html>
<html>
<head>
<title>Photography | Home </title>
<link href="About.css" rel="stylesheet"/>
<script type="application/javascript" src="Home.js"></script>
</head>
<body>
<header>
<div id="branding">
<h2>PHOTOGRAPHY</h2>
</div>
<nav id="links">
<ul>
<li>Home</li>
<li>About</li>
<li>PHOTO GALLERY</li>
<li>VIDEO GALLERY</li>
</ul>
</nav>
</header>
<section id="showtime">
<div>
<img align="left" src="./images/Person1.jpg" width="300px;" height="300px;">
<h2>Image</h2>
<p>The image will always try to be unique from the odthers and we will always try to deliver the best photo in our limited time</p>
</div>
</section>
<footer>
<p>Note that any copyright © is reserved</p>
</footer>
</body>
</html>
Replace CSS for the header with:
header {
background-color: #191919;
position: fixed;
width: 100%;
color: #edf9ff;
min-height: 70px;
border-bottom: #0fe216 3px solid;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
margin-top: 0;
top: 0; // Added. Is required for fixed positioning
}
And add the following:
#showtime {
margin-top: 70px;
}
You need to add to css #showtime { padding-top: 100px;} because position: fixed; removes your element from relative positioning, so you need to add extra space on top,.
and add id to img tag <img id="img1" src="./images/Person1.jpg" width="300px;" height="300px;">. This is actually not the best idea. It's better to use classes.
You should do it the proper way by adding a class to img, id must be unique for all HTML document elements, you can't use it more than once. For example you could do:
CSS
.img1 { float: left; }
HTML
<img class="img1" src="./images/Person1.jpg" width="300" height="300">