I have the following HTML:
<div id="main">
<div id="calendar">
<div class="column" id="time_slots">
</div>
<div class="column" id="day1">
<div class="route_container">
<div class="date"></div>
<button class="add_route" name="add_route" onclick="">Add New Route - 1</button>
<div class = "truck" id="day1_route1">
<div class="ts8-10">J Smith</div>
<div class="ts10-12">10-12 AM</div>
<div class="ts12-2">12-2 AM</div>
<div class="ts2-4">2-4 AM</div>
<div class="ts4-6">4-6 AM</div>
</div>
</div>
</div>
And the following CSS:
.label
{
width:20px;
}
.table
{
font-size: 1.2em;
}
#main
{
border-style: solid;
border-width: 1px;
border-color: black;
width:97%;
height:900px;
margin:auto;
overflow: auto;
white-space: nowrap;
}
h2
{
font-size: 24px;
}
#calendar
{
padding:1%;
}
.column
{
border-style: solid;
border-width: 1px;
border-color: black;
min-width:10%;
max-width:100%;
width:17%;
height:1000px;
display: inline-block;
overflow: auto;
padding:5px;
font-size: 0px;
}
.header
{
padding:0;
margin:0;
text-align: center;
font-style: bold;
}
.route_container
{
height:100%;
display: inline-block;
font-size: 0px;
border-style: solid;
border-width: 1px;
border-color: black;
min-width:10%;
max-width:100%;
width:100%;
overflow: auto;
padding:5px;
font-size: 0px;
}
.truck
{
width:275px;
height:100%;
border-style: solid;
border-width: 1px;
border-color: black;
display:inline-block;
margin:auto;
font-size: 16px;
padding:2%;
position: relative;
}
.column#time_slots
{
width:5%;
min-width:5%;
max-width: 10%;
}
.date
{
text-align: center;
width:100%;
border-style: solid;
border-width: 1px;
border-color: black;
}
.column button
{
display:block;
width:100%;
width:100%;
border-style: solid;
border-width: 1px;
border-color: black;
font-size: 16px;
}
.full_time
{
display: none;
}
.ts8-10, .ts10-12, .ts12-2, .ts2-4, .ts4-6
{
border-style: solid;
border-width: 1px;
border-color: black;
width:90%;
height:20%;
font-size: 28px;
text-align: center;
padding:5px;
}
I am adding another div with the following Javascript:
$(".add_route").click(function(){
var truck = $(this).parent().find('.truck').length
truck += 1;
var w = $(this).parent().width();
$(this).parent().animate({width:(w+405)}, 1000);
$(this).parent().parent().animate({width:(w+425)}, 1000);
$(this).parent().append('<div class = "truck" id="'+$(this).parent().parent().attr('id')+'_route'+truck+'"><p>There are '+ truck +' routes</p></div>');
$('#'+$(this).parent().attr('id')+'_route'+truck).hide();
var route_num = $(this).parent().find('.truck').length;
var route_w = (100/route_num)-1;
$('#'+$(this).parent().attr('id')+'_route'+truck).fadeIn(200);
$(this).parent().parent().css("padding", "5px");
console.log($(this).parent().parent().css("padding", "5px"))
$(this).parent().find('.truck').css("margin-right", "3px");
});
And I get the following result:
As you can see, the added div (the one with "there are 2 routes"), is quite a bit lower than the other div. To make matters worse, when I change the contents of this HTML by expanding the divs (ts8-10, etc) and a border:
<div class = "truck" id="day1_route1">
<div class="ts8-10">J Smith</div>
<div class="ts10-12">10-12 AM</div>
<div class="ts12-2">12-2 AM</div>
<div class="ts2-4">2-4 AM</div>
<div class="ts4-6">4-6 AM</div>
</div>
The offset is so much worse. It is practically at the bottom of the first div (the one with JSmith).
I understand this these are set as "inline-block" and I have tried to make adjustments, as you can see, and nothing seems to work. I have checked to make sure that there are no extra margins or padding issues, at least none are showing when I use the Chrome web dev tool.
Can someone tell me what is going on here? What am I doing wrong? How can I fix this?
inline-block items are aligned based on the vertical-align property, which defaults to baseline. Add vertical-align:top; to .truck.
(This is a more flexible, intuitive solution than using a table-cell hack. inline-block will still behave as you expect it to after that.)
In css change the display :inline-block to table-cell, It will work
.truck
{
width:275px;
height:100%;
border-style: solid;
border-width: 1px;
border-color: black;
/*display: inline-block;*/
display: table-cell;
margin:auto;
font-size: 16px;
padding:2%;
position: relative;
}
Related
I am making a tooltip box which involve personal introduction text,my target is a tooltip box with Arrow is displayed if I using a mouse to hover a profile picture.........
I have tried some methods online but they are not workable ...... can anyone help me?
here is my css code for the tooltip box
.tooltip {
display:none;
position:absolute;
border:1px solid #333;
background-color:#161616;
border-radius:5px;
padding:10px;
color:#fff;
font-size:12px Arial;
}
Here is my html code example
<table style="width:100%">
<tr>
<td><img src="http://2017.igem.org/wiki/images/2/26/Andrew.PNG" width="200" height="200" class="masterTooltip" title="Name: Ching Yuet To;
Hobby: Hiking, Watching movie;
I believe that it would be fun that we can carry out research study
independently. I think it is meaningful to participate and promote synthetic
biology research.
I can learn a lot and make many international friends in Boston! "></td>
Use ::before selector to make the arrow like the example
.tooltip-element {
display:none;
position:absolute;
border:1px solid #333;
background-color:#161616;
border-radius:5px;
padding:10px;
color:#fff;
font-size:12px Arial;
bottom:100%;
left:0;
}
.tooltip-element::after{
content:'';
position:absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 7px 5px 0 5px;
border-color: #161616 transparent transparent transparent;
bottom:-8px;
left:5px;
}
.tooltip{
position:relative;
}
.tooltip:hover .tooltip-element{
display:block;
}
<br><br><br><br><br><br><br>
<span class="tooltip">
<span class="tooltip-element">contnet tooltip</span>
test</span>
Basic Tooltips Image With Arrow
/* --- Tooltip || Begin --- */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltipText {
visibility: hidden;
max-width: 300px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 5px;
padding: 0.5em;
position: absolute;
z-index: 1;
word-wrap: break-word;
}
.tooltip:hover .tooltipText {
visibility: visible;
}
.tooltipTextRight {
left: 110%;
top: 0px;
}
/* --- Tooltip || End --- */
/* --- Tooltip Arrow || Begin --- */
.tooltip .tooltipArrow::after {
border-width: 5px;
border-style: solid;
content: "";
position: absolute;
}
.tooltipArrowRight::after {
border-color: transparent black transparent transparent; /* right */
top: 0px;
right: 100%;
margin-top: 5px;
}
/* --- Tooltip Arrow || End --- */
img {
width: 200px;
height: 200px;
object-fit: cover;
}
<div class="tooltip">
<img src="http://2017.igem.org/wiki/images/2/26/Andrew.PNG" title="Name: Ching Yuet To;" />
<span class="tooltipText tooltipTextRight tooltipArrow tooltipArrowRight">
<p>Hobby: Hiking, Watching movie;</p>
<p>I believe that it would be fun that we can carry out research study independently. I think it is meaningful to participate and promote synthetic biology research.</p>
</span>
</div>
#submitCancel {
float:left;
width:49%;
height:6em;
background-color: green;
color: white;
/*font-size: 2em;*/
border-style: none;
padding: 0;
border: none;
}
#submitCancel img {
border:1px black solid;
}
.btnText {
font-size: 2em;
display: inline-block;
vertical-align: middle;
}
<button type="button" id="submitCancel" onclick="closeForm();">
<img src="http://files.softicons.com/download/android-icons/hyaline-icons-by-qishui/png/88x88/camera.png">
<span class="btnText">Cancel</span>
</button>
I try to put a image and text inside a button and make it center.
How can I do it? I
This should work. Using align="middle" in the img tag.
<img src="http://files.softicons.com/download/android-icons/hyaline-icons-by-qishui/png/88x88/camera.png" align="middle">
Try this,
#submitCancel {
float:left;
width:49%;
height:6em;
background-color: green;
color: white;
/*font-size: 2em;*/
border-style: none;
padding: 0;
border: none;
}
#submitCancel img {
border:1px black solid;
}
.btnText {
font-size: 2em;
display: inline-block;
vertical-align: middle;
}
<button type="button" id="submitCancel" onclick="closeForm();">
<img src="http://files.softicons.com/download/android-icons/hyaline-icons-by-qishui/png/88x88/camera.png" align="middle">
<span class="btnText">Cancel</span>
</button>
There are two ways.
Add a vertical-align: middle; property to the following class.
#submitCancel img {
border: 1px black solid;
vertical-align: middle;
}
or
add a align="center" attribute to the image tag.
<img src="http://files.softicons.com/download/android-icons/hyaline-icons-by-qishui/png/88x88/camera.png" align="center">
My central block keeps on moving to the left when I resize the browser window
normal:
http://imgur.com/b2AVkUx
after resizing browser window:
http://imgur.com/mJq6AuO
so i managed to figure out how to keep the navi and footer relatively undisruptive during resizing, but I just can't seem to figure out how to deal with the body, help please?
HTML:
<html>
<head>
<title>Line After Line</title>
<link type = "text/css" rel = "stylesheet" href = "stylesheet.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id = "top">
<div id = "opening">
<a href = "index.html">
<h1 id = "logo"> Line After Line </h1>
</a>
</div>
<div id = "navi">
<ul>
<li> Read </li>
<li> Write</li>
<li> Review </li>
<li> Donate </li>
</ul>
</div>
</div>
<div id = "updates">
<h4>Updates</h4>
<ul>
<li> number one blah blah blah blah blah hahahahaahah </li>
</br>
<li>number two blah blah blah </li>
</ul>
</div>
<div id = "story">
<a href = "blockOne.html">
<div class = "storyblocks" id = "blockOne" >
<p> Hello I this is a test block </p>
</div>
</a>
<div class = "storyblocks" id = "blockTwo"></div>
<div class = "storyblocks" id = "blockThree"></div>
<div class = "storyblocks" id = "blockFour"></div>
<div class = "storyblocks" id = "blockFive"></div>
<div class = "storyblocks" id = "blockSix"></div>
</div>
<div id = "footer">
<ul>
<li> Home </li>
<li> A Message From Chung</li>
<li> Contributors </li>
<li> About </li>
<li> Contact </li>
</ul>
</div>
</body>
CSS:
*{
margin: 0px;
padding: 0px;
}
ul{
list-style-type: none;
}
body{
background-color: white;
}
body a {
text-decoration: none;
}
#top{
background-color: black; /*use to see div area*/
height:75px;
margin-bottom: 1.5%;
padding: 5px;
}
/*div surrounding the Logo */
#opening{
margin-left: 100px;
width: 300px;
}
#logo{
color: white;
font-family: verdana;
float:left;
margin-top: 15px;
}
#navi{
/*background-color: red;*/
width: 1100px;
left: 200px;
margin-top: 20px;
margin-right: 100px;
position: relative;
}
#navi ul li {
font-weight: bold;
color: white;
display: inline;
text-decoration: none;
font-family: Calibri;
font-size: 26px;
margin: 0px 60px 0px 60px;
}
#updates{
/*background-color: blue; /* use to see div area */
color: #6D8582 ;
font-family: verdana;
margin-left: 5%; /*100px*/
margin-bottom: 10px;
height: 600px;
width: 300px;
border-right: thick solid #6D8582;
float: left;
position: relative;
}
#updates h4 {
text-align: center;
padding: 10px;
}
#updates ul {
margin-left: 20px;
list-style-type: none;
}
#story , #mainStory{
/*border: thin solid black;*/
/*background-color: red;*/
float: right;
margin-left: 27%;
margin-bottom: 10px;
position: absolute;/* relative*/
width: 1145px;
height: 600px;
overflow: auto;
border-radius: 5px;
}
#mainStory {
background-color: #F7F9FA;
width: 1050px;
margin-right: 4.5%;
}
#mainStory p {
color: black;
font-family: Calibri;
font-size: 18px;
padding-left: 50px;
padding-right: 50px;
text-indent:50px;
}
#mainStory h2{
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
}
.storyblocks{
color:black;
display:inline-block;
line-height: 50px;
margin: 5px;
width: 200px;
height: 200px;
border-radius: 5px;
text-align: center;
vertical-align: top;
opacity: 0.6;
}
#blockOne{
/*border: thick solid blue; /*delete later*/
background-color: #2A9BB5;
}
#blockTwo{
/*border: thick solid green; /*delete later*/
background-color: #17EB0C;
}
#blockThree{
/*border: thick solid yellow; /*delete later*/
background-color: #F0F035;
}
#blockFour{
/*border: thick solid red; /*delete later*/
background-color: #F02E4E;
}
#blockFive{
/*border: thick solid purple; /*delete later*/
background-color: #DA41E8;
}
#blockSix{
/*border: thick solid green; /*delete later*/
background-color: #FC62B2;
}
#footer {
background-color: black;
text-align:center;
position: absolute;
clear: left;
height:34px;
bottom: 0;
width:100%
}
#footer ul li {
color: white;
text-decoration: none;
display: inline;
font-family: Calibri;
font-size: 16px;
margin-left:50px;
margin-right:50px;
}
It is because you have a fixed width and float right. Your div with the boxes is trying to stay aligned with the right hand side of the browser window, and because you won't let it resize it moves over. Either make the width a percentage, or don't float right and have a margin left 300px
Actually you have a problem with responsive design. If you do not have any of items ( sidebar or content) fixed you can use precentage on both of them, like :
#nav {
width:27%;
display:inline-block;
vertical-align:top;
padding-right:1%;
margin-right:1%;
border-right:1px solid #ccc;
}
#content {
width:70%;
display:inline-block;
vertical-align:top;
}
If you have something fixed ( let say sidebar ) you have to use css media queries and create some "patterns" for certain intervals of resolution ( width ).
You have an example which uses precentage sizes of both sides : http://jsfiddle.net/7Qpw6/
Im having trouble with my navigation bar hover effects specifically transitions(line 109/110). Essentially i want whichever link the mouse is hovering over to raise(margin increase of 2%) while the other links hold the margin of 0. The problem is that all the link margins increase by 2% whenever i hover on any of them. Its my first time posting so sorry for the messy code, if i broke any posting rules and/or if this question was unclear at all. I played around with it for abit and couldnt figure it out. Also if it is simpler i can figure out how to do it using javascript.
Cheers
<!DOCTYPE html>
<html>
<head>
<title>
Atticus Products
</title>
<script src="http://code.jquery.com
/jquery-1.9.1.js">
</script>
<script>
/*
$(document).ready(function(){
$("a").hover(function(){
$("a").animate({up:'250px'});
});
});
*/
</script>
<style>
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
font-size:100%;
background-color:#6ec247;
font-family: CaeciliaLTStd75Bold,Helvetica,Arial,Sans-serif;
}
#wrapper {
margin: 0 auto;
width: 50%;
height: 100%;
position: relative;
}
/*Header: Contains Logo and NavBar*/
#header {
border-bottom: 8px solid #f2f2f2;
overflow:hidden;
height: auto;
position:relative;
clear:both;
height:auto;
margin:0;
display:block;
}
#logoName {
max-width: 100%;
width:40%;
float:left;
height:150px;
}
#logoName a {
position:absolute;
bottom:0;
color:#FFFFFF;
text-decoration: none;
font-size:3em;
font-weight: bold;
}
/*NavBar*/
#nav {
margin: 0;
padding: 0;
list-style: none;
text-align: right;
right:0;
width:60%;
float:right;
position:absolute;
bottom:0;
}
#nav li {
display: inline;
}
#nav li a {
display: inline-block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
font-size:1em;
margin-bottom:0;
}
#nav li a:hover {
color: #c00;
background-color: #000000;
opacity:0.5;
transition-property: margin-bottom;
transition-duration:4s;
margin-bottom:2%
/*this is where the problem is*/
}
/*Content: Contains Container1, LogoWords and Logo1*/
#content {
height: 60%;
text-align: center;
/*background-color: #4d8e2f;*/
color:#FFFFFF;
margin:0;
top:0;
display:relative;
font-weight: bold;
}
#container1 {
display: block;
max-width: 100%;
position:relative;
height:40.5%;
width:100%;
margin:0;
background-color:#6ec247 ;
z-index:0;
border-bottom: 8px solid #f2f2f2;
}
#logoWords{
z-index:1;
display:block;
position:absolute;
width:auto;
height:auto;
top:18.5%;
right:0;
color:#FFFFFF;
text-decoration: none;
font-size:2.5em;
font-weight: bold;
text-align:left;
}
#logo1 {
display:block;
z-index:1;
position:absolute;
left:0;
top:18.5%;
width:auto;
height:auto;
}
#content{
background-color:#6ec247 ;
}
#content p {
margin:0;
}
#footer {
height:10%;
width: 100%;
position: absolute;
bottom: 0;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<ul id="nav">
<li>About</li>
<li>Our Approach</li>
<li>Careers</li>
<li>Contact</li>
</ul>
<div id="logoName">
Atticus <br>Products</br>
</div>
</div>
<div id="content">
<div id="container1">
</div>
<img id="logo1" src="image/justlogo.png" alt="logo" width="207"
height="214">
<div id="logoWords">
<p><br>We find the people</br> that make your company succeed</p>
</div>
<div id="content">
<p>
<br>Careers with Atticus</br>
</p>
</div>
</div>
<div id="footer">
<p>bam</p>
</div>
</div>
</body>
</html>
Your problem is in your jQuery.
Because you have $('a').animate it will effect every a element on the page.
You can get around this by changing 'a' to 'this' without quotation marks.
$(document).ready(function(){
$("a").hover(function(){
$(this).animate({up:'250px'});
});
});
This will only effect the element being hovered over.
Best of luck.
How can i align text and image verticle align middle ??
jsfiddle demo here : http://jsfiddle.net/j3wDP/
My CSS:
.rating{
border: 1px solid red;
font-family: verdana;
font-size: 12px;
width: 180px;
height: 20px;
}
span img{
width: 20px;
height: 20px;
padding: 0px 3px;
}
My HTML:
<body>
<div class="rating">Rating <span><img src="like.jpg">233<img src="dislike.jpg">100</span></div>
</body
add some property
span img{ vertical-align:middle;}
See DEMO
Demo
.rating{
border: 1px solid #8e8e8e;
font-family: verdana;
font-size: 12px;
width: 180px;
line-height:50px;
height: 50px;
}
span img{
width: 20px;
height: 20px;
padding: 0px 3px;
}
You can use line-height
Change your css like this
.rating{
border: 1px solid #8e8e8e;
font-family: verdana;
font-size: 12px;
width: 180px;
height: 20px;
line-height:20px;
}
span img{
width: 20px;
height: 20px;
padding: 0px 3px;
vertical-align:middle;
}
the best way is to use Line-height or us can use
.rating{
display:table-cell;
vertical-align:middle;
}
There are different solutions. You can wrap your content into two (e.g. div-)containers and handle them like a table. Something like that:
<div style="display:table; height: 200px; background:red;">
<div style="display:table-cell; height:200px; vertical-align:middle">
<span>Your Content</span>
</div>
</div>
it's important to give them a height property and use display: table and display:table-cell instead of it. another way is to center this span with position: absolute:
<div style="height:200px; background:red; position:relative">
<span style="height:20px; position:absolute; top:50%; margin-top:-10px;">Your content</span>
</div>
In that example the margin-top value is calculated by the half value of the height (height: 20px = margin-top:-10px). But I would prefer the first way.