How should I make the ul to display inline. I need a css that can display the list inline in header navigation of my website
<div id="sidebar2" style="display: inline-block;">
<div class="widget login_widget">
<h3>My Account</h3>
<ul class="xoxo blogroll" style="color: red;">
<li>
Dashboard
</li>
<li>
Edit Profile
</li>
<li>
Change Password
</li>
<li>
My Favorites
</li>
<li>
Add Listing
</li>
<li>
Logout
</li>
</ul>
</div>
</div>
This would work
li {
display: inline-block;
}
Add this css style to your stylesheet
li {
display: inline-block;
float: left;
margin: 0 5px;
}
Make sure to use a clear: both after ul
Try this,
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul li {
display: inline;
list-style-type: none;
padding-right: 20px;
}
You can use display: inline for your list items:
ul.xoxo li{display:inline;}
Also note that you need to remove " after login_widget inside login_widget"="" to make your HTML markup becomes valid.
Fiddle Demo
At the beginning, just add:
<style>
li {
display:inline;
}
</style>
Related
I have a navigation which uses a full width drop down sub-menu (the about drop down) but I am struggling to align the links within the submenu centeraly underneath their parent. I also need this to be responsive so the sub-links stay central no matter the view width.
Could anyone help me by telling me where I am going wrong or what I would need to do to achieve this effect?
Thanks in advance for any help.
.navigation--main li:hover>ul {
display: flex;
justify-content: center;
}
ul.navigation--main li ul {
background: #000;
color: #fff;
display: none;
position: absolute;
top: 114px;
left: 0;
width: 100%;
}
ul.navigation--main li ul li {
padding: 1.5em 0.5em;
}
<div class="navigation--container">
<div class="logo">
<img src="assets/img/Group 85.svg" alt="ORRAA Logo" class="homeLogo" height="78.93" width="260" />
</div>
<div class="navigation">
<ul class="navigation--main">
<li>Home</li>
<li>About
<ul>
<li>
Ocean risk</li>
<li>
About ORRAA</li>
</ul>
</li>
<li>Membership</li>
<li>Governance</li>
<li>Contact</li>
</ul>
<ul class="navigation--social-icons">
<li>
<img src="assets/img/facebook.svg" alt="facebook">
</li>
<li>
<img src="assets/img/instagram.svg" alt="instagram">
</li>
<li>
<img src="assets/img/Path 22.svg" alt="twitter">
</li>
</ul>
</div>
</div>
you can change in css file.. hope this solution help you.
.navigation--main li:hover>ul {
display:flex;
justify-content:center;
width: calc(100vw - 112px);
}
.navigation--main li:hover>ul li{
margin-left:20px;
}
ul.navigation--main li ul {
background: $brand-sky-blue;
display: none;
width: 100%;
}
ul.navigation--main li ul li {
padding:10px;
}
this is example for reference: codepen.io/arpita1030/pen/pMLQME
I do not know if I understood correctly, but here is my proposal
.navigation--main li:hover > ul {
display:flex;
justify-content: center;
position: static;
}
Now the div in question appears right underneath About navigation link and moves rest of the elements further down.
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.
Can someone please explain to me, why li and ul does not expand in plunkr bellow?
I know many has been written about that, but all I found is playing with overflow, height, position and display css properties. I do not use any of that.
a {
padding: 1em;
background-color: red;
}
ul {
list-style: none;
background-color: yellow;
display: flex;
}
li {
background-color: green;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<ul>
<li>
google
</li>
<li>
test item
</li>
</ul>
</body>
</html>
Can someone please explain to me, why li and ul does not expand
Because your links are still inline, and therefor their padding flows out of the line box.
Add display: block for the links.
By default a is inline element, so it don't include padding in height, just update it to block label element. then ul and li will expend.
for updating it to block label you can add display:block or display: inline-block or float: left.
Just add display:block in anchor tag
ul {
list-style: none;
background-color: yellow;
display: flex;
margin:0px;
padding:0px;
}
ul li {
background-color: green;
display: inline-block;
}
ul li a {
padding: 1em;
background-color: red;
display:block;
}
<ul>
<li>
google
</li>
<li>
test item
</li>
</ul>
Set display:block in a because a is an inline level element so make it block level
Also don't need display:inline-block in li because you have display:flex in ul
You can also remove default padding from ul
a {
padding: 1em;
background-color: red;
display: block
}
ul {
list-style: none;
padding:0;
background-color: yellow;
display: flex;
}
<ul>
<li>
google
</li>
<li>
test item
</li>
</ul>
Host Folder
If you click the link then click "all.html", you should see a page with an unfinished navbar. The lis in the list are stacking for some unknown reason. Could someone tell me why "Member Resources" and on are in a row below and how to fix that? I tried playing with the text-align, float, width, and margins of the containing div, the ul, and the lis but haven't gotten anywhere. Thank you (Note: Using Bootstrap v3.3.6)!
HTML:
<div class="row" id="topnav">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
Sponsor
<li>
All the rest of the li's are like the ones above, I've ommitted them to save space
</li>
</ul>
</div>
CSS:
#topnav{
display: inline;
}
#topnav *{
display:inherit;
}
#topnav ul{
list-style-type: none;
margin: 0;
margin-left: auto;
background-color: rgb(0,93,164);
padding: 1.5%;
display:inline-block;
}
#topnav li{
margin:0;
padding: 0 2.5%;
}
#topnav a{
text-decoration: none;
color:white;
margin: 0;
padding: 0;
font-weight:600;
}
SIDENOTE: Does anyone know why there is a scrollbar at the bottom of the page? There's no extra content to the right and I'm pretty sure there are no margins that'd be pushing it out that far. I see it on Chrome, anyone else see it and know why it's occuring?
You should set width of #topnav ul to 100% for setting it to full width.
#topnav ul{
list-style-type: none;
margin: 0;
margin-left: auto;
background-color: rgb(0,93,164);
padding: 1.5%;
display:inline-block;
width: 100%;
}
Second way to see a full width navbar is to do as the bootstrap guide say
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="row" id="topnav">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
Sponsor
<li>
All the rest of the li's are like the ones above, I've ommitted them to save space
</li>
</ul>
</div>
</div>
</nav>
Look carefully to notice that the navbar is full width and of different color(left intentionally for you to notice). You can remove the background color from your ul and put it on your navbar class instead instead
Try this:
HTML
<div id="topnav">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
Sponsor
<li>
All the rest of the li's are like the ones above, I've ommitted them to save space
</li>
</ul>
</div>
CSS
#topnav{
display: inline;
}
#topnav *{
display:inherit;
}
#topnav ul{
list-style-type: none;
margin: 0;
margin-left: auto;
background-color: rgb(0,93,164);
padding: 1.5%;
display:inline-block;
width: 100%;
}
#topnav li{
margin:0;
padding: 0 2.5%;
}
#topnav a{
text-decoration: none;
color:white;
margin: 0;
padding: 0;
font-weight:600;
}
I am trying to make a horizontal drop down menu in CSS. However, it appears vertically:
I want the two topmost menu items to be horizontal. What can I do, besides making a table with one row?
ul ul {
display: none;
}
ul li:hover > ul {
display: block;
}
<ul>
<li>
abc
<ul>
<li>abc</li>
<li>abc</li>
</ul>
</li>
<li>
abc
<ul>
<li>abc</li>
<li>abc</li>
</ul>
</li>
</ul>
You can try floating the list items:
.root {
overflow: hidden; /* clear float */
}
.root > li {
float: left;
}
<ul class="root">
<li>
abc
<ul>
<li>abc</li>
<li>abc</li>
</ul>
</li>
<li>
abc
<ul>
<li>abc</li>
<li>abc</li>
</ul>
</li>
</ul>
You can add submenu a class/id with
.inline-menu{
display: inline;
}
http://jsfiddle.net/dyaskur/fby9fan6/
The gist of your question is actually this: what is the difference between inline and block elements? This is a fundamental question that is important to understanding the basics of layout in CSS/HTML. There is a good write-up on this topic and some of the trade-offs of the various approaches at:
http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
Basically, <li> is block-level tag, meaning that it displays as its own "block" element: receives a layout (settable dimensions), by default takes the entire width of the parent element, and has a forced break after the rendered element (is on a line to itself).
So, that leaves us with a number of approaches for having your menu items sit side-by-side:
Use inline-level elements for your menu items
Use block-level elements and float them
Use block-level elements and style them as inline-block
All of these approaches are detailed in the above link. Personally, I prefer to use floated block elements. I have a fiddle with some rough css to give you an idea. Note that there are some considerations in how to display your submenus as well. You'll note that I've implemented these as having display: block, with no float, because we want them to stack vertically.
HTML
<ul class="menu">
<li>
foo
<ul class="submenu">
<li>subfoo1</li>
<li>subfoo2</li>
</ul>
</li>
<li>
bar
<ul class="submenu">
<li>subbar1</li>
<li>subbar2</li>
</ul>
</li>
</ul>
CSS
ul.menu {
list-style: none;
}
ul.menu > li{
float: left;
position: relative;
}
ul.menu li {
background-color: #cccccc;
padding: 5px 20px;
}
ul.menu > li + li {
border-left: solid black 2px;
}
ul.menu li:hover > ul {
display: block;
}
ul.menu li a,ul.menu li a:link, ul.menu li a:hover, ul.menu li a:visited {
color: black;
text-decoration: none;
}
ul.submenu{
display: none;
list-style: none;
position:absolute;
left: 0;
padding: 0;
}
ul.submenu li {
float:none;
display: block;
}
ul.submenu > li + li {
border-top: solid black 1px;
}
You can just remove some <li> tags:
<ul>
<li>
abc
<ul>
abc
abc
</ul>
</li>
<li>
abc
<ul>
abc
abc
</ul>
</li>
</ul>