I need to dynamically add LI elements to the UL element which are of "n" length. The HTML I have right now is...
<div class="center">
<ul id="tabList" class="parent">
<!-- I am adding LI using jQuery here. -->
<br class="clearfix" />
</ul>
</div>
The CSS applied here is...
.center
{
top: 0;
margin: 0 15%;
width: 70%;
overflow: hidden;
}
.center ul.parent
{
left: 0;
height: 100%;
position: relative;
}
.center ul.parent li
{
float: left;
margin: 0 5px;
}
.center ul.parent li .tab
{
position: relative;
padding: 5px 10px;
background: transparent;
font-size: 16px;
font-weight: bold;
line-height: 49px;
border: 1px solid rgba(0, 0, 0, 0.1);
color: #A9D0F5;
background: rgba(0, 0, 0, 0.1);
border-radius: 3px;
}
I must set .parent width according to its children width in order not to let UL expand vertically here. Is there a way I can use to fix the width setting? I don't like setting width according to children accumulated width.
You want something like this?
I put a big witdh in order to avoid that the new LIs going down.
.center ul.parent
{
width: 1000%;
}
But I think that your problem are here:
.center
{
width: 70%;
overflow: hidden;
}
Will come a time where the .center will not allow to show new LIs.
I recommend to you, because you will add LI tags with jQuery, detect the first width of the .center ul.parent and increment it programmatically in each new LI addition.
From what you tell me in the comments I make another demo to see if it help you --> http://jsfiddle.net/Galled/KQqYm/4/
Related
We are writing a custom website, but we want it to look similar to Wordpress, so we have written the code with the 'sticky' left position bar, and the scrolling right one.
But when you bring the page inward, the right columns wraps under the left one. Any ideas why and how to resolve?
Here is the CSS code:
html, body, section, article, aside {
min-height: 100%;
}
.sidemenu
{
position: sticky;
top: 0;
height: 100vh;
background-color: #333333;
color: #ffffff;
width: 160px;
float: left;
}
.menu-link a
{
padding: 8px 2px 2px 8px;
display: block;
color: #ffffff;
text-transform: capitalize;
}
.pagebody
{
float: left;
max-width: 95%;
text-align: left;
padding: 20px;
}
So you have two DIVs, left is 'sidemenu' right is 'pagebody'.
Hope you can help.
To fix the position of the sidebar, you need to used position: fixed;. After that, wrap the sidebar div and body div into one container and set its width to 100% (I also gave the body a margin of 0 at this point to remove gaps).
Give the body div a left-margin equal to the width of the sidebar, then set the width of the body using a calculation (as shown below). I also gave it a really long height to demonstrate scrolling.
You can omit your floats.
Here is the adjusted code:
html,
body,
section,
article,
aside {
min-height: 100%;
margin: 0;
}
.main {
width: 100%;
}
.sidemenu {
position: fixed;
top: 0;
height: 100vh;
background-color: #333333;
color: #ffffff;
width: 160px;
}
.menu-link a {
padding: 8px 2px 2px 8px;
display: block;
color: #ffffff;
text-transform: capitalize;
}
.pagebody {
width: calc(100% - 199.75px);
text-align: left;
padding: 20px;
height: 300vh; /**** used to demonstrate scrolling ****/
margin-left: 160px;
background-color: #BBB;
}
<div class="main">
<div class="sidemenu">
Side Menu
</div>
<div class="pagebody">
body
</div>
</div>
There are two issues that I'm trying to fix, but can't find a solution
The first one is that the space between the li fields is way wider than the 2px than it should be. How do I remove it?
And other is that the a fields are only as high as the text, although the field height is defined to be 50px.
I also have the normalize.css file enabled from GitHub.
Any suggestions?
HTML
<nav class="nav-box">
<div class="row">
<ul class="main-nav">
<li>YES</li>
<li>NO</li>
</ul>
</div>
</nav>
CSS
.row {
max-width: 1140px;
margin: 0 auto;
}
.nav-box {
position: fixed;
top: 0;
left: 0;
width: 100%;
box-shadow: 0 2px 2px #f2f2f2;
min-height: 65px;
}
.main-nav {
float: right;
margin-top: 7px;
}
.main-nav li {
list-style: none;
display: inline-block;
font-size: 100%;
}
.main-nav li a {
height: 50px;
background-color: #ee4723;
padding: 0 18px 0 18px;
font-size: 1.4rem;
color: #fff;
font-family:'Oswald', sans-serif;
border:solid #fff;
border-width: 0 1px 1px 0;
line-height: 54px;
}
Here's a fiddle.
For the spacing issue
This is an issue with inline-block elements (extra spacing appears between two such elements). One way to solve this is to give the parent element (in this case <ul>) font-size of 0 and then setting the font-size of the <li> element explicitly. There are other ways like negative margin but I find font-size: 0 method to be the most convenient.
You can read about other methods here https://css-tricks.com/fighting-the-space-between-inline-block-elements/
For the height issue
While you have given the inline-block property to the <li> elements, the child <a> elements are still inline. Attributes such as height and width would have no effect on inline elements. Add display: inline-block to the <a> element as well for the desired effect
You can use negative margins:
.main-nav li {
margin: 0 -2px;
}
.main-nav li a {
display: inline-block;
}
In my navigation I have a protruding red box. I want that red box to overlap all Divs bellow it. I set a margin for it so it would space it out among the other elements I put in the black box. The problem is that it's margin is also effecting the layout of separate elements' children bellow it. When I add a negative margin to the child elements of the section bellow it does overlap but I want the red box to be on-top. I use z-index and it doesn't seem to work.
Here's my example on Jsfiddle:
http://jsfiddle.net/1qsuvhnd/29/
HTML
<nav>
<div id="ribbon"></div>
</nav>
<div id="context">
<div class="link"></div>
</div>
CSS
#context {
width: auto;
padding: 20px;
height: 300px;
background-color: blue;
z-index: 1;
}
#context .link {
float: Left;
height: 260px;
width: 300px;
margin-left: -140px;
background-color: White;
z-index:1 !important;
}
nav {
width: auto;
height: 65px;
background-color: black;
z-index:99 !important;
clear:both;
}
nav #ribbon {
float: left;
margin: 0px 50px;
Width: 65px;
height: 130px;
background-color: red;
z-index= 99;
}
To use z-index, you need to specify a position (like absolute, fixed, or relative).
And the last line written is wrong:
z-index = 99;
The correct way to write it is:
z-index: 99;
How about: http://jsfiddle.net/1qsuvhnd/30/
change the ribbon to position: absolute; and fix the z-index = typo :D
Now you don't need that margin hack!!
nav #ribbon {
float: left;
margin: 0px 50px;
Width: 65px;
height: 130px;
background-color: red;
z-index: 99; /* take that equal out and make it a colon */
position: absolute; /* position: absolute to the rescue!!!! */
}
You need to specify a position CSS rule for the nav div for the z-index to work correctly, like this:
nav #ribbon {
float: left;
margin: 0px 50px;
Width: 65px;
height: 130px;
background-color: red;
z-index:99;
position: relative;
}
Here is the new jsFiddle link:
http://jsfiddle.net/1qsuvhnd/54/
I am a little stuck. I am trying to build a horizontal navigation bar, 1024px across, which will allow for a submenu to display below it. But i want the submenu to also be 1024px in width and to display directly below the navigation bar, vertically aligned.
At the moment the submenu appears but fixes its left side to the left side of the current li that you are hovering over. How can I fix this?
Thanks!
EDIT: So on mouse over it would look something like this: http://eventav.biz/site/example.jpg
Link to what I've done so far -
http://www.eventav.biz/site/
ul.top_menu {
position: relative;
margin: 0;
margin-bottom: -1px;
list-style: none;
display: table;
width: 1024px;
border: 1px solid #111111;
border-bottom: 1px solid #000000;
border-radius: 10px 10px 0px 0px;
}
.top_menu li {
display: block;
position: relative;
border-right: 1px solid #111111;
float: left;
margin: 0px;
display: table-cell;
vertical-align: middle;
}
.top_menu li:first-child {
border-left: 1px solid #111111;
}
.top_menu li a {
display: block;
text-decoration: none;
color: #000000;
text-shadow: 3px 3px 8px #3A3A3A;
padding: 15px;
height: 30px;
display: table-cell;
vertical-align: middle;
margin: 0px;
}
#top_menu_item ul {
display: none;
margin: 0px;
}
#top_menu_item:hover ul {
display: block;
position: fixed;
margin: 0;
}
#top_menu_item:hover li {
width: 1024px;
background-color: #666;
text-align: left;
color: #FFF;
font-size: 12px;
margin: 0px;
}
<ul class="top_menu">
<li id="top_menu_item">HOME</li>
<li id="top_menu_item">OUR SERVICES
<ul><li id="top_menu_item">test</li></ul>
</li>
<li id="top_menu_item">EXAMPLES OF OUR WORK
<ul><li id="top_menu_item">test</li></ul>
</li>
<li id="top_menu_item">CONTACT US</li>
</ul>
Remove the fixed positioning from the child ul, and replace it with position:absolute. Add in left:0px, and then remove position:relative from the parent li.
Working jsFiddle example
#top_menu_item:hover ul {
display: block;
position: fixed; /* Change this to position:absolute; */
left:0px; /* Add this */
}
.top_menu li {
display: block;
position: relative; /* Remove this */
}
1) Remove position: relative; from #top_menu_item
2) Set #top_menu_item ul to position: absolute; left: 0; instead
3) Remove left padding on #top_menu with padding-left: 0;
4) Add:
#top_menu_item:first-child {
margin-left: 40px;
}
Essentially, the problem was that you've been positioning your inner ul tag relative to it's parent li. Instead, the solution above positions the secondary navigation absolutely in relation to the primary navigation, and we use left: 0; to make sure it's completely left-aligned.
It's also against the standard to use an id multiple times on a page. Therefore I'd recommend changing #top_menu_item into .top_menu_item and changing the HTML accordingly.
Let me know if you have any problems!
I'm building a navigation menu where I use a regular ul#nav.
In my example bellow I'm trying to make the div inside the li#third hang over the bottom of the ul#nav. I know I need to use position: absolute on the div inside li#third but if I do that then it just takes up the 100% of the width assigned to it.
I tried changing the position: absolute; width: 40%; on the div but then the last li slides under it.
How can I keep the width the same as the li#third element and still have it flow over it at the bottom?
Updated example: http://jsfiddle.net/VyHJR/24/
HTML :
<ul id="nav">
<li id="first">item</li>
<li id="second">item</li>
<li id="third"><div id="search">search</div></li>
<li id="fourth"><div id="flag"><div id="flag_item">4</div></div></li>
</ul>
CSS :
ul#nav { width: 600px; background-color: #fdd; padding: 0; margin: 30px 0 0 20px; overflow: hidden; }
ul#nav li { float: left; text-align: center; }
ul#nav li a { color: #333333; }
ul#nav li#first { background-color: #dff; width: 20%; padding: 6px 0; }
ul#nav li#second { background-color: #ddf; width: 20%; padding: 6px 0; }
ul#nav li#third { background-color: #dfd; width: 40%; }
ul#nav li#fourth { background-color: #ffd; width: 20%; }
li#third div#search { width: 100%; background-color: #333333; height: 40px; color: #ffffff; }
li#fourth div#flag { width: 100%; height: 20px; background-color: #333333; }
li#fourth div#flag div#flag_item { width: 1px height: 30px; background-color: red; }
See: http://jsfiddle.net/thirtydot/VyHJR/34/
Now I understand what you were trying to do, it makes sense.
I removed overflow: hidden on ul#nav, which I assume was there to contain the floats, and replaced it with display: inline-block. I could also have used clearfix.
I added position: relative; height: 1px; to ul#nav li#third. Some height was required, otherwise the fourth li takes the place of the third. position: relative to contain the absolutely positioned div#search.
I added left: 0 to div#search purely to fix IE7.
li{ overflow: hidden;
position: relative;}