i just want to make an input text field with a little x (close) button at the top right corner. please help me out how it should be done in css3 or bootstrap 3. Thank you
This is a simple demo:
html:
<input type="text"><span class="close-icon">x</span>
css:
.close-icon{
position:relative;
left: -14px;
top: -4px;
}
Check this
HTML
<div class="main-content">
X
Dummy Text will be here.. Dummy Text will be here..
</div>
css
.main-content{
border:1px solid #aaa;
height:200px;
width:50%;
position:relative;
padding:10px;
font-family: arial;
font-size:12px;
}
.close{
position: absolute;
right:5px;
top:5px;
text-decoration: none;
font-family: arial;
color:#fff;
background-color: #aaa;
padding:3px 5px
}
Related
I try to put tooltips on an element, that changes based on four buttons on the same page.
a.tooltip span {
z-index:15;
position: relative;
display:none;
padding:14px 20px;
margin-top:17.5%;
margin-left:18%;
width:300px;
height:80px;
line-height:16px;
border-radius:2px;
box-shadow: 0px 0px 6px 3px #666;
opacity: 0.8;
}
a.tooltip:hover span{
display:inline;
position:absolute;
border:2px solid #666;
color:black;
background:white repeat-x 0 0;
}
This is my tooltip. I works just fine, but I can't hide it, when I want another tooltip to be displayed.
How do I disable this tooltip and show another one, based on the buttons I clicked? Tooltip1 has to be hidden when Tooltip2 is shown and vice versa.
Dr. Google didn't help.
Image for clarification :
You can change tooltip content with
$(".tooltip-selector").tooltip("option", "content", "New Content");
and bind this to your button's click
enter code here
$(document).ready(function(){
$('.btn1').click(function(){
$('.tooltip').addClass('btn1');
$('.tooltip').removeClass('btn2');
});
$('.btn2').click(function(){
$('.tooltip').addClass('btn2');
$('.tooltip').removeClass('btn1');
});
});
a.tooltip span {
z-index:15;
position: relative;
display:none;
padding:14px 20px;
margin-top:17.5%;
margin-left:18%;
width:300px;
height:80px;
line-height:16px;
border-radius:2px;
box-shadow: 0px 0px 6px 3px #666;
opacity: 0.8;}
a.tooltip.btn1:hover span.btn1{
display:inline;
position:absolute;
border:2px solid #666;
color:black;
background:white repeat-x 0 0;}
a.tooltip.btn2:hover span.btn2{
display:inline;
position:absolute;
border:2px solid #666;
color:black;
background:white repeat-x 0 0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<a href="#" class="tooltip">1
<span class="btn1">1</span>
<span class="btn2">2</span>
</a>
<button class="btn1">1</button>
<button class="btn2">2</button>
I have created a round shaped bordered button using CSS by this:
.round-button {
display:block;
width:100px;
height:100px;
line-height:100px;
border:2px solid #29966c;
border-radius: 50%;
color:#FFF;
text-align:center;
text-decoration:none;
background: #FFFFFF;
box-shadow: 0 0 3px gray;
font-size:20px;
font-weight:bold;
}
and used it in html5 by this:
<div align="center">
<a href="#" class="round-button">
<font color="#29966c" id="demo"></font>
</a>
</div>
Now I want to create a line break inside the round button,
<div align="center">
<a href="#" class="round-button">
<font color="#29966c" id="demo">hello <br />world</font>
</a>
</div>
So, the "world" comes out of the round button.
I want both words will be at different line but they both will stay inside the round button window.
As your line-height equals to width in your css, the "world" comes out of the round button.
if you set line-height to 50px, you'll get vertically middle aligned text in the button.
As others mentioned, line-height:100px means each line of text should be 100px tall. That will work to vertically center one line of text (if the container is also 100px tall), but will not work if it is larger than 2 lines of text.
To vertically center the content regardless of how many lines it is, you can use:
display: table-cell;
vertical-align: middle;
Fiddle: http://jsfiddle.net/PDPTV/
(Note: The <font> tag is not supported in HTML5. Moving forward, you should use CSS to specify your font colors. The attribute align=center is also not supported, so you should use another technique to center your content, but that's for a whole other topic on stack overflow.)
The problem is that "line-height:100px;" is pushing the second line down 100px, try this:
.round-button{
display:block;
width:100px;
height:80px;
padding-top: 20px;
border:2px solid #29966c;
border-radius: 50%;
color:#FFF;
text-align:center;
text-decoration:none;
background: #FFFFFF;
box-shadow: 0 0 3px gray;
font-size:20px;
font-weight:bold;
}
You may have to fiddle with the height and padding to get the right offset from the top. Remember that the height excludes padding, so subtract the padding from the height.
Your line-height is 100px. do this instead:
http://jsfiddle.net/VS7sJ/
.round-button {
display:block;
width:100px;
height:100px;
line-height:1em;
border:2px solid #29966c;
border-radius: 50%;
color:#FFF;
text-align:center;
text-decoration:none;
background: #FFFFFF;
box-shadow: 0 0 3px gray;
font-size:20px;
font-weight:bold;
}
span {
padding:20px 0 0;
display:block
}
line-height:1em and wrap the text with span
<div align="center"> <span><font color="#29966c" id="demo">hello <br />world</font></span>
</div>
its the line height problem.
because the height is 100px and line-height is also 100 px thats the reason it shows out the button.
.round-button {
display:block;
width:100px;
height:100px;
line-height:50px;
border:2px solid #29966c;
border-radius: 50%;
color:#FFF;
text-align:center;
text-decoration:none;
background: #FFFFFF;
box-shadow: 0 0 3px gray;
font-size:20px;
font-weight:bold;
}
you can also use the given below code to keep the words in center..
.round-button {
display:block;
width:100px;
height:75px;
padding-top:25px;
line-height:25px;
border:2px solid #29966c;
border-radius: 50%;
color:#FFF;
text-align:center;
text-decoration:none;
background: #FFFFFF;
box-shadow: 0 0 3px gray;
font-size:20px;
font-weight:bold;
}
When it shows comment, it won't show the comment in the middle of vertical-align.
How can I make it shown in the middle of vertical-align?
This is current output. I want it right in the middle of vertical-align.
Javascript
function showComments(time){
var foundComments = findComments(time);
$.each(foundComments,function(i,comment){
$commentContainer.animate({"marginLeft":"400px","opacity":".0"}, 600);
setComment(comment.message);
$commentContainer.animate({"marginLeft":"0px","opacity":"1"}, 600);
});
};
CSS
div.newsticker{
border:1px solid #666666;
width:100%;
height:100px;
}
.newsticker p{
height:100px;
float:left;
position:absolute;
}
HTML
<div class="newsticker">
</div>
If its a single line. set the line height to the height of the div.newsticker eg 100px.
For example
font: 16px/100px 'arial', sans-serif
Just update below CSS3 rule to use "table-cell" and "vertical-align" as below:
div.newsticker{
border:1px solid #666666;
width:100%;
height:100px;
display: table-cell;
vertical-align: middle;
}
Also, you need to avoid position:absolute;
.newsticker p{
height:100px;
float:left;
position:absolute;
}
Try a div with display:table and then a div within with a display: table-cell where you want the text. That should vertical align, JS Fiddle is down, so I can't show you an example.
div.newsticker{
border:1px solid #666666;
width:100%;
height:100px;
display: table;
}
.newsticker p{
padding-left:10px;
padding-right:10px;
display: table-cell;
vertical-align: middle;
}
<div>
<span class="newsticker">
</span></div>
div {
border: 1px solid black;
}
span.newsticker {
border: 1px solid transparent;
}
.newsticker p {
margin: 50px;
vertical-align: middle;
}
http://jsfiddle.net/azHVv/22/
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.