I am implementing a very simple css menu. However, if I select a menu title in the menu bar (and thus open the menu associated with it) the width of the title extends to the width of the menu, which is not desired (i.e. the width of the title should not change). Check out the JSFiddle, or have a look at the markup:
<div id="menu">
<ul>
<li>you
<ul>
<li>register...</li>
<li>login...</li>
<li>forgot password...</li>
</ul>
</li>
<li>.</li>
<li>qan</li>
<li>.</li>
<li style="width: 20px"><a class="site">be</a>
<ul>
<li>be</li>
<li>do</li>
</ul>
</li>
</ul>
</div>
and the css definitions:
#menu {
font-family: Arial, Helvetica, sans-serif;
padding: 0px 5px;
font-size: 12px;
line-height: 18px;
color: darkgrey;
position: absolute;
top: 0px;
left: 0px;
height: 20px;
background-color: black;
z-index: 3;
/*opacity: 0;*/
white-space: nowrap;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
list-style-image: none;
}
#menu>ul>li {
font-weight: bold;
display: inline-block;
float: left;
padding: 2px 1px 0px 1px;
width: auto;
/*width: 10px;*/
}
#menu a { color: inherit; text-decoration: none;}
#menu>ul>li>a:hover { background-color: grey;}
#menu>ul ul {
display: none;
background-color: lightgrey;
padding: 2px 5px;
line-height: 14px;
min-width: 100px;
}
#menu>ul ul>li {
color: black;
padding: 2px 8px 2px 5px;
margin: 0px -3px;
}
#menu>ul ul>li:hover { color: lightgrey; background-color: grey;}
#menu>ul>li:hover ul { display: block;}
Since the menus are generated dynamically and contents meant to change on the fly and the font used is proportional, I cannot just set the widths of a title to a constant value which suppresses the resize. The width of the title should be determinded solely by the width of the text.
It used to work when I had implemented yuimenus, but that did all kinds of stuff to my CSS, the ramifications of which I found hard to control, so now I cooked up the menu by myself and am quite happy with it, save for the width change, and I haven't figured out which part of yui suppressed that. Any suggestions?
I don't agree with max-width.. this will make the link's width content-independent
use position:absolute; for the submenu: jsFiddle
Set width in li
Your updated example :- http://jsfiddle.net/8U5An/8/
Css:-
#menu ul li {
width: 25px;
}
See some useful example as well , how they handle same case by using width only :-
http://www.diy.com/diy/jsp/index.jsp?noCookies=false
http://www.puregrips.com/
Related
Is there a way to hide the separator in the first element on each line?
I have a responsive horizontal menu that adds extra lines when the window becomes smaller.
To make matters worse, the end user can add and remove items from this menu, or just change the order of the menu items.
Using first-child is not an option, because that only works for the first line. When the screen becomes too small the following lines will have the separator on their first li element.
#block-views-solutions-block{
box-sizing: border-box;
text-transform: uppercase;
font-weight: bold;
width: 92%;
max-width: $maxWidth;
margin: 20px auto 0 auto;
padding: 15px 0 0 0;
background-color: $colorBlue;
.content{
box-sizing: border-box;
width: 100%;
overflow: hidden;
}
ul{
margin: 0 !important;
padding: 0 40px;
text-align: center;
}
li{
display: inline-block;
padding: 0 !important;
&:before {
position: relative;
top: 0.125em;
display: inline-block;
width: 1px;
height: 1em;
border-left: solid 2px #fff;
content: " ";
}
&:first-child{
&:before{ border-left: none; }
}
}
a{
display: inline-block;
padding: 0 10px;
color: #fff;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
h2{
color: #fff;
font-size: smaller;
padding-bottom: 5px;
}
}
Looks fine here:
Does not work for the 2nd or following lines:
Looks horrible on very small screens:
I've been trying out solutions on here and other websites, but none seem to do the trick.
I found a solution to this issue, with a couple of caveats:
The solution requires that the list be left- or right-aligned, and won't work with a centered list.
The solution requires that the ul element's overflow be hidden, which could pose a problem if you're also hoping to have dropdown menus.
The solution itself is very simple:
Use ::before or ::after to add the separator, depending on whether your nav is left- or right-aligned.
Position the separator relative to its initial position such that it sits outside its list item.
Use padding on the opposite side of the list item to create the space for its adjacent list item's separator.
Set overflow: hidden; on the ul element so that any separators which fall outside the container are hidden.
Here it is in action:
ul {
font-size: 0;
overflow: hidden;
padding: 0;
}
li {
font-size: 16px;
display: inline-block;
margin: 0;
padding: 0;
color: gray;
position: relative;
padding-right: 2rem;
}
li::before {
content: "|";
position: relative;
left: -1rem;
font-weight: bold;
color: black;
}
<ul>
<li>Item 1</li>
<li>Another Item</li>
<li>This Is Nice</li>
<li>Another</li>
<li>And Another</li>
<li>And Yet Another</li>
</ul>
Below is a screenshot indicating the manner I intend on placing an image and text above a list.
my desired design
Below is my screenshot in terms of my misalignment problem.
my alignment problems
Below is the HTML for the image, the "FIRSTNAME SURNAME" text and the list below it:
<section class="vertical_menu_bar_section">
<div id="img_logged_in_user">
<img src="http://static3.depositphotos.com/1005574/205/v/950/depositphotos_2053115-Smile-button.jpg"
height="128" width="128" align="left" /><p>FIRSTNAME SURNAME</p>
</div>
<div id='vertical_menu'>
<ul>
<li><a href='#'><span>CALENDAR</span></a></li>
<li><a href='#'><span>TOTALS</span></a></li>
<li><a href='#'><span>OPTION 3</span></a></li>
<li><a href='#'><span>OPTION 4</span></a></li>
</ul>
</div>
<section>
Below is my CSS:
/* Section - Vertical menu bar */
.vertical_menu_bar_section {
color: #FFFFFF;
background: #FF0000;
font-family:'Trebuchet MS', Tahoma, Sans-serif;
clear: both;
margin: 0;
height: 100%;
}
#vertical_menu {
background: #FF00CC;
list-style: none;
margin: 0;
padding: 0;
width: 200px;
font-size: 20px;
font-family:'Trebuchet MS', Tahoma, Sans-serif;
clear: both;
}
#vertical_menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#vertical_menu li {
margin: 0;
padding: 0;
list-style: none;
}
#vertical_menu a {
background: #333;
border-bottom: 1px solid #393939;
color: #FFFFFF;
display: block;
margin: 0;
padding: 8px 12px;
text-decoration: none;
font-weight: normal;
}
#vertical_menu a:hover {
background: #2580a2 url("/public/images/hover.gif") left center no-repeat;
color: #fff;
padding-bottom: 8px;
}
/* */
#img_logged_in_user {
clear: both;
display: block;
float: left;
background: #2580a2;
}
Any ideas as to where I'm going wrong.
Thanks.
Please check if this is what you need
Fiddle
For the both Divs .img_logged_in_user and .vertical_menuI have introduced to a one common Div named as .basic_div The width in the Basic_div will affect the both and will be aligned
Also added a <span> so the user name wont get below the pic.
To keep the image and name aligned you should set the width property of the wrapping element (which is #img_logged_in_user):
#img_logged_in_user {
width: 250px;
}
Then set the image margin to add a spacing between them:
#img_logged_in_user > img {
margin-right: 20px;
}
See live example here: http://jsfiddle.net/cdog/sbu24c45/.
I have a pretty specific question: I'm building something like a simple flat table (I don't use table itself because of rounded borders issue).
I'm using unordered list here and the problem is that I can't figure out how to align items in the second column, taking into account that the content should be dynamic (e.g. changing numbers).
Here's the markup for one row:
<section class="ktbl_head">
<ul>
<li>VALUE</li>
<li>VALIDITY</li>
</ul>
</section>
<section class="ktbl_mid_wht">
<ul>
<li>500 units</li>
<li>15 days</li>
<button class="btn btn-sm getdramz pull-right">GET</button>
</ul>
</section>
And CSS:
.ktbl_head {
padding: 15px 0 0 0;
height: 100%;
background-color: #ebe7e7;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.ktbl_head ul li {
display: inline;
padding-right: 135px;
font-family: "Open Sans", sans-serif;
font-size: 14px;
font-weight: 300;
color: #888888;
}
.ktbl_mid_wht {
background-color: #ffffff;
height: 100%;
padding: 20px 0 0 0;
}
.ktbl_mid_wht ul li {
display: inline;
text-align: left;
padding-right: 90px;
font-family: "Open Sans", sans-serif;
font-size: 18px;
font-weight: 400;
color: #888888;
}
Thanks for your attention!
here is my implementation on aligning the table without the table tag:
HTML
<div class="container">
<section class="ktbl_head">
<ul>
<li>VALUE</li>
<li>VALIDITY</li>
</ul>
</section>
<section class="ktbl_mid_wht">
<ul>
<li>500 units</li>
<li>15 days</li>
<button class="btn btn-sm getdramz pull-right">GET</button>
</ul>
</section>
CSS
.container {
border-radius: 10px;
border: 1px solid rgb(200,200,200);
overflow: hidden;
}
section {
font-family: "Open Sans", sans-serif;
width: 100%;
}
section:nth-child(2n+1) {
background-color: #ebe7e7;
}
section ul {
padding: 0;
margin: 0;
height: 65px;
}
section ul li {
width: 45%;
line-height: 65px;
display: inline-block;
}
section ul li:first-child {
padding-left: 35px;
}
Result
Explanation
You see, in the HTML, I added a new div as a container to create the curved corner with border-radius (the overflow: hidden needs to be used so that the content is encapsulated by the container).
For the CSS, section maintains general property such as font-family. Furthermore, section:nth-child(2n+1) is used to create background-color every other element starting with 1st,3rd,5th,... element. The selectors section ul, section ul li, and section ul li:first-child are used to make the CSS selectors more semantic (it makes clean code and easy to maintain in the future). Please see the code below for the demo. Happy coding!
PLAYGROUND
Give all the li's a width in which all of the content-length will fit..
I am trying to get a left menu and a right banner and have them stay fixed in place when the centre panel scrolls text - the banner will have to be on top of the centre panel due to size - the colour scheme is white text on black background except for the menu which is an <ul> with its own colour scheme
I am rather new to css so may have already made a prat of myself - I have tried but currently the top right banner does stay fixed when scrolling but the text overlays it and the top left menu shoots off the screen
JS Fiddle
<head>
<style>
#container {
width:90%;
height 100%;
background-color:Black;
margin: 0 auto;
text- align: left;
}
#banner {
float: right;
background-color:black;
width:40%;
top:1;
right:1;
position:fixed
}
#sidebarmenu {
float: left;
width: 10%;
background-color:Black;
padding: 15px 10px 15px 20px;
top:1;
left:1;
position:fixed
}
#mainContent {
background-color: Black;
color:White;
position: absolute;
left: 120px;
width: 50%;
top:220;
margin: 0 0 0 15%;
}
body {
color: white;
background-color: black;
}
.sidebarmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
font: bold 13px Verdana;
width: 180px;
border-bottom: 1px solid #ccc;
}
.sidebarmenu ul li a {
display: block;
overflow: auto;
color: black;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}
.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active {
background-color: #c0c0c0;
}
.sidebarmenu ul li a:visited {
color: white;
}
.sidebarmenu ul li a:hover {
background-color: black;
color:red;
}
</style>
</head>
<body>
<div id="container">
<div id="banner" ><img style="float:right" alt="logo text" src="/banner.png" /></div>
<div id="mainContent" >TEXT</div>
<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li>Home</li>
<li>Info</li>
<li>Contact Us</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>Page 5</li>
<li>Page 6</li>
</ul>
</div>
</div>
</body>
any help /comments / guidance on what I should be learning /looking at is appreciated
Phew! Where to start? lol Your code needed to be fixed pretty much on every line. I have a reworked demo here but basically, you must pay attention to site architecture when you are positioning elements. Organization is everything is front end development.
See DEMO
First of all, once you start using position: absolute; or position: fixed;, using float and margin becomes irrelevant.
Also, when using top: x;, left: x;, right: x;, or bottom: x; always make sure to add a size unit to your value, i.e. top:1; should be top: 1px;
If I understood correctly from the css you posted, something that'll get you closer to what you want to achieve is this:
html,body{ margin: 0; padding: 0; color: #fff; background: #000; height: 100%; width: 100%; overflow: hidden; }
#container { width:100%; height: 100%; text-align: left; overflow: auto; border: 1px red solid;}
#mainContent { width: 90%; color: #fff; margin: 0 auto; }
#banner { background-color: #000; width:40%; top:1px; right:1px; position:fixed; }
#sidebarmenu { width: 10%; background: #000; padding: 15px 10px 15px 20px;top:1px;left:1px;position:fixed; }
Take a look at this jsfiddle I made to see what this css does: http://jsfiddle.net/beYuC/
NOTE: You might have noticed I made the html and body have a height of 100%. This is because unless you set a height for the html and body, any other element on the page you want to make 100% will simply be flattened out.
NOTE 2: Be sure to check out this website and its CSS for an example of a well done content container and sidebar menu with 100% height: http://www.jlescure.com/
I have a navigation that I have styled as I like, but there is a small flash as you go over the border, where the background hover effect still applies but the text color change does not. I have tried various ways of resizing the "a" element (which triggers the text change), and it always stays within the border area no matter how I resize it. I have also tried adding the color change to the li:hover section with no effect.
Here is the nav bar:
<div id="leftmenu">
<ul id="sidenav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
And this is the CSS (probably overly complex - I have tried lots of different things that didn't seem to make a difference and didn't remove them all):
#leftmenu{
float: left;
width: 300px;
margin: 10px 0 0 10px;
}
ul#sidenav{
list-style-type: none;
padding: 0;
margin: 0;
}
ul#sidenav li{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: solid medium #898E95;
border-radius: 5px;
text-align: center;
margin: 5px 0 5px 0;
background: #898E95;
font-size: 11pt;
}
ul#sidenav li a{
width: 295px;
text-align: center;
line-height: 25px;
text-shadow: 1px 1px 0px #283744;
text-decoration: none;
font-size: medium;
font-weight: bold;
color: #FFF;
display: block;
}
ul#sidenav li:hover{
background-color: #E5ECF9;
}
ul#sidenav li a:hover{
color: #5C5E64;
text-shadow: none;
}
#contentright{
margin-left: 320px;
padding: 0 20px 0 20px;
}
Thanks for any help you can provide - this is my first question, hopefully I asked it correctly!
http://jsfiddle.net/b8M6e/
The problem is created by this line
border: solid medium #898E95;
I just removed that line and it fixes the issue.
Also, by removing that line you'll notice it makes the menu items a little smaller than what you had. To fix that add the following line to the a- like so:
ul#sidenav li a {
padding: 4px;
}
updated fiddle http://jsfiddle.net/b8M6e/1/