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>
Related
I don't know how to align it with the logo. I'm trying to use padding but it won't work and even float maybe I would change the container size for it to work. Btw you won't be able to see the image and the li option due to overflow not allowing links so I have attached an image for more convenience
if possible maybe even tell some tips to be better in HTML
enter image description here
header {
height: 600px;
background-image:urlenter code here;
background-repeat: no-repeat;
background-size: cover;
}
.header-container {
height: 1240px;
width: 1240px;
padding-left: 3%;
}
.header-logo{
height: 150px;
width: 450px;
}
img.logo{
width: 400px;
height: 150px;
}
nav {
padding-top: 10px;
}
nav ul {
margin: 0;
padding:0;
}
nav ul li {
display: inline-flex;
margin-left: 50px;
list-style-type: none;
}
nav ul li a {
padding-bottom: 11px;
font-family: 'Raleway', sans-serif;
font-weight: bold;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.1em;
color: #111111;
}
nav ul li a:hover {
border-bottom: 2px solid #f22222;
}
<html lang="en">
<head>
<link rel="stylesheet" href="./css/style.css">
<title>Katalyst Incorporation LLC.</title>
</head>
<body>
<header id="up">
<div class="header-container">
<nav>
<div class="header-logo">
<img class="logo" src="./img/katalyst incorporation logo.png" alt="logo">
</div>
<ul>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
If you want to make logo and menu in a line, you should add "float: left" style to your div. So your style will be this:
.header-logo {
height: 150px;
width: 450px;
float: left;
}
Then if you want change your menu vertical align you can add "margin-top: px" to your ul like this:
nav ul {
margin: 0;
padding: 0;
margin-top: 50px;
}
As logo div and ul are children of same parent,
you can make their parent i.e <nav> as display: flex to align it's children in a flex-row
Learn More on FlexBox
nav {
display: flex;
}
header {
height: 600px;
background-image: urlenter code here;
background-repeat: no-repeat;
background-size: cover;
}
.header-container {
height: 1240px;
width: 1240px;
padding-left: 3%;
}
.header-logo {
height: 150px;
width: 450px;
}
img.logo {
width: 400px;
height: 150px;
}
nav {
padding-top: 10px;
display: flex;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline-flex;
margin-left: 50px;
list-style-type: none;
}
nav ul li a {
padding-bottom: 11px;
font-family: 'Raleway', sans-serif;
font-weight: bold;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.1em;
/* color: #ffffff; */
color: #000; /* changing this so that you can see color */
}
nav ul li a:hover {
border-bottom: 2px solid #f22222;
}
<html lang="en">
<head>
<link rel="stylesheet" href="./css/style.css">
<title>Katalyst Incorporation LLC.</title>
</head>
<body>
<header id="up">
<div class="header-container">
<nav>
<div class="header-logo">
<img class="logo" src="./img/katalyst incorporation logo.png" alt="logo">
</div>
<ul>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
I have changed the font color, so that you can see it working.
Trying to set up a simple 'cheat sheet' of logo and nav bar that I can reuse. I'm having trouble preventing the right floated nav from overflowing into content below.
NB. I'm new to this so I have added borders to all elements to help me see what's happening.
I have tried to add a clear:left (even though I know it should be clear:right as the content has been floated right) to the element proceeding the navigation but that did not work of course!
*{
box-sizing: border-box;
}
header{
display: inline-block;
}
.logo{
background-image: url("logo.png");
background-repeat:no-repeat;
width: 140px;
height: 81px;
margin: 10px;
display: inline-block;
}
nav{
border: 1px solid black;
float: right;
width: auto;
}
ul{
list-style: none;
padding-left: 0;
border: 1px solid red;
vertical-align: middle;
}
li{
display: inline-block;
width: auto;
padding: 20px;
background-color: yellow;
margin-bottom: 5px;
border: 1px solid yellow;
}
.divider{
clear: both;
}
<header>
<div class="logo"></div>
<nav>
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Shopping</li>
<li>Contact Me</li>
</ul>
</nav>
</header>
<div class="divider"></div>
<main>
<h1>The display Property</h1>
So next I tried clear:both and that did not work.
I have also tried to set the nav to display:inline-block but that did not work.
Ideally I would like to solve this without using any pre-provided templates and my just raw code or display:flex.
Thanks in advance :)
Hope this helps.
.nav_bar {
margin: 10px;
padding: 10px;
background-color: #00021a;
color: white;
}
.logo {
display: inline-block;
vertical-align: middle;
width: 7%;
}
.logo img {
height: auto;
width: 50px;
}
.nav {
display: inline-block;
vertical-align: middle;
width: 90%;
}
.nav_container li {
list-style: none;
float: right;
padding: 10px;
}
<head>
<link rel="stylesheet" href="styles.css">
</head>
<div class="nav_bar">
<div class="nav_container">
<div class="logo">
<img class="logo"
src="https://t4.ftcdn.net/jpg/00/71/26/83/240_F_71268376_KIbJvY0SYwlvikWpahjNCv5IBfukykG9.jpg"/>
</div>
<nav class="nav">
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Shopping</li>
<li>Contact Me</li>
</ul>
</nav>
</div>
</div>
Here's the Fiddle
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">
I need some help, how can I place the navigation bar in the center? I tried using the text-align tag but that does not seem to be working!
as you can see the navigation bar is more close to the left margin and I want it to be in the center!
#menubar {
margin: -0px;
padding: 0px;
text-align: center;
}
#menubar a {
text-decoration: none;
color: darkgrey;
text-transform: uppercase;
display: block;
margin: 0px;
padding: 10px;
}
#menubar ul li {
display: inline-block;
margin-left: 1px;
float: left;
font-family: sans-serif;
font-size: large;
background-color: white;
}
body {
background: darkgrey;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="project.css" />
<div id="page">
<div id="menubar">
<div id="menubar-container">
<ul>
<li>Home</li>
<li>Chi siamo</li>
<li>Cosa facciamo</li>
<li>Tree-Climbing</li>
<li>Galleria</li>
<li>Contatti</li>
</ul>
</div>
</div>
</div>
</head>
</html>
#menubar {
margin: 0px;
padding: 0px;
text-align: center;
}
#menubar a {
text-decoration: none;
color: darkgrey;
text-transform: uppercase;
display: block;
margin: 0px;
padding: 10px;
}
#menubar ul {
display: flex;
padding-left: 0;
flex-wrap: wrap;
width: auto;
justify-content: center;
}
#menubar ul li {
display: inline-block;
margin-left: 1px;
float: left;
font-family: sans-serif;
font-size: large;
background-color: white;
}
body {
background: darkgrey;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="project.css" />
<div id="page">
<div id="menubar">
<div id="menubar-container">
<ul>
<li>Home</li>
<li>Chi siamo</li>
<li>Cosa facciamo</li>
<li>Tree-Climbing</li>
<li>Galleria</li>
<li>Contatti</li>
</ul>
</div>
</div>
</div>
</head>
</html>
The CSS part :
#menubar {
display: inline-block;
text-align: center;
margin: -0px;
padding: 0px;
text-align: center;
}
#menubar a {
text-decoration: none;
color: darkgrey;
text-transform: uppercase;
display: block;
margin: 0px;
padding: 10px;
}
#menubar ul li {
display: inline-block;
margin-left: 1px;
float: left;
font-family: sans-serif;
font-size: large;
background-color: white;
}
body {
background: darkgrey;
}
The HTML5 Part:
<div id="page">
<div id="menubar">
<div id="menubar-container">
<ul>
<li>Home</li>
<li>Chi siamo</li>
<li>Cosa facciamo</li>
<li>Tree-Climbing</li>
<li>Galleria</li>
<li>Contatti</li>
</ul>
</div>
</div>
</div>
You can add a fixed width to your menu and apply an auto margin to it.
margin: 0 auto;
Or you can use Flexbox to do so.
#menubar {
display: flex;
justify-content: center;
margin: -0px;
padding: 0px;
text-align: center;
}
You will need some autoprefixing for the flexbox rules though.
Here is a Fiddle.
You can set it using 'display'
#menubar {
width: 100%;
text-align: center;
}
#menubar-container {
display: inline-block;
}
#menubar {
width: 100%;
text-align: center;
}
#menubar-container {
display: inline-block;
}
#menubar {
margin: -0px;
padding: 0px;
text-align: center;
}
#menubar a {
text-decoration: none;
color: darkgrey;
text-transform: uppercase;
display: block;
margin: 0px;
padding: 10px;
}
#menubar ul li {
display: inline-block;
margin-left: 1px;
font-family: sans-serif;
font-size: large;
background-color: white;
}
body {
background: darkgrey;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="project.css" />
<div id="page">
<div id="menubar">
<div id="menubar-container">
<ul>
<li>Home</li>
<li>Chi siamo</li>
<li>Cosa facciamo</li>
<li>Tree-Climbing</li>
<li>Galleria</li>
<li>Contatti</li>
</ul>
</div>
</div>
</div>
</head>
</html>
don't use float if you want to use text-align:center
see snippet it will work
#menubar {
margin: -0px;
padding: 0px;
text-align: center;
}
#menubar a {
text-decoration: none;
color: darkgrey;
text-transform: uppercase;
display: inline-block;
margin: 0px;
padding: 10px;
}
#menubar ul li {
display: inline-block;
margin-left: 1px;
font-family: sans-serif;
font-size: large;
background-color: white;
}
body {
background: darkgrey;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="project.css" />
<div id="page">
<div id="menubar">
<div id="menubar-container">
<ul>
<li>Home</li>
<li>Chi siamo</li>
<li>Cosa facciamo</li>
<li>Tree-Climbing</li>
<li>Galleria</li>
<li>Contatti</li>
</ul>
</div>
</div>
</div>
</head>
</html>
Check if this fiddle helps
CSS:
#menubar {
margin: -0px;
padding:0px;
text-align:center;
display: inline-block;
width: 100%;
margin: 0 auto;
}
#menubar a {
text-decoration:none;
color:darkgrey;
text-transform:uppercase;
display:block;
margin:0px;
padding:10px;
}
#menubar ul li {
display: inline-block;
margin-left:1px;
float:left;
font-family:sans-serif;
font-size:large;
background-color:white;
}
#menubar-container {
display: inline-block;
}
body {
background: darkgrey;
}
I can't figure out how to put them on the same line.
http://codepen.io/anon/pen/dovZdQ
<body>
<div class="navigation-bar">
<div id="navigation-container">
<img src="logo.png">
<ul>
<li>Home</li>
<li>Projects</li>
<li>About</li>
<li>Services</li>
<li>Get in Touch</li>
</ul>
</div>
</div>
</body>
The <ul> is by default a block element, make it inline-block instead:
.navigation-bar ul {
padding: 0px;
margin: 0px;
text-align: center;
display:inline-block;
vertical-align:top;
}
CodePen Demo
Firstly, let's use some semantic HTML.
<nav class="navigation-bar">
<img class="logo" src="logo.png">
<ul>
<li>Home</li>
<li>Projects</li>
<li>About</li>
<li>Services</li>
<li>Get in Touch</li>
</ul>
</nav>
In fact, you can even get away with the more minimalist:
<nav class="navigation-bar">
<img class="logo" src="logo.png">
Home
Projects
About
Services
Get in Touch
</nav>
Then add some CSS:
.navigation-bar {
width: 100%; /* i'm assuming full width */
height: 80px; /* change it to desired width */
background-color: red; /* change to desired color */
}
.logo {
display: inline-block;
vertical-align: top;
width: 50px;
height: 50px;
margin-right: 20px;
margin-top: 15px; /* if you want it vertically middle of the navbar. */
}
.navigation-bar > a {
display: inline-block;
vertical-align: top;
margin-right: 20px;
height: 80px; /* if you want it to take the full height of the bar */
line-height: 80px; /* if you want it vertically middle of the navbar */
}
Obviously, the actual margins, heights and line-heights etc. depend on your design.
Other options are to use tables or floats for layout, but these are generally frowned upon.
Last but not least, I hope you get cured of div-itis.
You need to apply the logo class to the image...then float the ul
Codepen Demo
HTML
<img class="logo" src="http://i.imgur.com/hCrQkJi.png">
CSS
.navigation-bar ul {
padding: 0px;
margin: 0px;
text-align: center;
float: left;
background: white;
}
I'll advise you use CSS Flex.
body {
margin: 0;
padding: 0;
}
#navigation-container {
position: relative;
background-color: #352d2f;
display: flex;
flex-direction: row;
justify-content: space-between;
}
ul {
display: flex;
flex-direction: row;
list-style-type: none;
}
a {
text-decoration: none;
color: black;
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
padding: 5px 15px;
opacity: 0.7;
}
li {
display: flex;
flex-direction: row;
align-items: center;
}
<head>
<link href="./answer.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="navigation-bar">
<div id="navigation-container">
<img src="https://i.imgur.com/hCrQkJi.png">
<ul>
<li>Home</li>
<li>Projects</li>
<li>About</li>
<li>Services</li>
<li>Get in Touch</li>
</ul>
</div>
</body>
Try this CSS:
body {
margin: 0;
padding: 0;
}
.logo {
float: left;
}
/* ~~ Top Navigation Bar ~~ */
#navigation-container {
width: 1200px;
margin: 0 auto;
height: 70px;
}
.navigation-bar {
background-color: #352d2f;
height: 70px;
width: 100%;
}
#navigation-container img {
float: left;
}
#navigation-container ul {
padding: 0px;
margin: 0px;
text-align: center;
display:inline-block;
}
#navigation-container li {
list-style-type: none;
padding: 0px;
height: 24px;
margin-top: 4px;
margin-bottom: 4px;
display: inline;
}
#navigation-container li a {
color: white;
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
line-height: 70px;
padding: 5px 15px;
opacity: 0.7;
}
#menu {
float: right;
}
1) you can float the image to the left:
<img style="float:left" src="http://i.imgur.com/hCrQkJi.png">
2)You can use an HTML table to place elements on one line.
Code below
<div class="navigation-bar">
<div id="navigation-container">
<table>
<tr>
<td><img src="http://i.imgur.com/hCrQkJi.png"></td>
<td><ul>
<li>Home</li>
<li>Projects</li>
<li>About</li>
<li>Services</li>
<li>Get in Touch</li>
</ul>
</td></tr></table>
</div>