When I am trying to set the relative position of "ul" element nested under
div with id nav , it is adding Horizontal Scroll Bar on Web Page. Please help
to understand the reason for this & solution for this. Basically I want to bring the Navigation menu in centre of screen.
<!DOCTYPE html>
<html>
<head>
<title>TESTING PAGE</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#nav {
background-color: black;
color: white;
}
#nav ul {
list-style-type: none;
position: relative;
left: 100px;
}
#nav ul li {
display: inline;
}
</style>
</head>
<body>
<h1>NAVIGATION BAR</h1>
<div id="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
</body>
</html>
The reason it overflows is because if you do not explicitly apply a value for the display property of ul, the value defaults to block.
Elements with display: block; take up 100% width, so, since you move the element 100px to the right, #nav ul will overflow the document by 100px.
You can test this by applying a border to ul and then try changing its display property to, say, inline for example.
body {
margin: 0;
padding: 0;
}
#nav {
background-color: black;
color: white;
}
#nav ul {
list-style-type: none;
position: relative;
left: 100px;
border: solid red 1px;
/* try un-commenting this and see what happens!
display: inline;
*/
}
#nav ul li {
display: inline;
}
<h1>NAVIGATION BAR</h1>
<div id="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
And if you would like to move the ul element to the center of #nav, then simply add left: 50%; transform: translateX(-50%); to #nav ul.
Transform Translate positions an element relative to itself, so, if an element's width is 100px and you apply that specific transform, it will reposition that element 50px (half of its own width) to the left of its current left position.
It should be noted that you should also apply a padding-left: 0 to #nav ul since ul elements by default have padding applied to them.
body {
margin: 0;
padding: 0;
}
#nav {
background-color: black;
color: white;
}
#nav ul {
list-style-type: none;
position: relative;
left: 50%;
transform: translateX(-50%);
border: solid red 1px;
display: inline-block;
margin: 0 auto; /* to remove the default top & bottom margins for inline-blocks */
padding-left: 0; /* to remove the default padding-left for ULs */
}
#nav ul li {
display: inline;
}
<h1>NAVIGATION BAR</h1>
<div id="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
Here is a solution to your problem:
body {
margin: 0;
padding: 0;
}
#nav {
background-color: black;
color: white;
}
li {
display: inline;
}
ul{
padding-left: 0px;
display: wrap;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>TESTING PAGE</title>
</head>
<body>
<h1>NAVIGATION BAR</h1>
<div id="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
</body>
</html>
Use display: wrap; property for the ul along with text-align: center;. This way they get aligned to the center without the need to add additional hard coded left: 100px; which is added in your code.
Related
I can't seem to get the code in .wrapper{} to work. There is no change reflected on the browser. If the code in .wrapper{} works, the display on the browser should be repositioned closer to the centre.
Help needed: could someone point out the error in the code and suggest possible fixes?
/*index.html*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tutorial</title>
<link rel = "stylesheet" href="style.css">
</head>
<body>
<div class= "wrapper">
<nav>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>About me</li>
<li>Contact</li>
</ul>
</nav>
<h1>Front page</h1>
</div>
</body>
</html>
/*style.css*/
* {
margin: 0;
padding: 0;
}
body {
background-color: #eeeeee;
}
.wrapper {
margin: 0 auto;
width: 1000px;
}
nav {
width: 100%;
height: 100px;
background-color: #fff;
}
ul {
margin-left: 0;
}
ul li {
list-style: none;
display: inline-block; /* changes from vertical dropdown to horizontal */
line-height: 100px;
}
ul li a {
display: block;
text-decoration: none;
font-size: 14px;
font-family:Arial, Helvetica, sans-serif;
color:indianred;
padding: 0 20px;
}
ul li a:hover {
font-family:monospace;
color: green;
}
This is because you have made the .wrapper width 1000px. Try to change it or make half the width then you will find it into center or some changes.
Note: You should put a clear visible background color like red or yellow to see your changes.
fix it by replacing with this:
.wrapper {
margin: 0 auto;
width: 50%;
}
I am currently working on a project for college and my nav bar is giving me issues, I have tried various ways to resolve the issue by doing some research.
The site is very basic as it is just a template at the moment.
My main goal for the nav bar was to centre it on the main background image and allow the "Rooms" tab to drop down.
nav {
background-color: transparent;
}
nav a {
color: #F2E2C4;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 20px;
font-weight: bold;
display: inline-block;
text-decoration: none;
position: relative;
font-family: 'Spartan';
}
nav ul {
padding: 0px;
margin: 0px;
list-style-type: none;
}
nav a.beachview {
float: left;
color: #F2E2C4;
text-align: center;
padding: 0px 16px;
text-decoration: none;
font-size: 45px;
padding-top: 2px;
font-family: 'Spartan';
}
nav a:hover {
background-color: none;
color: #8C8474;
}
nav ul ul {
display: none;
position: absolute;
}
nav ul li:hover ul {
display: inline-block;
}
nav ul ul li {
float: none;
}
nav li {
float: left;
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title>Beachview - Home</title>
<meta name="author" content="Your Name">
<meta name="description" content="Example description">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="" />
<link href="https://fonts.googleapis.com/css?family=Dosis&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Spartan&display=swap" rel="stylesheet">
</head>
<body>
<div class="bg-img">
<div class="container">
<nav>
<ul>
<li>ROOMS
<ul>
<li>GLASGOW</li>
<li>EDINBURGH</li>
<li>ABERDEEN</li>
<li>DUNDEE</li>
</ul>
</li>
<li>GALLERY</li>
<li><a class="beachview" href="#">BEACHVIEW</a></li>
<li>LOCAL</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</div>
<main>Main stuff goes here</main>
</body>
</html>
Not 100% sure if the above makes sense as the background image will not load.
Add a .dropdown class to your li containing the dropdown ul.
<li class="dropdown">ROOMS
<ul>...</ul>
</li>
Add these styles to align your dropdown below the "Rooms" link:
.dropdown {
/* Make it so you can position the child ul with absolute position
/ relative to this parent */
position:relative;
}
.dropdown ul {
position:absolute;
left:0;
top:2.5em;
}
Apply display: flex to your .bg-img container, and then adding margin: auto; to the child-element nav will center it vertically and horizontally.
.bg-img {
background-image: url('https://via.placeholder.com/900x200/000/333'); // Replace with your image
height: 200px; // Sample height
width: 100%; // Sample width
display: flex; // Flex allows for easy centering of child-elements
}
nav {
background-color: transparent;
margin:auto; // this is the key to the centered alignment
}
I also moved your class="container" from the wrapper div to your nav and removed that div.
Here is the full working code. (Click "Run Code Snippet, then hit "Full Page" on the right-hand side to see it working):
.bg-img {
/* Replace this img url with your image */
background-image: url('https://via.placeholder.com/900x200/000/333');
height: 200px; /* Sample height */
width: 100%; /* Sample width */
display: flex; /* Flex allows for easy centering of child-elements with margin:auto */
}
nav {
background-color: transparent;
margin:auto;
}
.dropdown {
/* Make it so you can position the child ul with absolute position
relative to this parent */
position:relative;
}
.dropdown ul {
position:absolute;
left:0;
top:2.5em;
}
/* None of the below code was modified */
nav a {
color: #F2E2C4;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 20px;
font-weight: bold;
display: inline-block;
text-decoration: none;
position: relative;
font-family: 'Spartan';
}
nav ul {
padding: 0px;
margin: 0px;
list-style-type: none;
}
nav a.beachview {
float: left;
color: #F2E2C4;
text-align: center;
padding: 0px 16px;
text-decoration: none;
font-size: 45px;
padding-top: 2px;
font-family: 'Spartan';
}
nav a:hover {
background-color: none;
color: #8C8474;
}
nav ul ul {
display: none;
position: absolute;
}
nav ul li:hover ul {
display: inline-block;
}
nav ul ul li {
float: none;
}
nav li {
float: left;
}
<body>
<div class="bg-img">
<!-- this is where the old <div class="container"> was -->
<nav class="container">
<ul>
<li class="dropdown">ROOMS
<ul>
<li>GLASGOW</li>
<li>EDINBURGH</li>
<li>ABERDEEN</li>
<li>DUNDEE</li>
</ul>
</li>
<li>GALLERY</li>
<li><a class="beachview" href="#">BEACHVIEW</a></li>
<li>LOCAL</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
<main>Main stuff goes here</main>
</body>
I'm just learning CSS and am trying to make a very simple navigation bar, which changes colour when your mouse hovers over it.
I thought that, if I added padding to a child element, it would increase the size of its parent element. However, when I add padding to my link elements, they become bigger than the list items they are contained in, so I get this:
nav bar
I was wondering if anyone could anyone explain why this is? I'm so confused! Also, do you have any suggestions about how I can force the entire nav-bar to be the same height as the grey link shown in the image?
Thank you so much for your time. I really appreciate it! :)
Here is my html:
<!DOCTYPE html>
<html>
<head>
<link href="styles.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="nav">
<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Other link</a></li>
<li><a>Another link</a></li>
</ul>
</div>
</body>
</html>
And here is my css:
#CHARSET "ISO-8859-1";
* {
padding: 0; /*I read that it's a good idea to set these to 0, to avoid unexpected differences between browsers*/
margin: 0;
/*border-style: solid*/
}
.nav {
background-color: black;
color: white;
position: fixed;
top: 0;
display: inline-block;
}
.nav ul {
list-style-type: none;
}
.nav li{
display: inline-block;
}
.nav a {
padding: 1em 0.5em;
}
.nav a:hover{
background-color: Grey;
}
Take a look at this!
This should be enough to get you started!
You added padding to a single item, but what you needed to do was add display: block to your .nav a, which is all your anchor tags of your nav.
* {
padding: 0; /*I read that it's a good idea to set these to 0, to avoid unexpected differences between browsers*/
margin: 0;
/*border-style: solid*/
}
.nav {
background-color: black;
color: white;
position: fixed;
top: 0;
display: inline-block;
}
.nav ul {
list-style-type: none;
}
.nav li{
display: inline-block;
}
.nav a {
padding: 1em 0.5em;
display: block;
vertical-align: middle;
text-decoration: none;
color: white;
}
.nav a:hover{
background-color: grey;
}
<!DOCTYPE html>
<html>
<head>
<link href="styles.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Other link</li>
<li>Another link</li>
</ul>
</div>
</body>
</html>
.nav a { padding: 1em 0.5em; }
1em is what's making them become bigger. Change it to 1px and it will do the trick for you.
https://codepen.io/julysfx/pen/weOwwr
I am having a problem when using the css property margin-top on <li> elements.
I am trying to have my list align to the top of the page but my li element isn't moving to the top as it should.
Below is my HTML code:
<body>
<div class="main_header">
<h1>Title</h1>
<ul>
<li>About Me</li>
<li>Order</li>
<li>Designs</li>
<li>Contact</li>
</ul>
</div>
</body>
This is my CSS code:
.main_header li a {
margin-top: -20px;
display: inline-block;
}
If your looking for a inline navigation style ul change the css to:
.main_header li {
margin-top: -20px;
display: inline-block;
}
If your looking to move the whole list up try:
ul {
margin-top:-10px;
}
If your looking to move just the li elements closer to each other try:
.main_header li {
display: block;
}
Note - if your looking to have a inline navigation, use the <nav> html element instead to reduce styling, as it automatically places the links inline
Replace
.main_header li a{
margin-top: 20px;
display: inline-block;
}
by
.main_header li {
margin-top: 20px;
display: inline-block;
}
Output
Check it out.
From what I can gather - you're wanting to do something like this...
HTML
<div class="main_header">
<h1>Title</h1>
<ul>
<li>About Me</li>
<li>Order</li>
<li>Designs</li>
<li>Contact</li>
</ul>
</div>
CSS
.main_header {
width: 500px;
margin: 0 auto;
}
.main_header ul {
list-style: none;
margin: 0;
padding: 0;
}
.main_header li:first-child {
border-left: 1px solid #ccc;
}
.main_header li {
display: inline-block;
margin: 0;
padding:10px;
border-right: 1px solid #ccc;
}
Codepen
http://codepen.io/anon/pen/zKxGPY
I have been struggling really long to position the lists properly. My current code is:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="wrapper">
<nav id="nav">
<ul>
<li>Option1</li>
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
<li>Option2</li>
<ul>
<li>Sub3</li>
<li>Sub4</li>
<li>Sub5</li>
</ul>
<li>Option3</li>
</ul>
</nav>
</div>
</body>
</html>
And style:
* {
margin: 0;
padding: 0;
}
#nav {
display: inline-block;
}
#nav ul {
list-style: none;
line-height: 30px;
}
#nav li {
width: 200px;
border: 1px solid black;
float: left;
position: relative;
}
#nav ul li a {
display: block;
height: 30px;
}
#nav ul ul {
position: absolute;
}
But now the elements of the sub-list "sink" in the main list. I cannot get rid of that. Any suggestions what to change in the code?
It's not entirely clear the final style you're hoping to achieve, but when using relative or absolute positioning you need to be defining margins at the least. Your relative positioning is essentially normal since there's no margin defined. Likewise, your absolute positioning is causing elements to overlap since you haven't given it any margin or padding.
I've commented out the CSS that was causing issues and hopefully this is what you're looking for?
* {
margin: 0;
padding: 0;
}
#nav {
display: block;
}
#nav ul {
list-style: none;
line-height: 30px;
}
#nav li {
width: 200px;
border: 1px solid black;
/* float: left; */
/* position: relative; */
}
#nav ul li a {
display: block;
height: 30px;
}
#nav ul ul {
/* position: absolute; */
}