How can I align the navigation links and brand name using pure CSS?
It disaligns after I include a float on the brand container and link container.
Screenshot image here:
HTML
<!DOCTYPE html>
<hmtl>
<head>
<title>My Portfolio</title>
<meta name="author" content="Rocky">
<meta name="description" content="Sample Portfolio">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans|Poppins">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<header class="header">
<nav class="nav-bar">
<section class="nav-container">
<section class="brand-container">
<h2 class="brand-name">Rocky</h2>
</section>
<ul class="link-container">
<li><a class="nav-link" href="#">Home</a></li>
<li><a class="nav-link" href="#">About Me</a></li>
<li><a class="nav-link" href="#">My Works</a></li>
<li><a class="nav-link" href="#">My Challenge</a></li>
<li><a class="nav-link" href="#">Contact Me</a></li>
</ul>
</section>
</nav>
</header>
CSS
* {
margin: 0; padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Open Sans';
overflow-x: hidden;
}
a {
text-decoration: none;
}
.header {
height: 100vh; width: 100vw;
background: url('../img/header_img.jpg') top center / cover fixed no-repeat;
z-index: 1030;
}
.nav-bar {
position: fixed;
width: 100%;
border-bottom: 1px solid #EEE;
z-index: 1031;
}
.nav-container {
width: 90%;
margin: 0 auto;
overflow: hidden;
}
.brand-container {
float: left;
display: inline-block;
}
.brand-name {
position: relative;
padding: 5px 10px;
border-radius: 4px;
font-family: 'Poppins';
color: #444;
background: #EEE;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.link-container {
position: relative;
list-style-type: none;
float: right;
}
.link-container li {
padding: 20px 15px;
display: inline-block;
}
.link-container li a {
font-family: 'Poppins';
color: #EEE;
transition: color 150ms linear;
}
.link-container li a:hover {
color: #CCC;
}
How can I fix this to align them? I tried everything like separating them and used several CSS properties to do the job it didn't worked.
So floats are a pretty 'hacky' solution to setting elements to the right or left, and generally should be avoided if at all possible. Using different display settings should get the look you're going.
display: grid;
for example, will allow you to divide your nav into columns and place elements into whichever column you'd like. I made a codepen that shows what I believe is the look you're going for placement wise. If you have any questions or anything feel free to ask! I hope this helped!
Related
I'm trying to add a logo to the navigation bar, but the logo I am trying to add is not displayed properly.
I've tried setting width and height, it stretches but it doesn't render properly, and the text written in the image is also not readable.
But when I use another different png image it is visible properly, for example when using this .png file https://www.logomakr.in/img/logo-design2.png, it is displayed properly and is visible.
body {
font-family: "Open Sans", sans-serif;
color: #444444;
}
#header {
background: #fff;
transition: all 0.5s;
z-index: 997;
padding: 15px 0;
box-shadow: 0px 2px 15px rgba(25, 119, 204, 0.1);
}
#header.header-scrolled {
top: 0;
}
#header .logo {
font-size: 30px;
margin: 0;
padding: 0;
line-height: 1;
font-weight: 700;
letter-spacing: 0.5px;
font-family: "Poppins", sans-serif;
}
#header .logo a {
color: #2c4964;
}
#header .logo img {
max-height: 40px;
}
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation
*/
.navbar {
padding: 0;
}
.navbar ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
align-items: center;
}
.navbar li {
position: relative;
}
.navbar>ul>li {
position: relative;
white-space: nowrap;
padding: 8px 0 8px 20px;
}
.navbar a,
.navbar a:focus {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
color: #2c4964;
white-space: nowrap;
transition: 0.3s;
border-bottom: 2px solid #fff;
padding: 5px 2px;
}
.navbar a i,
.navbar a:focus i {
font-size: 12px;
line-height: 0;
margin-left: 5px;
}
.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {
color: #1977cc;
border-color: #1977cc;
}
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<header id="header" class="fixed-top">
<div class="container d-flex align-items-center">
<a class="logo me-auto" href="#">
<img src="https://toppng.com/uploads/preview/logo-design-concept-for-huebris-sample-logo-image-11563507273imdbiqdnjt.png">
</a>
<nav id="navbar" class="navbar order-last order-lg-0">
<ul>
<li><a class="nav-link scrollto active" href="#hero">Home</a></li>
<li><a class="nav-link scrollto" href="#about">About</a></li>
<li><a class="nav-link scrollto" href="#services">Services</a></li>
<li><a class="nav-link scrollto" href="#departments">Events</a></li>
<li><a class="nav-link scrollto" href="#departments">Contact Us</a></li>
<li><a class="nav-link scrollto" href="#doctors">Careers</a></li>
</ul>
</nav>
<!-- .navbar -->
</div>
</header>
<!-- End Header -->
What is causing this behavior? How to do it properly?
Just make the image rectangular, scale it decently and please erase that grey background so that it'll look good.
Then wrap that up using navbar-brand and img-fluid classe as shown here: https://getbootstrap.com/docs/5.1/components/navbar/#image
I am aware that there are plenty of question identical to mine, but it seems that I have a problem with my code. I'm trying to make a website, and for now the layout I'm looking for is a logo at the very top followed by the name of the brand and then under it a navigation bar. I did the nav bar first, but when trying to put the image in, I couldn't resize it, let alone center it with text. Can somebody help me achieve what I'm trying to do, or at least explain what I'm doing wrong? Thanks
P.S. Here is my code.
body {
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: sticky;
}
li{
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.6s ease;
}
li a:hover {
background-color: #111;
}
.logo img{
float: center;
width: 80;
height: 80;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style2.css">
<title>QPlugs</title>
</head>
<body>
<header>
<div class="main">
<div class="logo">
<img src="logo.PNG">
</div>
<ul>
<li>Home </li>
<li>Join </li>
<li>Shop </li>
<li>More Info </li>
</ul>
</div>
</header>
</body>
</html>
P.S.S. If it helps, when I inspect the image on the page, I get this thing here.
There is no float: center. Instead, you can use text-align: center; on .logo (the container of the image). And you need to use the px unit on width and height of the image.
BTW: Since you wrote about centering image and text, I added an h1 in my snippet which is also centered via text-align: center. (You could also add settings for margin-top and margin-bottom if you want to change the default distance to the elements above and below)
body {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: sticky;
}
li {
float: left;
}
h1 {
text-align: center;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.6s ease;
}
li a:hover {
background-color: #111;
}
.logo {
text-align: center;
}
.logo img {
width: 80px;
height: 80px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style2.css">
<title>QPlugs</title>
</head>
<body>
<header>
<div class="main">
<div class="logo">
<img src="logo.PNG">
</div>
<h1>Header Text</h1>
<ul>
<li>Home </li>
<li>Join </li>
<li>Shop </li>
<li>More Info </li>
</ul>
</div>
</header>
</body>
</html>
Use display: flex is much easier to use and flexible
body {
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: sticky;
}
li{
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.6s ease;
}
li a:hover {
background-color: #111;
}
.logo {
display: flex;
justify-content: center;
}
.logo img{
width: 80px;
height: 80px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style2.css">
<title>QPlugs</title>
</head>
<body>
<header>
<div class="main">
<div class="logo">
<img src="logo.PNG">
</div>
<ul>
<li>Home </li>
<li>Join </li>
<li>Shop </li>
<li>More Info </li>
</ul>
</div>
</header>
</body>
</html>
For some reason the button in the header changes size but the two in the main does not. Why does this happen and how can i fix it? When i inspect my site in the developer tools it shows that the width and height are being applied to the buttons but there is no visual change.
See code here:
https://codepen.io/Burning_Pancakes/pen/JjdNwWg
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dribbble Double</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<img id="logo" src="images/ball.svg" alt="ball"/>
<nav>
<ul>
<li>Home</li>
<li>Explore</li>
<li>Hire</li>
<li>Contact</li>
</ul>
</nav>
<a class="signup link" href="#">Sign Up</a>
</header>
<main>
<h1>Dribble Double</h1>
<p>Find & showcase creative work from the worlds best design professionals</p>
<a class="signup link" href="#">Sign Up</a>
<a class="link" id="learn" href="#">Learn More</a>
</main>
</body>
</html>
CSS:
/* CSS Document */
html, body {
margin: 0;
width: 100%;
height: 100%;
}
header {
height: 100px;
display: flex;
align-items: center;
padding: 0 12em;
}
#logo {
height: 50%;
}
nav {
margin-left: 3em;
width: 50%;
}
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
li {
width: 25%;
}
a {
text-decoration: none;
color: #000;
}
.link {
height: 48px;
width: 140px;
}
.signup {
color: #fff;
background: #01D70B;
}
main {
height: calc(100% - 100px);
width: 100%;
}
Anchors with link class should have a display:inline-block; property in order to be affected by the sizes attributes (width/height).
change your .link styling
.link {
height: 48px;
width: 140px;
display:inline-block;
}
I start learning css and have a trouble with adding color to blocks, which stay in the same line. As you can see, in My website on the first line the color is out of the border of each block. What I want to do is make it looks like in the example (the 3 green blocks). Can anybody help me fix it?
ps: sorry, my English is not so good :/
both are my css and html codes:
body
{
font-family: inherit;
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
#menu1 {
float: left;
padding-left: 50px;
}
#menu2 {
float: right;
padding-right: 50px;
}
.nav {
position: relative;
top: -5px;
padding: 9px 0px 50px 0px;
background-color: aliceblue;
margin-bottom: 0px;
}
.nav ul, li {
display: inline-block
border: 1px black solid;
background-color: orange;
}
.nav ul,li,a {
display: inline-block;
}
.titel {
background-color: antiquewhite;
position: relative;
top: -9px;
padding: 75px 0px 75px 0px;
}
.titel h1,h4 {
text-align: center;
color: skyblue;
text-shadow: 2px 1px grey;
}
.hometext {
margin: 0px 25px 0px 25px;
}
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel ="stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>
<!-- <h1 class="blue">Titel 1</h1>
<h1 id= "heading">Heading</h1>
<p class = "blue">Welcome to my website, my name is Unknow and it's a pleasure for me to see you guys!!!!</p>-->
<div class="nav">
<ul id="menu1">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul id="menu2">
<li>Sign up</li>
<li>Log in</li>
<li>Help</li>
</ul>
</div>
<div class="titel">
<h1>---MY WEBSITE---</h1>
<h4>Welcome to my first website</h4>
</div>
<div class="hometext">
<h2>Homepage</h2>
</div>
</body>
</html>
Before you start with the CSS, you are going to have to think about the markup. Your list of 'boxes' looks like a 'list' of something... in this case navigation links. This is how I would suggest writing the markup.
<nav class='site-navigation'>
<ul class='item-list'>
<li class='item'>
<a href='#'>Item name</a>
</li>
<li class='item'>
<a href='#'>Item name</a>
</li>
<li class='item'>
<a href='#'>Item name</a>
</li>
</ul>
</nav>
from there... you'll style it.
ul {
/* reset the annoying defaults of lists */
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
color: inherit; /* inherit from parent color */
}
.site-navigation .item-list .item {
display: inline-block;
}
.site-navigation .item-list a {
display: block; /* make sure these links (inline by default) are block */
padding: 10px 20px;
background: lightgreen;
color: white;
}
https://jsfiddle.net/sheriffderek/cm5kbxx3/
The question 'how do I color these boxes' should tell you that it's time for some studying. It's only going to get about 100x more difficult. Find a good class or mentor. frontendmasters or codementor are good ways to level up quickly. Be sure and post some code next time - along with what you've tried so far. : )
as you can observe in this page http://arielnavarro.esy.es/ , which I use to train, have a slight issue I dont like. As you can see the nav bar is bigger than the buttons and that only happened when I added the facebook logo, and the linkedin logo. I've tried to play with the height of both images but I end up with the saize of the nav bar changing as well.
below are the codes from css and html
#charset "utf-8";
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li {
float: left;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #4CAF50;
}
#fb {
float:right;
margin: 0 auto;
z-index: 2;
padding-right:15px;
}
#linkedin {
float:right;
z-index:2;
}
<!DOCTYPE html>
<head>
<title>Documento sin tÃtulo</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div>
<ul class="navbar">
<li id="home"><a class="active" href="#home">Home</a></li>
<li id="quienes_soy">quienes soy</li>
<li id="contacto">Contacto</li>
<li id="about">acerca de</li>
<a id="linkedin" target="_blank" href="https://www.linkedin.com/in/ariel-navarro-297062129/"><img src= "http://i.imgur.com/15FuoKO.png" height="45"></a>
<a id="fb" target="_blank" href="https://www.facebook.com/ariel.navarro.9655"><img src= "http://i.imgur.com/w3S3D0o.png" ></a>
</ul>
</div>
</body>
</html>
thank you all :)
Try giving your 'navbar' a fixed height. That should get you moving in the right direction.