I am making buttons on a page that look like app icons, i have put divs in a table to organise them, inside the div i want to put an image like a little icon and then text underneath but when i add the image the div changes size and messes with the table that its in.
The table is in a div that is called container that is set to 100% width and height of the screen
This is what i want it to look like but with an image above the text
This is what happens when i add the image
/* The table for the navigation buttons */
table#buttonTable {
position: relative;
margin: 7.5% auto 0 auto;
width: 90%;
height: 68%;
padding: 0;
background-color: #444;
border-radius: 25px;
}
/* The navigation buttons */
div.navigationButtons {
position: relative;
background-color: #282828;
width: 55%;
height: 55%;
margin: 0;
padding: 0;
border-radius: 25px;
box-shadow: 0 0 20px #1C1C1C inset;
-webkit-box-shadow: 0 0 20px #1C1C1C inset;
-moz-box-shadow: 0 0 20px #1C1C1C inset;
-ms-box-shadow: 0 0 20px #1C1C1C inset;
}
img#calcImg {
position: relative;
width: 20%;
height: auto;
vertical-align: top;
}
/* Text in the navigation buttons */
p.navButtonsText {
position: relative;
color: #008080;
margin: 0;
padding: 0;
top: 75%;
font-size: 200%;
}
<table id="buttonTable">
<tr>
<td align="center">
<div onclick="window.location = 'calculators.html';" id="calculatorsButton" class="navigationButtons">
<img src="images/tealCalculator.png" id="calcImg" />
<p class="navButtonsText">Calculators</p>
</div>
</td>
<td align="center">
<div onclick="window.location = 'setupTips.html';" id="setupTipsButton" class="navigationButtons">
<p class="navButtonsText">Setup Tips</p>
</div>
</td>
</tr>
</table>
/* The table for the navigation buttons */
table#buttonTable {
position: relative;
margin: 7.5% auto 0 auto;
width: 90%;
height: 68%;
padding: 0;
background-color: #444;
border-radius: 25px;
}
/* The navigation buttons */
div.navigationButtons {
position: relative;
background-color: #282828;
width: 45%;
height: auto;
margin: 0;
padding: 0;
border-radius: 25px;
box-shadow: 0 0 20px #1C1C1C inset;
-webkit-box-shadow: 0 0 20px #1C1C1C inset;
-moz-box-shadow: 0 0 20px #1C1C1C inset;
-ms-box-shadow: 0 0 20px #1C1C1C inset;
}
img#calcImg {
position: relative;
width: 65%;
height: auto;
vertical-align: middle;
}
/* Text in the navigation buttons */
p.navButtonsText {
position: relative;
color: #008080;
margin: 0;
padding: 0;
font-size: 120%;
}
table tr td {
width: 200px;
height: 230px;
}
<table id="buttonTable">
<tr>
<td align="center">
<div onclick="window.location = 'calculators.html';" id="calculatorsButton" class="navigationButtons">
<img src="http://icons.iconarchive.com/icons/igh0zt/ios7-style-metro-ui/256/MetroUI-Apps-Mac-App-Store-icon.png" id="calcImg" />
<p class="navButtonsText">Calculators</p>
</div>
</td>
<td align="center">
<div onclick="window.location = 'setupTips.html';" id="setupTipsButton" class="navigationButtons">
<img src="http://icons.iconarchive.com/icons/igh0zt/ios7-style-metro-ui/256/MetroUI-Apps-Mac-App-Store-icon.png" id="calcImg" />
<p class="navButtonsText">Setup Tips</p>
</div>
</td>
</tr>
</table>
Related
I am working with this UI design, where I created an avatar image and also an upload button. My challenge is positioning the upload button on the image as shown below
expectation
but this is what I came up with
document.querySelector('#btnOpenFileDialog').addEventListener('click', function() {
document.querySelector('#fileLoader').click();
});
.image-cropper {
display: inline-block;
border-radius: 50%;
border: 1px solid #f2f2f2;
overflow: hidden;
}
img {
max-width: 100%;
height: auto;
}
.edit-img-btn {
position: absolute;
color: white;
font-size: .5rem;
width: 22px;
height: 22px;
padding: 5px;
border: 0;
border-radius: 50%;
background: #4169E2;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.21);
}
.edit-img-btn i {
font-size: 13px;
}
<span class="image-cropper" style=" width: 150px; height: 150px;">
<img src="assets/images/avatar.jpg" alt="">
</span>
<input type="file" id="fileLoader" style="display: none;" />
<button class="edit-img-btn" id="btnOpenFileDialog"><i class="material-icons">edit</i></button>
If you place all of it inside of an inline block element with position: relative you can adjust the position to fit your needs. Below is an example.
document.querySelector('#btnOpenFileDialog').addEventListener('click', function() {
document.querySelector('#fileLoader').click();
});
/*wrapper with position: relative */
.image-wrapper {
position: relative;
}
.image-cropper {
display: inline-block;
border-radius: 50%;
border: 1px solid #f2f2f2;
overflow: hidden;
}
img {
max-width: 100%;
height: auto;
}
.edit-img-btn {
position: absolute;
bottom: 5px; /* 5px up from the bottom */
right: 35px; /* 35px in from the right */
color: white;
font-size: .5rem;
width: 22px;
height: 22px;
padding: 5px;
border: 0;
border-radius: 50%;
background: #4169E2;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.21);
}
.edit-img-btn i {
font-size: 13px;
}
<span class="image-wrapper">
<span class="image-cropper" style=" width: 150px; height: 150px;">
<img src="https://via.placeholder.com/150" alt="">
</span>
<button class="edit-img-btn" id="btnOpenFileDialog"><i class="material-icons">edit</i></button>
<input type="file" id="fileLoader" style="display: none;" />
</span>
Add css properties top: 134px; and left: 134px; to class .edit-img-btn
document.querySelector('#btnOpenFileDialog').addEventListener('click', function() {
document.querySelector('#fileLoader').click();
});
.image-cropper {
display: inline-block;
border-radius: 50%;
border: 1px solid #f2f2f2;
overflow: hidden;
}
img {
max-width: 100%;
height: auto;
}
.edit-img-btn {
position: absolute;
top: 134px;
left: 134px;
color: white;
font-size: .5rem;
width: 22px;
height: 22px;
padding: 5px;
border: 0;
border-radius: 50%;
background: #4169E2;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.21);
}
.edit-img-btn i {
font-size: 13px;
}
<span class="image-cropper" style=" width: 150px; height: 150px;">
<img src="assets/images/avatar.jpg" alt="">
</span>
<input type="file" id="fileLoader" style="display: none;" />
<button class="edit-img-btn" id="btnOpenFileDialog"><i class="material-icons">edit</i></button>
Within my index.html, I have created the following div, which is located within the center tag.
<div class="container">
<div class="bar">
<span class="bar-fill"></span>
</div>
</div>
This looks like this on the page: [Progress Bar Image]1
I would like the blue bar, to be positioned to the left of this container.
Below is my CSS:
/* Progress Bar */
.container {
width: 400px;
}
.bar {
width: 100%;
background: #eee;
padding: 3px;
border-radius: 3px;
box-shadow: inset 0px 1px 3px rgba(0,0,0,.2);
}
.bar-fill {
height: 20px;
display: block;
background: cornflowerblue;
width: 80%;
border-radius: 3px;
}
Once again, I would like the blue bar (div labelled bar or bar fill) to be positioned to the left inside the container.
Thanks.
Simply add margin-left: 0px; to .bar-fill
.container {
width: 400px;
}
.bar {
width: 100%;
background: #eee;
padding: 3px;
border-radius: 3px;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, .2);
}
.bar-fill {
height: 20px;
display: block;
margin-left: 0px;
background: cornflowerblue;
width: 80%;
border-radius: 3px;
}
<div class="container">
<div class="bar">
<span class="bar-fill"></span>
</div>
</div>
The element is already left based on the code provided.
There is no center tag in your HTML and, in any event, the tag has been deprecated and should no longer be used.
.container {
width: 400px;
margin:auto; /* center the container */
}
.bar {
width: 100%;
background: #eee;
padding: 3px;
border-radius: 3px;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, .2);
}
.bar-fill {
height: 20px;
display: block;
background: cornflowerblue;
width: 80%;
border-radius: 3px;
}
<div class="container">
<div class="bar">
<span class="bar-fill"></span>
</div>
</div>
If the container div is inside a <center> tag which cannot be removed then setting the text-align of the tag to left should have the desired effect.
JSFiddle Demo
This is my button code:
.info_button {
width: 220px;
height: 300px;
position: absolute;
overflow: hidden;
margin-right: 0;
border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
-webkit-border-radius: 10px;
background: url(http://i.imgur.com/DkdX4Ci.jpg);
background-repeat: no-repeat;
background-position: 0 0;
box-shadow: 3px 3px 20px #363024;
}
.info_button > header {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px 10px;
background: inherit;
background-attachment: fixed;
overflow: hidden;
}
.info_button > header::before {
content: "";
position: absolute;
top: -20px;
left: 0;
width: 100%;
background: inherit;
background-attachment: fixed;
-webkit-filter: blur(4px);
filter: blur(4px);
}
.info_button > header::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5)
}
.info_button > header p a {
margin: 0;
color: white;
position: relative;
z-index: 0;
}
.info_button:hover{
box-shadow: 1px 1px 5px #363024;
-webkit-box-shadow: 1px 1px 5px #363024;
-moz-box-shadow: 1px 1px 5px #363024;
position:relative;
top:7px;
margin: 0;
}
This is my html:
<div class="info_button" style="position:absolute; left:190px; top:25px;">
<header>
<p><span id="info_button"> BoilerPlate of my Mansion</span></p>
</header>
</div>
This is fiddle for my work:
http://jsfiddle.net/veniarya/ygosqouh/
The button functions exactly like I want it to be, but does not link to hyperlink when clicked. Please let me know if I am missing on something or need to add something.
Thanks.
The problem was you z-index on the anchor tag was set to 0; Once you change it to a positive z-index i.e 100 the link is now clickable.
.info_button > header p a {
margin: 0;
color: white;
position: relative;
z-index: 100;
}
As for making the entire button clickable you would have to modify the HTML like this:
<a href="https://www.google.com" target="_blank">
<div class="info_button" style="position:relative; left:190px; top:25px;">
<header>
<p><span id="info_button">
BoilerPlate of my Mansion</span></p>
</header>
</div>
</a>
Why don't you just do
<img src="...">
So the Answer for my question came from #Donte'Trumble.
CSS code:
.info_button {
width: 220px;
height: 300px;
position: absolute;
overflow: hidden;
margin-right: 0;
border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
-webkit-border-radius: 10px;
background: url(http://i.imgur.com/DkdX4Ci.jpg);
background-repeat: no-repeat;
background-position: 0 0;
box-shadow: 3px 3px 20px #363024;
}
.info_button > header {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px 10px;
background: inherit;
background-attachment: fixed;
overflow: hidden;
}
.info_button > header1::before {
content: "";
position: absolute;
top: -20px;
left: 0;
width: 100%;
background: inherit;
background-attachment: fixed;
-webkit-filter: blur(4px);
filter: blur(4px);
}
.info_button > header::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5)
}
.info_button > header p {
margin: 0;
color: white;
position: relative;
z-index: 0;
}
.info_button:hover{
box-shadow: 1px 1px 5px #363024;
-webkit-box-shadow: 1px 1px 5px #363024;
-moz-box-shadow: 1px 1px 5px #363024;
position:relative;
top:7px;
margin: 0;
}
HTML:
<a href="https://www.google.com" target="_blank">
<div class="info_button" style="position:absolute; left:190px; top:25px;">
<header><p><span id="info_button">BoilerPlate of my Mansion</span></p>
</header>
</div>
</a>
Working fiddle: http://jsfiddle.net/veniarya/ygosqouh/
The problem was with my z-index, have to make it a positive interger, so changed it to 100 from 0, thanks again #Donte'Truble.
I hate to clutter up Stack Overflow, but I can't seem to update my original question here - Issue with div floating on top of carousel. The JSFiddle was incorrect.
I'm having some trouble with this:
http://jsfiddle.net/myoozik/U6bV8/
If you take a look at above the carousel, there is a giant gap. This comes as a result of adding the black overlay div on top of the carousel.
Any idea on how to get rid of that gap aka how is it being generated?
HTML
<div class="carousel-wrapper">
<div id="overlay-div">
</div>
<div class="jcarousel-wrapper">
<div class="jcarousel">
<ul>
<li>
<img src="/_shared/img/img1.jpg" width="850" height="500" alt="">
</li>
<li>
<img src="/_shared/img/img2.jpg" width="850" height="500" alt="">
</li>
<li>
<img src="/_shared/img/img3.jpg" width="850" height="500" alt="">
</li>
</ul>
</div> ‹›
<p class="jcarousel-pagination"></p>
</div>
</div>
CSS
#overlay-div {
background-color: #000;
width: 200px;
height: 200px;
position: relative;
left: 100px;
top: 300px;
z-index: 999;
}
.carousel-wrapper {
max-width: 850px;
/*padding: 0 20px 40px 20px;*/
margin: auto;
overflow: hidden;
}
.jcarousel-wrapper {
margin: 20px auto;
position: relative;
/*border: 10px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
box-shadow: 0 0 2px #999;*/
}
.jcarousel-wrapper .photo-credits {
position: absolute;
right: 15px;
bottom: 0;
font-size: 13px;
color: #fff;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
opacity: .66;
}
.jcarousel-wrapper .photo-credits a {
color: #fff;
}
/** Carousel **/
.jcarousel {
position: relative;
overflow: hidden;
width: 850px;
height: 500px;
}
.jcarousel ul {
width: 20000em;
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
.jcarousel li {
float: left;
}
/** Carousel Controls **/
.jcarousel-control-prev, .jcarousel-control-next {
position: absolute;
top: 200px;
width: 30px;
height: 30px;
text-align: center;
background: #4E443C;
color: #fff;
text-decoration: none;
text-shadow: 0 0 1px #000;
font: 24px/27px Arial, sans-serif;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
box-shadow: 0 0 2px #999;
}
.jcarousel-control-prev {
left: -50px;
}
.jcarousel-control-next {
right: -50px;
}
.jcarousel-control-prev:hover span, .jcarousel-control-next:hover span {
display: block;
}
.jcarousel-control-prev.inactive, .jcarousel-control-next.inactive {
opacity: .5;
cursor: default;
}
/** Carousel Pagination **/
.jcarousel-pagination {
position: absolute;
bottom: 0;
left: 15px;
}
.jcarousel-pagination a {
text-decoration: none;
display: inline-block;
font-size: 11px;
line-height: 14px;
min-width: 14px;
background: #fff;
color: #4E443C;
border-radius: 14px;
padding: 3px;
text-align: center;
margin-right: 2px;
opacity: .75;
}
.jcarousel-pagination a.active {
background: #4E443C;
color: #fff;
opacity: 1;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
}
The black color box is appearing due to #overlay-div Div that is present which has some height, width and background color. if you set display:none to it the space and black box will disappear.
below is the CSS
#overlay-div {
background-color: #000000;
display: none;
height: 200px;
left: 100px;
position: relative;
top: 300px;
width: 200px;
z-index: 999;
}
Fiddle here here.
Is this what you are looking at?
I have to reduce the height webpage,
So that entire page will be exposed except a part of the purple color on the bottom page.
I think that the purple color part of the bottom page is html tag
And he unnecessary.
many thanks.
link:http://www.centerwow.com/window1/window/window.html
css code:
html{
height:0px;
}
body {
//overflow:hidden;
font-family:Palatino Linotype;
background: none repeat scroll 0 0 #6000CC;
font-family: Arial;
font-size: 12px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
height:600px;
}
.insidWindow {
background: none repeat scroll 0 0 #ffFFFF;
margin: 0px auto 10px auto;
padding: 10px;
position: relative;
top:-515px;
width:52.5%;
}
h2 {
color: #443333;
font-size: 14px;
line-height: 7px;
margin: 0px 5px 0px 5px;
padding: 5px;
color: white;
}
.lineAzure{
background: #0066ff;
line-height: 7px;
margin: 0px 0px 0px 0px;
height:15px;
}
#lineAzurebotom {
background: none repeat scroll 0 0 #880000;
line-height: 11px;
margin: 0;
position: relative;
top: -516px;
}
#leftcolumn_s {
background: none repeat scroll 0 0 #DDFF00;
height: 115px;
margin: 0 auto 0 auto;
padding: 10px;
position: relative;
top: 360px;
width: 88%;
}
#rightcolumn_s{
background: none repeat scroll 0 0 #DDFF00;
height: 115px;
margin: 0 auto 0 auto;
padding: 10px;
position: relative;
top: 360px;
width: 88%;
}
#chatRead {
background: none repeat scroll 0 0 #88FF00;
line-height: 90px;
margin: 0 auto;
position: relative;
top: -520px;
width: 55%;
}
#chatWrite {
background: none repeat scroll 0 0 #88FFFF;
line-height: 25px;
margin: 0 auto;
position: relative;
top: -520px;
width: 55%;
}
#lineYelow{
background: #00FFFF;
border-bottom: 4px solid #00ffff;
line-height: 7px;
margin: 0px 0px 0px 0px;
height:35px
}
#wrapMein{
background: green;
//overflow:hidden;
margin: 0px 5px 20px 5px;
padding: 0px 0px 0px 0px;
position: relative;
height:530px;
}
.column {
background: none repeat scroll 0 0 #DDFFFF;
height: 505px;
margin: 5px;
padding: 0 5px;
position: relative;
top: -15px;
width: 20%;
}
.rcolumn{
background: none repeat scroll 0 0 #ddffff;
margin: 0px 0px 0px 0px;
padding: 10px;
position: relative;
width:20%;
height:495px;
position:relative;
top:-528px;
float:right;
}
.ui-wrapper {
border: 2px solid #70A029;
}
.ui-resizable {
position: relative;
}
.ui-resizable-e {
background: url("../pic/resizable-e.gif") repeat scroll right center transparent;
cursor: e-resize;
height: 100%;
right: 0;
top: 0;
width: 6px;
}
.ui-resizable-handle {
display: none;
font-size: 0.1px;
position: absolute;
}
.ui-resizable-s {
background: url("../pic/resizable-s.gif") repeat scroll center top transparent;
bottom: 0;
cursor: s-resize;
height: 6px;
left: 0;
width: 100%;
}
.ui-resizable-se {
background: url("../pic/resizable-se.gif") repeat scroll 0 0 transparent;
bottom: 0;
cursor: se-resize;
height: 9px;
right: 0;
width: 9px;
}
html code:
<h2>this is body background.</h2>
<div class="lineAzure">this is div class lineAzure </div>
<div id="lineYelow">this is div id YineYelow</div>
<div id="wrapMein">
<div class="lineAzure" style="margin: 0px 22.6% 0px 22.6%;" "width:52.5%" >this div classlineAzurespnbsp;| | | | | |</div>
<div id="leftcolumn" class="column">here is div id = leftcolumn
<div id="leftcolumn_s">here is div id = leftcolumn_s</div>
</div>
<div id="rightcolumn" class="rcolumn">rightcolumn
<div id="rightcolumn_s">here is div id = rightcolumn_s</div>
</div>
<div class="insidWindow">
<div id="windowResize" class="ui-wrapper" style="height: 340px; width: 350px;">
<div style="position: absolute; top: 20px; left: 20px; " >
Resize me<br>
Please try to resizeme:<br> www www www.
</div>
</div><br>
</div><!--insidWindow-->
<div id="chatRead">here is div id = chatread</div>
<div id="chatWrite">here is div id = chatWrite</div>
<div id="lineAzurebotom">here is div id = lineAzurebotom</div>
</div><!--wrapMein-->
If I understand your question correctly, add overflow: hidden; to your #wrapMein id.
The additional height (and purple spacing) is coming from the layout your page content is creating from the negative position: relative inner divs (-520px etc) which is still counted towards your box model values in Firefox.