So, I'm currently trying to make a Navigation bar for my website and it works just fine! but right now I'm stuck with this annoying picture that can't properly move.
Problem:
I want the navigation picture just a few pixels away from the side of the page but when I use padding-left I also move the navigation section but I want this to be centerd and the picture to be a few pixels from the left. Hope anybody could help me
body {
margin: 0 0 0 0;
padding: 0 0 0
font: arial;
}
nav {
margin: 0;
background-color: #595959;
color: #ffffff;
list-style: none;
text-align: center;
padding: 20px 0 20px 0;
}
nav > ul > li {
display: inline-block;
padding: 0 25px 0 50px;
}
nav > ul> li > a {
text-decoration: none;
color: white;
font-family: Roboto;
}
nav > ul> li > a:hover {
color: #c1c1c1
}
nav > .logo > img {
float: left;
padding: 0 0 0 25px;
}
<!DOCTYPE html>
<html>
<head>
<title>Branco - Home</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<nav>
<div class="logo">
<img src="http://ikbenbranco.nl/assets/icon.png" height="60px">
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</body>
</html>
Thanks, Branco
So in this case u have to position it absolutely if u don't want it to affect the other elements in the nav bar.
here's the css:
body {
margin: 0;
padding: 0;
font: arial;
}
nav {
margin: 0;
background-color: #595959;
color: #ffffff;
list-style: none;
text-align: center;
padding: 20px 0 20px 0;
position: relative;
}
nav > ul > li {
display: inline-block;
padding: 0 25px 0 50px;
}
nav > ul> li > a {
text-decoration: none;
color: white;
font-family: Roboto;
}
nav > ul> li > a:hover {
color: #c1c1c1
}
nav > .logo > img {
position: absolute;
top:50%;
transform: translateY(-50%);
left: 10px;
}
Try to replace your img styles for this. Remove your float and padding lines. Add a position absolute. Then, also add a left and a top properties. Adjust the values as you wish the picture to be positioned. This should fix your issue.
Related
My website has a lot of flaws I know like with the background image and all but the most annoying one is how my hover animation only highlights the top half of my navbar elements. I would like for the hover to cover the entire div instead of just the top half of the element. Im pretty sure the problem arises from how I center my elements i'm not proficient at all with that.
Any help much appreciated. Thanks.
HTML:
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "styles.css"/>
<title>Newberry College</title>
</head>
<body>
<div class = "header">
<div class = "logo">
<h1>Newberry College</h1>
</div>
<ul>
<li><a = href = "#">About</a></li>
<li><a = href = "#">School</a></li>
<li><a = href = "#">Student</a></li>
<li><a = href = "#">Resources</a></li>
</ul>
</div>
<div id="background-img"></div>
</body>
</html>
CSS:
/*Removes default page formatting*/
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
font-family: 'Raleway', 'Arial', 'serif'
}
#background-img {
background: url(school.jpg);
background-repeat: no-repeat;
height: 100vh;
}
/*Formats logo*/
.logo{
width: 320px;
background-color: #D50074;
float: left;
height: 100%;
}
.logo h1{
font-size: 26px;
text-transform: uppercase;
padding: 35px 10px 0 10px;
}
.logo a{
color: #3609BB;
}
/*Formats the header div*/
.header {
width: 100%;
height: 100px;
display: block;
background-color: #9c01A7;
}
/*Styles list*/
.header ul li{
list-style: none;
}
/*Styles list elements*/
.header ul li a{
padding: 40px 20px 0 0;
float: right;
font-size: 20px;
text-transform: uppercase;
font-weight: 600;
}
/*Styles link hover*/
.header ul li a:hover{
background: #3609BB;
}
Remove the two 0s from:
/*Styles list elements*/
.header ul li a{
padding: 40px 20px 0 0; /* <--- here */
This is the same as padding: 40px 20px 40px 20px, which would also work.
I wanted to reduce the space between my links for the navigation on the left side. I tried padding but it messes with my float.
<!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>projekt</title>
</head>
<body>
<header>
<nav>
<ul>
<li class="home">home</li>
<li class="nav">contact</li>
<li class="nav">list</li>
<li class="nav">office</li>
<li class="nav">projects</li>
<li class="nav">plans</li>
</ul>
</nav>
</header>
<div class="navline"></div>
</body>
</html>
CSS:
body{
margin: 0;
padding: 0;
}
nav ul{
margin: 0;
padding: 0;
font-family: proxima-n-w01-reg,sans-serif;
list-style-type: none;
}
.navline
{
border-bottom:1px solid rgb(226, 223, 223);
padding-bottom:80px
}
nav li.home{
display: flex;
margin: 30px 0 0 160px;
float: left;
font-size: 20px;
font-weight: 400;
text-transform: uppercase;
}
nav li.nav{
display: flex;
margin: 30px 100px 0 0px;
float: right;
font-size: 18px;
}
nav li a{
display: flex;
text-decoration: none;
color: black;
}
Should I not use float to position my navigations on the left and right side and rather display:flex and also to reduce the space?
Solution would be like:
plans projects office ....
But it's more like this:
plans projects office...
Try changing your CSS file, this is the example css file for a nav bar. You can add the missing attributes for the specific class in your css file. This would solve your purpose.
ul.nav {
width:100%;
margin:0 auto;
padding:0;
list-style:none;
background-color:#62564A;
text-align:center;
font-family: sans-serif;
}
.nav li {
display:inline-block;
width:33%;
margin:0;
padding:0;
}
.nav a {
text-align:center;
padding:12px 0 13px 0;
margin:0;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
display:block;
}
.nav a:hover {
background:#A26A42;
border:none;
}
You have to decrease the size of the margin ..
nav li.nav{
display: flex;
margin: 30px 20px 0 0px;
float: right;
font-size: 18px;
}
There's no point of adding display:flex on li. Logically, I would say this css code for li as incorrect. Instead modify your css this way:
nav ul{
margin: 30px 0 0 0;
padding: 0;
font-family: proxima-n-w01-reg,sans-serif;
list-style-type: none;
display: flex;
justify-content: space-evenly; /* You may also play around this css attribute for evenly distributed spacing instead of applying margin or so on li tag */
}
nav ul > li{
margin: 0 10px; /* You may change this spacing as per your need */
font-size: 20px;
font-weight: 400;
text-transform: uppercase;
}
nav ul > li > a{
display: block;
}
I'll usually suggest applying margin-top on ul instead of individual li but that depends on you also.
I have a photo of the most recent post on my page and would like to put a small portion of text onto the top left corner of the picture. I have tried code to do so from other online resources, but none of them have worked. Can someone please check why my code isn’t working or provide an alternate method of putting text on an image?
Here is my HTML + CSS:
* {
margin: 0;
padding: 0;
}
body {
}
nav {
width: 100%;
height: 90px;
background-color: black;
display: flex;
}
nav h1 {
text-align: center;
font-family: arial;
color: white;
font-size: 44px;
line-height: 55px;
float: left;
padding: 15px 20px;
flex: 1 0 auto;
}
nav ul {
position: absolute;
right: 0;
}
nav ul li {
float: left;
list-style: none;
position: relative; /* we can add absolute position in subcategories */
padding-right: 1em;
}
nav ul li a {
display: block;
font-family: arial;
color: white;
font-size: 20px;
padding: 34px 14px;
text-decoration: none;
}
nav ul li ul {
display: none;
position: absolute;
background-color: black;
padding: 5px; /* Spacing so that hover color does not take up entire chunk */
border-radius: 0px 0px 4px 4px;
transform: translateX(1rem);
}
nav ul li:hover ul {
/* This means when li is hovered, we want the unordered list inside list item to do something. */
display: block;
}
nav ul li ul li{
width: 130px; /* increases width so that all text can be fit */
border-radius: 4px;
}
nav ul li ul li a:hover {
background-color: #ADD8E6;
a
}
.newest-review-cover img {
height: 50%;
width: 100%;
position: relative;
display: inline-block;
}
.newest-review-cover .newest-review-title {
position: absolute;
z-index: 999;
margin: 0 auto;
left: 0;
right: 0;
text-align: center;
top: 120%; /* Adjust this value to move the positioned div up and down */
background: rgba(0, 0, 0, 0.8);
font-family: Arial,sans-serif;
color: #fff;
width: 60%; /* Set the width of the positioned div */
}
<!DOCTYPE html>
<html>
<head>
<link href="header+footer.css" rel = "stylesheet" type="text/css" />
<link href="Homepage.css" rel = "stylesheet" type="text/css" />
<meta charset="utf-8">
<title> The Novel Column - Book Reviews </title>
</head>
<body>
<nav>
<h1> The Novel Column </h1>
<ul>
<li> Resources
<ul>
<li> Book Reviews </li>
<li> Quotes and Principles </li>
<li> Community Aid </li>
</ul>
</li>
<li> About Us </li>
</ul>
</nav>
<section class="newest-review-cover">
<img src="https://thenovelcolumn.com/wp-content/uploads/2019/06/the-5am-club-poster.jpg" alt="The 5AM Club">
<div class="newest-review-title">
<p> The 5AM Club </p>
</div>
</section>
</body>
</html>
Thanks in advance for your help!
For starters, you are targeting your newest-review-title class wrong in your CSS, by using a period between review and title. Change that. Also, try making your container the relative element instead of your image, like so:
.newest-review-cover {
position: relative;
}
.newest-review-cover img {
display: block;
width:100%;
}
.newest-review-title {
position: absolute;
display:block;
z-index: 999;
margin:0 auto;
text-align: center;
top: 50%;
width: 60%;
left:20%
}
This method provides an alternative solution using the CSS background image property. Then you can place your text in the div using the CSS you already had in place. You can adjust the height by adjusting the height of the div. The size of the image can be adjusted using the CSS background-size property.
* {
margin: 0;
padding: 0;
}
body {}
nav {
width: 100%;
height: 90px;
background-color: black;
display: flex;
}
nav h1 {
text-align: center;
font-family: arial;
color: white;
font-size: 44px;
line-height: 55px;
float: left;
padding: 15px 20px;
flex: 1 0 auto;
}
nav ul {
position: absolute;
right: 0;
}
nav ul li {
float: left;
list-style: none;
position: relative;
/* we can add absolute position in subcategories */
padding-right: 1em;
}
nav ul li a {
display: block;
font-family: arial;
color: white;
font-size: 20px;
padding: 34px 14px;
text-decoration: none;
}
nav ul li ul {
display: none;
position: absolute;
background-color: black;
padding: 5px;
/* Spacing so that hover color does not take up entire chunk */
border-radius: 0px 0px 4px 4px;
transform: translateX(1rem);
}
nav ul li:hover ul {
/* This means when li is hovered, we want the unordered list inside list item to do something. */
display: block;
}
nav ul li ul li {
width: 130px;
/* increases width so that all text can be fit */
border-radius: 4px;
}
nav ul li ul li a:hover {
background-color: #ADD8E6;
a
}
.newest-review-cover {
position: relative;
height: 383px;
width: 100%;
}
.newest-review-cover_bg {
background-image: url('https://thenovelcolumn.com/wp-content/uploads/2019/06/the-5am-club-poster.jpg');
height: 100%;
background-size: 100%;
background-repeat: no-repeat;
}
.newest-review-cover .newest-review.title {
position: absolute;
z-index: 999;
margin: 0 auto;
left: 0;
right: 0;
text-align: center;
top: 120%;
/* Adjust this value to move the positioned div up and down */
background: rgba(0, 0, 0, 0.8);
font-family: Arial, sans-serif;
color: #fff;
width: 60%;
/* Set the width of the positioned div */
}
<!DOCTYPE html>
<html>
<head>
<link href="header+footer.css" rel="stylesheet" type="text/css" />
<link href="Homepage.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<title> The Novel Column - Book Reviews </title>
</head>
<body>
<nav>
<h1> The Novel Column </h1>
<ul>
<li> Resources
<ul>
<li> Book Reviews </li>
<li> Quotes and Principles </li>
<li> Community Aid </li>
</ul>
</li>
<li> About Us </li>
</ul>
</nav>
<section class="newest-review-cover">
<div class="newest-review-cover_bg">
<p class="newest-review-cover_title">
The 5AM Club
</p>
</div>
</section>
</body>
</html>
How to align the logo to my navigation bar?
My HTML code is:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/png" href="SENCOR_Logo.ico">
<title>SENCOR</title>
</head>
<body>
<div class="bg-div">
<img class="logo-img" src="SENCOR_Logo.jpg" ALT="align box" ALIGN=CENTER>
<nav>
<ul>
<li>Monitoring</li>
<li>Process</li>
<li>Post and Create Email/Excel</li>
<li>Reports</li>
<li>Tools</li>
<li>Sales</li>
</ul>
</nav>
</div>
</body>
</html>
and heres my style.css code:
body{
margin: 0;
padding: 0;
font-size: 15px;
}
/* Navigation */
nav{
margin: 0;
overflow:hidden;
text-align: center;
}
nav ul{
margin: 0;
padding: 0;
}
nav ul li{
display: inline-block;
list-style-type: none;
}
nav > ul > li > a{
color: #aaa;
display: block;
line-height: 2em;
padding: 0.5em 1em;
text-decoration: none;
}
-----------
.logo-img{
position: relative;
margin: 10px 15px 15px 10px;
}
.bg-div{
background:#333;
}
I want to display the logo at the left side and the navigation bar to the right side.
Made a pen far more simpler:
https://codepen.io/DevAlokes/pen/yLEJEYY
* {
text-decoration: none;
list-style-type:none;
color: white
}
.bg-div {
background-color: #333;
display: flex;
justify-content: space-between;
}
nav ul {
display: flex;
}
nav ul li{
margin: 0 12px;
}
The simplest and most basic answer is, use floats.
.logo-img {
float: left;
}
nav {
float: right;
}
Normally, it's better to use "position: fixed;" for navigation bars on top. So, your css can do like this:
.logo-img{
position: fixed;
margin: 10px 15px 15px 10px;
left: 0;
display:inline;
}
.bg-div{
background:#333;
height: 50px;
}
.bg-div nav {
position: fixed;
display:inline;
right: 0;
}
I have two links that are a part of my navigation bar that have drop downs. What I would like is a background image for each drop down;an image for fairies, a different image for craniums. I'm pretty close, I think, but I'm unsure as to how to set this up. After reading several posts, the post from Ryan Rahif on May 19 at 18:58 is pretty darned close to what I want. Do I need to create another hover div? Do I need to create a hover for each drop down?
thank u
<!Doctype HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fairies - Tabbed Dropdown</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="nav">
<ul>
<li>World of Fairies</li>
<li>Fairihabitants
<ul>
<li>Fairies</li>
<li class="cranlink">Craniums</li>
</ul>
</li>
<li>Fairi-bitats
<ul>
<li>Dreams</li>
<li>Tinkling Bells</li>
<li>Rain Drops</li>
</ul>
</li>
<li>Fairy Dust</li>
</ul>
</div><!--/#nav-->
</div><!--/#container-->
</body>
</html>
/* CSS Document - Stylesheet.css */
/* BODY AND CONTAINER
-------------------------------------- */
body {
font-size: 76%;
padding: 0px;
margin: 0px;
}
#container {
width: 650px;
padding: 0px;
margin: 0 auto 0 auto;
}
/* MAIN NAVIGATION
-------------------------------------- */
#nav {
float: left;
width: 650px;
height: 50px;
border-bottom: 2px solid #000;
padding: 0px;
margin: 100px 0 0 0;
}
#nav ul {
list-style: none;
padding: 0px;
margin: 0px;
}
#nav ul li {
float: left;
padding: 0px;
margin: 0px;
}
#nav ul li a {
float: left;
width: 150px;
height: 50px;
background-image: url(../images/fairy-gate.jpeg);
background-repeat: repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.4em;
line-height: 50px;
color: #fff;
text-decoration: none;
text-align: center;
padding: 0px;
margin: 0 0 0 10px;
}
#nav ul li a:hover {
background-image: url(../images/bg-nav-hover.png);
background-repeat: repeat-x;
}
/* DROPDOWN MENU - MAIN NAVIGATION
-------------------------------------- */
#nav li ul {
display: none;
}
#nav li:hover ul {
width: 150px;
display: block;
visibility: visible;
position: relative;
top: 0px;
clear: both;
z-index: 1;
}
.cranlink {
background-image:url(../images/craniums.jpg);