I manage the website for a small college library and am trying to create a bubble tooltip for an images that are part of a slider. Here's the link to the page to show you what I mean:
http://library.sfc.edu/webvoy3.htm. If you hover over the first image in the slider, you will see the tooltip stuck in there. There's no JavaScript for this tooltip, only CSS. I got the code from http://trentrichardson.com/examples/csstooltips/.
This is the CSS part of the tooltip:
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(images/bubble.gif) no-repeat top;
margin-top: 20px;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(images/bubble_filler.gif) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(images/bubble.gif) no-repeat bottom;
}
This is the CSS of the SLIDER
#slider {
width: 450px;
position: relative;
height:inherit;
float:left;
padding-right:45px;
margin-left: 8px;
}
#slider .buttons span {
display: block;
width: 38px;
height: 38px;
font-size: 0;
line-height: 0;
text-indent: -4000px;
cursor: pointer;
}
#slider .buttons span {
position: absolute;
top: 32px;
}
#slider .buttons .prev {
left: -5px;
background: url(images/button-prev.gif) no-repeat 0 0;
}
#slider .buttons .next {
right: 16px;
background: url(images/button-next.gif) no-repeat 0 0;
}
#slider .holder {
width: 400px;
height: 110px;
position: relative;
overflow: hidden;
left:40px;
margin-right: 5px;
padding-right: 0px;
padding-top: 9px;
background: url(images/back-slider.jpg) no-repeat 0 0;
}
#slider .content ul {
position:relative;
list-style-type:;
height:112px;
width: 450px;
overflow:hidden;
padding-right: 10px;
padding-top: 5px;
}
#slider .content ul li {
float: left;
display: inline;
list-style-type: none;
margin-left: 16px;
height:133px;
overflow:hidden;
width:80px;
}
#slider .content ul li a {
display:block;
width: 74px;
height: 97px;
padding-left: 3px;
padding-top: 4px;
background: url(images/slider-fragment.gif);
}
AND THIS IS THE HTML CODE
<div id="slider">
<div class="buttons">
<span class="prev">prev</span>
<span class="next">next</span>
</div>
<div class="holder">
<div class="content">
<ul>
<li>
<a href="http://library.sfc.edu:7008/vwebv/holdingsInfo?bibId=261454" class="tt">
<img src="css/css-eb/images/covers/cover1.png" />
<span class="tooltip">
<span class="top"></span>
<span class="middle">This is my Bubble Tooltip with CSS</span>
<span class="bottom"></span>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
The problem seems to be the incompatibility the tooltip's CSS with the slider's CSS.
Any suggestion or advice would be greatly appreciated.
Just remove overflow: hidden from #slider .content ul li - works for me when I do this live via Developer Tools.
Please Remove the overflow:hidden for the class #slider .content ul li
#slider .content ul li {
float: left;
display: inline;
list-style-type: none;
margin-left: 16px;
height: 133px;
width: 80px;
}
Related
I have problem with my drop-down menu. I don't know how to change position of buttons after scrolling under line to center position. Could you help me please?Thanks!
Example:
enter image description here
* {margin: 0; padding: 0;}
body {
font-family: arial;
color:#ccc;
}
#full-screen-background-image {
z-index: -999;
min-height: absolute;
min-width: absolute;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
#wrapper {
min-height: 100%; _height: 100;
margin: 0 auto -150px auto;
}
a:hover {
color: #0095cd;
}
section {
background: url(/Users/ivanazuskinova/Dropbox/auttalk/INDEX/menu01.png)50% 0 no-repeat;
background-size: 1900px 86px;
opacity:0.8;
}
#header-content {
width:960px;
margin: 0 auto;
padding: 60px 0;
}
#content {
width: 960px;
margin: 0 auto;
padding: 100px 0;
}
.static {
width: 960px;
margin: 0 auto;
text-align: center;
position: relative;
}
nav li{
display: inline-block;
padding: 35px 60px 100px 0px;
}
nav li:nth-child(3) {
padding-right: 200px;
}
nav li:nth-child(1) {
padding-left: 4in 0px;
}
.static a {
transition: all linear 0.15s;
color: white;
}
.static li:hover > a,
.static .current-item > a {
text-decoration: none;
color: white;
}
.static .highlighted {
font-size: 10px;
line-height: 0%;
}
.static li:hover .dynamic {
z-index: 10;
opacity: 1;
}
.dynamic {
position: absolute;
z-index: 0;
opacity: 0;
transition: opacity linear 0.15s;
background: #ccc;
}
.dynamic li {
display: relative;
font-size: 14px;
}
.dynamic li a {
text-decoration: none;
color:#17177e;
}
.logo {
background: url(/Users/ivanazuskinova/Dropbox/auttalk/INDEX/logo.png) 50% 0 no-repeat;
background-size: 125px 86px;
height:155px;
width:180px;
position: absolute;
top: 2px;
left: 390px;
}
<section>
<header>
<div id="wrapper">
<div id="header">
<div class="static-wrap">
<div class="static">
<nav>
<ul>
<li>Home</li>
<li>o vás
<ul class="dynamic">
<li> <span class="highlighted">►</span>Vaše přiběhy</li>
<li><span class="highlighted">►</span>Diskusní fórum
</li>
</ul>
</li>
<li>Services</li>
<li>Work</li>
<li>Blog</li>
<li>Kontakt</li>
</ul>
</nav>
<div class="logo"></div>
</header>
</section>
Try adding a block display to the li links.
.dynamic li a {
display: block;
text-decoration: none;
color:#17177e;
}
Your
.dynamic li {
display: relative;
font-size: 14px;
}
add in 'display: block' in here so it looks like...
.dynamic li {
display: block;
font-size: 14px;
}
So while I hover over each navbar tab, I would like a bar to slide in from the right with a description of the hovered tab. For example, if I hover over "Research," a bar would slide in from the right saying "Read about my current research." How would I do this? Can I use strictly CSS3? Or would I need Javascript? My code is below:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Matthew H. Goodman</title>
<link href="stylesheettabs.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<ul id="nav">
<li>HOME</li>
<li>CV</li>
<li>RESEARCH</li>
<li>CONTACT</li>
</ul>
</body>
</html>
CSS:
#nav {
padding:0px;
margin-top: 200px;
border-radius: 10px;
left: 0;
width: auto;
position: absolute;
height: auto;
background-image: url("http://www.diiiz.com/variant/Argent%C3%A9.jpg");
overflow: hidden;
}
#nav li {
position: relative;
list-style: none;
width: auto;
border-top: 1px solid black;
}
#nav li a {
position: relative;
display: block;
text-decoration: none;
font-size: 15px;
font-weight: bold;
color: white;
text-align: center;
padding: 15px;
}
#nav li:hover {
background-color: black;
}
#nav li a:hover {
color: #778899;
display: block;
padding: 15px;
}
JSBIn
I post a demo on jsbin.Here is key code:
#nav li span{
transition: all 0.5s;
position: absolute;
top: 0;
left: -300px;
display: block;
width: 300px;
height: 100%;
background: #69f;
z-index: -1;
}
#nav li:hover span{
left: 100px;
}
I have a div which is floating to the left with a menu in it and another div to the right which is filling the rest of the space, the problem is, the div on the right is set to 100% but is going off to the right of the page and creating an unwanted scroll. I think the cause is the left-margin I have put on it to allow for the left floating div. Is there a way to make the right div fill the rest of the space without creating a horizontal scroll but so that I can also align things left: 0px against the edge of the float.
I have put the page onto one of my other domains so you can see:
http://aspiresupportandhousing.com/cleanserve/
HTML:
<body>
<div id="lp_bt">
<div id="logo_container_s">
</div>
<div id="menu_container_s">
<nav id="secondary_nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Our Services</li>
<li>Cleaning</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>
<div id="left_panel">
<div id="logo_container">
</div>
<div id="menu_container">
<nav id="primary_nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Our Services</li>
<li>Cleaning</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>
<div id="right_panel">
<div id="main_container">
<div id="title">
</div>
</div>
</div>
</body>
CSS:
html {
height: 100%;
min-width: 1000px;
}
* {
margin: 0px;
padding: 0px;
}
body {
height: 100%;
min-width: 1000px;
color: #000000;
}
/* Hidden */
#lb_bt {
height: 30px;
width: 30px;
left: 30px;
}
#logo_container_s {
left: -150px;
width: 150px;
height: 42px;
position: absolute;
background: url(logo.jpg);
z-index: 3000;
}
#menu_container_s {
left: -150px;
height: 400px;
width: 150px;
position: absolute;
z-index: 3000;
}
/* End Hidden */
/* Left Panel */
#left_panel {
height: 100%;
width: 150px;
float: left;
background-color: #26609E;
z-index: 2000;
}
#logo_container {
width: 150px;
height: 42px;
left: 0px;
top: 0px;
position: relative;
background: url(logo.jpg);
z-index: 3000;
}
#menu_container {
height: 400px;
width: 150px;
top: 0px;
left: 0px;
position: relative;
}
ul {
list-style: none;
text-align: left;
border-top: solid 1px #002954;
}
ul li {
display: list-item;
}
ul li a:link, ul li a:visited {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
font-weight: normal;
width: 800;
color: #FFFFFF;
line-height: 38px;
margin: 0px 10px;
padding: 0px 5px 8px 0px;
text-align: left;
text-decoration: none;
}
ul li a:hover, ul li a:active {
color: #2593C1;
}
#media only screen and (min-width: 280px) and (max-width: 800px) {
body {
background: none rgba(161, 220, 254, 0.4);
}
#left_panel {
left: -150px;
position: absolute;
}
#lp_bt {
top: 0px;
left: 0px;
background: url(menu.jpg);
width: 30px;
height: 30px;
}
#lp_bt:hover {
width: 150px;
height: 100%;
background: none #26609E;
}
#lp_bt:hover #secondary_nav {
display: list-item;
}
#lp_bt:hover #logo_container_s {
left: 0px;
top: 0px;
position: relative;
}
#lp_bt:hover #menu_container_s {
top: 0px;
left: 0px;
position: relative;
}
}
/* End Left Panel */
/* Right Panel */
#right_panel {
height: 100%;
width: 100%;
margin-left: 150px;
background: url(bg.jpg) no-repeat top left fixed;
background-size: cover;
position: absolute;
z-index: 1;
}
#main_container {
width: 700px;
height: 50%;
margin-left: auto;
margin-right: auto;
margin-top: auto;
background: rgba(255, 255, 255, 0.8);
border-radius: 30px 30px 30px 30px;
}
#title {
width: 600px;
height: 104px;
margin-left: auto;
margin-right: auto;
top: 30px;
background: url(title.png) no-repeat center center;
position: relative;
}
#media only screen and (min-width: 280px) and (max-width: 800px) {
#right_panel {
background: none;
}
}
Your Scroll Is caused beacuse yo have a margin-left for your
#right_panel
You have three solutions wich envolve make some changes in CSS for the #right_panel
One use method calc() to set the width:
#right_panel {
width: calc( 100% - 150px);
}
Two change your z-index value and delete margin-left:
#right_panel {
width:100%;
margin-left:0;
z-index:-1;
}
Three use box-sizing and padding instead of margin:
#right_panel {
box-sizing:border-box;
padding-left:150px;
width:100%;
margin:0;
}
Seen as though #left_panel and #right_panel are positioned absolutely, you can simply remove the negative margin form #left_panel:
#left_panel {
left: 0px;
position: absolute;
}
... then remove the 100% width from #right_panel and position it thusly:
#right_panel {
top:0; right:0; bottom:0; left:150px;
}
http://jsfiddle.net/Pz7PP/
You need use CSS position.
A little example
Codepen
CSS
*{margin:0;padding:0;}
#divleft {
position:absolute;
top:0;bottom:0;left:0;
width:250px;
background: red;
}
#divright {
position:absolute;
top:0;
bottom:0;
left:250px;
right:0;
background: green;
}
I have a ul inside a div. I want to center it. Here is the fiddle
HTML
<div id="menu-top">
<div id="menu-container">
<div id="menu-mask">
<ul id="menu">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
</div>
CSS
body {
background-color: #000;
overflow: hidden;
}
#menu-top {
position: absolute;
display: block;
width: 100%;
height: 26px;
top: 0px;
z-index: 9;
}
#menu-container {
width: 840px;
margin: auto;
}
#menu-mask {
display: inline-block;
height: 26px;
margin: auto;
overflow: hidden;
position: relative;
top: 0;
width: 800px;
}
#menu {
position: absolute;
display: block;
left: 0px;
top: 0px;
height: 26px;
margin: auto;
padding: 0px;
width: 100%;
}
#menu li {
padding-right: 20px;
clear: none;
float: left;
display: inline;
}
#menu li a {
font-size: 12px;
line-height: 26px;
letter-spacing: 1.5px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
Here you go... change your #menu to this:
#menu {
position: absolute;
display: block;
margin-left:25%;
margin-right:25%;
margin-top:auto;
margin-bottom:auto;
top: 0px;
height: 26px;
padding: 0px;
width: 100%;
}
The margin-left and margin-right settings will center your menu on the page. I gave this a quick test in your JSFiddle to make sure it works.
Oh, and here's the updated JSFiddle showing the changes...
http://jsfiddle.net/LyJz9/7/
You can probably use text-align:center for what you are trying to do.
My menu is currently under the logo, but instead I want it to be horizontal to the logo. I think the float property is the only way to do something like this(?) but it doesn't work, it won't float.
#top_menu {
height: 20px;
color: #333;
position: relative;
float: right;
}
#top_menu ul li {
float: left;
color:#333;
padding-right:15px;
font-family: Tahoma, Helvetica, sans-serif;
font-size:11px;
}
#top_menu ul li a {
text-decoration:none;
color: #666;
padding: 1px;
padding-right: 8px;
}
#top_menu ul li a:hover {
color:#f2e9c9;
}
#logo{
margin-top: 15px;
width: 200px;
height: 30px;
position: relative;
right: 5px;
}
<div id="logo"><img src="logot.png" alt="lolly"></div>
<div id="top_menu">
<ul>
<li>Portada|</li>
<li>Equipo|</li>
<li>Workbook|</li>
<li>Frescología|</li>
<li>Clientes|</li>
<li>Blog|</li>
<li>Noticias</li>
</ul>
</div>
What's wrong?
If I understand correctly you want the Logo and the Menu on the same horizontal line. If that is the case you can:
Float the logo to the left OR
#logo{
margin-top: 15px;
width: 200px;
height: 30px;
position: relative;
right: 5px;
float:left;
}
Display the logo as inline-block
#logo{
margin-top: 15px;
width: 200px;
height: 30px;
position: relative;
right: 5px;
display:inline-block;
}
Put the logo div after the top_menu div.