In below program why margin-right value (+ve/-ve) has no impact on the tooltiptext? The margin-left works fine but margin-right has no impact? Thanks
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
top: 100%;
margin-right: 100px;
}
<h2>Bottom Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
By default HTML elements are aligned to top left corner of their parent element which in this case is .tooltip. Adding a margin-right would push the elements on the right away. However there are no elements after .tooltip thus no effect.
Related
How can I make a line under a , not stretch the whole way, lets say 70% centered and with rounded borders, see image here:
https://i.imgur.com/6O7mfn3.png
this is what I got so far, but its obviously not rounded, and its goes 100% of the width of the span.
<span class="button">
hello space!
</span>
.button{
border-bottom:6px solid blue;
}
Use an ::after element.
.button {
padding-bottom: 6px;
position: relative;
}
.button::after {
content: "";
position: absolute;
bottom: 0;
left: 15%;
width: 70%;
height: 6px;
background-color: blue;
border-radius: 6px;
}
<span class="button">
hello space!
</span>
I have a css tooltip which is triggered by hovering over a link, the tooltip text is then populated from the span element hidden in the link text.
fiddle https://jsfiddle.net/70wxxhne/
However I now need to have other html elements within the popup so ideally I would like to load the tooltip content from another div (note1 in the fiddle), is this possible with css alone?
<--css-->
.ktooltip {
position: relative;
display: inline-block;
}
.ktooltip .ktooltiptext {
visibility: hidden;
background: #fff;
width: 150px;
text-align: center;
border-radius: 6px;
padding: 5px 5px;
top: -5px;
left: 105%;
border:2px solid grey;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.ktooltip:hover .ktooltiptext {
visibility: visible;
}
<p>Here is some text with a note here
<sup class="ref">
<a href="#note1" id="note1" class="ktooltip">Tooltip
<span class="ktooltiptext">Current Tooltip text</span>
</a>
</sup>
that continues on here too.
</p>
<div id="note1" class="ktooltip2"><p>wannabe <b>tooltip</b> with alink</p></div>
As of HTML5, you can use block elements, i.e. div, inside an anchor, so no worries about not getting that validated properly anymore, so simply replace your span with your div.
If your div contains a link/anchor, you need to wrap them both (nested links is not valid) and make the div a sibling, here done with the existing ref
Note, to also be able to actually click on the link in the tooltip, I changed its left position to 99%, so it does not disappear when hovering the tooltip itself.
.ref {
position: relative;
}
.ktooltip {
display: inline-block;
}
.ref .ktooltip2 {
visibility: hidden;
background: #fff;
width: 150px;
text-align: center;
border-radius: 6px;
padding: 5px 5px;
top: -5px;
left: 99%;
border: 2px solid grey;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.ref:hover .ktooltip2 {
visibility: visible;
}
<div>Here is some text with a note here
<sup class="ref">
Tooltip
<div id="note1" class="ktooltip2">
<p>wannabe <b>tooltip</b> with alink</p>
</div>
</sup> that continues on here too.
</div>
I'm creating a small shop in simple html. Each buyable item has its own box where I will later insert the item's name and picture.
My problem however, is when I enter an item name that takes 2 rows or more to fit, because then all other boxes get pushed down as well:
I have some 500 rows of code so I will just paste what I think is relevant to the problem:
CSS:
.packitem{
background-image: url("");
position: relative;
width: 200px;
height: 200px;
border: 1px solid;
border-radius: 10px;
padding: 4px;
margin: 12px 3px 0 3px;
display: inline-block;
}
.packitem a.boxlink{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-decoration: none; /* No underlines on the link */
z-index: 10; /* Places the link above everything else in the div */
background-color: #FFF; /* Fix to make div clickable in IE */
opacity: 0; /* Fix to make div clickable in IE */
filter: alpha(opacity=1); /* Fix to make div clickable in IE */
}
.boxtext{
font-size: 16px;
font-family: verdana;
color: #fff;
vertical-align: top;
}
HTML:
<div class="packages1">
<div><font class="packfont">Packages</font></div>
<div class="packitem">
<div id="pack1" class="white_content">
<font class="descriptiontitle">Item 1</font>
<p class="descriptiontext">Dummy text</p>
<a href="javascript:void(0)" onclick="document.getElementById('pack1').style.display='none';document.getElementById('fade').style.display='none'">
<p class="closelink">Close</p>
</a>
</div>
<font class="boxtext">Item 1</font>
</div>
I managed to fix the issue by having display: inline-flex instead of display: inline-block, but that messed text-alignment up.
Any ideas of what's wrong?
Thanks.
You are close but vertical-align: top; should be applied to the items that are to align.
In your case this should be the boxes
.packitem{
background-image: url("http://www.dedicatedrejects.com/pics/blockblue.jpg");
position: relative;
width: 200px;
height: 200px;
border: 1px solid;
border-radius: 10px;
padding: 4px;
margin: 12px 3px 0 3px;
display: inline-block;
vertical-align: top;
}
BTW: <font class="descriptiontitle">Item 1</font> should not be used...it's invalid HTML
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font
Given the following html:
<div class="body">
<div class="banner">
<div class="name">
<h2>
<a href="http://www.example.com">
<span class="bold">Test Link</span><br/>
</a>
</h2>
</div>
<div class="title">
<h3>A Connections Learning Partner Program</h3>
<p>Quality online learning for high school students in Oakland County and surrounding counties.
</p>
</div>
<div class="link">
Learn More
</div>
</div>
</div>
How can I vertically align .link a (the button) within .link without giving a height or width? Like this...
Here's my fiddle
Here is one way that you can do it. Your HTML is good, no need to change anything.
For the CSS:
.body { width: 920px; }
.banner {
background-color: #454545;
border-bottom: 3px solid #F9F9F9;
height: 100px;
margin: 0 0 5px;
padding: 0;
display: table;
}
.banner > div {
outline: 1px dotted yellow; /* optional to show cell edges... */
display: table-cell;
}
.banner .name {
width: 25%;
vertical-align: top;
padding-top: 25px; /* control top white space */
text-align: center;
}
.banner .name h2 {
color: #F9F9F9;
max-height: 55px;
text-transform: uppercase;
margin: 0;
padding: 0;
}
.banner .title {
width: 50%;
vertical-align: top;
padding-top: 25px;
}
.banner .title h3 {
font-size: 15px;
font-weight: bold;
line-height: 15px;
margin: 0px 0 0 0;
padding: 0;
}
.banner .title p {
font-size: 12px;
max-height: 35px;
overflow: hidden;
margin: 0;
padding: 0;
}
.banner .link {
width: 25%;
vertical-align: middle;
text-align: left; /* set to left, center or right as needed */
}
.banner .link a {
margin-left: 25px; /* controls left offset */
background-color: #FA9800;
border-radius: 5px 5px 5px 5px;
cursor: pointer;
display: inline-block; /* use inline-block if you want to center element */
font-size: 12px;
font-weight: bold;
height: 23px;
line-height: 23px;
text-align: center;
text-decoration: none;
width: 100px;
}
See the fiddle at: http://jsfiddle.net/audetwebdesign/jsG8F/
How This Works
The trick is to use display: table on your .banner container and then display: table-cell on your child div elements, and set the % widths to 25%, 50%, 25% respectively for .name, .title, .link.
You can then use vertical-align and text-align to control vertical and horizontal placement of the various text blocks.
I added comments related to using padding-top to control white space from the top of the banner.
For the .link a element, you can adjust the left margin (or right) as needed.
These CSS rules offer you a lot of fine control over the placement of the various elements within the banner.
Backwards Compatibility
The display: table-cell property is backwards compatible back to IE8.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/display
If the size of the element and banner are fixed, use margin-top to offset the element.
Marc Audet was very close but I ended up going a slightly different route.
I gave .link a a fixed top margin and made margin-left: auto; and margin-right: auto; and that did the trick.
Here is the fiddle for reference.
I'm trying to absolutely position a child div element relative to the bottom limit of its parent div so that the it would be maintained at the bottom and will continue to assume the width of its parent even if its parent get re-sized dynamically. The problem is that if I set the parent div position to relative using css from head of document it doesn't seem to accept the positioning made and the child div gets positioned to the body instead breaking the layout.
You can check my code here Broken div
CSS:
#player {
width: 640px;
height: 360px;
background-color: #aaa;
border: 1px solid #555;.
position: relative;
}
#player div.controls {
width: 100%;
height: 26px;
line-height: 26px;
position: absolute;
left: 0;
bottom: 0;
z-index: 2;
background-color: #222;
opacity: 0.5;
}
#player span.control {
padding-left: 10px;
padding-right: 10px;
margin-right: 5px;
cursor: pointer;
}
#player span.control:hover {
background-color: #555;
}
#player span.control:first-child {
margin-left: 5px;
}
HTML:
<div id="player">
<div class="controls">
<span class="control playpause" title="play/pause"></span>
<span class="control volume" title="volume"></span>
<span class="control resize" title="maximize/restore"></span>
</div>
</div>
The extra . (dot) on the following statement (line 5) is the problem:
border: 1px solid #555;.
The Browser simply ignores the position: relative that follows it.