I am having a problem with my css accordion menu...
I have creater a nice slider as shown here:
http://jsfiddle.net/LedZep257/hDzyH/1/
but the lis aren't spaced nicely meaning that some items are not appearing fully.
When I use inline-block, the spacing is right but it mucks up the entire slider:
http://jsfiddle.net/LedZep257/hDzyH/
Can anyone help/does anyone have any ideas how to fix this?
I think that you can not set a transition in diferent measures, and I think that "auto" an "%" are diferent measure, you can use only one measure to set the transition, if you are having too much troubles and you really need to get that done why dont you use another measure like "em" meaby that would fix it.
e.g.
.horizontalaccordion>ul>li
{
display: inline-block;
overflow: hidden;
float: left;
margin: 0;
padding: 0;
list-style: none;
width: 8em; /*I was here*/
height: 40px;
background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000));
transition: width 0.6s ease-in-out;
-moz-transition: width 0.6s ease-in-out;
-webkit-transition: width 0.6s ease-in-out;
-o-transition: width 0.6s ease-in-out;
}
.horizontalaccordion>ul>li>h3
{
display: inline-block;
float: left;
margin: 0;
padding: 10px;
padding-left:19px;
padding-right:18px;
height: 19px;
width: 8em; /*I was here*/
border-left: none;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
color: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));
white-space: nowrap;
filter: progid;
-ms-filter: progid;
}
.horizontalaccordion>ul>li:hover
{
overflow: hidden;
width: 60em; /*I was here, I just set 60em for example*/
}
.horizontalaccordion:hover li
{
width: 0em; /*I was here*/
}
Related
On (my site) I would like to place the menubar in the center of the page.
Here the code of my menubar:
#navigation {
padding-bottom: auto;
width: 960px;
margin: auto;
text-align: center;
text-transform: uppercase;
overflow: hidden;
font-family: 'Raleway', sans-serif;
font-size: 13px;
background-color: #DDDDDD;
border: 0px solid;
border-radius: 15px;
color: #000000;
display: inline-block;
}
Thanks in advance for helping me! :)
Add width: 100%; to your #navigation for a full-wdith centered menu.
Or change the display to block for a centered menu without a full-width background.
If you want to keep the yellow line under, add a 1px bottom margin. This will shift the rest one pixel lower and it will reveal a yellow line.
margin-bottom: 1px
Working JSFiddle for this: http://jsfiddle.net/qwnwkp7u/2/
Switch display: inline-block; to display: block;
I guess you need to understand something about block and inline-block elements.
Block elements , if sized and smaller than page/container can basicly; be centered with margin:auto;.
Inline-block element behaves like text and can follow text-align value.
To center your menu , you have then 2 options:
margin:auto; with a block formating, you need then just to remove your inline-block display wich does:
#navigation {
padding-bottom: auto;
width: 960px;
margin: auto;
text-align: center;
text-transform: uppercase;
overflow: hidden;
font-family: 'Raleway', sans-serif;
font-size: 13px;
background-color: #DDDDDD;
border: 0px solid;
border-radius: 15px;
color: #000000;
}
or
text-align:center; from its parent if as an inline boxe. Wich would be here :
.bg-wrapper {
text-align:center;
}
If inline-block was here used to trigger some special layout , like to hold floatting elements, you could here turn display:block into display:table;.
doei
I am trying to mimic the WinJS grouped list view using flexbox. I am getting close (I think) except that the columns overlap when resizing.
http://jsfiddle.net/w8ts4Lnx/5/
I want the items to stay inside the group and let the group grow horizontally.
body {
height: 100%;
display: flex;
flex-flow: column wrap;
}
h1 {
padding: 1em;
}
#content {
padding: 10px;
background-color: #eee;
display: flex;
flex-flow: row nowrap;
flex-grow: 1;
}
#content > .group {
margin: 10px;
padding: 10px;
border: 1px solid #cfcfcf;
background-color: #ddd;
display: flex;
flex-flow: column wrap;
max-height: 600px;
}
#content > .group .item {
margin: 10px;
padding: 10px;
background-color: #aaa;
width: 200px;
}
Any ideas what I'm missing?
If you don't want your content to overflow the container you must specify flex-shrink: 0;
flex-shrink source
This 'number' component sets flex-shrink longhand and specifies the flex shrink factor, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed. When omitted, it is set to 1. The flex shrink factor is multiplied by the flex basis when distributing negative space.
Im not sure what winJS behavior you're trying to mimic since i've never used winJS, however I think this is closer to the proper behavior you're looking to achieve: http://jsfiddle.net/w8ts4Lnx/11/
The columns overlap because the contents doesn't fit. The Items don't fit in the group, so they flow-over.
To solve this you have to specify an overflow-strategy for the group-div, with "overflow" like this (the last one):
#content > .group {
margin: 10px;
padding: 10px;
border: 1px solid #cfcfcf;
background-color: #ddd;
display: flex;
flex-flow: column wrap;
max-height: 600px;
overflow: hidden;
}
The default is visible which make them fall outside. Read more here: http://www.w3schools.com/cssref/pr_pos_overflow.asp
There are other options than hidden. You can set vertical/horizontal scroll, or both. Just choose whatever gets you closer to that desired "WinJS grouped list view". Try:
overflow-x: scroll;
overflow-y: auto;
or
overflow-y: auto;
overflow-x: scroll;
Happy coding!
I faced a similar issue and in my case the fix was removing the height setting on the container styling. This allowed the container size to grow with the changing browser heights.
"let the group grow horizontally"- You have to use the flex-direction as "row" on the .group, and you have to wrap the groups inside the #content, then it won't overlap anymore..
http://jsfiddle.net/gafcvq9b/2/
#content {
padding: 10px;
background-color: #eee;
display: flex;
flex-flow: row wrap;
flex-grow: 1;
}
#content > .group {
margin: 10px;
padding: 10px;
border: 1px solid #cfcfcf;
background-color: #ddd;
display: flex;
flex-flow: row wrap;
max-height: 600px;
}
I think it would be best not to set width since you want flexbox to dynamically determine it. so I removed it and then I added flex grow to increase the first group.
http://jsfiddle.net/mspriyakk/vv3tfrtv/3/
#content > .group:nth-of-type(1) {
flex-grow: 2;
}
#content > .group .item {
margin: 10px;
padding: 10px;
background-color: #aaa;
}
This is the correct answer that's fixes overlapping columns:
.flex-container {
display: flex;
flex-flow: column;
}
.flex-item {
flex: 1 0 auto;
}
It might be a little late, but I made a codepen, where I was working with this problem, maybe it will help to the people reading this question.
html
<body>
<div class="test-container">
<div class="item item1">
item1
</div>
<div class="item item2">
item2
</div>
<div class="item item3">
item3
</div>
</div>
</body>
css (scss)
.test-container {
display: flex;
justify-content: space-between;
height: 100%;
width: 50%;
background-color: red;
padding-left: 2rem;
.item {
opacity: 0.6;
height: 100px;
width: 100px;
flex-basis: 100px;
margin-left: -2rem;
}
.item1 {
background-color: cyan;
z-index: 10;
}
.item2 {
background-color: blue;
color: red;
z-index: 20;
}
.item3 {
background-color: black;
z-index: 30;
color: white;
}
}
https://codepen.io/Garma/pen/ZZmNWg?editors=1100
Cheers
How can i get my back to top button to stick to the side of the screen. So when i resize it, it will stay stuck to the left? Right now i have it in a container and it works well on smaller screens, but when i see it on a desktop it is in that container instead of all the way to the left of the screen.
#back-top {
position: relative;
z-index: 1000;
opacity: .7;
position: fixed;
bottom: 30px;
}
#back-top a {
width: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;
/* background color transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
}
/* arrow icon (span tag) */
#back-top span {
font-size: 8px !important;
width: 75px;
height: 75px;
display: block;
margin-bottom: 7px;
background: url(../img/weed2.png) no-repeat center center;
/* rounded corners */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/* background color transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
I have an OUTER div with two inner divs:
one of them is VERTICAL SIDEBAR whose content is fairly short
second one is div with MAIN PAGE whose content varies
They are both set to float: left, so they are next to each other.
I already learned that when setting height or min-height in percentage, all the parents need to have their height specified also.
I would like them both to be stretched to the end of the page. Havent managed to do that, problems begin when MAIN PAGE div is longer than monitor height( so there needs to be scrollbar), then I usually end with that nasty scrollbar inside MAIN PAGE div or I end with the SIDEBAR div being too short.
ok you should set the Outer divs css like so
.outer{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow:auto;
}
This will set the outer div to completely fill the window, with a side bar to scroll the length of the rest of the page. You would only have one main side scrollbar.
Now if you want the sidebar to just fill the page. set its css like so:
.sideBar{
position:absolute //can be relative if necesary.
top:0;
bottom:0;
overflow:none;
}
Now this sets the sidebar to the exact height of the outer div. so it will span the entire page and the overflow is set to none to ensure no scrollbar.
Now the outer div's and sidebar div's height should be dictated by the main div, and you should only have one clean scroll bar.
You could do something like this:
jsFiddle
Setting display: table-cell on both div's inside the outer div with display: table-row will ensure they are always the same height, you'll have to set display: table on body for this to work, or you could just set it directly on the outer div instead of table-row. That will work just fine. This approach should work on anything better than IE7.
CSS:
html {
position: absolute;
bottom: 0px;
top:0px;
left: 0px;
right: 0px;
overflow: scroll-x;
}
body {
height: 100%;
padding: 0px;
margin: 0px;
display: table;
}
.outer {
display: table-row;
height: 100%;
width: 100%;
}
.sidebar, .mainpage {
display: table-cell;
height: 100%;
}
.sidebar {
width: 200px;
background-color: #EFEFEF;
}
HTML
<div class="outer">
<div class="sidebar">sidebar</div>
<div class="mainpage">mainpage</div>
</div>
After seeing your site, this is the fix:
.Page {
width: 970px;
min-height: 100%;
width: 100%;
display: table;
}
.Sidebar {
width: 257px;
background: url(img/sidebar-bg.png) repeat-y;
margin-left: 23px;
background: white;
display: table-cell;
vertical-align: top;
}
.Sidebar-Nav {
padding-left: 15px;
}
.Content {
background: url(img/content-bg.png) repeat;
margin-left: 10px;
width: 680px;
float: left;
background: white;
display: table-cell;
padding: 10px;
}
EDIT: I forgot the .Page styles, I added it.
EDIT: Also, if you want to center it, then use this:
html, body {
height: 100%;
min-height: 100%;
padding: 0px;
margin: 0px;
}
body {
padding: 0px;
margin: 0px;
line-height: 21px;
background: url(img/bg-page-01.jpg) no-repeat;
background-position: 50% 0%;
}
.Page {
height: 100%;
display: table;
margin: 0 auto;
}
.Sidebar {
width: 257px;
height: 100%;
background: url(img/sidebar-bg.png) repeat-y;
background: white;
display: table-cell;
vertical-align: top;
}
.Sidebar-Nav {
padding-left: 15px;
}
.Content {
height: 100%;
background: url(img/content-bg.png) repeat;
margin-left: 10px;
width: 680px;
float: left;
background: white;
display: table-cell;
padding: 10px;
}
If your talking about height issues here, then use this:
html, body {
height: 100%;
min-height: 100% /* for firefox */
}
#main, #sidebar {
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-khtml-box-sizing: border-box;
box-sizing: border-box; /* eliminates increased height due to padding & child margins */
}
#sidebar { background: blue; width: 200px; float:left; margin: 0; }
#main { background: green; width: 960px; margin: 0 0 0 200px; }
edit: fiddle: http://jsfiddle.net/jTwqe/
I'm not really sure what your issue is, but is an alternate solution.
.outer { display: table; }
.sidebar, .main { display: table-cell; padding: 10px; }
.sidebar { background: green; }
.main { background: blue; }
Fiddle: http://jsfiddle.net/Q5CmR/
Could someone explain me what's going on with this small piece of HTML ?
http://jsbin.com/akome5
On most of current browsers (FF4, Chrome10, IE9, IE8, Opera 11), the layout of the element looks like this :
Meh?! I don't understand why ?!
Why aren't the height and width as big as the visible box (orange+red spaces) ?
Adding a "display:inline-block;" to the element doesn't seems to really fix it.
How can I fix it ?
Thx!!
Setting a width and height on an A tag
Try adding the following styles.
a.button {
display: block;
float: left;
overflow: auto;
}
a.button span {
display: block;
float: left;
}
I'd propose a different approach involving no spans
html:
<a class="button2" href="#">Text Text Text</a>
css:
/* Button 2 */
.button2 {
background-color:red;
border:solid 10px orange;
border-top:0;
border-bottom:0;
display:inline-block;
color:#fff;
font-family: Arial,Helvetica,sans-serif;
font-size:11px;
font-weight:bold;
line-height:30px;
text-decoration:none;
padding:0 3px;
}
old (top) new (bottom)
http://jsfiddle.net/pxfunc/vr7gJ/
For information I manage to do it without float:left, here is the whole CSS :
a.button{
display: inline-block; /* <- added */
text-decoration: none;
}
a.button span{
display: inline-block;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
font-weight: bold;
height: 30px;
line-height: 30px; /* <- added */
text-decoration: none;
}
a.button .left, a.button .right{
background-color: orange;
width: 10px;
}
a.button .text{
background-color: red;
color: white;
}
The line-height instruction was the key.