I have padding-left set to zero and margin-left set to zero and yet my list items are still being indented, whereas I want them to align with the h2 element. My code and screenshot of problem:
My login.jsp:
<!-- Welcome page options -->
<div class="homepageNavButtons">
<h2 id="loginLabel" class="homepageOptionsText">Welcome to the SGA web application. Choose
an option:</h2>
<ul class="homepageNavButtonsList">
<li><a class="loginOptions"
href="${pageContext.request.contextPath}/menu" tabindex="1">
Click here to login</a></li>
<li><a class="registerOptions"
href="${pageContext.request.contextPath}/register" tabindex="2">Click
here to register </a></li>
</ul>
</div>
My css:
.homepageNavButtons {
width: 70%;
background-color: gray;
position: relative;
top: 70px;
margin: auto;
}
.homepageNavButtonsList ul {
margin-left: 0;
padding-left: none;
list-style: none;
}
.homepageNavButtonsList li {
list-style-type: none;
display: inline-block;
margin-right: 20px;
margin-left: 0;
padding-left: none;
list-style: none;
padding: 0;
}
.loginOptions {
color: blue;
text-decoration: none;
font-family: sans-serif;
font-size: 16px;
}
.registerOptions {
color: blue;
text-decoration: none;
font-family: sans-serif;
font-size: 16px;
}
You are not selecting the ul to remove all its styles. Try this:
ul.homepageNavButtonsList {
margin-left: 0;
padding-left: 0;
list-style: none;
}
You had .homepageNavButtonsList ul with padding-left: none and of course you didn't have any ul inside the .homepageNavButtonsList
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 would like to put an element of my nav bar on two lines.
But when I just add a <br /> inside, it breaks everything.
Here is what I want :
Here is what I have :
Here is my html code:
div class="nav-top-home-page">
<nav>
<div>
<div>
<a><img class="logo" src="./assets/img/logo.png" height="200px"></a></div>
<ul>
<li><a>BLOG</a></li>
<li><a>CONTACT</a></li>
<li><a (click)="openLoginModal()"><img src="./assets/img/LOCK.png"/>ME CONNECTER</a></li>
<li><a id="subscribe" routerLink='./register'>M'INSCRIRE</a></li>
<li id="nav-gestionnaire"><a>Vous êtes <br/> GESTIONNAIRE ?</a></li>
</ul>
</div>
</nav>
</div>
Here is my css code :
.nav-top-home-page{
height:600px;
position: relative;
z-index: 5;
background-color: #6f8ab1;
text-align: center;
}
.nav-top-home-page::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(assets/img/home/slide1.png) white center top no-repeat;
background-size: cover;
}
.nav-top-home-page nav div{
padding-top: 10px;
margin-left: 20px;
margin-right: 20px;
}
.nav-top-home-page nav .logo{
float:left;
}
.nav-top-home-page nav ul{
padding: 0px;
margin: 0px;
float: right;
}
.nav-top-home-page nav li{
display: inline;
}
.nav-top-home-page nav li a{
color: white;
font-size: 1em;
line-height: 70px;
padding: 5px 15px;
cursor: pointer;
font-family: Raleway, arial;
}
.nav-top-home-page nav li {
cursor: pointer;
}
#nav-gestionnaire{
display: inline;
}
I tried changing the width, or adding whitespace: nowrap and many other things, but nothing worked.
Can someone help me pls ? :/
Remove line-height property and add display:inline-block on anchor tags
.nav-top-home-page nav li a{
font-size: 1em;
padding: 5px 15px;
cursor: pointer;
font-family: Raleway, arial;
display:inline-block;
}
Try with this, Use display:table-cell
Here is code
Wrap them inside divs as such
<div>Vous êtes</div> <div>GESTIONNAIRE</div>
Try using max-width property and display:inline-block; and remove line-height on anchor tag
CSS
.nav-top-home-page nav li {
cursor: pointer;
display: inline-block;
}
.nav-top-home-page nav li a {
color: white;
font-size: 1em;
padding: 5px 15px;
cursor: pointer;
font-family: Raleway, arial;
color: #212121;
max-width: 180px;
display: inline-block;
}
I'm new to this, so I'm clueless.
Whenever I go to my site with a different resolution the menu changes a lot and does not align correctly. Just tell me if i need more of the html or css.
My webpage is Aulan.co
My code:
ul {
font-size: 25px;
color: black;
text-align: center;
list-style-type: none;
margin-bottom: 2em;
line-height: 150%;
margin-left: 3em;
margin-right: 5em;
}
#menu {
list-style-type: none;
margin: auto;
width: 90%;
height: auto;
padding: auto;
overflow: hidden;
background-color: #353B4E;
text-align: center;
font-size: 18px;
}
li {
text-align: center;
}
li a {
display: block;
color: white;
text-align: center;
padding: 5px 70px;
text-decoration: none;
height: auto;
}
li a:hover {
background-color: #111;
display: inline;
}
#menus {
float: left;
<h1> AuLan </h1>
<ul id="menu">
<li id="menus"><a class="active">Forside</a></li>
<li id="menus">Informasjon</li>
<li id="menus">Regler</li>
<li id="menus">Crew</li>
<li id="menus">Kontakt oss</li>
<li id="menus">Seatmap</li>
<li id="menus">Timeplan</li>
</ul>
it's not really clear what you want to achieve, but I tried to change your code in a way that I think you might want. I took out a lot of unneccessary code from the CSS and added some. In the HTML, i change the menusID to a class, since IDs should only be used once per page.
You can adjust especially the min-width and padding setting in the menu li a rule to your needs (but also the other width and padding settings)
#menu {
font-size: 25px;
list-style-type: none;
width: 90%;
background-color: #353B4E;
font-size: 18px;
padding: 10px 20px;
}
#menu li {
display: inline-block;
line-height: 150%;
}
#menu li a {
display: block;
min-width: 100px;
color: white;
padding: 5px 15px;
text-decoration: none;
}
#menu li a:hover {
background-color: #111;
}
<h1> AuLan </h1>
<ul id="menu">
<li class="menus"><a class="active">Forside</a></li>
<li class="menus">Informasjon</li>
<li class="menus">Regler</li>
<li class="menus">Crew</li>
<li class="menus">Kontakt oss</li>
<li class="menus">Seatmap</li>
<li class="menus">Timeplan</li>
</ul>
I'm trying to make a navigation bar with 100% width, that distributes equally within a header that also has a width of 100%. Also each a element has two words each, that are perfectlly center aligned under each other.
The HTML I'm working with is below:
<div class="nav">
<ul>
<li><span style="font-family:sacramento; text-align: center;">Our</span><br> HOME</li>
<li><span style="font-family:sacramento;text-align: center;">About</span><br> US</li>
<li><span style="font-family:sacramento;text-align: center;">Client</span><br> WORKS</li>
<li><span style="font-family:sacramento;text-align: center;">Contact</span><br> US</li>
<li><span style="font-family:sacramento;text-align: center;">Our</span><br> VISION</li>
<li><span style="font-family:sacramento;text-align: center;">Our</span><br> BIOS</li>
</ul>
</div><!--end of nav-->
CSS I'm working with
.nav {
position: relative;
width: 100%;
text-align: center;
}
.nav ul {
margin: 0;
padding: 0;
}
.nav li {
margin: 25px 80px 10px 0;
padding: 0;
list-style: none;
display: inline-block;
text-align: center;
}
.nav a {
padding: 3px 12px;
text-decoration: none;
color: #999;
line-height: 100%;
font-family: actor;
font-size: 20px;
width: 10px;
}
The example I'm trying to make looks like this below :
UPDATE
When I try the code in IE9, I get this image :
Please how can i solve this.
To distribute all items equally set a percentage width on the list items. You have six items so add width: 16%; to the .nav li rule.
To center align the text change:
.nav a {
padding: 3px 12px;
text-decoration: none;
color: #999;
line-height: 100%;
font-family: actor;
font-size: 15px;
width: 10px;
}
to (removed explicit width and added display: block):
.nav a {
padding: 3px 12px;
text-decoration: none;
color: #999;
line-height: 100%;
font-family: actor;
font-size: 15px;
display: block;
}
Lastly remove display: inline-block from the .nav li rule and add float: left. You should also add a <div style="clear: both"></div> element below the list (the tag) to "fix" the page flow.
Check this JSfiddle : JSfiddle working
See the result here Result of navigation
Use this css
.nav {
position: relative;
width: 100%;
text-align: center;
}
.nav ul {
margin: 0;
padding: 0;
}
.nav li {
margin: 0 5px 10px 0;
padding: 5px 20px;
list-style: none;
display: inline-block;
text-align: center;
}
.nav a {
padding: 3px 2px;
text-decoration: none;
color: #999;
line-height: 100%;
font-family: actor;
font-size: 15px;
width: 10px;
}
I have this issue, I can't for the life of me try and remove the whitespace in this (li) tag, below I've include a screen capture, what I'm trying to do is remove the white before the grey menu bar, as well make the whole menu bar line up to bottom grey bar.
CSS
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu li {
float: left;
margin: 0 0.5em 0 0.5em;
left: 0px;
padding: 0;
list-style: none;
}
.menu li a {
float: left;
display: inline-block;
width: 161.3px;
text-decoration: none;
text-align: left;
font-family: 'MyriadPro', sans-serif;
font-size: .875em;
color: #FFF;
height: 1.2em;
}
#MenuGreyBar li a{
display: block;
width: 200px;
list-style: none;
left: 0px;
height: 1.2em;
float: left;
margin: 0;
}
HTML
<div class="menu">
<div>
<ul id="MenuGreyBar">
<li style="left: 0px;">
</li>
</ul>
</div>
<ul>
<li>
About Us
</li>
<li >
Help & Support
</li>
<li >
Law & Information
</li>
<!-- ... There are a few more. -->
</ul>
</div>
The image: (it didn't let me embed)
http://db.tt/tcSr5kGv
I'm not positive if this is your issue, but here's my guess:
.menu li {
float: left;
margin: 0 0.5em 0 0.5em; /* We set a left margin for all menu elements here
which will cause them to jut over. We want this for
most elements*/
left: 0px;
padding: 0;
list-style: none;
}
.menu li a {
float: left;
display: inline-block;
width: 161.3px;
text-decoration: none;
text-align: left;
font-family: 'MyriadPro', sans-serif;
font-size: .875em;
color: #FFF;
height: 1.2em;
}
#MenuGreyBar li a{
display: block;
width: 200px;
list-style: none;
left: 0px;
height: 1.2em;
float: left;
margin: 0; /*The first menu item is special and needs no margin, so we try
to clear it, however we are clearing the anchor element in the li
block, and the margin is applied on the li block itself, so the li
block's margin is rendered before the anchor has any say*/
}
So what we need to do is clear the margin property on the actual li element, this code will do it:
#MenuGreyBar li{
margin: 0;
}
That should do it, my best guess.