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>
Related
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;
}
i need your assistance. I am using the below design, but want to set it so that at a set size the columns will no long compress\shrink. I have tried setting "min-width", but just cant get it to work. Please help.
http://matthewjamestaylor.com/blog/equal-height-columns-4-column.htm
Thanks in advance,
Edit: Code added.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style media="screen" type="text/css">
/* <!-- */
body {
margin:0;
padding:0;
}
#header h1,
#header h2,
#header p {
margin-left:2%;
padding-right:2%;
}
#active2 #tab2,
#active3 #tab3,
#active4 #tab4,
#active5 #tab5 {
font-weight:bold;
text-decoration:none;
color:#000;
}
#footer {
clear:both;
float:left;
width:100%;
}
#footer p {
margin-left:2%;
padding-right:2%;
}
/* Start of Column CSS */
#container4 {
clear:left;
float:left;
width:100%;
overflow:hidden;
background:#b2f0f9; /* column 4 background colour */
}
#container3 {
clear:left;
float:left;
width:100%;
position:relative;
right:25%;
background:#89ffa2; /* column 3 background colour */
}
#container2 {
clear:left;
float:left;
width:100%;
position:relative;
right:25%;
background:#ffa7a7; /* column 2 background colour */
}
#container1 {
float:left;
width:100%;
position:relative;
right:25%;
background:#fff689; /* column 1 background colour */
}
#col1 {
float:left;
width:21%;
position:relative;
left:77%;
overflow:hidden;
}
#col2 {
float:left;
width:21%;
position:relative;
left:81%;
overflow:hidden;
}
#col3 {
float:left;
width:21%;
position:relative;
left:85%;
overflow:hidden;
}
#col4 {
float:left;
width:21%;
position:relative;
left:89%;
overflow:hidden;
}
/* --> */
</style>
</head>
<body id="active4">
<div id="header">
HEADER CONTENT
</div>
<div id="container4">
<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1">
<!-- Column one start -->
<h2>Equal height columns</h2>
<p>It does not matter how much content is in each column, the background colours will always stretch down to the height of the tallest column.</p>
<!-- Column one end -->
</div>
<div id="col2">
<!-- Column two start -->
<h2>No Images</h2>
<p>This four column layout requires no images. Many CSS website designs need images to colour in the column backgrounds but that is not necessary with this design. Why waste bandwidth and precious HTTP requests when you can do everything in pure CSS and HTML?</p>
<!-- Column two end -->
</div>
<div id="col3">
<!-- Column three start -->
<h2>Valid XHTML strict markup</h2>
<p>The HTML in this layout validates as XHTML 1.0 strict.</p>
<!-- Column three end -->
</div>
<div id="col4">
<!-- Column four start -->
<h2>Cross-Browser Compatible</h2>
<p>This 4 column layout has been tested on the following browsers:</p>
<!-- Column four end -->
</div>
</div>
</div>
</div>
</div>
<div id="footer">
FOOTER CONTENT
</div>
</body>
Would be interestin waht you tried to see where your error is.
When i add the background colors and min-width to col1, ... it works for me:
#col1 {
background: none repeat scroll 0 0 blue;
float: left;
left: 77%;
min-width: 200px;
overflow: hidden;
position: relative;
width: 21%;
}
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.
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.
Code and preview:
<html>
<head>
<title>Testing some CSS</title>
<style type="text/css">
.dDay {
font-size:205%
}
.dMon {
font-weight:bold;
font-variant:small-caps;
font-size:130%;
margin-top:-.7em;
}
.detailContainer {
vertical-align:middle;
display:table-cell;
padding:0em 0em 0em 1em;
}
#dContainer {
border:1px solid green;
display:table;
height:3.25em;
}
</style>
<body>
<div id="dContainer">
<div class="dDay">31</div>
<div class="dMon">sep</div>
<div class="detailContainer">Test O.O</div>
</div>
</body>
</html>
My question is: is it possible to place another date section next to the first one, so it appears like this: what i want http://img505.imageshack.us/img505/2787/previewsp2.gif
EDIT: strange, I tried floating before I asked the question and it didn't work...thanks everyone :D
use style="float:left" on each DIV (either directly or via a stylesheet)
<html>
<head>
<title>Testing some CSS</title>
<style type="text/css">
.dDay {
font-size:205%
}
.dMon {
font-weight:bold;
font-variant:small-caps;
font-size:130%;
margin-top:-.7em;
}
.detailContainer {
vertical-align:middle;
display:table-cell;
padding:0em 0em 0em 1em;
}
#dContainer, #dContainer2 {
border:1px solid green;
display:table;
height:3.25em;
float: left;
}
</style>
<body>
<div id="dContainer">
<div class="dDay">31</div>
<div class="dMon">sep</div>
</div>
<div id="dContainer2">
<div class="dDay">31</div>
<div class="dMon">sep</div>
<div class="detailContainer">Test O.O</div>
</div>
</body>
</html>
float:left if you want block elements to sit next to each other.
Copy dContainer and place the copy immediately after it.
Change the ID and the new ID to the #dContainer style.
Add a new CSS block that has just #dContainer (not the new div) and put "float:left;" in the block.
<html>
<head>
<title>Testing some CSS</title>
<style type="text/css">
.dDay {
font-size:205%
}
.dMon {
font-weight:bold;
font-variant:small-caps;
font-size:130%;
margin-top:-.7em;
}
.dDate {
display:table-cell;
}
.detailContainer {
vertical-align:middle;
display:table-cell;
padding-left:1em;
}
#dContainer {
border:1px solid green;
display:table;
height:3.25em;
}
</style>
<body>
<div id="dContainer">
<div class="dDate">
<div class="dDay">31</div>
<div class="dMon">sep</div>
</div>
<div class="dDate">
<div class="dDay">31</div>
<div class="dMon">sep</div>
</div>
<div class="detailContainer">Test O.O</div>
</div>
</body>
</html>
[EDIT] Looking at the other answers:
- Float is of course the right answer, I just went with the initial logic, actually finishing it (making a real table might be actually the logical final step...)
- Note: doesn't look nice in IE (6, 7).
Is there any reason why you can't use <span> tags instead of <div>'s? That way your page would still make sense when read without CSS.