I have a button spanning the right side of the window that will open a menu when clicked. When the scroll-bar appears on the page, however, the button nearly disappears behind it. My question is simply: how do I use CSS or JavaScript to take the scrollbar's width into consideration when calculating either the position or the width of the button? Thanks in advance.
HTML:
<body>
<div id='ui'>
<div id='menu' class='x'>
<div id='menuBtn'></div>
</div>
</div>
</body>
CSS:
#ui{
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
#menu{
float: right;
height: 100%;
width: 600px;
background-color: white;
border-bottom-left-radius: 15px;
border-top-left-radius: 15px;
transition: all .5s;
}
#menu.x{
margin-right: -595px;
box-shadow: 0px 0px 15px black;
}
#menu.x:hover{
margin-right: -575px;
box-shadow: 0px 0px 30px black;
}
#menu.o{
margin-right: 0px;
box-shadow: 0px 0px 45px black;
}
#menuBtn{
transition: all .5s;
background-color: red;
height: inherit;
width: 45px;
border-bottom-left-radius: 15px;
border-top-left-radius: 15px;
border-right: groove darkgray 5px;
border-left: groove darkgray 5px;
}
You can try this:-
#menuBtn{
transition: all .5s;
background-color: red;
height: inherit;
width: 45px;
border-bottom-left-radius: 15px;
border-top-left-radius: 15px;
border-right: groove darkgray 5px;
border-left: groove darkgray 5px;
position: absolute; // try with fixed
right: 0px;
}
Related
I'm fairly new to CSS and I was wondering how I would place a button on top of an object when hovered. Before hovering, I have this:
input[name=uh]~a:before {
display:block;
position: absolute;
top: 30px;
right: 0;
color:black;
z-index: 1;
border: solid 1px #5F99CF;
border-right:none;
text-align: center;
margin-left: -1px;
padding: 10px 0;
background-image: url(%%Black%%);
border-top: none;
border-right: none;
-moz-border-radius-bottomleft: 7px;
border-bottom-left-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
-webkit-transition: width 1s, height 1s; /* Safari */
transition: width 1s, height 1s;
width: 100%;
height: 66px;
}
And when I hover it, I want to have an image (on code below in "background-image property) on top that, and when clicked goes on a link. However, I have no idea how to do that. I currently have this on :hover. Any help would be awesome, thanks!
input[name=uh]~a:hover:before {
display:block;
position: absolute;
top: 30px;
right: 0;
z-index: 1;
border: solid 1px #5F99CF;
border-right:none;
font-size:15px;
line-height:15px;
color:#999;
text-align: center;
margin-left: -1px;
padding: 10px 0;
border-top: none;
border-right: none;
background-image: url(%%Battlecats-Menu%%),url(%%subredditrulesbutton%%),url(%%editflairbutton%%),url(%%eventdatabutton%%);
background-repeat: no-repeat, no-repeat, no-repeat;
background-size: 500px 300px, 500px 60px, 50px 60px ;
-moz-border-radius-bottomleft: 7px;
border-bottom-left-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
content: "No more battle cats until you finish your homework!";
background-color: #00ff00;
color:white;
text-decoration: none!important;
width: 500px;
height: 280px;
}
Below is the simple css code that I have created for you. I have added hover to the parent element of both object and the button.
I hope this will help you :)
.button{ display: none; }
.object-inner:hover > .button{ display: inline-block; }
<div class="object-inner">
Click
<div class="object">
I'm an object!
</div>
</div>
I want curves at the top left and top right corners of my div. I tried border-top-left-radius and border-top-right-radius but it doesn't seem to be working.
HTML:
<div id="trape"></div>
CSS:
#trape{
border-bottom: 100px solid red;
border-left: 0 solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
border-top-left-radius:5px;
border-top-right-radius:10px;
}
I want output something like shown in the below image
You can use border-top-left-radius and border-top-right-radius css like this :
#trape{
background-color: #E0E0E0;
border-left: 0 solid transparent;
border-top-left-radius: 2em;
border-top-right-radius: 10em;
height: 50px;
text-align: center;
line-height: 50px;
color: white;
width: 200px;
}
#trape{
background-color: #E0E0E0;
border-left: 0 solid transparent;
border-top-left-radius: 2em;
border-top-right-radius: 10em;
height: 50px;
text-align: center;
line-height: 50px;
color: white;
width: 200px;
}
<div id="trape">Abstract Murals</div>
Hope it helps :)
This will solve your problem..
.wrapper {
padding: 15px;
background: #f0f0f0;
}
.block {
width: 200px;
height: 80px;
padding: 25px;
background: #fff;
border-top-right-radius: 50px;
border-top-left-radius: 50px;
}
<div class="wrapper">
<div class="block">
Your content goes here
</div>
</div>
I'm banging my head against the wall trying to understand why my image is not moving into the div that I'm specifying, but rather straddles the lower border. I don't see any styling conflicts in looking over the elements with Firebug. I'll also throw out that my CSS position skills are not anywhere near where I would like them.
I want to place the image to the left of the text. So what am I doing wrong?
My html:
...
<div id="container">
<div class="header">
<h1 id="mgtitle">Pierce County, Washington<br/>
Master Gardener Foundation</h1>
<img src="images/flower-1.jpg" height="75" id="hdr-img" />
</div>
<div class="mainbody">
<div id="menu">
<ul> ...
My CSS:
#container {
width: 900px;
// max-height: 750px;
margin: 10px auto;
border: 1px solid #fff;
background-color: #ffffff;
box-shadow: 0px 2px 7px #292929;
-moz-box-shadow: 0px 2px 7px #292929;
-webkit-box-shadow: 0px 2px 7px #292929;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.header {
height: 130px;
border: 1px solid black;;
background-color: #ffffff;
background-image: url("http://www.pc-wa-mg-conf.org/images/Flower-Backgrounds-8- scaled.jpg");
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
text-align:center;
}
#hdr-img {
position: relative;
display: block;
margin-top: 0%;
margin-left: 0;
/* margin-right: auto; */
/*z-index: 1;*/
}
#mgtitle {
font-family: 'Great Vibes', cursive;
font-size: 2.5em;
}
First, you need to move the image above the <h1> in the code in order to place it on the left:
<div class="header">
<img src="images/flower-1.jpg" height="75" id="hdr-img" />
<h1 id="mgtitle">Pierce County, Washington<br/>
Master Gardener Foundation</h1>
</div>
Then, change display: block of #hdr-img to display: inline-block.
Finally, add display: inline-block to a new h1 CSS class:
h1 {
display: inline-block;
}
Fiddle: http://jsfiddle.net/hxX6u/1/
You need to change the image to display:inline-block because if it is display:block it will be pushed onto its own line. Also, you need to put the image inside the <h1> tag, since the <h1> is set to display:block otherwise it will push the image to its own line. After those changes, the only problem is the height you have set on the header. You can shrink the contents and make them fit in the header, by changing the line-height or shrinking the image, etc. I took the height off of the header to allow it to adjust according to the height of its contents.
CSS:
#container {
width: 900px;
// max-height: 750px;
margin: 10px auto;
border: 1px solid #fff;
background-color: #ffffff;
box-shadow: 0px 2px 7px #292929;
-moz-box-shadow: 0px 2px 7px #292929;
-webkit-box-shadow: 0px 2px 7px #292929;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.header {
border: 1px solid black;;
background-color: #ffffff;
background-image: url("http://www.pc-wa-mg-conf.org/images/Flower-Backgrounds-8- scaled.jpg");
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
text-align:center;
}
#hdr-img {
position: relative;
display: inline-block;
margin-top: 0%;
margin-left: 0;
/* margin-right: auto; */
/*z-index: 1;*/
}
#mgtitle {
font-family: 'Great Vibes', cursive;
font-size: 2.5em;
}
http://jsfiddle.net/NABjE/
I ave a div that popups up over my input boxes (javascrip auto complete). The div currently pops up behind the input boxes, how can I have this appear ontop?
screenshot of issue:
CSS Code is:
body {
font-family: Helvetica;
font-size: 11px;
color: #000;
}
h3 {
margin: 0px;
padding: 0px;
}
.suggestionsBox {
position: absolute;
left: 30px;
margin: 10px 0px 0px 0px;
width: 200px;
background-color: #000;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
color: #fff;
}
.suggestionList {
margin: 0px;
padding: 0px;
}
.suggestionList li {
margin: 0px 0px 3px 0px;
padding: 3px;
cursor: pointer;
}
.suggestionList li:hover {
background-color: #659CD8;
}
HTML Code is:
<div>
<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
</div>
Thanks as always for the help,
Try using z-index property on .suggestionsBox
.suggestionsBox {
position: absolute;
left: 30px;
margin: 10px 0px 0px 0px;
width: 200px;
background-color: #000;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
color: #fff;
z-index: 999; <------ Here
}
Set the z-index property.
.suggestionsBox {
position: absolute;
left: 30px;
margin: 10px 0px 0px 0px;
width: 200px;
background-color: #000;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
color: #fff;
z-index: 100;
}
I have two divs which should looks like one figure. The problem is with the border of the circular block. See pic. below. css were added below
#nameWidgeteMain {
width: 279px;
height: 400px;
top: 0px;
position: absolute;
background-color: rgb(237,237,237);
border: 1px solid #dbe0e3;
box-shadow: 0 0 20px rgba(0,0,0,0.08)
}
.nameWidgeteCloseArea {
position: absolute;
width: 22px;
height: 31px;
top: 7px;
left: 270px;
background-color: rgb(237,237,237);
color: white;
border: 1px solid #dbe0e3;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
text-align: center;
}
#nameWidgeteCloseTitle {
padding-top: 5px;
left: auto;
font-family: sans-serif;
font-size: 12pt;
color: rgb(158, 158, 158);
}
Maybe try something like this: http://jsfiddle.net/VNAZA/
Uses two divs: one with just the border, which gets layered under the rectangle and another with the actual content, layering over the rectangle. This way you can also apply css box-shadow to the lower div.
.container{
position:relative;
width: 50px;
height: 150px;
}
.rect{
position:absolute;
width: 50px;
height: 150px;
background: #eee;
border: 1px solid #000;
z-index: 5;
-webkit-box-shadow: 2px 2px 10px 2px #cccccc;
box-shadow: 2px 2px 10px 2px #cccccc;
}
.round_content{
position: absolute;
top: 50px;
right: -25px;
width: 50px;
line-height: 50px;
background: #eee;
z-index: 6;
text-align:center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.round_border{
position: absolute;
top: 49px;
right: -26px;
width: 52px;
height: 50px;
line-height: 52px;
border: 1px solid #000;
z-index: 4;
text-align: center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 2px 2px 10px 2px #cccccc;
box-shadow: 2px 2px 10px 2px #cccccc;
}
<div class="container">
<div class="rect"></div>
<div class="round_content">x</div>
<div class="round_border"></div>
</div>
This is not possible with CSS.
Solution A) involves graphics used as background and solution B) uses a layer behind the vertical bar to draw the oval, a second layer for the bar itself and a third DIV for the X and it's link.
Use z-index property.
#nameWidgeteMain, #nameWidgeteMain2 {
width: 279px;
height: 400px;
top: 0px;
position: absolute;
background-color: rgb(237,237,237);
box-shadow: 0 0 20px rgba(0,0,0,0.08)
}
#nameWidgeteMain2 {
z-index: -2;
border: 1px solid #dbe0e3;
}
.nameWidgeteCloseArea {
z-index: -1;
...
}
This is not merging but the result is the same.