CSS wont align text in DIV
Question
I am new in learning jquery and making my own website. This is my fiddle JSFIDDLE . When you hover a new div shows up with some text. But the text is going out of that div. I want that text within the new div. I dont know why that is happening. I know this is a silly question but i spent like more than an hr getting it right.
The code
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="example.js"></script>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="box">
<h2 id='name'> Karan Shah </h2>
<div id='innerbox'><span><h4 id='emptyInfo'></h4></span><div>
<script>
$('#innerbox').hide();
</script>
</div>
<script>
$('#name').css('color','black');
$('#name').css('text-align','center');
$(document).ready(function () {
var originalText = $('#name').text();
var tOut;
$("#box").hover(
function () {
tOut = setTimeout(function(){
$('#innerbox').show('slow',function(){
$('#emptyInfo').fadeOut(400, function () {
$(this).text('Welcome to my website').slideDown().css('text-align','center');
});
});
},1000);
},
function(){
clearTimeout(tOut);
$('#innerbox').hide('slow',function(){
$('#emptyInfo').hide('slow');
});
}
);
});
</script>
</body>
</html>
the CSS
#box {
background-color: lightgrey;
width: auto;
padding: 25px;
margin: 25px;
}
#emptyInfo{
font-size: 150%;
}
#innerbox {
background-color: white;
width: auto;
height: 30px;
border-radius: 10px;
border : 1px;
border-style: solid;
border-color: darkgrey;
}
2 answers
solution1
1 2014-12-17 18:29:01
Like emmanuel mentions, Heading tags come baked with their own margins, setting #emptyInfo { margin: 0; } #emptyInfo { margin: 0; } will remedy your issue.
For reference to what these default values could be for you, you can check browser's specific default stylesheets. See here: How can I locate the default style sheet for a browser?
Note that since most HTML elements come with default values, HTML/CSS authors will often "normalize" their pages as described nicely at W3C: http://www.w3.org/International/questions/qa-html-css-normalization .
solution2
0 2014-12-17 18:36:55
#innerbox height should be auto. Here the JSfiddle
#innerbox {
background-color: white;
width: auto;
height: auto; /*** This should be auto instead of 30px */
border-radius: 10px;
border : 1px;
border-style: solid;
border-color: darkgrey;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.