I'm working on a popup that appears when the user hovers over text. A portion of text can be hovered over, which will make a small box appear below it containing additional text that's normally hidden.
The issue arises when there's another hover-able text portion where the box would display - the box is hidden behind it.
The Fiddle: CSS Issue
.hovertext {
position: relative;
display: inline-block;
background: #CCEEFF;
padding: 4px 6px;
border-radius: 6px;
z-index: 1;
}
.hovertext .hovertexttext {
visibility: hidden;
background: #AAAAEE;
position: absolute;
white-space: pre-line;
padding: 4px 6px;
border-radius: 6px;
z-index: 2;
}
.hovertext:hover .hovertexttext {
visibility: visible;
}
<!-- this often happens on tables, where "hover" spots are below one another -->
<table>
<tr>
<td>
<div class="hovertext">
hover here to see the issue
<span class="hovertexttext">secret text!
more secret text!
even more secret text!
but you can't see all of it...
it's being blocked by the other element
</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="hovertext">
i'm blocking the text aaaa
<span class="hovertexttext">oh no</span>
</div>
</td>
</tr>
</table>
I've tried:
Removing the position:absolute tag from hovertext - this causes the entire "invisible" text to hide in the same area as the rest, pushing the rest of my HTML around.
Removing position:relative tag in hovertexttext - HTML gets pushed around.
Adjusting the z-index values, as well as removing them completely - doesn't have noticeable effect.
Changing the <div> tags to <span>, and vice versa - doesn't have noticeable effect.
The hover menu is overlapping its parent div without any issues, so I'm led to believe it could overlap another <div> that's the same class, but I'm more or less stuck with how to proceed. Did I overlook something obvious?
You've got a few issues going on. Nested elements with conflicting indexes, display visible retains it's original sizing / nesting on the first measure arrange pass, and finally abusing box model semantic positioning. Hope this helps, cheers!
.hovertext {
background: #CCEEFF;
padding: 4px 6px;
border-radius: 6px;
cursor: help;
}
.hovertexttext {
display: none;
background: #AAAAEE;
position: absolute;
white-space: pre-line;
padding: 4px 6px;
border-radius: 6px;
}
.hovertext:hover .hovertexttext {
display: block;
}
<!-- this often happens on tables, where "hover" spots are below one another -->
<table>
<tr>
<td>
<div class="hovertext">
hover here to see the issue
<span class="hovertexttext">secret text!
more secret text!
even more secret text!
but you can't see all of it...
it's being blocked by the other element
</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="hovertext">
i'm blocking the text aaaa
<span class="hovertexttext">oh no</span>
</div>
</td>
</tr>
</table>
Related
I'm stuck on a problem here where I need to align two elements (one's a <span> and the other's an <a>) horizontally in a table. The <span> works as an indenter as I'm trying to display a tree in a table. The problem now is that the button (<a>) has a variable length due to its text inside (when you click on the button you can edit the text) and the <span> has a variable length due to the number of parents of the button.
Whenever the text in the button gets too long it breaks into the line below the indenter.
Look at this fiddle:
<table style="width:70%;">
<tr>
<td>
<span class="indenter" style="width:120px;display:inline-block;">
<a>
</a>
</span>
<a href="#" class="btn">
text inside the a tag text inside the a tag
</a>
</td>
</tr>
</table>
I do not know the width of the indenter because it is calculated by some js plugin therefore calculating the width for the <a> tag with css does not work.
Furthermore I need the span to be always exactly the width it has so display: flex doesn't work either.
Do you have an idea on how to
Thank you!
Use display: tabel-cell for button and span
.indenter {
border: 1px solid black;
vertical-align: center;
}
.indenter a:after {
content:"-";
}
.btn {
display: tabel-cell;
color: #eb8b02;
border: 1px solid #ccc;
text-align: center;
padding: 4px 12px;
line-height: 20px;
vertical-align: middle;
cursor: pointer;
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
border-radius: 4px;
text-decoration: none;
}
<table style="width:70%;">
<tr>
<td>
<span class="indenter" style="width:120px;display:tabel-cell;">
<a>
</a>
</span>
<a href="#" class="btn">
text inside the a tag text inside the a tag
</a>
</td>
</tr>
</table>
My HTML:
<table style="width:100%;">
<tbody>
<tr style="cursor:pointer; border-bottom:1px solid #ACACAC; height:60px;">
<td style="text-align:right; vertical-align:middle; padding:10px 10px 10px 0px;">
<span style="color:#F87E20;">Copy</span>
<div style="display:inline; color:#ACACAC;"> | </div>
<span style="color:#F87E20;">Export</span>
<div style="display:inline; color:#ACACAC;"> | </div>
<span style="color:#F87E20;">Delete</span>
</td>
</tr>
</tbody>
</table>
The result:
This is all fine, and is working wonderfully. I want to make some QOL changes, though, and while looking into some of the changes I wanted to make, ran into something that is confusing me quite a bit.
The entire row is clickable, as well as the Copy, Export and Delete spans. This becomes a problem when I try to click on Export, but miss by 2 or 3 pixels, and instead navigate away from this area. I wanted to make the clickable area for the spans bigger, so I gave the a style property like so: padding:10px 0px 10px 0px;
The padding works as intended, enlarging the clickable area around the spans, making it easier to click on them. However, I was expecting the padding to also make the entire row taller, but instead it's as if the spans' padding is just flowing over the padding on the parent.
Here are some images to help explain the situation:
Parent:
And Child:
I don't understand why the child's padding is flowing outside it's container, and I don't want to go on in this direction without understanding what's going on. I was wondering if anyone could please help me understand what's happening here?
Your spans are inline elements. Top and bottom padding is ignored in case of inline elements.
By default, spans are inline, and divs are block. However, you can always override these with display: block; or display: inline;. Block elements (also inline-blocks) have full padding support.
See:
table {
width: 100%;
border-bottom: 1px solid #ACACAC;
}
tr {
cursor: pointer;
height: 60px;
}
td {
text-align: right;
vertical-align: middle;
padding: 10px 10px 10px 0px;
background-color: #e0c000;
}
span {
display: inline-block;
color: #F87E20;
background-color: #f0e000;
}
.padded {
padding: 10px 0 10px;
}
div {
display: inline;
color: #ACACAC;
}
<table>
<tbody>
<tr>
<td>
<span>Copy</span>
<div> | </div>
<span class="padded">Export</span>
<div> | </div>
<span>Delete</span>
</td>
</tr>
</tbody>
</table>
See also this article for more on this.
I am using Zurb Foundation for page layout. A row on my page needs have some text and then a line that fills the rest of the width, like so:
| Text of Indeterminate Length -------------------------------------- |
I have the desired layout working with <table> and <hr> tags:
<div class="row">
<div class="large-12 columns">
<table style="width:auto;border-collapse:collapse;border:0;padding:0;margin:0;">
<tr>
<td style="white-space:nowrap;padding:0;">
<h3>Text of Indeterminate Length</h3>
</td>
<td style="width:100%;"><hr/></td>
</tr>
</table>
</div>
</div>
I realize that the use of <table> for layout and <hr> for drawing lines are both generally frowned upon in modern web design. I spent a while trying to get the same layout using <div>, <span>, and <p> and couldn't come up with anything simple and straightforward that didn't require what seemed like an excessive use of Javascript. On top of that, most recommended solutions suggest using things like border_bottom which doesn't give me a nice line in the middle like <hr> does.
So my question is this: is there a straightforward way to do this without <table> or <hr>? Perhaps with some sort of a custom <span> style?
A potential solution could be to give your heading a background style with display:block and width:100% and the text with a white background to hide the line from the containing heading? http://jsfiddle.net/9o74jbLh/
<h3><span>{% block hightide_pagename %}{% endblock hightide_pagename %}
</span></h3>
h3 {
display:block;
position:relative;
width:100%;
}
h3:after {
content:"";
height:1px;
width:100%;
background: #000;
position:absolute;
top:50%;
}
h3 span {
background:#fff;
}
I've seen this design element pop up a few times, and the best way that I've seen it done (which is by no means a perfect way) is to use overflow hidden on a container, float the heading (or make it inline-block), and set the left attribute of your absolutely positioned line element (preferably a pseudo-element so as to keep your markup clean). In effect you get this:
/* stuff to make the demo pretty */
table {
border: 1px solid red;
}
table:before {
content: 'bad way';
color: red;
display: block;
}
.good-ish-way {
border: 1px solid green;
margin-top: 1em;
}
.good-ish-way:before {
content: 'good-ish way';
color: green;
display: block;
}
/* the actually useful stuff. */
.good-ish-way {
overflow: hidden;
}
.good-ish-way h3 {
position: relative;
display:inline-block;
}
.good-ish-way h3:after {
content: '';
width: 100%;
position: absolute;
left: 100%;
height: 1px;
background: #777;
width: 1000%;
top: 0;
bottom: 0;
margin: auto 0 auto 0.3em;
}
<table>
<tr>
<td style="white-space:nowrap;padding:0;">
<h3>Text of Indeterminate Length</h3>
</td>
<td style="width:100%;"><hr/></td>
</tr>
</table>
<div class="good-ish-way">
<h3>Text of Indeterminate Length</h3>
</div>
The only major problem with it is the 1000% part. I've seen other devs use a large pixel value, but the thing is, you'll never know if it's enough. You could use 100vw, but then there are some compatibility issues with older browsers.
Demo for you to play around with it: http://jsfiddle.net/uru17kox/
Edit: Oh! and here's where I first saw this method illustrated in case you want a different spin on it. https://css-tricks.com/line-on-sides-headers/
I’m trying to recreate this sort of layout:
This is the code I’m currently using to accomplish it:
<table style="border:0px;">
<tbody>
<tr style="border:0px;">
<td><img src="twophones.jpg" alt="" /></td>
<td>
<table style="border:0px;">
<tbody>
<tr width="100%" style="border:0px;">
<td width="100%">
<center>
<h11>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11>
<br>
<h33>Coming soon to the App Store and Google Play.</h33>
<table style="border:0px; width:410px;">
<tr style="border:0px;"><td style="border:0px;"><img src="dot.png"></td></tr>
<tr style="border:0px;" width="410">
<td style="border:0px;"><img src="app.jpg" alt="" /></td>
<td><img src="android.jpg" alt="" /></td>
</tr>
</table>
</center>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Unfortunately, I’m sick of maintaining this table gunk. How can I maintain the same layout, but using standard CSS techniques?
Here are a couple of my attempts:
<div id="parent"> <div id="viewport">
<a href="#">
<img src="twophones.jpg" style="float:left;> <img src="twophones.jpg" alt="" />
<h11 style="width:100%;float:right; display: table-cell; vertical-align: middle;">DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11>
<span><h11>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11><br>
<h33>Coming soon to the App Store and Google Play.</h33>
<br>
<h33 style="width:100%;float:right; display: table-cell; vertical-align: middle;">Coming soon to the App Store and Google Play.</h33>
</span>
</a>
</div> </div>
<div id="parent"> <div id="parent">
<img src="twophones.jpg" style="float:left;"> <img src="twophones.jpg" style="float:left;>
<div style="width:65%;float:right;"> <div style="width:65%;float:right;">
<h11>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11>
<h11>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11>
<br> <br>
<h33>Coming soon to the App Store and Google Play.</h33>
<h33>Coming soon to the App Store and Google Play.</h33>
</div> </div>
First thing you want do to when doing a layout with CSS is, well, not touching the CSS and dealing purely with the content. How best could we represent this content? I think this includes all the content rather semantically:
<section>
<img src="twophones.jpg" alt="">
<h2>Discover the brands and styles designed for you</h2>
<p>Coming soon to the App Store and Google Play</p>
<ul>
<li class="iphone">
<a href="#">
Available on the
<strong>App Store</strong>
</a>
</li>
<li class="android">
<a href="#">
Available on the
<strong>Android Market</strong>
</a>
</li>
</ul>
</section>
It contains all the content, but it doesn’t look great. It looks sort of like this:
(picture of two phones)
Discover the brands and styles designed for you
Coming soon to the App Store and Google Play
Available on the App Store
Available on the Android Market
Your layout doesn’t quite look like that. First big difference is that nothing’s centered here, but that’s trivial to fix: (take a look)
section {
text-align: center;
}
And what about those buttons? Well, each one functions sort of as a blocky part of the page, but we still want it to be inline, so we’ll apply a display of inline-block. Furthermore, we want the bolded part to be on another line, so we’ll set its display to block, which should force that. Lastly for now, we know it’s got a orangish background and border, and looks like it’s got a little shadow on the text, so putting all this together:
section li a {
display: inline-block;
background: orange; /* fallback for browsers that
don't support gradients */
background: linear-gradient(#f9a60d, #f37111);
color: white;
text-shadow: 0 0 -1px 0 black;
border: 1px solid #e79d48;
border-top-color: #ffe37d;
border-radius: 5px;
box-shadow: 0 5px 0 #a95511;
padding: 8px;
text-decoration: none; /* no underlines on our link, please */
text-align: left; /* within the button, left-aligned */
}
section li a strong {
display: block;
}
Nice buttons! But we could still use some icons on them—fortunately, that’s easy: just add a little more padding on the left and apply a background image: (try it)
section li a {
padding-left: 50px;
}
section li.iphone a {
background: orange url(iphone-icon.png) no-repeat 10px 10px;
background: linear-gradient(#f9a60d, #f37111), url(iphone-icon.png) no-repeat 10px 10px;
}
/* similar for Android */
Now how do you get the buttons to appear in a line? Fortunately, that’s simple. First, remove any margins and padding on the list, then make each item inline-block (try it):
section ul {
margin: 0;
padding: 0;
}
section li {
display: inline-block;
}
Now how about that image on the side? It turns out CSS has us covered. We just tell it we want to float it to the left. As a common trick, we’ll also set an overflow: hidden on the container, so the float is entirely contained within the container. (You can’t see it standalone, but you may see the effect if you try to embed it in a larger web page.)
section {
overflow: hidden;
}
section img {
float: left;
}
Try it. Then we have just one minor visual tweak: we want the header to be uppercased. Fortunately, CSS has us covered there, too! Just apply
section h2 {
text-transform: uppercase;
}
And we’re done. Of course, there’s more you could do: adjust the margins and/or padding to change the spacing; change the font if necessary, etc., etc., but I’ve explored a few techniques that are generally applicable:
Floats are used and abused all the time in CSS. They’re useful.
Changing display can be useful to force elements to display in or out
of a line.
Playing with background can put icons on things.
I don’t mean for this to be a huge code dump; rather, I’d hope you’d learn something out of it, and be able to do similar things yourself.
I don't think I can go any more in-depth or explain anything better than the fantastic answer by icktoofay, but here is a simple layout that could also get you started.
Here is the demo.
Let's start with the basic HTML layout:
<div class="wrap">
<div class="image">
<img src="http://www.placehold.it/400X500" />
</div>
<div class="information">
<h1>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h1>
<h2>Coming soon to the App Store and Google Play.</h2>
<a class="storeLinks">Play store</a>
<a class="storeLinks">APP store</a>
</div>
</div>
Now let's add in some CSS to layout your HTML elements. In this example:
display: table-cell; can be used to vertically align our content in conjunction with vertical-align: middle; and place our image to the left of the text.
html,body { height: 100%; } allows us to give our wrapping .wrap div a height of 100% so that all the content contained within <div class="wrap"> can be vertically centered.
.wrap > div will target only the divs that are directly after <div class="wrap">.
margin: 0 auto;, along with a fixed width, keep all our content horizontally centered.
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
.wrap {
display: table;
height: 100%;
width: 900px;
margin: 0 auto;
}
.wrap > div {
display: table-cell;
height: 100%;
vertical-align: middle;
}
.image {
width: 400px;
}
.information {
width: 500px;
text-align: center;
}
h1 {
text-align: center;
padding: 10px;
margin: 10px;
}
h2 {
padding: 10px;
margin: 10px;
}
.storeLinks {
display: inline-block;
padding: 20px;
background: #DDD;
padding: 10px;
}
I am using a table and a div to create a centered button group...but for some reason, my buttons are aligned weird? Here is a jsfiddle of the issue. Jsfiddle
Is there any way I can fix this to where I can add more buttons and have them straight?
If more code is required, please ask me and I will post it.
Here is my html:
<div align = "center" class="bdy">
<table class="wrapper">
<tr>
<td>
<button type="button">Services</button>
<br>
<button type="button">Live</button>
</td>
</tr>
</table>
</div>
My CSS is on the fiddle!
I fixed the alignment by removing the whitespace between buttons, but this is not the right way to do it.
Fixed version (reference only): http://jsfiddle.net/J7rYF/1/
Tables shouldn't be used to layout buttons. div align=center is deprecated. <br> shouldn't be used for this type of formatting purpose.
If you want an out of-the-box example/solution, Twitter Bootstrap has some very nice examples and templates.
Or, here's a simple template that you can start with for centering a list of buttons: http://jsfiddle.net/J7rYF/10/
HTML
<div class="button-set">
<ul>
<li><button type="button">Services</button></li>
<li><button type="button">Live</button></li>
</ul>
</div>
CSS
.button-set {
width: 300px;
margin: 0 auto; /* this centers the element */
}
.button-set UL {
list-style: none; /* removes bullets */
}
/* this controls spacing between adjacent buttons */
.button-set LI + LI {
margin-top: 4px;
}
/* width: 100% is needed...everything else is optional */
BUTTON {
width: 100%;
border: 1px solid #000;
padding: 4px;
border-radius: 4px;
color: #fff;
background-color: #006DCC;
}
Getting rid of the <br> between the buttons fixed it for me.
You give margin:0; at button css and .button-set ul li{margin:0}
you can add another table inside that td and inside new table you can put these two buttons