Today I tried something unique, so I decided to code my template.
You know some menus have a title and a description?
EXAMPLE:
Homepage
Our main page
Twitter
Follow us!
Thats how the menu should look like:
http://gyazo.com/360b81db32cf61922e9ff8f55274d779
Okay I tried adding a description simply by using in a li item and it didnt work at all!
<div class="header">
<div class="container">
<div id="logo"><img src="img/logo.png"/></div>
<div class="menu">
<ul>
<li>Home<br /> Main Page</li>
<li>Home<br /> Main Page</li>
<li>Home<br /> Main Page</li>
<li>Home<br /> Main Page</li>
<li>Home<br /> Main Page</li>
</ul>
</div>
</div>
</div>
That's the CSS I used:
.header {
background: #6b6353 url("../img/header.png");
width: 100%;
height: 112px;
}
#logo {
float: left;
margin-top:22px;
}
.subheader {
background: #deac12 url("../img/subheader.png");
width: 100%;
height: 36px;
}
.menu ul li{
display: inline;
}
Why doesn't it work even though it has inline & a break?
What happens with that code:
http://gyazo.com/a585ed4b408f3c6ed2583244ea4ff236
Thank you!
You should use display: inline-block for your li and for God's sake stop using <br> tags, use a <span> or a <p> instead.
.menu ul li{
float: left;
}
will solve your problem. You get the newlines, but the 2nd li starts immediately after the 2nd newline (the 1st line of the 2nd li will start next to the 2nd line of the 1st li), so this is something like
[Home
Main Page][Home
Main Page][Home
Main Page]...
Try using
.menu ul li{
list-style: none;
float: left;
}
Removing display: inline; will make the list styling visible, that's why list-style: none;, and the float: left; will make all <li> to be on the same line.
Related
I have just started learning about web development and I'm having some issues. In the website that I am currently creating I have a navigation menu. However, I also have other ul and li elements throughout the main content of the web page. I have been trying to get certain styles to apply to just my navigation bar and not the bulleted lists in my content but no matter what I try, I either get the styles on both my navigation and the content or on none. I have looked on google and a lot of different websites, I have tried having the .navigation and # in front of my styles but nothing seems to be working. I must be doing something wrong somewhere but I have no idea what it could be. If someone could help that'll be wonderful! The following is my navigation barcode:
<div id=navbar">
<ul>
<li>
Home
</li>
<li>
About Volleyball
</li>
<li>
Sign-Up
</li>
<li>
Announcements
</li>
<li>
Contact Us
</li>
<li>
Links
</li>
</ul>
</div>
and these are the styles on my separate css style sheet that I wish to apply to just the above code:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #4da6ff;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 75px;
text-decoration: none;
}
li a:hover {
background-color: #80bfff;
}
You can simply select only elements which are children of you navbar by prepending your selectors with #navbar which selects the element with the id navbar and the selectors after that will only search in its children:
#navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #4da6ff;
}
#navbar li {
float: left;
}
#navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 75px;
text-decoration: none;
}
#navbar li a:hover {
background-color: #80bfff;
}
<div id="navbar">
<ul>
<li>Home</li>
<li>About Volleyball</li>
<li>Sign-Up</li>
<li>Announcements</li>
<li>Contact Us</li>
<li>Links</li>
</ul>
</div>
<ul>
<li>No styles applied</li>
<li>No styles applied</li>
</ul>
In your .css file you can create classes to use across elements.
Try this in the .css file.
.hello {
color: blue;
text-align: center;
}
Then try this in your html
<h1 class="hello">Hello World</h1>
This will apply the style defined in the .css file to the element with the class "hello".
More information about classes can be found here: https://www.w3schools.com/cssref/sel_class.asp
If you want to add style to any specific element then you can add CSS code to that specific element like: for tag you can use p{color:red} OR by using class: p.my-element{color:red} or using ID: p#{color red}
You are in your initial phase of learning development. So read and write your own code.
Look into id's and classes.
This will allow you to style elements seperately.
I have placed one div inside of another, but it keeps appearing below the div it is nested inside. What I want is to get the login div to appear inside the navdiv but push it over to the right of the page.
I can get it over there by adding position absolute, (which I'm also unsure about) but it then behaves in ways I don't want when I resize the page.
Please try to explain what is happening here as simply as possible. Thanks!
http://jsfiddle.net/viggie/5we2wxug/
#navdiv {
display: block;
background-color: blue;
height: 20px;
margin-bottom: 7px;
}
ul {
text-align: center;
}
#navdiv li {
background-color: red;
display :inline;
font-size: 1.3em;
padding-left: 25px;
padding-right: 25px;
vertical-align: middle;
margin-left:35px;
margin-right:35px;
margin-bottom:4px;
}
#navdiv li a:visited {
color: yellow;
}
#navdiv li:hover {
background-color: green;
}
#login {
padding-right: 10px;
padding-left: 10px;
background-color: yellow;
top: 0;
right: 0;
}
#login li {
verticle-align: middle;
}
HTML
<div id="navdiv">
<ul>
<li>Home</li>
<li>Members</li>
<li>Articles</li>
<li>Videos</li>
<li>Join</li>
</ul>
<div id="login">
<ul>
<li>Log out</li>
<li>Log in</li>
</ul>
</div>
</div>
While your #login div is technically inside of #navdiv, #navdiv has a height set which is stopping the background from extending to cover the #login as well - The #login is inside it structurally, but visually it's overflowing the #navdiv area.
So, to stop that bit, simply remove the height from #navdiv.
To align the login to the right, I'd recommend making the #login ul an inline-block that's simply aligned right. You lose the absolute andfloat issues, and it's easy to make responsive.
#login {
text-align: right;
}
#login ul {
padding-right: 10px;
padding-left: 10px;
background-color: yellow;
display: inline-block;
}
Note, I also put the background color on the ul since it's more accurate to the #login area - probably you'll want to modify the styling some yet anyways.
http://jsfiddle.net/daCrosby/5we2wxug/1/
Put this code in your css
.left_part { float:left;width:72%;}
.right_part { float:right;width:28%;}
.right_part ul { padding-left:0px;}
and add this in body part
<div id="navdiv">
<div class="left_part">
<ul>
<li>Home</li>
<li>Members</li>
<li>Articles</li>
<li>Videos</li>
<li>Join</li>
</ul>
</div>
<div class="right_part">
<ul>
<li>Log out</li>
<li>Log in</li>
</ul>
</div>
</div>
i just gave you normal idea and now i hope you can manage your own css with this way...hope it helps..
Updated
according to you...just use Float in ul and in login div as login div will not go with ul until you are not using float left or right properties..they have their own css and you have to use float for this...there can be more option but float will help you in your case if you don't want more div..
I have created a menu using ul and li, but it shows me in reverse order. For example:
FAQ PRICING TOUR HOME instead of the expected HOME TOUR PRICING FAQ
.header ul {
}
.header li {
list-style-type: none;
margin-left: 40px;
float: right;
}
<div class="header">
<ul>
<li>HOME</li>
<li>TOUR</li>
<li>PRICING</li>
<li>FAQ</li>
</ul>
</div>
What's wrong in my code?
You should float only the ul right. The list items should be floated left in the correct (expected) order:
.header ul {
float:right;
}
// expected order. It's the default value if not overriden,
// therefore it is not realy needed
.header li
{
float:left;
}
Instead of taking float right take it as left then you will get the result HOME TOUR PRICING FAQ
To understand it let us see :
Here you are trying to print HOME TOUR PRICING FAQ and if you will float this to the right it means you are telling to print from right and that's why it gives you the output as
FAQ PRICING TOUR HOME so that's why we use float: left;
.header ul
{
}
.header li
{
list-style-type: none;
margin-left: 40px;
float: left;
}
<div class="header">
<ul>
<li>HOME</li>
<li>TOUR</li>
<li>PRICING</li>
<li>FAQ</li>
</ul>
</div>
DEMO
It's because you're floating each list element right.
Set float: right on the parent element instead.
.header ul {
float: right;
}
There are various other solutions, see here
Here's a demo
The reasons seems to be the float element. When you give float:right, it takes the first element to the right most side and rest of the items after that. However if you give float:left, the items seems to come in correct order with positioning the first item in the left and rest of the items after that.
try something like this
.header ul {
float: right;
}
.header li {
list-style-type: none;
margin-left: 40px;
float: left;
}
Reason
you are floating li element to right so instead float it to left.
float li parent element ie ul to left.
This is what happens with another <li> when I use <br /> in one of them:
With <br />:
Without <br />:
I don't really know if I should use ul,li here. It would be nice if you told me.
My code:
html
<div class="menu">
<ul>
<li><p>Text</p></li>
<li><p>Text</p></li>
<li><p>Text</p></li>
<li><p>Text</p></li>
<li><p>Text in two lines</p></li>
</ul>
</div>
css
.menu{
height: 96px;
text-align: center;
}
.menu ul{
list-style-type: none;
}
.menu li{
display: inline-block;
height: 96px;
width: 96px;
margin-left: 10px;
background-image: url("../images/menu-button.png");
}
.menu li:hover{
background-image: url("../images/menu-button-hover.png");
}
.menu p{
top:40px;
position:relative;
}
.menu a{
text-decoration: none;
color: black;
}
.menu a:hover{
text-decoration: none;
color: black;
}
Thanks in advance, waiting for a help!
Still same problem when I use <br />. Another buttons gets pushed
down.
Where you have display: inline-block, you also need vertical-align: top.
(The default is vertical-align: baseline.)
Just as Diodeus said, your markup is invalid. It should look something like this:
HTML:
<div class="menu">
<ul>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text in two lines</li>
</ul>
</div>
While you can have a paragraph tag in there, since you only have just a small amount of text, it's really kid of overkill (unless you need the extra hook for styling or something).
JSFiddle
Here is my code: http://jsfiddle.net/DFN5y/
As you can see the list items on the right are on the line below. Can anyone please tell me how to remedy this? This is my code:
<ul id="nav">
<li>Features</li>
<li>Pricing</li>
</ul>
<ul id="nav" style="float:right;">
<li>Sign up</li>
<li>Login</li>
</ul>
You could set them inline by making ul as inline-block element
ul {
display: inline-block;
}
but you have two nav's and duplicate id's so look at the example below and try to follow that style in future coding
<ul id="nav">
<li>Features</li>
<li>Pricing</li>
<li class="right">Sign up</li>
<li class="right">Login</li>
</ul>
#nav li {
display: inline-block;
padding-left: 40px;
}
.right{
float: right;
}
or you could float them without class e.g.
#nav li:nth-child(3),
#nav li:nth-child(4) {
float: right;
}
or even simpler by moving just third element e.g.
#nav li:nth-child(n+3) {
float: right;
}
FIDDLE
your #nav is having 100% width and does not have float, thats why its taking complete space till right edge.
#nav {
float: left;
padding-left: 100px;
}
Fiddle
Try:
ul li {
display: block;
float:left;
padding-left: 40px;
}
Just add this to your CSS :
ul{ display : inline-block;}
And please change the id's of your ùl`tags so that they are different ! Id's should be unique on the page.
Have a look at this fiddle.
Basically i have changed the original in 4 ways:
replaced the id nav, which had been issued twice, by a class of the same name
distinguished between the first and the second nav-ul in css formatting
moved the style dfinitions from the element attribute to the css (somehow the float rule messed up teh alignment)
all nav-ul being displayed as inline-block to assue verticla alignment.
You'd be better off adding them all to the same ul element and then using the :nth-child pseudo-selector to add additional padding to the middle elements to create the separation you want.
http://jsfiddle.net/DFN5y/17/
ul li:nth-child(3){
padding-left: 20%;
background: red;
}