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
Related
I am trying to override overflow property for my element with class .tags but keep it hidden for .tags .v (span element).
CSS:
.tags {
display: inline;
position: relative;
}
.tags:hover:after {
background: #333;
background: rgba(0, 0, 0, .8);
border-radius: 5px;
bottom: -34px;
color: #fff;
content: attr(data-gloss);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 150px;
}
.tags:hover:before {
border: solid;
border-color: #333 transparent;
border-width: 0 6px 6px 6px;
bottom: -4px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
td:has(.tags:hover) {
overflow: visible;
}
HTML:
<div class='tags' data-gloss='aaaaaaaaaaaaaa'><span class = 'v'>aaaaaaaaaaaaaa</span></div>
For now it works like this:
But I need value in column stay as before hovering and only tooltip must show full content.
How can I reach it with CSS?
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;
}
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.