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!
Related
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/
When I changing the background of wrapper, is not changing, but when I changing the border,he is changing. I want my wrapper(content) to be transparent. I am using responsive theme in wordpress. This is my code:
#wrapper {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
background:transparent;
border: 4px solid #fffffff;
border-radius: 1px;
clear: both;
margin: 40px auto 40px auto;
padding: 0 20px 20px 20px;
position: relative;
Change background to:
background-color:transparent;
I am having an issue with a shadow displaying incorrectly in CSS. It is set to drop on on the bottom and to the right of the box but for whatever reason it is being cut off and I can't work out why.
JS Fiddle
http://jsfiddle.net/jyb5V/
#content {
padding: 0 270px 0 0;
margin-bottom: 50px;
height: 800px;
background-image: url("images/mainbg.jpg");
border:1px solid #000;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
box-shadow: 4px 4px 2px #000000;
}
Website
http://www.debbie.travismoore.co.uk/
Any help is appreciated,
Thanks
Remove overflow: hidden;
#container {
width: 100%;
float: left;
overflow: hidden; // remove this line
}
Demo
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
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 ?