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;
}
Related
I have a problem with the background-image property.
I want to insert the image of a film roll in the background of the div scena, but background-image:url(img/rullino.png); doesn't show anything.
When I write it inline with Firebug on Mozilla, then it works.
Someone understand why this happens?
/* tag */
body,html{
background-color: grey;
font-family: 'Existence Light', arial, sans-serif;
font-size: 1.8em;
height:100%;
}
p {
word-wrap:break-word;
}
/* ======= Generale sezioni ======= */
.sections{
min-height: 100%;
}
/* ======= Entry-section ======= */
#entry-logo img{
margin: 10% 0 0;
}
#entry-section #go-down{
margin-top: 9%;
text-align: center;
}
#entry-section i{
content:"\f078";
color:white;
}
/* ======= film-section ======= */
#film{
height:100%;
}
#film > .container{
height:100%;
padding:0;
margin:0;
width:100%;
}
.container > #rullino {
height:20%;
background-color:red;
}
body #film .container #rullino .scena {
background-image: url(img/rullino.png);
background-color: #00ff00;
background-repeat: no-repeat;
height:100%;
width:15%;
float:left;
}
#rullino img{
max-height:70%;
}
<body>
<section id="entry-section" class="sections">
<div class="container">
<div id="entry-logo">
<img src="img/logo.png" width="100%" alt="Un Autre Chien Andalou">
</div>
</div>
<div id="go-down">
<i class="fa fa-chevron-down"></i>
</div>
</section>
<section id="film" class="sections">
<div class="container">
<div id="rullino">
<div id="scena1" class="scena">
<p>scena1</p>
</div>
<div id="scena2" class="scena">
<p>scena2</p>
</div>
<div id="scena3" class="scena">
<p>scena3</p>
</div>
<div id="scena4" class="scena">
<p>scena4</p>
</div>
<div id="scena5" class="scena">
<p>scena5</p>
</div>
</div>
</div>
I tried your code with this image of a puppy, and it worked for me : "http://g-ecx.images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8.CB312176604.jpg".
So it seems like it could be your image path. Rather than "img/rullino.png", try "./img/rullino.png" or an absolute path to your image, so that it checks your current folder for the image.
Also, just a tip for readability + cleaner CSS - If you want the image as the bg of all the divs with the class '.scena' you'll only need to do this:
.scena {
background-image: url(img/rullino.png);
background-color: #00ff00;
background-repeat: no-repeat;
height:100%;
width:15%;
float:left;
}
Hope this helps!
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.
I'm a newbie with html so please be patient.
I'm trying to align 4 divs in parallel where the first,third and fourth div are static,the second div is empty and i need it to occupy the remain place e.g "width:auto".
I don't want to use table to solve the problem.
Is there a way to solve it using divs?
HTML:
<div class="container">
<div class="content" >
first
</div>
<div class="empty">
</div>
<div class="content">
third
</div>
<div class="content">
fourth
</div>
</div>
CSS:
.container{
strong textwidth:1020px;
height:40px;
}
.content{
position:relative;
background-color:#2cc2e7;
height:40px;
width:142px;
float:right;
margin-right:5px;
}
.empty{
background-color:#f1d486;
height:40px;
width:auto;
margin-right:5px;
}
You will need to change the order of the elements:
<div class="container">
<div class="first content">first</div>
<div class="content">third</div>
<div class="content">fourth</div>
<div class="empty"></div>
</div>
And then just float the first one to the left, other two to the right, and the .empty one, don't float it but set an overflow to auto —or hidden.
.content {
float: right;
width: 142px;
}
.first {
float: left;
}
.empty {
overflow: auto;
}
http://jsfiddle.net/GTbnz/
If you are prepared to add below the empty div then you could use the following:
<div class="empty">
</div>
with a style sheet of:
.container {
width:1020px;
height:40px;
display:table;
width:100%;
}
.container div {
height:40px;
display:table-cell;
}
.content {
background-color:#2cc2e7;
width:142px;
max-width:142px;
}
.empty {
background-color:#f1d486;
}
This was whichever of the 4 div's has a class 'empty' will auto-expand to fill the available space and the other div sizes will all be 142 px.
I already have seen a couple of questions going in this direction, but nothing helped. Everyone says just set the parent div position to relative and the child ones to absolute. But my problem is that every div is at the 0/0 point of my parent div. It seems the inner elements doesn't know from each other.
Here is what my page should look like:
http://imageshack.us/photo/my-images/854/unbenanntgoc.png/
In my html I just define my divs:
<div id="content">
<div id="header" />
<div id="naviContent" />
<div id="imageContent" />
<div id="tagContent" />
<div id="textContent" />
</div>
So navi image and tag content divs should float.
And this is how my css looks like:
#charset "utf-8";
body {
background-color:#33FF00;
}
#header {
height:100px;
background-color:#FFFFFF;
position:relative;
}
#naviContent {
width:25%;
background-color:#F0F;
float:left;
}
#imageContent {
background-color:#000;
position:absolute;
float:left;
width:800px;
height:600px;
}
#tagContent {
background-color:#900;
position:absolute;
float:left;
width: 25%;
}
#textContent {
background-color:#0000FF;
clear:both;
}
#content {
height:1600px;
width:1200px;
background-color:#999999;
margin-left: auto;
margin-right: auto;
padding:10px;
position:relative;
}
So maybe anyone can tell me why all my elements (black, yellow, red, grey and green) are positioned to the 0/0 point of the pink one?
Thanks in advance
You need to close the DIV properly -
<div id="content">
<div id="header">Header </div>
<div id="naviContent">Nav</div>
<div id="imageContent">Image</div>
<div id="tagContent"> Tags</div>
<div id="textContent">Text </div>
</div>
EDIT: Working Fiddle You need to adjust floated width and you are done!
Position absolute is not the standard way of laying out a page.
What you should do is just remove the position attribute, float everything left and set widths (please note you will need content in the div for it to render correctly).
You might want to look into CSS grid systems such as 960.gs as they handle this part of development for you in a standardised way using pre-defined classes.
you should code like this : - http://tinkerbin.com/J9CCZXRL
CSS
#content {
background:pink;
width:500px;
padding:10px;
-moz-box-sizing:border-box;
overflow:hidden;
}
#header {
background:red;
height:100px;
}
#left {
background:green;
width:100px;
height:400px;
float:left;
}
#middle {
background:blue;
width:260px;
float:left;
height:400px;
margin-left:10px;
}
#right {
background:yellow;
width:100px;
float:right;
height:400px;
}
#footer {
background:grey;
height:100px;
clear:both;
}
HTML
<div id="content">
<div id="header"></div>
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
<div id="footer"></div>
</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