I've asked a question like this before, but I am using differnt code to last time.
I'm trying to create a dropdown menu. Ther are certain elements in that main list that have a dropdown list (News and Team). For some reason, they are moved over to the right. What I would like is for the items in the dropdown to be aligned with its parent.
Any help would be appreciated.
Thanks
http://codepen.io/DocRow10/pen/hjIkq
<body>
<div id="container">
<div id="banner" class="clearfix">
<img id="crest" src="images/cecc-logo.png" />
<h1>Test Website</h1>
</div>
<nav class="clearfix">
<ul class="clearfix">
<li>Home</li>
<li>About</li>
<li>News
<ul>
<li>Social Events</li>
</ul>
</li>
<li>Team
<ul>
<li>Players</li>
<li>Fixtures/Results</li>
<li>Statistics</li>
</ul>
</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
Menu
</nav>
<main>
</main>
<footer>
</footer>
</div>
</body>
body {
background-color: rgb(200, 220, 255);
/* #455868 */
}
#container {
height: 1000px;
margin-left: auto;
margin-right: auto;
}
#banner {
width: 100%;
text-align: center;
}
#crest {
height: 150px;
width: 180px;
display: inline-block;
}
#banner h1 {
display: inline-block;
}
/* Bat Colour rgb(38, 124, 196); */
#media only screen and (min-width : 480px) {
#banner h1 {
font-size: 30px;
display: inline-block;
}
}
#media only screen and (min-width : 768px) {
#banner h1 {
font-size: 36px;
display: inline-block;
}
}
#media only screen and (min-width : 980px) {
#banner h1 {
font-size: 47px;
display: inline-block;
}
}
nav {
height: 40px;
width: 90%;
margin-left: auto;
margin-right: auto;
background-color: rgb(238, 0, 0);
font-size: 13pt;
font-family: neris;
border-bottom: 2px solid #283744;
}
nav > ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
}
nav > ul > li {
display: inline;
float: left;
}
nav ul a {
color: #fff;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}
nav li a {
border-right: 1px solid #576979;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
background-color: #8c99a4;
}
nav a#pull {
display: none;
}
nav ul li:hover ul {
display: block;
}
nav ul ul {
display: none;
position: absolute;
}
nav ul ul li {
display: block;
}
main {
width: 90%;
height: 200px;
margin-right: auto;
margin-left: auto;
background-color: rgb(38, 124, 196);
}
footer {
width: 90%;
height: 50px;
margin-right: auto;
margin-left: auto;
background-color: rgb(0, 0, 0);
}
Some element on the web page have standard padding values.
For example all lists have padding-left. If you want to change this try this:
Add this in your CSS code:
ul {
padding: 0;
}
Or you can add come specific id or class for this menu, and change padding for them.
You just need to add padding: 0 to your nav ul ul rule so it appears like so:
nav ul ul {
display: none;
position: absolute;
padding: 0;
}
By default, ul elements have a left padding of 40px, you need to remove that padding to make the second level ul align with the first.
I just want to say a big thank you for all your answers. I don't know why it's taken so long, but I've finally figured it out.
In the codepen I displayed, there was one important thing I was leaving off: The CSS file for the Mobile-Responsive framework known as Foundation. That CSS File had all ul tags have a margin-left of 1.25em. That is why the ul tag was moved over to the right.
To fix this problem, I changed the following:
nav ul ul {
display: none;
position: absolute;
padding: 0;
margin: 0;
}
I added a margin property and now it is all fine.
Again, thank you to everyone who helped me with this answer and sorry for wasting your time.
I wish you all well.
Related
I am working on a horizontal navigation bar with a dropdown menu. I'm quite new to making codes so this is maybe a stupid question. My navigation is sticking to the left of my website, but I need it to stay in line with the text and I can't get the navigation bar threw my whole webpage how do I fix this?
photo of my website with the 2 problems:
enter image description here
nav {
position: absolute;
}
.horizontal {
list-style-type: none;
margin: 40 auto;
width: 640px;
padding: 0;
overflow: hidden;
}
.horizontal>li {
float: left;
}
.horizontal li ul {
display: none;
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.horizontal li:hover ul {
display: inline-block;
}
.horizontal li a {
display: block;
text-decoration: none;
text-align: center;
padding: 22px 10px;
font-family: arial;
font-size: 8pt;
font-weight: bold;
color: #FFFFFF;
text-transform: uppercase;
border-right: 1px solid #607987;
background-color: #006600;
letter-spacing: .08em;
width: 70px;
}
.horizontal li a:hover {
background-color: darkorange;
color: #a2becf
}
.horizontal li:first-child a {
border-left: 0;
}
.horizontal li:last-child a {
border-right: 0;
}
h1 {
margin-top: 80px;
}
<nav id="mainnav">
<ul class="horizontal">
<li>Home</li>
<li>Planning</li>
<li>Takken
<ul>
<li>Kapoenen</li>
<li>Kawellen</li>
<li>Kajoo's</li>
<li>Jojoo's</li>
<li>Givers</li>
<li>Jin</li>
<li>Akabe</li>
</ul>
</li>
<li>Kleding</li>
<li>Contact
<ul>
<li>Leiding</li>
<li>Verhuur</li>
</ul>
</li>
<li>Inschrijven</li>
</ul>
</nav>
Two things in your css are giving you trouble.
nav{ position: absolute; } means this div will not fill the width.
horizontal{ margin: 40 auto;} 40 is not valid.
You MUST specify a measurement unit in CSS, so it should be 40px if I'm guessing your intention, but other units are available.
Here is amended css you can try.
nav {
width: 100%;
background-color: #006600;
}
.horizontal {
list-style-type: none;
margin: 40px auto;
width: 640px;
padding: 0;
overflow: hidden;
}
Step 1) Add HTML:
Example
<!-- The navigation menu -->
<div class="navbar">
<a class="active" href="#">Home</a>
Planning
Takken
Kleding
Contact
Inschrijven
</div>
And CSS:
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
.navbar a {
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
width: 15%;; /* Four links of equal widths */
text-align: center;
}
I am working on a new version of a website. Right now I am almost satisfied with the results, except one problem. The website consists of a header (with logo and menu) and a content-part. I want it to work on both larg/small-size screens.
On a small screen I encounter one problem. When I expand the menu it is on top of the content-part, but the content-part is still clickable, so the menu-options are not clickable and the menu is not working right.
What I want is as follows (for small screen, i.e. Smartphone):
- When I click 'Show Menu' all menu-options will show up (Menu1, Menu2, Menu3, Menu4) and are clickable. Underlying text (div 'page') not visible (dissapears under the menu-options).
- When I click one of the menu-options, all options in submenu will show up and are clickable. Underlying text (div 'page') not visible.
I already searched and tried many options, but not with the expected result.
Thanks in advance for any hints :)
My html is as follows:
<body>
<div id="wrapper">
<div id="logo">
<img src="#" style="width:180px;height:50px;">
</div>
<div id="menu">
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>Home</li>
<li>Menu1 ￬
<ul class="hidden">
<li>Submenu11</li>
<li>Submenu12</li>
</ul>
</li>
<li>Menu2 ￬
<ul class="hidden">
<li>Menu21</li>
<li>Menu22</li>
<li>Menu23</li>
</ul>
</li>
<li>Menu3 ￬
<ul class="hidden">
<li>Menu31</li>
<li>Menu32</li>
<li>Menu33</li>
</ul>
</li>
<li>Menu4 ￬
<ul class="hidden">
<li>Menu41</li>
<li>Menu42</li>
<li>Menu43</li>
<li>Menu44</li>
<li>Menu45</li>
<li>Menu46</li>
</ul>
</li>
</ul>
</div>
<div id="header">
<h3>Header</h3><hr>
</div>
<div id="pageliquid">
<div id="page">Page-text<br />
</div>
</div>
</div>
</body>
My CSS is as follows:
body {
margin: 20px;
font-family: Tahoma, Arial;
font-size: 12pt;
color: #001245;
}
#wrapper {
width: 100%;
min-width: 1000px;
max-width: 2000px;
margin: 0 auto;
}
#logo {
height: 50px;
width: 100%;
position: static;
}
#menu {
height: 50px;
width: 100%;
position: static;
}
#header {
height: 75px;
width: 100%;
position: static;
}
#pageliquid {
width: 100%;
position: static;
}
#page {
top: 200px;
max-width: 100%;
position: absolute;
overflow: scroll;
bottom: 1px;
left: 20px;
right: 0px;
}
ul, img {
list-style-type:none;
margin:0;
padding:0;
position: absolute;
}
li {
display:inline-block;
float: left;
margin-right: 1px;
}
li a {
display:block;
min-width:200px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: small;
color: #fff;
background: #0b0b3b;
text-decoration: none;
}
li:hover a {
background: #0b0b3b;
}
li:hover ul a {
background: #08088a;
color: #d8d8d8;
height: 40px;
line-height: 40px;
}
li:hover ul a:hover {
background: #08088a;
color: #ffffff;
}
li ul {
display: none;
}
li ul li {
display: block;
float: none;
}
li ul li a {
width: 160px;
min-width: 100px;
padding: 0 20px;
}
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
input[type=checkbox] {
display: none;
-webkit-appearance: none;
}
input[type=checkbox]:checked ~ #menu{
display: block;
}
#media screen and (max-width : 760px) {
body {
margin: 0px;
}
#wrapper {
min-width: 0px;
margin: 0;
}
#header {
position: absolute;
}
#page {
left: 0px;
}
ul {
position: absolute;
width: 100%;
display: none;
}
li {
margin-bottom: 1px;
margin-right: 0px;
}
ul li, li a {
width: 100%;
}
li ul li a {
width: 100%;
padding: 0 0px;
}
.show-menu {
display:block;
}
}
The problem is with the z-index of the menu since it is underneath later elements on the page due to the fixed height and natural height of #menu and absolute positioning of that menu. You have duplicate ID's here, but forcing a higher z-index on #menu puts the navigation above other elements on the page. That also requires changing position: static; to position: relative; on #menu as well. Here's a demo - http://codepen.io/anon/pen/MJwoOL (PS - there were some overlapping issues with your nested li's and ul's that I tweaked a little in your media query, too, but are unrelated to your question here)
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Nightfall Gaming</title>
<link href="C:\Users\Cam\Desktop\NightfallGaming\CSS\Stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body bgcolor="#FFFFFF">
<div id="navbar">
<nav>
<ul>
<li>Home</li>
<li>Game News</li>
<li>Game Reviews
<ul>
<li>Xbox 360</li>
<li>Xbox One</li>
<li>PS3</li>
<li>PS4</li>
<li>PC</li>
<li>Wii</li>
</ul>
</li>
<li>Contact Us/About Us</li>
</ul>
</nav>
</div>
<div id="logo">
<img src="C:\Users\Cam\Desktop\NightfallGaming\Images\Logo.png" alt="Home">
</div>
<div id="mainbody"></div>
</body>
</html>
CSS:
body {
font-size:22px;
line-height: 32px;
color: #ffffff;
word-wrap:break-word !important;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-size: 60px;
text-align: center;
color: #FFF;
}
h3 {
font-size: 30px;
text-align: center;
color: #FFF;
}
h3 a {
color: #FFF;
}
a {
color: #FFF;
}
h1 {
margin-top: 100px;
text-align:center;
font-size:60px;
font-family: 'Bree Serif', 'serif';
}
#container {
margin: 0 auto;
max-width: 890px;
}
p {
text-align: center;
}
#relatedContent {
max-width: 800px;
margin: 200px auto;
}
#relatedContent .item {
max-width: 44%;
padding: 3%;
float: left;
text-align: center;
}
#relatedContent .item a img {
max-width: 100%;
}
#navbar {
margin: 70px 350px;
background-color: #E64A19;
position: absolute;
border: 3px solid black;
text-align: center;
}
nav ul {
padding:0;
margin:0;
list-style: none;
position: relative;
}
nav ul li {
display:inline-block;
background-color: #E64A19;
right: 86px;
}
nav a {
display:block;
padding:0 10px;
color:#FFF;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
nav a:hover {
background-color: #000000;
}
/* Hide Dropdowns by Default */
nav ul ul {
display: none;
position: absolute;
top: 60px;
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width:170px;
float:none;
display:list-item;
position: relative;
border: 1px solid black;
}
/* Change this in order to change the Dropdown symbol */
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }
#logo {
position: absolute;
top: 30px;
left: 70px;
}
#mainbody {
background: #141414;
width: 1500px;
height: 800px;
position: absolute;
bottom: 0px;
left: 50px;
}
I'm basically trying to get the navbar and site logo to show up on top of the 'mainbody'/background div; as of right now both of the other divs are hidden behind the 'mainbody' one.
I've seen some others posts on it but most just suggest to use float: left and clear: both as a solution, which hasn't worked in my case. Others have said it might be a positioning problem.
You need to use z-index. z-index specifies the stack order of the elements. The higher the number, the closer to the front the element will be.
Here's a simplified JSFiddle to show it in action. I took out HTML and CSS not necessary to the example, and changed the colours of the divs in order to see it more clearly.
I added 'z-index' of 0 on #mainbody, and z-index of 10 on #logo and #navbar.
I am trying to center the navigation bar in the middle of the div body. I want the navigation bar to go from one side of the div to the other but have the list in the ul to be center in the middle of the div if that makes sense. I can't seem to figure it out even after trying online examples. Thanks
body {
margin: 0px;
padding: 0px;
background-color: #505050 ;
}
#body {
width: 75%;
margin: 0 auto;
position: center;
background-color: #C0C0C0;
height: 100%;
}
.nav {
}
.nav ul {
background-color: #CCCCCC;
width: 100%;
padding: 0;
text-align: center;
}
.nav li {
list-style: none;
font-family: Arial Black;
padding: 0px;
height:40px;
width: 120px;
line-height: 40px;
border: none;
float: left;
font-size: 1.3em;
background-color: #CCCCCC;
display:inline;
}
.nav a {
display: block;
color: black;
text-decoration: none;
width: 60px;
}
<div id="body">
<h2>Hello World!</h2>
<div class="nav">
<ul>
<li><a href="#">Home<a></li>
<li><a href="#">About<a></li>
<li><a href="#">News<a></li>
<li><a href="#">Contact<a></li>
</ul>
</div>
</div>
i attach fix here http://jsfiddle.net/o4716uo9/
use inline-block for li
background property should be setted in ul element, not li, in your case. Delete the float in nav li. Also, the a element it isn't closed correctly. Main changes:
.nav ul {
background-color: #cccccc;
text-align: center;
}
.nav ul li {
display: inline-block;
min-width: 120px;
[...]
}
I'll recommend you to take a look at the bootstrap framework. It could be interesting for you.
There are a couple things you can change to correct the issue:
1) Your <a> elements have a width of 60px. You can remove this.
2) You .nav li has a width of 120px. I would change this to 25% (If there are only going to be four navigational items).
http://jsfiddle.net/xLnz90ek/
Is that any closer to the desired effect.
Is this what you’re trying to do?
* { margin:0; padding:0 }
html {
background-color: #505050;
font-size: 4vw;
}
header {
width: 75%;
margin: 0 auto;
background-color: #C0C0C0;
}
nav {
background-color: #CCCCCC;
display: flex;
padding: 0.2rem 0;
}
nav a {
flex: 1 0 auto;
font-family: Arial Black;
font-size: 1rem;
background-color: #CCCCCC;
color: black;
text-decoration: none;
text-align: center;
margin: 0 0.3rem;
}
<header>
<h2>Hello World!</h2>
<nav>
Home
About
News
Contact
</nav>
</header>
i'm trying to center my nav in a responsive design. When the viewport is stretched to about 900px, the 3 nav titles look off center to the rest of the content on the page. Does anyone of a way to fix this?
HTML:
<header>
<div id="logo">
<a href="#">
<img src="images/logo_55x73.png" alt="StudioMed" />
</a>
</div>
<nav>
<ul>
<li>Work</li>
<li>Profile</li>
<li>Journal</li>
</ul>
</nav>
</header>
CSS:
header {
background-color: #fff;
border-bottom: solid 1px #e4e4e4;
}
#logo {
padding: 2.3em 1.1em 1.7em 1.1em;
text-align: center;
}
nav {
display: block;
}
nav ul {
text-align: center;
}
nav li {
font-size: 0.95em;
display: inline;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 0 1%;
}
nav a {
text-decoration: none;
display: inline-block;
width: 122px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#media only screen and (min-width:767px) {
header {
float: left;
overflow: auto;
width: 100%;
}
#logo {
float: left;
width: 10%;
}
nav ul li {
float: left;
width: 22.1354166666667%;
margin-top: 50px;
font-size: 1em;
}
}
Thanks in advance
Your UL may have some default padding on its left.
Try adding this to your CSS:
nav ul {
...
padding: 0px;
}
http://jsfiddle.net/cxNZZ/
EDIT:
The padding issue above did not seem to solve your issue.Here is a different theory:
Each LI is the same width, but the text inside each LI may not be. That could cause the menu to appear to be off center, even though the LIs are centered.
http://jsfiddle.net/d6hRg/1/
http://jsfiddle.net/d6hRg/2/
See what I mean?