my code is as follows:
#under {
width: 100%;
height: 50px;
background-color: #D4D4D4;
border: none;
-webkit-box-shadow: inset 0px 0px 4px 0px #000000;
-moz-box-shadow: inset 0px 0px 4px 0px #000000;
box-shadow: inset 0px 0px 4px 0px #000000;
overflow-x: scroll;
white-space: nowrap;
}
#under ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#under ul li {
min-width: 100px;
height: 40px;
margin-top: 10px;
margin-left: 10px;
float: left;
background-color: #999;
display: block;
}
Basically, I have the #under div with li elements inside of it. I want them to 'overflow' the container so that it can scroll on the X-axis, but I cannot for the life of me figure out how to do this!
It will make the li elements display under each other.
Any help is appreciated, thanks!
EDIT: Live Example https://babblebox.me/mobile/
they are still under because it's floating, and because width:100% it's resizing to available size of screen not div.
Basically i think you should add to ul some width
i mean:
#under ul {
list-style: none;
margin: 0px;
padding: 0px;
width: 8000px;
}
You can always scroll the immediate children of an element. You can either make a really wide <ul> as Kokers said or, as I would do it, make apply the scrolling styling on the <ul>.
#under {
width: 100%;
height: 50px;
background-color: #D4D4D4;
border: none;
-webkit-box-shadow: inset 0px 0px 4px 0px #000000;
-moz-box-shadow: inset 0px 0px 4px 0px #000000;
box-shadow: inset 0px 0px 4px 0px #000000;
}
#under ul {
list-style: none;
margin: 0px;
padding: 0px;
overflow-x: scroll;
white-space: nowrap;
}
#under ul li {
min-width: 100px;
height: 40px;
margin-top: 10px;
margin-left: 10px;
background-color: #999;
display: inline-block;
}
*Note: I changed in float: left; display: block to display: inline-block in #under ul li
here you can see it in action: http://jsfiddle.net/rvt5N/
you have make width of #under to less than it is,
than your overflow works and give width in pixel...
try overflow: auto; in #under ?
Related
I've created this CSS code to give me 3 responsive columns, but.. in mobile are sick and Ipad too.
Anyway, my real question is:
1 How to put the 3 rows with auto fit. Because they are all with the same AUTO SIZE.
When none of the boxes contain any content I would like the grid to look small and not BIG.
.pagewrap {
*background: #6B949F;
display: grid;
grid-template-columns:210px 850px 210px;
grid-template-rows: auto auto auto;
grid-gap: 10px;
justify-content: center;
}
.content {
text-align: left;
background: #1C1C1C;
box-shadow:0 6px 6px -6px #000;
border-radius: 3px;
}
.content ul li {
width: 190px;
padding:5px 10px;
background:none;
text-transform: none;
}
.content ul li a {
display: block;
padding:0 15px 0;
color:#BDBDBD;
background:transparent;
font-size: 15px;
transition: all 0.35s ease;
}
.content ul li a:hover {
background:#424242;
border-radius: 1px;
color:#fff;
}
.middle {
margin: 0;
padding: 8px;
text-align: center;
background: #E6E6E6;
box-shadow:0 6px 6px -6px #000;
border-radius: 3px;
}
.sidebar {
padding: 8px;
text-align: center;
background: #1C1C1C;
box-shadow:0 6px 6px -6px #000;
border-radius: 3px;
color:#BDBDBD;
}
I want boxes like this.
https://i.stack.imgur.com/iLhJE.png
try d-flex and justify-content-between.
d-flex will align them into one row and justify-content-between will align them like this: |right center left|
I'm having issues with getting this code player in progress to look proper:
http://invigorateme.net/viperbox.html
When I hover over a list item (the list items are the four tabs on top), the background changes, but it doesn't fill the space for the two on the sides. I was trying to learn from another source code, but I just couldn't get the tweaking quite right, and am still having issues.
The Question: How can I make it so when you hover over a list item, the background changes and fits the background?
If you go to my site link, you'll see what I mean when you hover over one of these elements. It simply changes color, but not as I expected.
Here's the relevant CSS behind it, let me know if it's horrendous and what I can do better, I'm still learning:
#codetabs{
width: 197px;
height: 30px;
position: relative;
top: 8px;
background-color: white;
border: 2px solid #B7B7B7;
border-radius: 10px;
margin: 0px auto;
padding: 0;
}
#codetabs ul{
height: 50px;
position: relative;
margin: 0px auto;
padding-left: 5px;
}
#codetabs li{
text-align: center;
float: left;
height: 23px;
list-style: none;
margin: 0px;
padding: 7px 5px 0px 5px;
border-right: 2px solid #B7B7B7;
}
#codetabs li:hover{
background-color: grey;
}
If anyone thinks I might have left out any important code or info, let me know that as well. I didn't believe the HTML was necessary.
Basically your problem is that your list items are all rectangles that are contained in a pill shaped box (id="codetabs"). If you want the background color to fill each button, you're going to need to use some pseudo classes (:first-child and :last-child) to specify border radius values on your first and last li items.
This is the working CSS:
#codetabs{
width: 197px;
height: 30px;
position: relative;
top: 8px;
background-color: white;
margin: 0 auto;
padding: 0;
}
#codetabs ul{
height: 50px;
position: relative;
margin: 0 auto;
padding-left: 5px;
}
#codetabs li{
text-align: center;
float: left;
height: 23px;
list-style: none;
margin: 0;
padding: 7px 5px 0px 5px;
border-width: 2px 2px 2px 0;
border-color: #B7B7B7;
border-style: solid;
}
#codetabs ul :first-child {
border-radius: 10px 0 0 10px;
border-left-width: 2px;
}
#codetabs ul :last-child {
border-radius: 0 10px 10px 0;
}
#codetabs li:hover{
background-color: grey;
}
http://jsfiddle.net/d09xgfzc/1/
I have a fiddle here:
http://jsfiddle.net/45jQm/6/
How do I get the logo portion to be curved also without specifying? Seems this should be possible. Here is the code...
#wrapper {
position: relative;
background-color:rgba(255,255,255,0.5);
width:200px;
min-height: 985px;
margin: 0 auto;
margin-top: 10px;
margin-bottom: 20px;
box-shadow: 10px 0px 10px -7px #333, -10px 0px 10px -7px #333;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}
.logo {
position: static;
background-color:rgba(0,0,102,0.7);
padding-top: 10px;
}
.logo {
....
border-radius: inherit;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
http://jsfiddle.net/45jQm/11/
Adding the overflow:hidden to the parent div should hide the corners from any child div. No need to add any css to the child div (like the logo in your example).
.parent {
…
border-radius: 5px %* or whatever you choose *%
overflow: hidden;
}
an example: https://jsfiddle.net/uxrzgojh/
This answer is for the future explorers!
I have a horizontal drop down CSS menu at http://www.stevemoorecpa.dreamhosters.com/
My problem is the menu width extends outside the site's wrapper and I cannot get it to hide.
How do you prevent the element from going outside the site wrapper? Here is the code for the wrapper...
#wrapperSkm {
border-left-style: solid;
border-right-style:solid;
border-width: 2px;
border-color: transparent;
-moz-box-shadow: 0px 0px 25px #c3c3c3;
-webkit-box-shadow: 0px 0px 25px #c3c3c3;
box-shadow: 0px 0px 25px #c3c3c3;
width:1069px;
overflow: hidden;
padding: 0 0px 0 0px;
margin-left: auto;
margin-right: auto;
background:url(images/line1Right.png) repeat-x right 134px;
}
And here is the code for the horizontal sub-menu navigation
#access ul ul {
display: none;
float: right;
margin: 0;
position: absolute;
top: 181px;
left: 0;
width:100%;
background:#fff url(images/line1Nav.png) repeat-x bottom;
z-index: 99999;
text-align:center;
}
I've been working at this all day and nothing will get the menu to hide it's overflow outside the main site wrapper.
All help is appreciated.
HI now add position relative in your wrapperSkm ID
as like this
#wrapperSkm{
position: relative;
}
result is
I am experiencing issues with floating divs in IE9. The second div (after having added borders) seems like it is split into two, though it is one div with a header tag and an unordered list. The header tag displays correctly, while the list is pushed below the first div and the other divs then float next to the list. If I removed the div containing the list, the same thing happens with the next div; header displays correct, but the images are pushed below the first div. Have a look at the site: http://www.greenhomesofmaine.com/ scroll down to the footer. IE9 is the only browser causing this mal-alignment of divs.
CSS:
#footertopbg {
display: block;
background: #333333;
width: 980px;
margin: 10px auto 0px;
padding: 0px 0px 0px 0px;
border-top: 5px solid #222222;
}
#footertop {
float: left;
display: block;
line-height: 16px;
background: #333333;
width: 980px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#footertop h4 {
color: #FFFFFF;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: normal;
letter-spacing: -0.2px;
margin: 0px 0px 10px 0px;
padding: 20px 0px 5px 0px;
text-decoration: none;
border-bottom: none;
}
#footertop li {
text-decoration: none;
list-style-type: none;
}
#footertop li a, #footertop li a:link, #footertop li a:visited {
color: #CCCCCC;
font-weight: normal;
text-decoration: none;
}
#footertop ul {
list-style-type: none;
margin: 0px;
padding: 0px 0px 10px 0px;
}
#footertop ul ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#footertop ul li {
list-style-type: none;
margin: 0px 0px 8px 0px;
padding: 0px;
}
#footertop ul li {
display: inline;
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px;
}
#footertop ul li a {
background: none;
display: block;
padding: 5px 7px 3px 7px;
margin: 0px 0px 8px 0px;
border-left: 5px solid #333333;
}
#footertop ul li a:hover {
background: none;
color: #FFFFFF;
display: block;
padding: 5px 7px 3px 7px;
border-left: 5px solid #0099CC;
}
#footertop .textwidget {
color: #CCCCCC;
line-height: 18px;
}
.footertopleft {
width: 170px;
float: left;
display: inline;
margin: 0px 10px 0px 15px;
padding: 0px 0px 0px 0px;
}
.footertopmidleft {
width: 170px;
float: left;
display: inline;
margin: 0px 10px 0px 10px;
padding: 0px 0px 0px 0px;
}
.footertopmid {
width: 170px;
float: left;
display: inline;
margin: 0px 10px 0px 10px;
padding: 0px 0px 0px 0px;
}
.footertopmidright {
width: 170px;
float: left;
display: inline;
margin: 0px 10px 0px 10px;
padding: 0px 0px 0px 0px;
}
.footertopright {
width: 170px;
float: right;
display: inline;
margin: 0px 15px 0px 10px;
padding: 0px 0px 0px 0px;
}
I have never encountered an issue like this and any help would be appreciated.
Try using IE9 in compatibility mode. For whatever reason there is that option and many times that's the only way to fix stupid issues that are only pertinent to IE9.