Well I'm a web design newbie. Any help would be appreciated.
I'm learning html and css by doing a live project and got stuck in positioning nested list items.
My web browser render look like this.
My HTML:
<nav class="nav-sidebar">
<ul class="sidebar-ul">
<li class="sidebar-parent">parent-item-1
<ul class="sidebar-sublist">
<li class="sidebar-children">child 1</li>
<li class="sidebar-children">child 2</li>
</ul>
</li>
<li class="sidebar-parent">parent-item-2
<ul class="sidebar-sublist">
<li class="sidebar-children">child 1</li>
<li class="sidebar-children">child 2</li>
</ul>
</li>
<li class="sidebar-parent">parent-item-3
<ul class="sidebar-sublist">
<li class="sidebar-children">child 1</li>
<li class="sidebar-children">child 2</li>
</ul>
</li>
</ul>
</nav>
My CSS:
for the nav side bar
.nav-sidebar{
width: 250px;
background: #444444;
position: fixed;
height: 100%;}
for the parent li
.sidebar-parent{
display: block;
width: auto;
padding-right: 5px;
padding-left: 20px;
border-bottom: 1px solid #211D1D;
text-transform: uppercase;
font-size: 1em;
font-family: helvetica;
text-decoration: none;
background: #2D2828;}
for the children li
.sidebar-children{
text-decoration: none;
text-transform: lowercase;
color: #efefef;
background: #000000;
padding-right: 5px;
padding-left: 20px;
width: auto;
display: block;}
How can I position the children to align to the extreme left of the sidebar? At least just below the parent li?
Thank you so much for helping out, and sorry for my horrible English and code. Thanks for any help.
Reset the default styles applied by the browser to ul tags.
.sidebar-sublist{
padding: 0px;
margin: 0px;
}
Also remove the left padding from .sidebar-parent.
In your markup, you could add the following to your CSS and it should do what I think you're asking for:
.sidebar-sublist { padding-left: 0; }
If you want the nested items to be completely flush with the parent items, then you can modify this part of your code:
.sidebar-children{
padding-left: 20px; /* remove this if you want these flush with parent */
}
Here's a fiddle showing the first change (and you can edit the padding-left too):
you have to remove the padding from classes .sidebar-parent and .sidebar-children and give a margin:0 to ul element.
Here is the modified CSS code.
.sidebar-children{
text-decoration: none;
text-transform: lowercase;
color: #efefef;
background: #000000;
display: block;}
.sidebar-parent{
display: block;
width: auto;
border-bottom: 1px solid #211D1D;
text-transform: uppercase;
font-size: 1em;
font-family: helvetica;
text-decoration: none;
background: #2D2828;}
.nav-sidebar{
width: 250px;
background: #444444;
position: fixed;
height: 100%;}
.sidebar-ul, .sidebar-sublist{margin:0; padding:0;}
Please check the Demo link.
http://jsbin.com/puqaloya/1/edit
Related
This question already has answers here:
How to make an HTML anchor tag (or link) look like a button?
(18 answers)
Closed 3 years ago.
I was trying to make webrazzi from scratch.I want to press the buttons while cursor nearby to I also want to press the button.(In the image you can see red rectangles.I also want to add a place like that and can press the button If I am even there).(Sry for bad english)
Image: https://prnt.sc/oaewro
I tried to make a tags block but when I did that search button comes under "Search" text
nav ul li {
display: inline-block;
padding-right: 2.4rem;
}
nav ul li:nth-child(2) a{
margin-right: 1rem;
}
nav ul li a {
color: #0A0A0A;
font-size: .9rem;
font-family: 'Nanum Gothic', sans-serif;
}
<nav>
<ul>
<li>Subscribe</li>
<li>Search<i class="fas fa-search"></i></li>
<li>Sign In</li>
<li>Register</li>
</ul>
</nav>
Give your anchor elements a width and height.
.button {
display: block;
width: 115px;
height: 25px;
background: #4E9CAF;
padding: 10px;
text-align: center;
border-radius: 5px;
color: white;
font-weight: bold;
}
<a class="button" onClick="javascript: alert('hello')">Say Hello</a>
Above is an extension of this answer.
nav ul li {
display: inline-block;
}
nav ul li a {
padding: 1rem;
border: 2px solid rebeccapurple;
margin-left: 10px;
color: #0A0A0A;
font-size: .9rem;
text-decoration: none;
font-family: 'Nanum Gothic', sans-serif;
}
ul {
display: flex;
justify-content: flex-end;
margin-top: 35px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<nav>
<ul>
<li>Subscribe</li>
<li>Search <i class="fas fa-search"></i></li>
<li>Sign In</li>
<li>Register</li>
</ul>
</nav>
I made this horizontal menu, and everything was nice and good, until I realized that I can't make the submenus appear vertical, can someone help me?
Here is the menu code:
<div id="nav_custom">
<div id="nav_custom_wrapper"></div>
<ul>
<li>NEW ARRIVALS
</li>
<li>
SEQUIN DRESSES
<ul id="nav_custom_sub">
<li>AVAILABLE</li>
<li>EXAMPLES SOLD</li>
</ul>
</li><li>
BOHO DRESSES
<ul id="nav_custom_sub">
<li>AVAILABLE</li>
<li>EXAMPLES SOLD</li>
</ul>
</li><li>
MOD DRESSES
<ul id="nav_custom_sub">
<li>AVAILABLE</li>
<li>EXAMPLES SOLD</li>
</ul>
</li><li>
PSYCHEDELIC DRESSES
<ul id="nav_custom_sub">
<li>AVAILABLE</li>
<li>EXAMPLES SOLD</li>
</ul>
</li><li>
COATS & JACKETS
<ul id="nav_custom_sub">
<li>AVAILABLE</li>
<li>EXAMPLES SOLD</li>
</ul>
<li>
KIMONOS
<ul id="nav_custom_sub">
<li>AVAILABLE</li>
<li>EXAMPLES SOLD</li>
</ul>
</li>
</ul>
</div>
Here is the css that I have used:
#nav_custom {
text-decoration: none;
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 49px;
color: #000;
display: block;
padding: 10px;
width: 960px;
margin-left: -35px;
margin-right: auto;
text-align: center;
width: auto;
}
#nav_custom_wrapper {
width: 960px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#nav_custom ul{
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
#nav_custom ul li{
display: inline-block;
}
#nav_custom ul li:hover{
color: #000;
text-decoration: none;
}
#nav_custom ul li a,visited{
color: #BA7145;
padding: 15px;
text-decoration: none;
}
#nav_custom ul li a:hover{
color: #000;
text-decoration: none;
}
#nav_custom ul li:hover ul{
display: block;
}
#nav_custom ul ul{
display: none;
position: absolute;
margin-top: -25px;
margin-left: -50px;
text-align: center;
color: #4f4f4f;
}
Remove the inline-block on the #nav_custom ul li
See fiddle for working example: http://jsfiddle.net/Tv77g/
Inline-block works similarly to floats, which is why they were stacking left to right next to each other instead of one on top of each other.
I didn't go through to adjust your children. I don't know how the menu is supposed to display. Most likely the children (#nav_custom ul ul) would have the margins adjusted. You can remove text-align:center; on #nav_custom to make the menu completely left aligned.
To set this only on children, add
#nav_custom_sub li {
display: block !important;
}
This will override the inline-block for only the children (in the dropdown). You will have to adjust the margins to make them appear correctly.
so I've encountered a bug that I can't figure out in IE8. I've seen some doozies, but this one might take the cake.
I tried replicating it in Codepen, but we have a lot of code for this so I'll try including the computed styles from IE8.
Using Foundation 5, I have a Top Bar that starts out looking like this:
The dropdown is positioned absolutely, so it obviously shouldn't be stretching out the parent container. It doesn't actually stretch out the parent, but the grandparent. Here's the markup:
<nav id="global-nav" class="top-bar has-dropdown show-for-large-up" data-topbar >
<section class="top-bar-section">
<ul class="title-area">
<li class="name">
Title
</li>
</ul>
</section>
<section class="links top-bar-section">
<ul class="left">
<li class="divider"></li>
<li>Create
</li>
<li class="divider"></li>
<li class="has-dropdown">
<a>Explore</a>
<ul class="dropdown tab-left" id="explore-menu">
<li>Link 1
</li>
<li>Link 2
</li>
<li>Link 3
</li>
</ul>
</li>
<li class="divider"></li>
<li>Find
</li>
</ul>
</section>
<section class="top-bar-section">
<ul class="right">
<li class="has-form search">
<form id="header_search" name="search_form">
<input type="search" placeholder="Search" class="search" results=3 id="search_term" name="search_value" maxlength="200" />
<button id="search_submit"></button>
</form>
</li>
<li class="login">
Login
</li>
</ul>
</section>
The computed CSS from IE8:
#global-nav{ //this is the topbar that is stretching
background: #2a2d43;
background-image: none;
color: #666;
display: block !important;
font: inherit;
font-family: sans-serif;
font-size: 16px;
height: 80px;
line-height: 60px;
margin: 0px;
overflow: visible;
padding: 0;
position: relative;
vertical-align: baseline;
width: 100%;
}
li.has-dropdown .dropdown{
background: #fff;
box-sizing: border-box;
clip: rect(1px 1px 1px 1px);
z-index: 99;
color: #666;
display: block;
font: inherit;
font-family: sans-serif;
font-size: 16px;
height: auto !important;
left: 10%;
line-height: 60px;
margin: 0;
max-height: none;
max-width: 200px;
overflow: hidden;
padding: 0px;
position: absolute !important;
right: auto;
top: 64px;
vertical-align: baseline;
visibility: hidden;
width: auto;
}
li.has-dropdown.hover .dropdown{ //the open dropdown state
clip: rect(auto auto auto auto);
visibility: visible;
}
If you need more information let me know. Thanks in advance.
For reference, I'm testing on a Parallels VM of Win7 with IE8, using IE8 document mode and IE8 Standards.
Do you have a link to view this? I am wondering if maybe you should set the ul to position relative. I think the li is falling back to the first relatively positioned item. Hopes this helps.
If any of the parent elements of the absolute element has position: relative then the absolute is computed relative to that,
try removing the position: relative from the parent containers maybe it could help
also make sure you have correct
<!DOCTYPE html>
at the beginning of your file
It is not an IE8 rendering error, but a coding error/incompatibility somewhere. This demo code shows that IE8 does take absolutely positioned drop-down elements out of the flow:
<!DOCTYPE html>
<head>
<title>Demo IE8 Drop-Down Menu</title>
<meta charset="utf-8">
<style>
#navDivParent { /* = grandparent of the dropdown menu */
background-color: darkblue;
text-align: right;
color: white;
height: 100px;
width: 550px;
}
#navDiv ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: left;
}
#navDiv ul li {
float: left;
position: relative;
margin-right: 10px;
}
#navDiv ul li ul li {
clear: left;
}
#navDiv ul ul {
display: none;
}
#navDiv ul li:hover ul {
display: block;
position: absolute;
}
#navDiv a {
display: block;
padding: 0 10px 0 10px;
background: yellow;
color: blue;
text-decoration: none;
}
#navDiv #item2SubList a {
width: 175px;
}
#navDiv a:hover {
background: red;
color: white;
}
</style>
</head>
<body>
<div id="navDivParent">This is the grandparent<br> of the dropdown menu.
<div id="navDiv">
<ul>
<li>Menu item</li>
<li>Menu item w/ child
<ul id="item2SubList">
<li>Menu sub-item</li>
<li>Menu sub-item</li>
<li>Menu sub-item</li>
</ul>
</li>
<li>Menu item</li>
</ul>
</div>
</div>
</body>
</html>
.
I haven't made a live demo because JSFiddle, JSBin and the likes don't function in IE8, but I tested it in both a real IE8 and IE9 in IE8 mode.
As the in the question provided code does not contain a CSS :hover state declaration, the coding error/incompatibility might lie in the Javascript that would drive the hover state.
Your dropdown has a max-width of 200px. IE8 doesn't deal well with max-width. Essentially it's treated as a width declaration. Your forcing a width of 200px in IE8. You would need to set it to none...
max-width:none\9; /* IE8 */
I do not think this "bug" has anything to do with the position: absolute; not taking the .dropdown out of the flow. li.has-dropdown also has a .hover state applied to it. There is likely some other styling applied to li.has-dropdown that is causing #global-nav to shift. Perhaps some extra padding is being applied to li.has-dropdown. Unfortunately we don't have all the code to properly debug this.
I have a problem regarding CSS styling for my list.
Here is the code.
CSS
NAV {
width: 940px;
height: 50px;
float: left;
font-family: Geneva,Arial;
border: 1px solid #000000;
background-color: #D0DBF0;}
NAV ul {
margin: 0px auto;
padding-top: 15px;
padding-left: 70px;
list-style-type: none;
}
NAV li {
display: inline;
}
NAV li a {
float: left;
text-align: center;
border-right: 2px solid #00DBF0;
width: 100px;
font-size: 14px;
padding: 0px 10px;
color: #0000FF;
text-decoration: none;
}
HTML
<NAV>
<UL>
<LI>Home</LI>
<LI>About Us</LI>
<LI>Contact Us</LI>
<LI>Red Widgets</LI>
<LI>Blue Widgets</LI>
<LI>Green Widgets</LI>
</UL>
</NAV>
So here i have designed everything for navigation list, but for the first list i.e home.
<LI>Home</LI> i want right border. please help me.
You can do it using the :first-child pseudo-class:
nav li:first-child
or
nav li:first-child a
depending on whether you want to target the list item (<li>) or anchor (<a>).
You should add a class, or id.
For example (Let's also assume later you want a "current selected" item):
CSS:
.first a { /* specific style for first item */ }
.current a { /* specific style for current item */}
HTML:
<NAV>
<UL>
<LI class="first">Home</LI>
<LI>About Us</LI>
<LI class="current">Contact Us</LI>
...
<!-- if the first item happens to be the curent one: -->
<LI class="first current">Home</LI>
</UL>
</NAV>
JsFiddle here
It would appear that I am suffering from a new bug in IE7, as I can't seem to find any reference to it anywhere else. It is best explained using screenshots, so here are a couple of links (and as a note, it's not a requirement for it to work in IE6, so I don't even want to know what it looks like under that!):
How it should be displayed (using Safari 4):
http://dl-client.getdropbox.com/u/45961/safari4.png
How IE7 is displaying it:
http://dl-client.getdropbox.com/u/45961/ie7.png
Here's the CSS for that menu chunk:
#mm #leftNav .navigation {
width: 100%;
margin-bottom: 0;
float: left;
}
#mm #leftNav li {
list-style: none;
display: inline;
margin: 0;
}
#mm #leftNav .navigation li ul {
display: none;
}
#mm #leftNav .navigation li a {
text-decoration: none;
color: #ffffff;
font-size: 11pt;
padding-left: 20px;
}
#mm #leftNav .navigation li {
cursor: pointer;
margin-right: 4px;
padding-left: 8px;
padding-right: 8px;
padding-top: 10px;
padding-bottom: 8px;
overflow: visible;
}
.menu_item {
background: #419185;
}
.menu_item:hover {
background: #48a093;
}
.currentcat {
background-color: #4aa8a6;
}
.currentcat:hover {
background: #4aa8a6;
}
And here is the HTML:
<div id="mm">
<div id="leftNav">
<ul class="navigation">
<li class="menu_item">
<a class="icon icon-base">Base</a>
</li>
<li class="menu_item">
<a class="icon icon-devices">Devices</a>
</li>
<li class="menu_item">
<a class="icon icon-management">Management</a>
</li>
<li class="menu_item">
<a class="icon icon-iptools">IP Tools</a>
</li>
<li class="menu_item">
<a class="icon icon-config">Configuration</a>
</li>
<li class="menu_item">
<a class="icon icon-admin">Administration</a>
</li>
</ul>
<div id="subnav"></div>
</div>
</div>
Any ideas?
top and bottom padding are not supported on inline elements (some browsers will render it, others won't)
Here's a good article on the problem:
http://www.maxdesign.com.au/presentation/inline/
If you really need correct padding, you should change the menu items to "display:block" and "float:left"
Hehe, activa beat me to it.
Indeed, move your margin/padding to the A element, kinda like so:
mm #leftNav .navigation li a {
text-decoration: none;
color: #ffffff;
font-size: 11pt;
display:block;
float:left;
background: #419185;
margin-right: 4px;
padding-left: 20px;
padding-right: 8px;
padding-top: 10px;
padding-bottom: 8px;
}
mm #leftNav .navigation li {
cursor: pointer;
}
.menu_item {
}