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.
Related
How to make it title left in the middle between right and left
When you try it on your phone with a large screen the title stays in the middle
But in the small screen phone the title moves to the right
.tags {
display: inline;
position: relative;
}
.tags:hover:after {
background: #333;
background: rgba(0, 0, 0, .8);
margin: 10px 5px 15px 90px;
border-radius: 12px;
bottom: 20px;
color: #fff;
content: attr(glose);
left: -160%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 140px;
}
.tags:hover:before {
border: solid;
border-color: #333 transparent;
border-width: 7px 7px 0px 7px;
bottom: 29px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
<br><br><br>
<a class="tags" glose="Move down">Move down</a>
just add text-align: center to your after element
I have a header tag like
h1 {
background: url('../welcome_page/resources/images/welcome-logo.jpg') 0 0 no-repeat;
color: white;
position: absolute;
top: 0px;
margin: auto;
z-index: 100000;
padding-top: 30px;
height: 80px;
background-color: #4775A3;
border-bottom-style: solid;
border-bottom-color: black;
}
in my html page. This creates extra space at right-hand side. Can anyone suggest to remove the extra-space in the right side ??
body { margin: 0; padding: 0 }
h1 {
background: url('../welcome_page/resources/images/welcome-logo.jpg') 0 0 no-repeat;
color: white;
position: absolute;
top: 0px;
margin: auto;
z-index: 100000;
padding-top: 30px;
height: 80px;
background-color: #4775A3;
border-bottom-style: solid;
border-bottom-color: black;
}
<h1>Hello World</h1>
Heading
HTML
< h1>< text>XXX </text ></h1 >
CSS
h1 {
background: url('../icons/welcome-logo.jpg') 0 0 no-repeat;
color:white;
position: absolute;
top: 0px;
margin: auto;
z-index: 100000;
width: 100%;
padding-top: 30px;
text-align: left;
height: 80px;
background-color: #4775A3;
border-bottom-style: solid;
border-bottom-color: black;
}
text{
padding-left: 150px;
}
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>
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?