I have a simple image of a ball which I am using as a background. I would like to overlay text. The text will be a number, i.e. a lottery number.
I have tried various methods but cannot find a solution, e.g.
CSS
#container {
height:400px;
width:400px;
position:relative;
}
#image {
position:relative;
left:0;
top:0;
}
#text {
position:absolute;
color:black;
font-size:18px;
font-weight:bold;
text-align:center;
top:0px;
}
HTML
<div id="container">
<img id="image" src="http://www.powerball-lottery-blog.com/img/balls/ball_white_40.gif"/>
<p id="text">37</p>
</div>
I just cannot get the number to align vertically and horizontally in the ball.
I would use a background image instead. Much more reliable:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#container {
height:400px;
width:400px;
}
#text {
margin: 0;
color:black;
font-size:18px;
font-weight:bold;
width: 40px;
line-height: 40px;
text-align: center;
background: url(http://www.powerball-lottery-blog.com/img/balls/ball_white_40.gif) no-repeat;
}
</style>
</head>
<body>
<div id="container">
<p id="text">37</p> </div>
</pre>
</body>
</html>
You could get rid of the image. Here's what I would do:
#container {
background:url('http://www.powerball-lottery-blog.com/img/balls/ball_white_40.gif') no-repeat;
height:400px; width:400px;
}
#text {
color:#000; font-size:18px; font-weight:bold; text-align:center;
}
Now, you have to figure out the text height. The formula is (#container.height/2)-(#text.height/2). You should use JavaScript, like:
//center.js
function E(e){
return document.getElementById(e);
}
function center(innerElement){
var e = innerElement, p = e.parentNode, ih, oh;
if(window.getComputedStyle){
ih = getComputedStyle(e).getPropertyValue('height');
oh = getComputedStyle(p).getPropertyValue('height');
}
else{
ih = e.currentStyle.height;
oh = p.currentStyle.height;
}
e.style.margin = oh/2-ih/2+'px auto';
}
Now your HTML can contain:
<!--DOCTYPE and head with style here-->
<body>
<div id='container'>
<div id='text'>Line 1<br />Line 2</div>
</div>
<script type='text/javascript' src='center.js'></script>
<script type='text/javascript'>
center(E('text'));
</script>
</body>
</html>
You could set #image as absolutely positioned and set fixed widths for the container and #image to match the image size like so:
#container {
height:40px;
width:40px;
position:relative;
}
#image {
position:absolute;
left:0;
top:0;
z-index:-1;
width:40px;
height:40px;
}
#text {
color:black;
font-size:18px;
font-weight:bold;
text-align:center;
line-height:40px;
}
But personally, I'd set your image to the background of an element - that way you can eliminate a bit of HTML as well.
New HTML
<div id="ball">37</div>
New CSS
#ball{
width:40px;
height:40px;
font-size:18px;
font-weight:bold;
text-align:center;
line-height:40px;
background: transparent url("http://www.powerball-lottery-blog.com/img/balls/ball_white_40.gif") center center no-repeat;
}
http://jsfiddle.net/daCrosby/2WAAj/
<!DOCTYPE html>
<html>
<body>
<style>
#container
{
height:400px;
width:400px;
position:relative;
}
#ball
{
height:40px;
width:40px;
float:left;
position:relative;
background-image: url("http://www.powerball-lottery-blog.com/img/balls/ball_white_40.gif");
}
#text
{
position:relative;
color:black;
font-size:18px;
font-weight:bold;
text-align:center;
display:table-cell;
vertical-align:middle;
padding:3px;
}
</style>
<div id="container">
<table>
<tr>
<td>
<div id="ball">
<div id="text">
<p id="text">37</p>
</div>
</div>
<div id="ball">
<div id="text">
<p id="text"> 3</p>
</div>
</div>
<div id="ball">
<div id="text">
<p id="text">15</p>
</div>
</div>
<div id="ball">
<div id="text">
<p id="text">17</p>
</div>
</div>
<div id="ball">
<div id="text">
<p id="text">27</p>
</div>
</div>
</td>
<td>
<img src="http://www.lotterynumbers.name/media/images/misc/its-a-rollover.png" />
</td>
</tr>
</table>
</div>
</body>
</html>
I added a couple more balls to show you what it looks like. The container div at 400px by 400px will accommodate 10 balls across by 10 down. The float:left assures that it will wrap around if you simply copy/paste the ball divs.
Also, for single digits, you will want to add a non-breaking space (which I did) or a "0" (i.e. "04" instead of "4") to make sure they center correctly like the two-digit numbers.
Related
I need to achieve following thing with css.
. Heading
|
|
|----Subheading
|--------|
|--------|
|--------|
|--------|----subHeading of subheading
|--------|--------------|
|--------|--------------|
|--------|--------------|
|--------|--------------|
|--------|--------------|--------SubHeading of subheading
Any one know name of this structure ?? or CSS to achieve this ?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="heading">
header
</div>
<div class="subheading">
subheader
</div>
<div class="subsubheading">
subsubheading
</div>
<div class="subsubsubheading">
subsubsubheading
</div>
<style>
.heading{
text-align: left;
float:left;
}
.subheading{
text-align:left;
float:left;
margin-top:100px;
}
.subsubheading{
text-align:left;
float:left;
margin-top:200px;
}
.subsubsubheading{
text-align:left;
float:left;
margin-top:300px;
}
</style>
</body>
</html>
Yes, you just need to use floats and margin-top like so.
CSS
.heading{
text-align: left;
float:left;
}
.subheading{
text-align:left;
float:left;
margin-top:100px;
}
.subsubheading{
text-align:left;
float:left;
margin-top:200px;
}
.subsubsubheading{
text-align:left;
float:left;
margin-top:300px;
}
HTML
<div class="heading">
header
</div>
<div class="subheading">
subheader
</div>
<div class="subsubheading">
subsubheading
</div>
<div class="subsubsubheading">
subsubsubheading
</div>
I have this template that we have been given to edit, all I want it to insert a top header div with a height of 25px and background colour, which I did, but it won't align correctly at all. I took it outside the wrapper, and increased it's width, but it still aligns slightly right.
I've added the original template below -
<head>
<title>[DOCUMENT_TITLE]</title>
</head>
<body>
<div id="pdfdoc">
<div id="wrapper">
<div id="header">
<div id="logo"><center><img src="[LOGOFILE]"></center></div>
<div class="sender-address">
<div class="sender-address-company">[SENDER_ADDRESS_COMPANY]</div>
<div class="sender-address-line1">[SENDER_ADDRESS_LINE1]</div>
<div class="sender-address-line2">[SENDER_ADDRESS_LINE2]</div>
<div class="sender-address-line3">[SENDER_ADDRESS_LINE3]</div>
<div class="sender-address-line4">[SENDER_ADDRESS_LINE4]</div>
<div class="sender-address-postcode sender-address-line4">, </div>
<div class="sender-address-postcode">[SENDER_ADDRESS_POSTCODE]</div>
</div>
<div id="header-info">
<div id="vat-registration-info">[VATNUMINFO]</div>
<div class="sender-address-phone">T: [SENDER_ADDRESS_PHONE]</div>
<div class="sender-address-email">E: [SENDER_ADDRESS_EMAIL]</div>
</div>
<div class="cl" id="logo_clearer"></div>
</div>
</div>
</body>
</html>
CSS
html {width:793px;}
*,html,body{ font-family:[FONT]; color:[FONTCOLOR]; }
body {
font-size:[FONTSIZE]px;
}
#wrapper {
margin:0 40px 0 40px;
}
#pdfdoc {
font-size:1.1em /*increase font size for everthing from user-set body pt size */
}
/* header */
#pdfdoc #header{
margin-top:2em;
border-bottom:1px solid #E5E5E5;
padding-bottom:24px;
margin-bottom:48px;
position:relative;
}
#logo{
float:left;
margin-right:24px;
margin-left:24px;
text-align:center;
vertical-align: middle;
}
.sender-address {
font-size:1.1em;
float:left;
}
.sender-address-company{ font-weight:bold;font-size:1.1em;}
.sender-address-line4{ float:left;}
.sender-address-potcode{ float:left;}
#header-info{
float:right;
text-align:right;
position:absolute;
bottom:0; right:0;
margin-bottom:24px;
}
#header-info div{ color:#808080; }
#pdfdoc #header div a:link{ text-decoration:none; color:#808080;}
How can I get the added Div centrally aligned in template?
http://jsfiddle.net/5RhFq/16/ - looks fine on here but on here - https://app.kashflow.com/v2/documents/invoice/89BAFB30-CF7C-4A14-98C3-37BD6D8C14CC?media=0&theme=396345 It doesn't.
body {
margin:70px auto;
font-size:[FONTSIZE]px;
}
How do I put the #stranger div in between the #mother and #child? Right now, the #stranger div covers both the #mother and #child!
<head>
<style>
#mother{
position:absolute;
display:block;
width:300px;
height:300px;
background-color:green;
padding:40px;
z-index:1000;
}
#child{
position:relative;
display:block;
width:180px;
height:180px;
background-color:yellow;
z-index:6000;
}
#stranger{
position:relative;
display:block;
width:300px;
height:600px;
background-color:black;
z-index:1500;
}
</style>
</head>
<body>
<h1>Z-index Test</h1>
<h1>How Do I put #stranger between #mother and #child?</h1>
<div id='mother'>
<div id='child'></div>
</div>
<div id='stranger'></div>
</body>
</html>
It's because #child is nested inside of #mother. If #mother is lower than #stranger, #mother's #child is lower than stranger, too. See this explanation of stacking context.
You would get the result I think you expect if your markup was like so:
<body>
<div id='mother'></div>
<div id='child'></div>
<div id='stranger'></div>
</body>
Then they would all be in the same stacking context.
I cant figure out what is wrong with my styles.
Hope someone could help me with this.
Code example:
<style type="text/css">
.maindiv {
overflow:hidden; border:#000 1px solid;
width:450px; min-height:250px;
}
.left_inner {
float:left; width:200px;
min-height:100%; background:#00CC33;
}
.right_inner {
float:left; width:150px; background:#C93;
}
</style>
<div class="maindiv">
<div class="left_inner">Left Block content</div>
<div class="right_inner">Right block content<br />sample txt<br />sample txt</div>
</div>
The way it should be is like in Opera Browser (see image):
The How
http://jsfiddle.net/L9GEa/
The Why
One might intuitively assume (as I once did) that the html element already has a determined height, but it does not (at least in this context). Luckily (or by design) this one element has the unique property of it's height being determinable when it is assigned a percentage height. That is the essential concept because in order to calculate (determine) the height of any other element which is assigned a percentage height you must also be able to determine the height of it's parent.
Anyone that has worked with CSS and the DOM enough likely will tell you they hate floats. This is because it pulls the element out of the flow, which requires additional work and thinking to juggle the effects. Instead use display:inline-block;vertical-align:top; with the one caveat that you will then have to add html comments around any white space between those elements.
The CSS
.maindiv {
overflow:hidden; border:#000 1px solid;
width:450px;min-height:250px;
/*changes*/
height:100%;
}
.left_inner {
float:left; width:200px;
min-height:100%; background:#00CC33;
/*changes*/
float:none;
display:inline-block;
vertical-align:top;
}
.right_inner {
float:left; width:150px; background:#C93;
/*changes*/
float:none;
display:inline-block;
vertical-align:top;
}
/*changes*/
html,
body{
height:100%;
}
The HTML
<div class="maindiv">
<div class="left_inner">Left Block content</div><!--
--><div class="right_inner">Right block content<br />sample txt<br />sample txt</div>
</div>
add
html,
body {
height:100%
}
at the top of your css, that works for me
EDIT: my test :
<!DOCTYPE html>
<html>
<head>
<style>
html,
body {
height:100%;
}
.maindiv {
overflow:hidden; border:#000 1px solid;
width:450px; height:100%;
position:relative;
}
.left_inner {
float:left; width:200px;
min-height:100%; background:#00CC33;
position:relative;
}
.right_inner {
float:left; width:150px; background:#C93;
}
</style>
</head>
<body>
<div class="maindiv">
<div class="left_inner">Left Block content</div>
<div class="right_inner">Right block content<br />sample txt<br />sample txt</div>
</div>
</body>
</html>
Try this:
<style type="text/css">
.maindiv {
overflow:hidden; border:#000 1px solid;
width:450px; height: auto; min-height:250px;
}
.left_inner {
float:left; width:200px;
min-height:100%; height: 100%; background:#00CC33;
}
.right_inner {
float:left; width:150px; background:#C93;
}
</style>
<div class="maindiv">
<div class="left_inner">Left Block content</div>
<div class="right_inner">Right block content<br />sample txt<br />sample txt</div>
</div>
Most of the time you have to apply a height of auto or 100% to the parent DIV.
I have a simple CSS fixed width layout with a container and some backgrounds, and a three column design.
<body>
<form id="form1" runat="server">
<div id="BGContainer">
<div id="PageContainer">
</div>
<div id="Content">
<div id="MainContent">
<asp:ContentPlaceHolder ID="MainAreaContentPlaceholder" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div id="Bottom">
<div id="Copyright">
Copyright
</div>
</div>
</div>
</form>
</body>
In a different file, I have the content for the ContentPlaceHolder
<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="MainAreaContentPlaceholder">
<div id="Heading">
Overskrift
</div>
<div id="LeftColumn">
/*Content Here*/
</div>
<div id="CenterColumn">
center
</div>
<div id="RightColumn">
right
</div>
</asp:Content>
The problem is that #MainContent is not resizing in height. It always stays the same height
CSS
html {
height:100%;
}
body {
margin:0;
width:100%;
height:100%;
font-family: Verdana, Sans-Serif;
background-image:url(../Gfx/Design/bg.png);
background-repeat:repeat;
}
#BGContainer {
margin:0px;
background-image:url(../Gfx/Design/Background-top-gradient.png);
background-repeat:repeat-x;
height:210px;
width:100%;
}
#PageContainer {
background-image:url(../Gfx/Design/top-gradient.png);
background-repeat:no-repeat;
height:100%;
width:1016px;
margin-left:auto;
margin-right:auto;
}
#Bottom {
background-image:url(../Gfx/Design/Bottom.png);
background-repeat:no-repeat;
height:32px;
width:964px;
margin-left:auto;
margin-right:auto;
}
#Content {
background-color:#FFFFFF;
background-image:url(../Gfx/Design/content-background.png);
background-repeat:no-repeat;
width:1000px;
height:100%;
margin-left:auto;
margin-right:auto;
}
#MainContent {
width:980px;
height:100%;
margin-left:auto;
margin-right:auto;
background-color:#FFFFFF;
}
#Copyright {
color:#000000;
font-size:xx-small;
text-transform:uppercase;
margin-left:50px;
padding-top:5px;
}
#LeftColumn {
width:311px;
margin-left:10px;
border: 1px solid gray;
min-height:400px;
float:left;
}
#CenterColumn {
width:311px;
margin-left:10px;
border: 1px solid gray;
min-height:400px;
float:left;
}
#RightColumn {
width:311px;
margin-left:10px;
margin-right:10px;
border: 1px solid gray;
min-height:400px;
float:right;
}
To clear the floats without any additional markup use overflow:hidden
#MainContent {overflow:hidden;zoom:1;}
The zoom:1 will invoke hasLayout in ie6 so the float will clear in ie6.
The three columns (#LeftColumn, #CenterColumn, #RightColumn) are all floats, so they will not increase the height of #MainContent. Try putting a div (which can be empty) just after those three with clear: both. That will force it to sit below the three columns, and #MainContent will be at least tall enough to include this new div.
If your problem is instead that #MainContent is too tall, note that it has height: 100%, which you could remove (and then apply the above fix). Hope that helps.
You need to clear the floated content.
Insert as follows:
<div id="MainContent">
<asp:ContentPlaceHolder ID="MainAreaContentPlaceholder" runat="server">
</asp:ContentPlaceHolder>
<div class="clear"></div>
</div>
... and the CSS:
.clear{clear:both}
use the <p> tag and your text will resize depending on content needs
<div style="width:400px; border-bottom:1px solid teal; padding:20px;">
<p>your text or database field here</p>
</div>
I use the tag when i want a div height to change depending on the amount of text inside.
This example will give you a nice results list when querying from database that places a border in-between results.
Probably because you have a height set on the #BGContainer - if you remove this you might find that the box expands with the text