I'm using this CSS script to create tooltip popup bubbles.
http://trentrichardson.com/examples/csstooltips/
I have it working ok but it is being hidden by an embedded iframe video in the div below.
When I hover over "number one" you can see it get hidden behind the video.
However, when I hover over "number eleven" it is displayed correctly in front of the image.
I have tried changing the z-index values, but no change.
thank for your help
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title> ToolTip</title>
<style type="text/css">
* { padding: 0; margin: 0; }
#wrapper {
position: relative;
margin: 0 auto;
width: 980px;
height: 550px;
}
#main {
width:980px;
height:50px;
}
#main ul {
margin:0;
padding:0;
list-style:none;
}
#main ul li {
list-style:none;
display:inline;
}
#video {
width:620px;
height:500px;
float:left;
}
#img {
width:360px;
height:500px;
float:right;
}
/* TOOLTIP HOOVER */
a.tt {
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:normal;
text-decoration:none;
}
a.tt span {
display: none;
}
/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover {
z-index:25;
color: #aaaaff;
background:;
}
a.tt:hover span.tooltip {
display:block;
position:absolute;
top:2px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #111;
text-align: center;
filter: alpha(opacity:80);
KHTMLOpacity: 0.80;
MozOpacity: 0.80;
opacity: 0.80;
}
a.tt:hover span.top {
display: block;
padding: 30px 8px 0;
background: url(bubble.gif) no-repeat top;
}
a.tt:hover span.middle { /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(bubble_filler.gif) repeat bottom;
}
a.tt:hover span.bottom {
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(bubble.gif) no-repeat bottom;
}
/* end TOOLTIP HOOVER */
</style>
</head>
<body>
<div id="wrapper">
<div id="main">
<ul>
<li>
<a href="#" class="tt">Number One
<span class="tooltip">
<span class="top">
</span>
<span class="middle">
Avoid cross-browser javascript when you can use css to make tooltips with less code. Honestly you were going to use css to style your tooltips anyway right? Your probably already have most of this code in your css already too. You can hover over meThis is my Bubble Tooltip with CSS to see how well these bubble tooltips work
</span>
<span class="bottom">
</span>
</span>
</a>
</li>
<li>Number Two</li>
<li>Number Three</li>
<li>Number Four</li>
<li>Number Five</li>
<li>Number Six</li>
<li>Number Seven</li>
<li>Number Eight</li>
<li>Number Nine</li>
<li>Number Ten</li>
<li>
<a href="#" class="tt">Number Eleven
<span class="tooltip">
<span class="top">
</span>
<span class="middle">
Avoid cross-browser javascript when you can use css to make tooltips with less code. Honestly you were going to use css to style your tooltips anyway right? Your probably already have most of this code in your css already too. You can hover over meThis is my Bubble Tooltip with CSS to see how well these bubble tooltips work
</span>
<span class="bottom">
</span>
</span>
</a>
</li>
</ul>
</div>
<div id="video">
<iframe width="601" height="353" src="https://www.youtube.com/embed /oao0H5dfyEQ?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div id="img">
<img src="http://i.imgur.com/P0ken.jpg" />
</div>
</div>
</body>
</html>
I assume the iframe is going to pull up a flash player. You need to pass wmode=opaque to the player http://kb2.adobe.com/cps/127/tn_12701.html and as you don't control the iframe you are not going to be able to use it the way you need.
The older embed code for youtube with wmode setting was.
<object width='425' height='344'>
<param name='movie' value='http://www.youtube.com/v/Wj_JNwNbETA&hl=en&fs=1'>
<param name='type' value='application/x-shockwave-flash'>
<param name='allowfullscreen' value='true'>
<param name='allowscriptaccess' value='always'>
<param name="wmode" value="opaque" />
<embed width='425' height='344'
src='http://www.youtube.com/v/Wj_JNwNbETA&hl=en&fs=1'
type='application/x-shockwave-flash'
allowfullscreen='true'
allowscriptaccess='always'
wmode="opaque"
></embed>
</object>
Hat tip http://australiansearchengine.wordpress.com/2010/06/19/youtube-video-css-z-index/
As a side note wmode="transparent" also works.
Related
This one has driven me crazy - I can only find partial answers that won't work within the entirety of my code. I'm trying to center an inline list of mixed 'like buttons' (pieces of <script> from external sites) and images (which I've set up as <a>s where 'like buttons' are not available)
The requirements are:
1. Everything needs to be aligned to the top edge of the parent div - which is why I've used ul, li, display:table and display:table-cell to align to top (and not just inline-block)
2. Everything needs to be on the same horizontal line, which is why they need to be floated (in the absence of inline-block)
3. Everything needs to be centred (this is the bit I can't achieve!)
This is my first time using the forum, and I'm not really a web-designer so please be gentle! I've attached what code I think is relevant and helpful.
#contact {
position: relative;
top: 1em;
margin-left: 0;
width: 100%;
display: inline-block;
}
#contactinfo {
margin-right: 0;
color: #00CCFF;
text-decoration: none;
text-align: center;
width: 100%;
padding-bottom: 1em;
}
#share {
position: relative;
text-align: center;
min-height: 1em;
display: inline;
vertical-align: top;
}
ul.button {
display: table;
min-height: 2em;
list-style: none;
list-style-position: inside;
padding-left: 0.5em;
margin-left: 0em;
text-align: center;
float: right;
}
ul.button li {
display: table-row;
vertical-align: top;
text-align: center;
height: 2em;
padding: 0.5em;
}
img.sharebutton {
max-width: 50px;
max-height: 35px;
padding-bottom: 1em;
}
<div id="contact">
<div id="contactinfo">
<h2>
email info#lysamorrison.com<br>
call 0796 99 777 68
</h2>
</div>
<div id="share">
<div class="sharebuttons">
<ul class="button">
<li>
<a href="http://www.eventbrite.com/o/lma-training-amp-consultancy-8057832740" target="_blank">
<img src="eventbrite.png" class="sharebutton" />
</a>
</li>
</ul>
</div>
<div class="sharebuttons">
<ul class="button">
<li>
<a href="http://www.meetup.com/LMA-Personal-Professional-Development-Whitley-Bay-Meetup/#upcoming" target="_blank">
<img src="meetup.png" class="sharebutton" />
</a>
</li>
</ul>
</div>
<div class="sharebuttons">
<ul class="button">
<li>
<script src="//platform.linkedin.com/in.js" type="text/javascript">
lang: en_US
</script>
<script type="IN/FollowCompany" data-id="1586406"></script>
</li>
</ul>
</div>
<div class="sharebuttons">
<ul class="button">
<li>Follow #LMAtrainconsult
<script>
! function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + '://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js, fjs);
}
}(document, 'script', 'twitter-wjs');
</script>
</li>
</ul>
</div>
<div class="sharebuttons">
<ul class="button">
<li>
<div class="fb-follow" data-href="https://www.facebook.com/lmatrainingandconsultancy" data-height="35" data-layout="button" data-show-faces="true"></div>
</li>
</ul>
</div>
</div>
<!--End of share div-->
</div>
Flexbox is the solution here; using 3 specific properties to address your needs.
Setting
align-items
to flex-start keeps the children vertically aligned to the top of
their parent.
Setting
flex-wrap
to nowrap (the default value) ensures the children stay on one
line.
Setting
justify-content
to center centres the children horizontally within the parent
Here's a simplified example:
*{box-sizing:border-box;margin:0;padding:0;vertical-align:middle;}
ul{
background:black;
align-items:flex-start;
display:flex;
flex-flow:row nowrap;
justify-content:center;
list-style:none;
padding:2px;
}
li{
margin:2px;
}
<ul>
<li><img height="80" src="http://lorempixel.com/100/80/abstract/1/" width="100"></li>
<li><img height="50" src="http://lorempixel.com/75/50/abstract/2/" width="75"></li>
<li><img height="150" src="http://lorempixel.com/75/50/abstract/3/" width="200"></li>
</ul>
I have three images, the firsts are the brazilian flag and the english flag (language settings).. and the third is the logo of my site...
code:
<a class="language" href=""><img src="assets/images/language/portuguese.png">Português</a>
<a class="language" href=""><img src="assets/images/language/english.png">English</a>
<img class="logo" src="assets/images/logo.png">
I want the first and the second above the third..
So, in my css i made:
.language {
margin: 0 5px 0 10px;
}
.logo {
width: 40%;
margin-top: 60px;
}
There is something wrong?? it's not working.
At the moment you have all three images in the same "row". You didn't separate them in two rows in any way.
I would suggest putting language icons in their own div tag like this:
<div>
<a class="language" href=""><img src="assets/images/languag/portuguese.png">Português</a>
<a class="language" href=""><img src="assets/images/language/english.png">English</a>
</div>
<img class="logo" src="assets/images/logo.png">
More information missing from your question, but I guess that's it
<style type="text/css">
.classe1 {
background-image: url('../../Content/images/carousel2.jpg');
background-repeat: no-repeat;
height:100px;
}
</style>
<div class="classe1">
<img src="../../Content/images/Icon1.png" alt="" width="40px" />
<img src="../../Content/images/Icon2.png" alt="" width="40px" />
</div>
If you can't influence the HTML, you can make <br> with CSS:
a + a:after {
content: "\A";
white-space: pre;
}
Since ::before and ::after don't work on self closing tags like <img>, you'll have to add it to the second <a>
Voila demo
Just make it like this
HTML
<div class="wrapit">
<a class="language" href=""><img src="assets/images/language/portuguese.png">Português</a>
<a class="language" href=""><img src="assets/images/language/english.png">English</a>
<img class="logo" src="assets/images/logo.png">
</div>
CSS
.wrapit {
width: 100px;
float: left;
}
.wrapit img { width: 100%; float: left; }
.wrapit a { float: left; width: 50%; display: block; }
I have a div sitting inside of another div, and the background color of the inner div will not stretch for the full length specified by div's width property in css. I have tried using min-width:960px, width:100%, and width:960px, but the background continues to constrain to the contents of the div.
Here is the css
#wrapper-content {
width:960px;
margin: 0 auto;
font-family:arial;
}
#header {
width: 960px;
height: 150px;
background: cyan;
}
#image-logo {
height:49px;
width:374px;
}
#menu-main {
width:960px;
background:blue;
}
#menu-main li {
display:inline;
}
.menu-main-item {
width:6em;
text-decoration:none;
float:left;
color:white;
background-color:blue;
padding:0.8em 0.6em 0.8em 2.4em;
}
Here is the HTML
<div id="wrapper-content"> <!--Beginning of Content Wrapper-->
<div id="header">
<img id="image-logo" src="" alt="Image Logo">
<span style="float:right; font-size:37px;">(888) 555-5555</span><br>
<span style="float:right; font-size:16px">123 Anywhere Ave</span><br>
<span style="float:right; font-size:16px">Somewhere, NY 10001</span>
</div>
<div id="menu-main">
<ul style="margin:0; padding:0;">
<li><a class="menu-main-item" href="index">Home</a></li>
<li><a class="menu-main-item" href="services">Services</a></li>
<li><a class="menu-main-item" href="library">Library</a></li>
<li><a class="menu-main-item" href="about">About</a></li>
<li><a class="menu-main-item" href="contact">Contact</a></li>
</ul>
</div>
</div> <!--End of Wrapper-->
I've also created a JSFiddle for example: http://jsfiddle.net/P88e2/1/
The div with an ID of #menu-main has a dark blue background which does not stretch all the way. Any help stretching the background color the full width of the div is appreciated....
Try doing this change in your CSS:
#menu-main li {
display: inline-block;
}
I want to put one image left, one image right and text in the middle.
I keep thinking I am close then one or another runs away! I would appreciate some help and guidance.
Code for page and CSS below
VB page
<div id="HeaderTitleWrapper">
<h2><img src="images/Header/logo.jpg" alt="Writting Icon" />
<div id="HeaderTel">
GATEWAY<img src="images/Header/pic2.jpg" alt="Writing Icon" />
</div> <!-- HeaderTel -->
</h2>
</div> <!-- HeaderTitleWrapper -->
CSS
/* Header Text Title */
#HeaderTitleWrapper {
width: 1000px ;
margin-left: auto ;
margin-right: auto ;
}
#HeaderTitleContent {
padding: 0px;
height: auto;
position: relative;
left: 0px;
top:10px;
}
#HeaderTel
{
position:absolute;
right:150px;
top:auto;
}
Using text-align:justify and pseudo , you can spray inline-boxes from left to right.
<header>
<img/>
<span>text</span>
<img/
<header>
header {
line-height:0;
text-align:justify;
}
header span {
display:inline-block;
vertical-align:middle;
line-height:1.2em;
}
header:after {
content:'';
display:inline-block;
width:99%;
vertical-align:top;
}
similar exemple : http://codepen.io/gcyrillus/pen/dlvCp
<div
id="firstImage">
<img
src="1.jpg"
alt="Writting Icon"
/>
</div>
<span
id="Text">
GATEWAY
</span>
<div
id="secondImage">
<img
src="2.jpg"
alt="Writing Icon"
/>
</div>
<!-- HeaderTel -->
</div>
I cannot change the height of my div with CSS. It does not seem to be taking affect. Code below. I'm coding in C# ASP.NET with Javascipt and CSS. The below code is included in other files using SSI. The height of .navdiv will not alter no matter the value for height:50px.
ASPX
<link rel="Stylesheet" href="CSS/SSI/header.css" />
<div id="header">
<div id="logo">
<img id="imglogo" src="Images/logo.gif" />
</div>
<div id="nav">
<a class="navlink" href="default.aspx">
<div class="navdiv" id="navhome">
Home
</div>
</a>
<a class="navlink" href="import.aspx">
<div class="navdiv" id="navimport">
Import
</div>
</a>
</div>
</div>
CSS
/*
* header.css
* Created By: Steven T. Norris Created On: 5/12/2012
* Update By: Update On:
*
* Stylesheet for header SSI
*/
/*Main header style*/
#header
{
background-color:#2875ff;
border-color:Black;
border-style:solid;
border-width:2px;
padding:0px;
margin:0px;
}
#logo
{
margin-bottom:10px;
}
#navhome
{
height:100px;
}
/*Navigation styles*/
.navdiv
{
height:50px;
background-color:#000999;
display:inline;
margin-left:10px;
padding-right:5px;
padding-left:5px;
font-size:large;
text-align:center;
color:#c24900;
font-weight:bold;
text-decoration:none;
}
.navdiv:hover
{
color:White;
}
#nav
{
padding:0px;
margin:0px;
height:auto;
width:100%;
}
Using display: inline-block; will fix the height issue, but if you want the divs to still be side by side, be sure to add float: left; to both elements.
The height property will not matter on elements with display: inline. It has to be block or inline-block.