If I hover over the hyperlink, the tooltip shows up but not as it should. It shows up a few inches below the hyperlink. I got the code from a demo of the internet.
How do I get the tooltip right below the hyperlink?
Here is the PHP code I used:
if ($teller == 3) {
echo '<p><a href="#" class="tooltip">...<span>';
foreach ($bericht->datums as $date) {
echo date('d/m/Y', strtotime($date->datum)) . ' om ' . date('H:i', strtotime($date->beginUur)) . '<br />';
}
echo '</span></a></p>';
}
The code above generated this code in HTML:
<p>
<a href="#" class="tooltip">...
<span>
13/04/2013 om 13:49<br />
15/04/2013 om 12:50<br />
29/04/2013 om 16:00<br />
</span>
</a>
</p>
Here is the CSS that belongs to it:
a.tooltip span {
position:absolute;
z-index: 999;
white-space:nowrap;
bottom:9999px;
background:#81b0b0;
color:#e0e0e0;
padding:5px 12px;
line-height: 24px;
height: auto;
opacity: 0;
transition:opacity 0.5s ease-out;
}
a.tooltip span::before {
content: "";
display: block;
border-left: 6px solid #81b0b0;
border-top: 6px solid transparent;
position: absolute;
top: -6px;
left: 0px;
}
a.tooltip:link {
color:#FFF;
}
a.tooltip:visited {
color:#FFF;
}
a.tooltip:hover span {
opacity: 1;
bottom:-35px;
}
Can someone help me out please? Thanks! ;)
when you use
position:absolute;
it positions against the nearest container in the chain that has a position set; so if you don't have a position set on any of the elements that contain it, or its parents, it will position against the body.
try putting position absolute or relative on the containing p tag
Related
I have written a code that works great for me. So I have a (half) border around my picture. like the picture below. But when I add a background-color the line dissapears.
Now I want the oppiste colors but there for I need a background-color. So I did that but now the border isn't showing anymore. So I want a white line with an orange background. There are 3 files. The CSS file, The PHP file u can see here and a file where they get together.
My PHP/HTML
#about {
background-color: #EF7F19;
color: white;
}
#about .about {
flex-direction: column-reverse;
text-align: center;
max-width: 1200px;
margin: 0 auto;
padding: 100px 20px;
}
#about .col-left {
width: 250px;
height: 360px;
}
#about .col-right {
width: 100%;
}
#about .col-right h2 {
font-size: 1.5rem;
font-weight: 500;
letter-spacing: 0.2rem;
margin-bottom: 10px;
}
#about .col-right p {
margin-bottom: 20px;
}
#about .col-left .about-img {
height: 100%;
width: 100%;
position: relative;
border: 10px solid #EF7F19;
}
#about .col-left .about-img::after {
content: '';
position: absolute;
left: -33px;
top: 19px;
height: 98%;
width: 98%;
border: 7px solid white;
z-index: -1;
}
#media only screen
and (min-width:768px) {
#about .about {
flex-direction: row;
}
#about .col-left {
width: 600px;
height: 400px;
padding-left: 60px;
}
#about .about .col-left .about-img::after {
left: -45px;
top: 34px;
height: 98%;
width: 98%;
border: 10px solid white;
}
#about .col-right {
text-align: left;
padding: 30px;
}
#about .col-right h1 {
text-align: left;
}
}
echo ' <section id="about">';
echo ' <div class="about container">';
echo ' <div class="col-left">';
echo ' <div class="about-img">';
echo ' <img src="'. $row[" AboutLocation "].'"
alt="img">';
echo ' </div>';
echo ' </div>';
echo ' <div class="col-right">';
echo ' <h1 class="section-title"
style="color: white;">Over ons</h1>';
echo ' <h2>Adisol</h2>';
echo ' <p>'. $row["AboutUsText"].'</p> ';
echo ' </div>
</div>
</section>';
Like I said already in the comment. The use of box-shadow would be the easier approach to achieve the wanted design. That way you dont need pseudo elements. you can use 2 box shadows with a vertical and horizontal offset.
Lets go through the code and see how it actually works:
1st: you need a border aroudn your image. specifiy the border as white solid with a thickness of your liking.
2nd: We need an orange frame which we'll get by using the box-shadowattribute with 2 values that are seperated with a comma.
3rd: lets start with the second and last value: -30px 30px 0 0 orange the first number is the horizontal offset which will move the frame 30px to the left. The second number is the vertical offset which moves the frame 30px to the bottom. The third number is the blur value. With 0 it will be a solid color. The fourth and last number is the size. With 0 it has the exact same size as the picture.
4th: To prevent that the whole shadow displays as an orange block, we need to put another box shadow value in front of it. We give it the same offset and blur value. The fourth number we change however. We change it to a negative value of the intended "frame" thickness. In this case -10px which will make the "frame" 10px thick.
img {
width: 50%;
float: right;
border: 10px solid white;
box-shadow: -30px 30px 0 -10px white,
-30px 30px 0 0 orange;
}
/* for demonstration only */
img {
margin-bottom: 100px;
}
<img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg">
I want to make some formatting within html with css to make my data presentable.
My php code is,
echo '<br><div class="items">' . "id" .'</div>';
echo '<div class="colon"> : </div>';
echo '<div class="details">' . "12" . '</div>';
My css is,
.items,.details,.colon {
display: inline-block;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
.colon {
position: fixed;
left: 200;
}
.items {
position: relative;
margin-top: 5px;
padding: 3px 2px 0 8px;
width: auto;
display: block;
text-align: right;
margin : 0 auto;
font-size: 12px;
font-weight: bold;
}
.details {
font-size: 12px;
font-weight: normal;
text-align: left;
}
The output i am getting is,
And the output i want is,
Can anybody please suggest ?
Your looking for display:flex; "The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning."
Source # https://www.w3schools.com/css/css3_flexbox.asp
Html
<div class="flex-container">
<div class="item auto">auto</div>
<div class="item initial">initial</div>
<div class="item initial">initial</div>
</div>
Css:
.flex-container{background-color:#f4f7f8;overflow:hidden;display:flex;margin:1em}
.item{margin:1em;padding:.5em;width:110px;min-width:0;background-color:#1b5385;color:#fff;font-family:monospace}
.initial{flex:initial}
.auto{flex:auto}
Working codepen version https://codepen.io/amarinediary/pen/VwaVMza
`echo '<div class="col-sm-4">';
echo '<div class="product-image-wrapper">';
echo'<div class="single-products">';
echo'<div class="productinfo text-center">';
echo'<a href="product-detail.php id='.$row[9].'&item='.$_REQUEST['item'].'&product='.$row[2].'&pro=2">';
echo '<img src="image/thumb_images/'.$row['6'].'" />'; // image
$thumb='image/thumb_images/'.$row[6];
echo '<h6>Rs. ' .ROUND($row['SellingPrice']).'/-';
if($row['discount']>0){;
echo ' <span>MRP. ' .$row[4].' /-</span>';
}else{}
echo '</h6>';
echo'<h6>'.$row[2].'</h6>';
$name=$row[2];`
echo' </div>';
echo '</div>';
echo '</div>';
echo '</div>';
CSS
.single-products {
position: relative;
}
.new, .sale {
position: absolute;
top: 0;
right: 0;
}
.productinfo h6{
color:#fff;
}
.productinfo h5{
font-size: 70%;
text-decoration: line-through;
font-weight:bold;
color:#999;
}
.product-overlay h2{
margin-top:250px;
color: red;
}
.single-products h6{
color:#fff;
font-size: 90%;
vertical-align: top;
text-decoration: none;
line-height: 1;
}
.single-products span{
font-size:12px;
text-decoration: line-through;
font-weight:300;
color:#Fff;
}
.productinfo p{
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 400;
color: #696763;
}
here i have write my bootstrap code and below i have attach my screenshot when i fixed size then it work fine but i want to fill up this gap by image... i have attach css also please read out the above code and give me answer related to problem..
please suggest me
With reference to Akhil try the following solution Kuldeep. Hope it works.
<?php
while($row = mysql_fetch_array($result)){
$product_count++ ;
echo '<div class="col-sm-4" style="text-overflow:ellipsis;">';
//put your code here
//put your code here
//put your code here
echo'</div>';
if($product_count % 3 == 0){
echo'<div style="clear: both;"></div>';
}
}
?>
kuldeep, either fix the height of the box and if there is more text you can use text-overflow: ellipsis; for showing more text is there. And one other option is You need to put a clear:both tag after each 3 boxes. You can make it in condition loop I think.
I am making a small chat and I am having issues making the div's appear below each other. This is what I have:
$i = 0;
while($i < 5)
{
echo "<div class='MyChatholders'>";
echo "<div class='pro_pic'>";
//my image
echo "</div>";
echo "<div class='ChatInfo'>";
//my information
echo "</div>";
echo "</div>";
echo "<br />";
$i++;
}
MY CSS:
div.MyChatholders
{
left: 5px;
color: black;
width: 290px;
height: 100px;
border-radius: 10px;
}
div.pro_pic
{
left: 5px;
width: 30px;
height: 30px;
border: solid black 1px;
}
div.ChatInfo
{
color: black;
font-size: 14px;
left: 40px;
width: 245px;
}
Please note that the (while function) is just to simulate the information drawn from the DBase.
Now my issues is that all the div's are in one position. I would like them to fall below each other. I do not understand why this is happening. Can someone help me with my code and explain why?
I have looked at this solution but it is not working for me Check here
Add position:relative; to your divs.
Working fiddle based on your code: http://jsfiddle.net/MmGyU/1/
Note: Borders in the fiddle are for demonstration purposes.
div.MyChatholders {
position: relative;
left: 5px;
color: black;
width: 290px;
height: 100px;
border-radius: 10px;
}
div.pro_pic {
position:relative;
left: 5px;
width: 30px;
height: 30px;
}
div.ChatInfo {
position:relative;
color: black;
font-size: 14px;
left: 40px;
width: 245px;
}
Make it print your <div> tags to a new line in your loop using \n
$i = 0;
while($i < 5)
{
echo "<div class='MyChatholders'>\n";
echo "<div class='pro_pic'>\n";
//my image
echo "</div>\n";
echo "<div class='ChatInfo'>\n";
//my information
echo "</div>\n";
echo "</div>\n";
echo "<br />\n";
$i++;
}
EDIT Syntax was wrong, the \n needs to be within quotes
2nd EDIT My mistake, \n is not HTML and it won't work. You could use <br /> instead according to this post
Add clear:both; to your chat divs.
I have an advent/christmas calendar. Everyday is another picture with one more door opened. To make these regions clickable I used CSS and IDs like this:
CSS:
ul#doorregions {
list-style: none;
background: url(<?php echo($pictureoftheday); ?>) no-repeat 0 0;
position: relative;
width: 950px;
height: 575px;
margin: 0;
padding: 0;
}
ul#doorregionsli {
border: 0px ;
position: absolute;
}
#door1 {
left: 135px;
top: 192px;
width: 73px;
height: 116px;
}
#door2 {
left: 135px;
top: 192px;
width: 73px;
height: 116px;
}
HTML:
<ul id="doorregions">
<li id="door1">
<span><a href="<?php echo($december1); ?>">
<img src="blankpixel.gif" width="100%" height="100%">
</a></span></li>
<li id="door2">
<span><a href="<?php echo($december2); ?>">
<img src="blankpixel.gif" width="100%" height="100%">
</a></span></li>
</ul>
So far all works fine. Now an image should, on rollover, show a door near the mouse cursor while it is over the region. I tried something like:
#door1 a:hover {
display:block;
background-image: url(OTHERPICTURE1.jpg);
}
But this method doesn't work if the other picture is bigger than the door region. Any other idea? I can't slice the background image, that is not an option.
It's not necessary to follow the mouse in the region, the position can be fixed. But this second image should only apear while the mouse is over the door (or maybe on the second picture).
The BEST solution would be something like this: http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/
But in this case it is the same picuture which zooms in. I have only blank gifs. What will be the smartest idea?
If you are willing to use jQuery, you could create a hidden div for each "door". Then, bind a hover event to the a tag and set the visibility of the div to true. Like such:
$("li #door1 a").hover(function () {
$("div #door1image", this).fadeIn("fast");
}, function () {
$("div #door1image", this).fadeOut("fast");
});
The "door1image" is id of the div that would be hidden from the start (display:none). It could be placed inside the li with the a tag for each door.
Code is not tested and may not be perfect, but hopefully you get the idea.
What about setting the door divs to position: relative then do an absolutely positioned div with negative bottom and rightplacement example:
#door1 {
Position: relative;
}
#door1 .door {
Position: absolute;
Bottom: -25;
Right:-25;
Display:none;
}
Then use javascript to change the display property back to normal.
Hope this helps.
I haven't been able to get fades or animation to work like I want it to, but here is how I would make the popup images. Note: that instead of using a blank image, the image should be the image you want to display on hovering.
CSS
ul#doorregions {
list-style: none;
background: url(<?php echo($pictureoftheday); ?>) no-repeat 0 0;
position: relative;
width: 950px;
height: 575px;
margin: 0;
padding: 0;
}
ul#doorregions li {
border: 0px ;
position: absolute;
}
#door1 {
left: 135px;
top: 192px;
}
#door2 {
left: 225px;
top: 192px;
}
.doors {
background: #444;
width: 73px;
height: 116px;
}
.popup {
position: absolute;
top: 0;
left: -99999px;
border: 0px;
z-index: 9;
}
HTML
<ul id="doorregions">
<li id="door1" class="doors">
<span><a href="<?php echo($december1); ?>">
<img class="popup" src="<?php echo($december1Image); ?>">
</a></span>
</li>
<li id="door2" class="doors">
<span><a href="<?php echo($december2); ?>">
<img class="popup" src="<?php echo($december2Image); ?>">
</a></span>
</li>
</ul>
Script
// using window.load to ensure all images are loaded
$(window).load(function(){
$('.doors').each(function(){
var popup = $(this).find('.popup');
// find middle of door
var doorY = $(this).height()/2;
var doorX = $(this).width()/2;
// position middle of popup to middle of door
var popY = doorY - popup.height()/2;
var popX = doorX - popup.width()/2;
popup
.hide()
.css({top: popY, left: popX });
$(this).hover(function(){
popup.show();
},function(){
popup.hide();
})
})
})
I'm not entirely sure of what you're needing, but the following code duplicates the functionality of the "Fancy Thumbnail" link you provided. Hopefully it will help!
<!DOCTYPE html>
<style>
ul {
list-style: none;
margin: 50px;
padding: 0;
}
li {
width: 300px;
height: 300px;
float: left;
border: 3px outset gray;
background: white;
}
li:hover {
margin: -50px;
width: 400px;
height: 400px;
z-index: 2;
position: relative;
}
</style>
<ul>
<li>foo</li>
<li>foo</li>
<li>foo</li>
<li>foo</li>
<li>foo</li>
<li>foo</li>
<li>foo</li>
<li>foo</li>
<li>foo</li>
</ul>