First of all excuse me for explanation if I am not up to the mark, as this is my first post in this platform, Well, I am working on overlay where it has to be shown in right side of the page with given width of say 416px and 100vh of height, but things are getting cut if I do decrease the browser window and as I am decreasing the size of the browser window the button at bottom start appearing on content of overlay which has to remain at bottom even the height is getting decreased, here is the my code as below:
.advanced-overlay {
width: 100%;
min-height: 100vh;
background-color: rgba(35, 0, 18, 0.5);
position: fixed;
z-index: 100002;
top: -41px;
left: 0;
bottom: 0;
.advance-overlay-footer {
display:flex;
justify-content: space-between;
align-items:center;
position: fixed;
right: 24px;
width:156px;
bottom: 24px;
height:6%;
}
.advanced-overlay-content {
position: relative;
// min-height: 83vh;
width: 416px;
margin-top: 108px;
margin-left: auto;
margin-right: 6px;
opacity: 1;
z-index: 100004;
border-radius: 16px 16px 16px 16px;
background-color: #f5f4f6;
box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.07),
0 19px 18px 0 rgba(0, 0, 0, 0.05), 0 8px 12px 0 rgba(0, 0, 0, 0.05),
0 1px 5px 0 rgba(0, 0, 0, 0.04), 0 0 2px 0 rgba(0, 0, 0, 0.03);
.close-advance-overlay {
position: absolute;
background-color: #fff;
width: 110px;
height: 40px;
display: flex;
border-radius: 20px;
padding: 5px 22px;
top: -18px;
right: 155px;
opacity: 1;
cursor: pointer;
img {
height: 20px;
width: 20px;
align-self: center;
}
.button-text {
align-self: center;
margin-left: 5px;
font-weight: 600;
font-size: 16px;
color: #000000;
}
}
.advnaced-overlay-content-secion {
//min-height:89vh;
width: 100%;
bottom:10%;
// height:100vh;
.select-box {
margin-top: 40px;
margin-bottom: 40px;
}
.accordinan-filter {
margin-bottom: 24px;
}
.accordian-title {
font-weight: 900;
}
.accordian-content {
margin: 0;
font-size: 16px;
}
}
}
}
.is-maximum {
height: 73vh;
overflow-y: auto;
overflow-x: hidden;
&::-webkit-scrollbar {
width: 4px;
background-color: #fff;
}
&::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color: #d3d3d3;
}
}
<div class="advanced-overlay" v-if="toggleFilter">
<div class="advanced-overlay-content">
<div class="close-advance-overlay" #click="toggleAdvanceFilterOverlay">
<img class src="../assets/icons/close.svg" />
<span class="button-text">Close</span>
</div>
<div class="advnaced-overlay-content-secion is-maximum">
<div class="select-box"></div>
<div class="accordinan-filter"></div>
</div>
<div class="advance-overlay-footer">...two buttons</div>
</div>
</div>
So, I what I would like to achieve eventually is that, I want respsonsive overlay at right side of the browser window, provided if I am decreasing height of the browser the buttons at bottom should stay there (fixed position) and content should be within limit of .advnaced-overlay-content-secion
for a responsive design I recommend you to read into the use of grid and espacially for mobile designs also the use of #media breakpoints.
for having some thing to stick at the bottom simply use:
position: fixed;
bottom: 0;
Related
I'm trying to build a "block" on a website that contains a background image with lowered opacity, some text with regular opacity and a button with regular opacity
Currently, I'm getting the background image and text to work, but the button is stuck on the image's opacity (blends in with the background).
Here is the html:
h1,p {
text-align: center;
position:relative;
top:-70px;
position: relative;
color: navy;
}
.box1 {
width: 97.5%;
background-color: white;
position: relative;
padding-top: 200px;
padding-bottom: 200px;
padding-left: 30px;
padding-right: 30px;
margin-top: 20px;
margin-bottom: 10px;
margin-right: 1.25%;
margin-left: 1.25%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.box1::before {
content: "";
background-image: url(/static/background.jpeg);
background-size: contain;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
position: absolute;
opacity: 0.5;
}
.click {
color:rgba(0, 0, 0, 0.19)
}
<div class="box1">
<h1>Our Mission</h1>
<p>THe organization plans to complete tasks x, y, z</p>
<button class="click">Learn More</button>
</div>
Add position: relative to your .click class.
Side note: You have a duplicate position: relative in your h1, p selector.
I have trouble with vertical alignment of some google icons inside buttons. I tried to play with padding and margin but I could not fix the issue.
This is a screenshot of the problem: as you can see the icon are placed slightly higher:
This is part of the html, each button is more or less the same:
<div id="mainToolbar">
<button id="buttonPencil" data-tool="yes" data-type="draw" title="Use pencil" class="button" onclick="changeTool(0);">
<i class="material-icons">brush</i>
</button>
</div>
This is the css for the button:
.button {
margin: auto;
display: inline-block;
margin-top: 5px;
color: black;
border: 0px solid grey;
border-radius: 6px;
background-color: #EFEFEF;
text-align: center;
text-decoration: none;
cursor: pointer;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 4;
vertical-align: middle;
}
.button {
width: 50px;
height: 40px;
}
.button:hover {
background-color: #aaaaaa !important;
color: white !important;
}
And finally the css for the div:
#mainToolbar {
position: absolute;
top: 0px;
left: 0px;
height: 520px;
width: 60px;
z-index: 10;
text-align: center;
}
How can I put the icon right in the middle of the button (both vertically and horizontally)? Thanks.
You can use absolute positioning along with translate to position the icon right in the middle. Be sure to add a position:relative on the button so that the icon is positioned w.r.t to the button.
.button {
margin: auto;
display: inline-block;
margin-top: 5px;
color: black;
border: 0px solid grey;
border-radius: 6px;
background-color: #EFEFEF;
text-align: center;
text-decoration: none;
cursor: pointer;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 4;
vertical-align: middle;
}
.button {
width: 50px;
height: 40px;
position: relative;
}
.button:hover {
background-color: #aaaaaa !important;
color: white !important;
}
.button:active i{
/*for push effect on click*/
transform: translate(-45%, -45%);
}
.button i {
/*horizontal and vertical centering*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#mainToolbar {
position: absolute;
top: 0px;
left: 0px;
height: 520px;
width: 60px;
z-index: 10;
text-align: center;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<div id="mainToolbar">
<button id="buttonPencil" data-tool="yes" data-type="draw" title="Use pencil" class="button" onclick="changeTool(0);">
<i class="material-icons">brush</i>
</button>
</div>
To explain:
top:50% with a position: absolute will move the icon down 50% of the parent's height. A translateY with -50% will move the icon up by half its height so that its aligned right in the middle by its center. Similarly with horizontal centering.
Its Working Fine see snippet
.button {
margin: auto;
display: inline-block;
margin-top: 5px;
color: black;
border: 0px solid grey;
border-radius: 6px;
background-color: #EFEFEF;
text-align: center;
text-decoration: none;
cursor: pointer;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 4;
vertical-align: middle;
}
.button {
width: 50px;
height: 40px;
}
.button:hover {
background-color: #aaaaaa !important;
color: white !important;
}
And finally the css for the div:
#mainToolbar {
position: absolute;
top: 0px;
left: 0px;
height: 520px;
width: 60px;
z-index: 10;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="mainToolbar">
<button id="buttonPencil" data-tool="yes" data-type="draw" title="Use pencil" class="button" onclick="changeTool(0);">
<i class="fa fa-leaf"></i>
</button>
</div>
I have two questions...
How do I make the #LeftTable and drop-down menu to keep their position on the page, regardless of the window size?
As it is right now, it will move to be relative to the size of the window. I'd rather it stay in exactly the same place on the background picture (even if it means having scrolling bars at the bottom of the browser). How do I do this?
How do I get the HTML link to work within the button?
body {
background-color: gray;
background-image: url('images/backgroundpic.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
ul {
list-style-type: none;
position: fixed;
bottom: 0;
margin: 0;
padding: 0;
background-color: #333;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: #87cefa;
}
li.dropdown {
display: inline-block;
}
ul li {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
bottom: 30px;
left: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
input#gobutton {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) cursor: pointer;
padding: 5px 25px;
background: #87CEFA;
border: 1px solid #1E90FF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .75);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, .75);
box-shadow: 0 0 4px rgba(0, 0, 0, .75);
color: #f3f3f3;
font-size: 1.1em;
}
input#gobutton:hover,
input#gobutton:focus {
background-color: #000080;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .75);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, .75);
box-shadow: 0 0 1px rgba(0, 0, 0, .75);
}
#LeftTable {
position: absolute;
width: 25%;
min-width: 25%;
right: 75%;
left: 25%;
top: 25%;
bottom: 50%;
Right: 100px;
border: 1px;
color: black;
font-weight: bold;
background-color: white;
opacity: 0.5;
filter: alpha(opacity=50);
border: 1px solid black;
padding: 5px;
}
<table id = "LeftTable">
<tr>
<td width = "20%"></td>
<td width = "80%" id='test'>
<table>
<tr><td>Left</td></tr>
<tr><td>Left</td></tr>
</table>
</td>
</tr>
</table>
<table class="gobutton" align="center">
<tr>
<td>
<div class="b_left"></div>
<div class="b_middle">
<input id="gobutton" type="submit" value="LISTEN" />
<a href="http://www.google.com">
</a>
</div>
<div class="b_right"></div>
</div>
</td>
</tr>
</table>
For your link:
You link works however in your example it's trying to open in a frame so its failing. If you create a html file on your computer, or host the html on a site it should work. I tested this on my computer and the link does work like this:
<a href="http://www.google.com">
<input id="gobutton" type="submit" value="LISTEN" />
</a>
For your table
if you want the position to never change you should not use percentages you should use measurements like pixels.
so instead of
#LeftTable {
position: absolute;
width: 25%;
min-width: 25%;
right: 75%;
left: 25%;
top: 25%;
...
you would have something like:
#LeftTable {
position: absolute;
width: 25%;
min-width: 25%;
right: 50px; //in pixels
left: 50px; //in pixels
top: 50px; //in pixels
...
also you may have to wrap your tables in a div and apply the background to that if you want the image t move with the left table:
<div class="main">
//tables
</div>
.main{
background-image: url('imageurl');
width:100%;
height:100%;
position: absolute;
bottom: 0;
margin: 0;
}
here's an example: http://codepen.io/nilestanner/pen/EgNXwE
I have two DIVs inside each other. The inner DIV contains an image. I'm trying to add a floating text over that image in the top right corner. I can't figure out how to make that text to use inner DIV's positions instead of the outer one.
Here is what I got so far
CSS:
html {
background: #EEF0F3;
}
.outer {
background: #FFFFFF;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
margin: 0 auto;
padding:20px 0px;
position: relative;
width: 680px;
text-align: center;
margin-bottom: 20px;
}
.inner {
position: relative;
}
h2 {
position: absolute;
top: 0px;
right: 0px;
}
h2 span {
color: white;
font: bold 24px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgba(255, 0, 0, 0.5);
padding: 0px 10px;
}
HTML:
<div class="outer">
<div class="inner">
<h2><span>Title 1</span></h2>
<img src="1.jpg">
</div>
</div>
And here is the code in JSFiddle
http://jsfiddle.net/UM8ea/
If I set positioning to:
h2 {
position: absolute;
top: 20px;
right: -20px;
}
I get the desired result, but that feels like workaround rather than a solution.
Its very simple.
Check this fiddle
.outer {
background: #FFFFFF;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
margin: 0 auto;
padding:20px 0px;
position: relative;
width: 680px;
text-align: center;
margin-bottom: 20px;
}
for h2
h2
{
position: absolute;
top: 5px;
right: 20px;
margin:0;
}
You have this behaviour because .outer is wider than the image, and then, .inner too. The h2 is positioned related to .inner, and go to right.
If you set .outer to have 640px width (as the image) you get the desired result.
Other solution is to set margin: 0 20px; on .inner
If you want the text positioned all top the image you can set h2 {margin:0;} in both cases.
SOLVED:
I have a demo which works on jsFiddle, but the same one doesn't work on other site. You will see the .right_side_header class overflow onto the next line, which is under the main_container-->header--->class. Why is this so? It is 763px, I've double checked the pixels for every box, but it overflows. Can someone please tell me why? If you inspect the element, and uncheck the width of 763px, it doesn't overflow.
Here's the code for some of the header css:
.header {
display: block;
padding-top: 33px;
padding-left: 30px;
padding-right: 30px;
margin-left:auto;
margin-right:auto;
width: 900px;
}
.right_side_header {
display: inline-block;
vertical-align: top;
padding-top: 35px;
width: 763px;
}
img.globe {
display: inline;
}
#globe-logo {
display: inline;
position: relative;
z-index: 9000;
}
span.letter_logo {
font-family: HelveticaBlack;
font-size: 41px;
height: 41px;
line-height: 1;
margin-left: auto;
margin-right: auto;
text-align: center;
text-shadow: 1px 1px 0px rgba(245, 245, 245, 0.35), -1px -1px 0px rgba(245, 245, 245, 0.35);
}
div.letter_logo_container {
text-align: center;
display: block;
line-height: 1;
width: 621px;
}
and here is the code for the nav_bar css:
div.nav_phone {
height: 18px;
padding-top: 3px;
width: 621px;
display: inline-block;
}
span.sales_ph_num {
font-family: HelveticaItalic;
font-size: 11.5px;
color: #c10d24;
text-shadow: 1px 1px 0px rgba(245, 235, 236, 0.4), -1px -1px 0px rgba(245, 235, 236, 0.4);
}
div.sales_ph_num {
text-align: center;
display: inline-block;
vertical-align: top;
width: 110px;
}
.nav_bar {
background-image: url("132/nav_bar.png");
background-repeat: no-repeat;
height: 18px;
width: 621px;
position: relative;
}
div#links {
line-height: 1;
position: absolute;
top: 50%;
left: 119px;
margin: -6px auto 0 auto;
font: 12px HelveticaMedium;
text-align: center;
text-shadow: 1px 1px 0px rgba(237, 237, 237, 0.5), -1px -1px 0px rgba(237, 237, 237, 0.5);
}
#Products {
margin-left: 36px;
}
#Terms, #Terms_Nav {
margin-left: 36px;
}
a.Terms, a.Terms:visited, #Home a, #Home a:visited, a#About, a#About:visited,
#About a, #About a:visited {
text-decoration: none;
color: #000000;
cursor:pointer;
}
li#line_break {
margin-top: 12px;
}
#About {
text-decoration: none;
color: #000000;
margin-left: 36px;
margin-right: 35px;
}
and this is the main_body css:
html, body {
width: 100%;
height: 100%;
background-color: #fafafa;
-webkit-overflow-scrolling: touch;
position: relative;
overflow-x: hidden;
}
.main_container {
max-width: 960px;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
-webkit-border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
-o-border-radius: 8px 8px 8px 8px;
border-radius: 8px 8px 8px 8px;
position: absolute;
left: -9999em;
}
and theres a css that does a reset:
* {
margin: 0;
padding: 0;
}
Thank you for any help.
Remove the top: -61px; from div.ad_banner.
Also if you are having a loading screen I would recommend having some kind of simple animation just so it doesn't look like the page has died.
You have limited your right_side_header class to 763px, also your sales_ph_num class is limited to 110px.
But on jsfiddle you have set 900px and 137px respectevly.
Just set same values like you did on jsfiddle. =))
SOLUTION:
ok this issue was bugging me for awhile, and i don't understand why this is. i noticed some extra 1 or 2 pixels of whitespace between the sales_ph_num div and the nav_bar div, there shouldn't have been any. then i saw that i was using inline-block, searched on SO for inline-block and unaccounted whitespace, and there you go. i had used inline block with 2 or 3 divs, and it was adding extra whitespace, which was making the content overflow since every box had a width.
if you have two divs side by side, with one div as inline, and the other inline-block, and you place the div tags in html on separate lines, white space is added:
<div class="container_1000px">
<div class="container">
My content.
</div>
<div class="next_container">
Next content.
</div>
</div>
.container_1000px
{
width: 1000px;
}
.container
{
display: inline;
width:960px;
}
.next_container
{
display: inline-block
width: 40px;
}
this will overflow because extra whitespace is added between the inline and inline-blocked div.
the solution is to place each divs on one line.
<div class="container_1000px"><div class="container">My content.</div><div class="next_container">Next content.</div></div>
and no extra whitespace will be added. thanks again.
Can anyone explain to me why this happens and why it should/shouldn't?