I'm trying to use a horizontal list in a web part in SharePoint. I've gone over this code over and over and can't find the issue. For some reason, the list still displays vertically. Any ideas?
CSS
ul{
padding: 0;
list-style: none;
width:100%;
text-align:center;
height: 100px;
background: #ffffff no-repeat center;
}
ul li{
display:inline-block;
float: left; padding: 25px 25px 0 125px;
margin: 0;
position: relative;
font-size: 25px; font-weight: bold; color: #FFFFFF;
text-align: center;
}
ul li a{
display: block;
color: #FFF; padding: 10px 5px;
text-decoration: none;
}
ul li a:hover{
}
ul li ul.dropdown{
min-width: 150px; /* Set width of the dropdown */
width: 100%;
display: none;
position: absolute;
z-index: 999;
left: 0;
float: left;
}
ul li:hover ul.dropdown{
display: inline; /* Display the dropdown */
background: #FFFFFF;
left: 0;
width:100%;
margin:0;
padding:0;
}
ul li ul.dropdown li{
display: inline;
float: left;
background: #FFFFFF;
}
HTML List (still in progress; just testing before I fix all the text/links)
<ul>
<li>Home</li>
<li>About</li>
<li>
Current Performance ▾
<ul class="dropdown">
<li>Grafenwoehr</li>
<li>Hohenfels</li>
<li>Katterbach</li>
<li>Stuttgart</li>
<li>Vilseck</li>
</ul>
</li>
<li>Contact</li>
</ul>
I haven't done this stuff in years but my boss wants me to try and make this work. -_-
You have a dropdown here
ul li ul.dropdown {
width: 100%;
}
which has a 100% width relative to
ul li {
position: relative;
}
which is the culprit here. Removing the "Position:relative" above fixes your problem.
Your ul.dropdown does float horizontally, but its width forces the elements to order vertically. To test this out you can set its min-width to something like 900px: DEMO
As your ul.dropdown is a child of its parent li, which is set to display: inline-block; position: relative;, its bound to its borders using width: 100%.
To solve this problem you can remove position: relative of your li elements to remove this border. Now its width: 100% relates to your body.
WORKING DEMO
Try display:block on the UL.dropdown and display:inline-block on the UL.dropdown LI.
just remove (position: relative;) from "ul li" list will come horizontally.
code will be like:
ul li{
display:inline-block;
float: left;
padding: 25px 25px 0 125px;
margin: 0;
font-size: 25px;
font-weight: bold; color: #FFFFFF;
text-align: center;
}
just replace this code with yours.
Thank You
Related
I'm hitting a wall with my relatively basic knowledge of CSS. I've put together a menu with the intention of centering it within its div. For whatever reason, all attempts at centering it with CSS (margin 0 & set width for the menu's ID) have failed, so I've resigned to changing the width of the div to just barely fit all of the menu options and centered that on the page.
However, this has caused it to be displayed incorrectly in a couple browsers (mainly Safari).
Heres the CSS:
#primary_nav_wrap {
display: block;
}
#primary_nav_wrap ul {
list-style: none;
text-align: center;
position: relative;
float: left;
margin: 0;
padding: 0
}
#primary_nav_wrap ul a {
display: block;
margin: 0 auto;
color: #8a7e70;
text-decoration: none;
font-size: 13.9pt;
padding: 0 10px;
letter-spacing: 2px;
font-family: Engravers;
}
#primary_nav_wrap ul li {
display: inline;
position: relative;
float: left;
padding: 0
}
#primary_nav_wrap ul ul {
display: none;
width: 204px;
position: absolute;
top: 100%;
left: 50%;
padding-top: 10px;
padding-bottom: 10px;
background: rgba(0, 0, 0, 0.92);
margin-left: -100px
}
#primary_nav_wrap ul ul li {
float: none;
width: 204px
}
#primary_nav_wrap ul ul a {
font-family: Eavesregular;
font-size: 12pt;
letter-spacing: .5px !important;
line-height: 120%;
padding: 5px 5px
}
#primary_nav_wrap ul ul ul {
top: 0;
left: 100%
}
#primary_nav_wrap ul li:hover>ul {
display: block
}
a:hover,
a:active,
li:hover,
li:active,
ul:hover,
ul:active {
color: #bfb3a0 !important;
}
and my HTML
<div id="primary_nav_wrap">
<ul>
<li><span style="color:#fffdf2;">philosophy</span></li>
<li>collection
<ul>
<li>Shades of Black</li>
<li>L' Amour du Sauvage</li>
<li>Dark Phoenix</li>
<li>Buy the Collections</li>
</ul>
</li>
<li>fashionshow
<ul>
<li>Phoenix New York<br />Grand Central Station</li>
</ul>
</li>
<li>press
</li>
<li>blog</li>
<li><a class="lastcontact" href="/wild/contact">contact</a></li>
</ul>
</div>
and here's the website:
https://christianpersi.co/wild/
Thank you for any and all help!
Have a look at using flex to position your elements.
By default flex will render your items in a row, you can set justify-content: center; to align everything centre with a margin for spacing. You can have center on the parent of the menu, and inside the ul for the menu justify-content: space-between; to space them evenly, but as #Bhargav pointed out, your issue is probably down the number of characters you have in your menu breaking the layout with a limited width to sit in.
So I'm, attempting to create a drop down menu on my website and for the most part have been successful, however I'm having one issue.
<div id="nav">
<ul>
<li>content</li>
<li>
content
<ul>
<li>subcontent</li>
<li>subcontent</li>
<li>subcontent</li>
</ul>
</li>
<li>content</li>
<li>content</li>
</ul>
</div>
Above is the content
body{
margin: 0px;
}
ul, li{
margin: 0px;
padding: 0px;
}
#nav{
width: 100%;
background-color: #000000;
color: #ff0000;
}
#nav ul{
position: absolute;
list-style-type: none;
text-align: center;
cursor: pointer;
}
#nav ul li{
min-width: 100px;
display: inline-block;
border: 1px solid #000000;
}
#nav ul li:hover{
background-color: #0000ff;
}
#nav ul li ul li{
display: none;
margin-left: -1px;
margin-top: -1px;
}
#nav ul li:hover ul li{
display: block;
}
And that is the CSS
Basically, because I'm positioning my content as 'absolute' in order to stop anything from being misplaced when the dropout menu is used, the layer black layer which acts as the navigation bar section ends up disappearing. Is there any way around this, or do I need to restructure my website completely?
This is what is looks like in a browser:
Try adding background-color to ul, li
ul, li{
margin: 0px;
padding: 0px;
background-color: #000;
}
or give #nav a height
#nav{
width: 100%;
background-color: #000000;
color: #ff0000;
height: 50px;
}
Never mind, I realized it was because I hadn't set a height in #nav.
I'm having trouble with adding space to the hovered "home" right/left.
Adding proper spacing so after the hovered section of "home" appears that about and the other pages would follow.
CSS:
nav {
width:460px;
height:50px;
background-color:#0066ff;
float: left;
margin: 15px 0 0 324px;
position: fixed;
}
nav ul {
margin: 0;
padding: 0;
position: fixed;
width:493px;
border: 1px solid green;
}
nav li {
float: left;
text-align: left;
margin:0;
padding: 0 0 0 24px;
display: block;
width: 51px;
height: 50px;
}
nav li:first-child {
float: left;
text-align: left;
margin:0;
padding: 0 15px 0 0;
display: block;
height: 50px;
}
nav a:first-child {
margin: 0;
padding: 0;
height: 50px;
min-width:51px;
display:block;
position: fixed;
line-height:50px;
float: left;
text-align: center;
}
nav a {
margin: 0;
padding: 0;
height: 50px;
min-width:51px;
display:block;
position: fixed;
line-height:50px;
float: left;
text-align: center;
}
nav ul li a:link, nav ul li a:visited {
text-decoration: none;
color:#fff;
display:block;
}
nav ul li a:hover, nav ul li a:active {
background: #929292;
text-decoration: none;
display:block;
}
This problem has been giving me headaches for hours.
Link Update
The blue space beside about can't happen.
Nick, your issue is in the li:first-child selector. Specifically the padding attribute, where it clears the padding, where you're missing the spacing.
Many of your :first-child selectors are redundant, and don't need to be re-specified.
Mixing position:fixed with float:left is generally not a good idea as your CSS will be fighting layout structure.
You only need a position:fixed for the main container, the rest the nav's children will be relative to that.
There's a lot of unnecessary padding and such, you should use your browser's DOM inspector to play with the layout.
Check this JSFiddle that's cleaned it up.
A lot of the time, a small <div> is placed to the left of the "home" link to push it over like so:
#fillerdiv{
width:20px;
background-color:#0066ff;
}
then you could place it like so:
<nav>
<ul>
<div id="fillerdiv"></div>
<li> Home</li>
<li>About</li>
<li>Work</li>
<li>Services</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</nav>
That produces this:
Or you could give the "home" button a specific class and add extra padding for it alone.
#home{
padding-left:20px;
}
And the HTML:
<nav>
<ul>
<li id="home"> Home</li>
<li>About</li>
<li>Work</li>
<li>Services</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</nav>
I played around your code a bit and tried to simplify it. I hope you don't mind.
JSFiddle
/* styles.css */
nav {
float: left;
background: #0066ff;
border: 1px solid green;
}
nav ul {
margin: 0;
padding: 0;
}
nav li {
float: left;
display: block;
}
nav a {
margin: 0;
padding: 0;
padding:20px;
color:#fff;
text-align: center;
}
nav ul li a:link, nav ul li a:visited {
text-decoration: none;
display:block;
}
nav ul li a:hover, nav ul li a:active {
background: #929292;
text-decoration: none;
display:block;
}
I have a sub navigation which is placed in two different places on different browsers, and I'm unsure why. I do realise that using margin-top instead of top does fix this but the problem with that is that I have a jQuery slide animation when the sub navigation comes out and it doesn't look nice when I use margin-top since it comes out further up than it is. Here is a picture of the difference:
http://jsfiddle.net/eAqev/ <-- JS Fiddle
HTML:
<div id="navigation">
<ul>
<li><h1>01. About</h1><h2>Learn about us</h2></li>
<li class="button"><h1>02. Products</h1><h2>View our selection of products</h2>
<ul class="scrollDown">
<li><p>Kitchen Worktops</p></li>
<li><p>Upstands/Splashbacks</p></li>
<li><p>Gables/ Panels</p></li>
<li><p>Glass</p></li>
<li><p>High Gloss</p></li>
<li><p>Bathroom Tops</p></li>
<li><p>Sinks/ Taps</p></li>
</ul>
</li>
<li><h1>03. Contact</h1><h2>Contact us!</h2></li>
<li><h1>04. Gallery</h1><h2>View photos of us</h2></li>
</ul>
</div>
CSS:
#navigation ul {
display: inline;
position: relative;
}
#navigation ul li {
float: left;
width: 200px;
height: 35px;
margin: 10px;
list-style: none;
border-bottom: 3px solid #ccc;
}
#navigation ul li:hover {
border-bottom: 6px solid #eee;
cursor: pointer;
}
#navigation ul ul {
position: absolute;
z-index: 1500;
margin: 0;
padding: 0;
list-style:none;
background: #fff;
width: 200px;
top: 60px;
opacity:0.95;
filter:alpha(opacity=95);
-moz-opacity:0.95;
}
You made everything clear Just add the below codes.It will fix your problem
#navigation ul ul {
position: absolute;
z-index: 1500;
margin: 0 !important;
padding: 0 !important;
list-style:none;
background: #fff;
width: 200px;
top: 60px;
opacity:0.95;
filter:alpha(opacity=95);
-moz-opacity:0.95;
}
#navigation ul {
display: inline;
z-index:10;
position: relative;
}
Most probably IE7 will have a buggy environment. This will work fine with IE8+.
Demo
Hi now define your ID #navigation ul display:inline-block; than adjects your id #navigation ul ul in top
As like this
#navigation ul {
display: inline-block;
position: relative;
vertical-align: top;
}
#navigation ul ul {
top:48px;
}
Live demo
Different browsers have different default margin & padding on ul/li elements.
Have you tried resetting these all to 0?
#navigation ul, #navigation li {
padding: 0px;
margin: 0px;
}
Might be you should try css-reset? Just put it at beginning of your css
But it may mess layout so you will need to set some values by yourself.
Try this:
#navigation ul li {float: left;
width: 200px;
line-height:17px;
margin: 10px;
list-style: none;
border-bottom: 3px solid #ccc;
}
I have this menu:
#navbar {
text-align: center;
margin: auto;
padding: 0;
height: 1em;
}
#navbar li {
list-style: none;
float:left; }
#navbar li a:hover{
background-color: #CCC;
}
#navbar li a {
border: 1px solid #000;
display: block;
margin-right: 18px;
margin-left: 18px;
padding: 3px 8px;
background-color: #FFF;
color: #000;
text-decoration: none; }
#navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
}
#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li {
float: none; }
#navbar li:hover li a {
background-color: #FFF;
border-bottom: 1px solid #000;
color: #000; }
#navbar li li a:hover {
background-color: #CCC; }
<ul id="navbar">
<li>Start</li>
<li>Vad?</li>
<li>Kom igång!</li>
<li>Läringsartikler<ul>
<li>Subitem One</li>
<li>Second Subitem</li>
<li>Numero Tres</li></ul>
</li>
<li>Läringsfilmer<ul>
<li>Subitem One</li>
<li>Second Subitem</li>
<li>Numero Tres</li></ul>
</li>
</ul>
as you can see in navbar { i tried to use text-align: center or margin:auto but it still wont center the whole menu..
why?
when i change the navbar li to float center instead of float left then it make the whole menu stupid big
You need to specify a width on your navbar ul.
#navbar {
text-align: center;
margin: auto;
padding: 0;
height: 1em;
width: 400px;
}
There is NO center value for 'float' style attribute
-- Oops dint see that comment
As mentioned, there is no Float:center. In order to center using margin-left and margin-right auto, you either need to set a width (as mentioned above) or change it to display:block.
If you don't want to set a width or can't, there's a CSS hack called Shrink Wrapping that is easy to setup.