('Boy... I saw on search that misalign topic about the <input> wrapped on an <a> tag... LOL)
Anyway...
I'm in a bit of a pickle here... I have a bunch of divs as an inline block lead by a lone <button>, and this lone button --- no matter how much design genius I summon from myself, I can't get to align properly.
Just look at the code at the end of the post.
Notes:
The button-holder class didn't used to exist; it was just the <button><span> combo. I added it thinking I can fix it by doing negative values on the margin (to no avail).
Can anyone advise?
FULL code:
<style type="text/css">
body { margin:0; padding:0;font-size: 9pt; }
#main { margin: 0; padding: 0; width:100%; text-align:center; }
#bar {display: table; margin: 0; padding: 0; width:100%; height:45px }
[class~=banner] { font-size: 14pt;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
display: table-cell;
height: 45px;
vertical-align: middle;}
.cellOne { background-color:#FFC316;
color: #35549A;
width: 8%;
text-align:center;}
.cellTwo { background-color: #35549A;
color: #FFF;
padding: 0px 0px 0px 2%;
width: 68%;
text-align: left;}
.cellThree { background-color: #35549A;
color: #FFC316;
width: 12%;
text-align: left;}
#three_element {margin: 0 auto; padding:0% 18.5% 0% 18.5%; text-align:center; }
.button-holder {
width: 250px;
height: calc(250px / 1.604);
margin: -1.45% 1.5% -1.65% 1.5%;
display:inline-block;
padding:5px;
box-sizing:border-box;
}
#addbutton {
border-radius: 25px 25px 25px 25px;
-moz-border-radius: 25px 25px 25px 25px;
-webkit-border-radius: 25px 25px 25px 25px;
display:table;
border: 0px;
box-sizing:border-box;
padding:0px;
margin:0px;
background-color:#E6E7E8;
text-align:center;}
#addbutton .add {
display: table-cell;
font-size: calc(250px / 1.604 - 50px);
color: #384D94;
width: 240px;
height: calc(240px / 1.604);
vertical-align: middle;
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
[class~=objective-edit-tile] {
width: 250px;
height: calc(250px / 1.604);
margin: 1.5%;
display:inline-block;
box-sizing:border-box;
padding:5px;}
[class~=objective-edit-tile] div {
font-family:"Yanone Kaffeesatz","Arial Narrow",Arial,sans-serif;
box-sizing:border-box;
color:#FFFFFF;
margin:0px;
display:inline-block;
}
.tr-1-square-red div {background-color: #BE1E2D;}
.tr-1-square-yellow div {background-color: #E39F15;}
.tr-1-square-green div {background-color:#266733;}
.text-block-name {
border-radius: 25px 25px 0px 0px;
-moz-border-radius: 25px 25px 0px 0px;
-webkit-border-radius: 25px 25px 0px 0px;
border:#FFFFFF 1px solid;
width: 100%;
height: 66.7%;
font-size: 180%;
padding-top:17%;
}
.text-block-days {
border-radius: 0px 0px 0px 25px;
-moz-border-radius: 0px 0px 0px 25px;
-webkit-border-radius: 0px 0px 0px 25px;
border-top: #FFF 1px solid;
font-weight:700;
width: 34%;
height: 33%;
padding-top:6.5%;}
.text-block-next-step {
border-radius: 0px 0px 25px 0px;
-moz-border-radius: 0px 0px 25px 0px;
-webkit-border-radius: 0px 0px 25px 0px;
border-top: #FFF 1px solid;
font-size:9px;
width: 64%;
height: 33%;
padding:8% 2px 0px 1px;}
</style>
</head>
<body>
<div id="main">
<div id="bar">
<div class="banner cellOne">Pipeline</div>
<div class="banner cellTwo"> <Title> </div>
<div class="banner cellThree">PracticePipeline.com</div>
</div>
<div role="content" id="three_element">
<div class="button-holder">
<button id="addbutton" name="buttton">
<span class = "add">+</span>
</button>
</div>
<div class = "tr-1-square-red objective-edit-tile" id="tile-n">
<div class = "text-block-name" >GGN </div>
<div class = "text-block-days" > -10 Days</div>
<div class = "text-block-next-step" >Research GGN background </div>
</div>
<div class = "tr-1-square-yellow objective-edit-tile " id="tile-n">
<div class = "text-block-name" >GGN </div>
<div class = "text-block-days" > -10 Days</div>
<div class = "text-block-next-step" >Research GGN background </div>
</div>
<div class = "tr-1-square-green objective-edit-tile " id="tile-n">
<div class = "text-block-name" >Stark Indust.. </div>
<div class = "text-block-days" > 7 Days</div>
<div class = "text-block-next-step" >Invite Stark Industri.. </div>
</div>
</div>
</div>
</body>
I dont know if this is going to help much but it worked when i tried it.
The tag padding-bottom keep making a little bit higher if you want it to align better.
#addbutton .add {
display: table-cell;
font-size: calc(250px / 1.604 - 50px);
color: #384D94;
width: 240px;
height: 140px;
vertical-align: middle;
margin: 0px;
padding: 0px;
box-sizing: border-box;
padding-bottom: 7%
}
I actually solved my own problem:
The problem was just that I was over analyzing things. Basic lay-outing worked:
.button-holder {
margin:1.5%;
display:inline-block;
padding:5px;
box-sizing:border-box;
}
#addbutton {
border-radius: 25px 25px 25px 25px;
-moz-border-radius: 25px 25px 25px 25px;
-webkit-border-radius: 25px 25px 25px 25px;
width: 240px;
height: calc(250px / 1.604 - 10px);
border: 0px;
margin:0px;
padding: 0px;
background-color:#E6E7E8;
box-sizing:border-box;
text-align:center;
}
#addbutton .add {
font-size: 97px;
color: #384D94;
}
Related
firstly I just would like to put out there I'm not very good at coding, and this is sorta a first for me. I'm having some trouble with the footer; the background of the footer, when it's too small for bigger computer screens, just repeats itself like this: http://prntscr.com/29fxeu
I was hoping to get the background so that it automatically adjusts to each screen width to fit the whole way across. Is that possible? I've got it up on JSFiddle here: http://jsfiddle.net/HXs2A/1/
And here's the HTML used: (forgive me if there's errors)
<body>
<!-- Footer border Start-->
<div id='footer-wrapper'>
<div style='clear:both;'/>
</div>
<!-- Footer border End-->
<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='Column 1' preferred='yes'/>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='Column 2' preferred='yes'/>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='Column 3' preferred='yes'/>
</div>
<div style='clear: both;'/>
</div>
</div>
</body>
And the CSS:
#footer-wrapper {clear: both;width: 100%; height:4px; background: #46A28D;}
/*----- Three Column Widget (Green Border) STARTS-----*/
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
height:120px;
background: url(http://1.bp.blogspot.com/-p6zskT7-Xd0/UqN_39ROUYI/AAAAAAAADd0/sXrkWxgY9-M/s1600/footer.png) repeat scroll 0 0 #222222;
}
#lower-wrapper {
background: none; repeat scroll 0 0 #222222;
margin:auto;
padding: 20px 0px 20px 0px;
width: 100%;
border:0;
}
#lowerbar-wrapper {
background: none; repeat scroll 0 0 #222222;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 30%;
text-align: justify;
color:#ddd;
font: bold 12px Arial, Tahoma, Verdana;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
border:0;
color:#46A28D;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
}
.lowerbar ul {
color:#fff;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.lowerbar li {
display:block;
color:#fff;
line-height: 1.6em;
margin-left: 0px !important;
padding: 0px;
list-style-type: none;
}
.lowerbar li a {
text-decoration:none; color: #DBDBDB;
}
.lowerbar li a:hover {
text-decoration:underline;
}
.lowerbar li:hover {
display:block;
background: #222;
}
Thanks!
to #lower
add
background-size: 100% 100%;
and remove height:120px; as it will force background to stretch on odd ratio screen.
You mean background-size? Following code change works for me (CSS3).
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
height:120px;
background: url(http://1.bp.blogspot.com/-p6zskT7-Xd0/UqN_39ROUYI/AAAAAAAADd0/sXrkWxgY9-M/s1600/footer.png);
background-size:100% 100%;
background-repeate: no-repeat;
}
See http://www.w3schools.com/css/css3_backgrounds.asp
However, older browsers might give different results.
#lower {
margin:auto;
padding: 0;
width: 100%;
height: 120px;
background: #222222 url(http://1.bp.blogspot.com/-p6zskT7-Xd0/UqN_39ROUYI/AAAAAAAADd0/sXrkWxgY9-M/s1600/footer.png) no-repeat;
background-size: cover;
}
*Note: When you assigning attributes to element in HTML use " instead of '
Right <div id="lower">
Wrong <div id='lower'>
I am having trouble vertically centering my labels/fields in my form. I have centered the content horizontally but now would also like to add vertical centering. When I run my code i can see that the fieldset padding is off. The value of the padding on the top is less than the value on the bottom. I figure for the vertical centering to occur they should be equal. Here is my code...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Contact</title>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="contact.css">
</head>
<body>
<header id="pageHeader">
</header>
<nav class="mainNav">
<ul>
<li>Home</li>
<li>Photos</li>
<li>About</li>
<li>Contact</li>
</ul>
<img src="NewLogo3.png">
</nav>
<div class="contact">
<h1>Get In Touch</h1>
<form action="index.php" method="POST" >
<fieldset class="boxShadow">
<label>Name:</label>
<input type="text" name="name" placeholder="Enter your name" class="boxShadow"/>
<label>Email:</label>
<input type="email" name="email" placeholder="Enter your email address" class="boxShadow"/>
<label>Message:</label>
<textarea name="message" placeholder="What's on your mind?" class="boxShadow"></textarea>
<input type="submit" value="Send message" />
</fieldset>
</form>
</div>
<footer id="pageFooter">
<p>Thanks for visiting my website</p>
<span>© 2013</span>
</footer>
</body>
</html>
html, body, h1, h2 , ul, nav, img{
margin:0;
padding: 0;
font-size: 1em;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
body{
background: #777777;
height: 100%;
}
nav{
background: #40B3DF;
height: 100px;
font-size: 2em;
width: 100%;
border-bottom: 1px solid black;
}
nav ul{
position: absolute;
top: 55px;
white-space:nowrap;
margin-left: 100px;
}
nav li{
display: inline-block;
background: #A8CB17;
padding-bottom: 0;
border-radius: 8px 8px 0 0;
border-bottom: 2px solid #A8CB17;
margin-right: 10px;
-webkit-box-shadow: -5px 0px 7px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -5px 0px 7px 0px rgba(0,0,0,0.75);
box-shadow: -5px 0px 7px 0px rgba(0,0,0,0.75);
}
nav a{
text-decoration:none;
color: #004158;
padding: 10px;
}
nav img{
position: absolute;
right: 50px;
top: 15px;
}
nav li:hover{
background: #17649A;
border-bottom: 2px solid #17649A;
}
p{
padding-top: 3em;
color: #454545;
text-align: center;
}
h1{
color: #393939;
font-size: 3em;
padding: 1em 0 0 1em;
text-shadow: 2px 2px 3px rgba(23, 23, 23, 1);
margin-bottom: 1em;
}
footer{
border-top: 2px solid #393939;
background: #40B3DF;
position:relative;
bottom:0;
height: 60px;
width: 100%;
text-align: center;
}
footer p{
display:inline-block;
margin: 0 auto;
padding-top: 1.5em;
color: #004158;
}
footer span{
position: relative;
top: 7px;
right: -45px;
}
textarea{
height: 150px;
width: 200px;
padding: 1em;
}
label, input[type=submit]{
text-transform: uppercase;
}
input, label{
display: block;
margin: 0 auto;
padding: 1em;
width: 200px;
}
input[type=submit] {
margin-top: 2em;
border-radius: 8px;
font-weight: 700;
}
fieldset {
height: 550px;
position: relative;
width: 60%;
text-align: center;
background: #676767;
margin: 0 auto;
margin-bottom: 2em;
/*border: 0;*/
}
The gap at the bottom of the form is due to the fact that your fieldset has a height of 550px, but your content does not fill that height. Remove the height, and adjust margin/padding from there.
As for the padding on the fieldset, browsers add padding to fieldsets by default. To make your site more consistent across browsers, use a CSS reset, like the HTML5 reset style sheet. That essentially overrides all of a browser's default styling. When using it, apply it above all of your other CSS styles. As for the padding itself, there are a few ways to manage it.
To adjust a certain side, you can use padding-top, padding-bottom, padding-right, or padding-left.
You can adjust top/bottom, left/right using padding: 10px 15px;, which would give you 10px on top and bottom, and 15px on the left and right.
You can also specify top, left/right, and bottom with padding:10px 15px 5px.
Margins are set the same way, just replace "padding" with "margin".
I created a mock up here of some html and for some reason my site looks different on safari than how i want it to look on chrome. On chrome it looks correct but on safari on osx and on mobile phones it just looks a bit off and centered in random spaces. I am not sure how to make it so other browsers look like one?
You can see the difference here in chrome win and safari osx ( the first image chrome ) http://imgur.com/Z3kYG&SYZkW?full I just want it to look as it does on chrome but i cant figure out whats wrong with my code.
<div id="right-preview"><div id="background1"><div id="contentarea">
<h4 id="time">01:59 AM</h3><br/><h4 class="username">Enter a name..</h3><div id="conversation"><div class="gBoxTall">
<div class="right">
<p class="message"> Your mom and I are going to divorce next month.</p>
</div>
<div class="bottom">
<div class="right"></div>
</div>
</div><div class="wBoxTall">
<div class="right">
<p class="message"> Why ? Call me please.</p>
</div>
<div class="bottom">
<div class="right"></div>
</div>
</div><div class="gBoxTall">
<div class="right">
<p class="message"> I wrote Disney and this phone changed it.</p>
</div>
<div class="bottom">
<div class="right"></div>
</div>
</div></div>
</div></div>
This is my CSS code as well.
* {
margin: 0;
padding: 0;
}
h1 a {
color: black;
text-decoration: none;
}
#background1 {
background-color:#09F;
height: 720px;
margin: 0px auto 0;
overflow: hidden;
position: relative;
width: 480px;
}
#background2 {
background-color:#09F;
height: 720px;
margin: 0px auto 0;
overflow: hidden;
position: relative;
width: 480px;
}
h4#time {
font-size: 18px;
text-align: center;
text-shadow: 0 -1px 0 #FFF;
padding-top: 4px;
}
.username {
text-align: center;
text-shadow: 0 -1px 0 #000;
font-size: 26px;
color:#FFF;
padding-top: 5px;
}
#conversation {
padding-top: 15px;
}
h3#date {
color: #808080;
font: bold 26px Helvetica, Arial, sans-serif;
text-align: center;
}
p.message {
font: 22px/25px Helvetica, Arial, sans-serif;
}
.gBoxTall {
background-color:#0C0;
clear: both;
float: right;
margin-top: 15px;
max-width: 270px;
padding-left: 22px;
}
.gBoxTall .right {
background-color:#0C0;
}
.gBoxTall .right p {
margin-left: -5px;
padding: 8px 30px 0 0;
color:#000;
text-shadow: 0px 0px 0px;
}
.gBoxTall .bottom {
background-color:#0C0;
height: 20px;
margin: -10px 0 0 -22px;
}
.gBoxTall .bottom .right {
background-color:#0C0;
float: right;
height: 20px;
width: 43px;
}
.wBoxTall {
background-color:#999;
clear: both;
float: left;
margin-top: 15px;
max-width: 260px;
padding-left: 33px;
}
.wBoxTall .right {
background-color:#999;
}
.wBoxTall .right p {
margin-left: -5px;
padding: 8px 24px 0 0;
color:#000;
text-shadow: 0px 0px 0px;
}
.wBoxTall .bottom {
background-color:#999;
height: 20px;
margin: -10px 0 0 -33px;
}
.wBoxTall .bottom .right {
background-color:#999;
float: right;
height: 20px;
width: 27px;
}
#contentarea {
font-family: Helvetica, Arial, sans-serif;
height: 660px;
overflow: hidden;
}
Your h4 tags are closed with h3 tags - this is invalid. Based on your CSS the line should probably be:
<h4 id="time">01:59 AM</h4><br/><h3 class="username">Enter a name..</h3><div id="conversation"><div class="gBoxTall">
My website is currently breaking on several pages in ie7, ie8, and ie9, and of course its breaking in different ways in each browser. I've been trying to figure this out for hours and have nothing.
The problem in ie7-8 is that my various elements are not floating correctly I believe, but I'm not entirely sure.
Here are some screencaps
Here is a link to the test page: testsite
And here is the code:
<?php include("includes/header.html");?>
<div id="content">
<div id="toolbar" class="dropshadow" style="background-color: #181818">
<h1 class="header1">Looking to <font color="ed1c2e">Buy</font>?</h1>
<h2 class="header2">Buyers Tools:<h2>
<hr noshade color = "#373737"/>
<ul>
<li>
<a href="inventory.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Showroom','','images/toolbar/carhover.png',1)">
<img src="images/toolbar/car.png" alt="Showroom" name="Showroom" width="89" height="55" border="0" id="Showroom" style="margin-left: 7px;"/>
<h3>Our Vehicles</h3>
</a>
</li>
<li>
<a href="shipping.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Shipping','','images/toolbar/shippinghover.png',1)">
<img src="images/toolbar/shipping.png" alt="Shipping" name="Shipping" width="97" height="55" border="0" id="Shipping" />
<h3>Shipping</h3>
</a>
</li>
<li>
<a href="financing.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Financing','','images/toolbar/financinghover.png',1)">
<img src="images/toolbar/financing.png" alt="Financing" name="Financing" width="89" height="55" border="0" id="Financing" />
<h3>Financing</h3>
</a>
</li>
<li>
<a href="insurance.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Insurance','','images/toolbar/insurancehover.png',1)">
<img src="images/toolbar/insurance.png" alt="Insurance" name="Insurance" width="64" height="55" border="0" id="Insurance" />
<h3>Insurance</h3>
</a>
</li>
<li>
<a href="auto-locator.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('AutoLocator','','images/toolbar/autolocatorhover.png',1)">
<img src="images/toolbar/autolocator.png" alt="AutoLocator" name="AutoLocator" width="104" height="55" border="0" id="AutoLocator" />
<h3>Auto Locator</h3>
</a>
</li>
</ul>
</div>
<div id="searchbox" class="dropshadow">
</div>
<div id="advsearch" class="dropshadow">
</div>
<div id="links" class="dropshadow" style="background-color: #181818">
</div>
</div>
</div>
<div id="bannerads" class="dropshadow">
</div>
Here is the CSS sheet specific to this page. If you need the main page for the site I can get it for you, but that style sheet works fine on other pages so I believe the problem is here.
#charset "utf-8";
/* CSS Document */
#bannerads{
margin: 9px 0px 5px 6px;
float: left;
width: 728px;
height: 90px;
padding: 6px 128px;
background-color: #e9e7e4;
}
#toolbar{
float: left;
width: 984px;
height: 150px;
position: relative;
z-index: 1;
margin: 0px 6px 0px 6px;
background-color: #181818;
background-image: url(../images/toolbar.png);
background-position:right top;
background-repeat:no-repeat;
}
#toolbar hr{
float: left;
width: 600px;
margin: 4px 300px 0px 30px
}
#toolbar ul{
list-style:none;
padding:0;
}
#toolbar li{
float: left;
margin: 10px 0px 0px 31px;
}
#toolbar a{
color: #e9e7e4;
}
#toolbar a:hover{
color:#e9e7e4;
text-decoration:underline;
}
#searchbox{
float: left;
clear: both;
width: 446px;
height: 402px;
background-color: #e9e7e4;
margin: 9px 6px 0px 6px;
padding: 10px 20px 10px 20px;
}
#toolbar li h3{
color: #e9e7e4;
font-size: 13px;
margin-top: 4px;
margin-bottom: 10px;
text-align:center;
}
#advsearch{
float: left;
width: 446px;
height: 242px;
background-color: #e9e7e4;
margin: 9px 6px 0px 6px;
padding: 10px 20px 10px 20px;
}
#links{
float: left;
width: 446px;
height: 132px;
background-color: #181818;
margin: 8px 6px 0px 6px;
padding: 10px 20px 10px 20px;
}
#arrow{
margin-left:-93px;
width: 68px;
height: 135px;
float: left;
position: relative;
}
.header1{
color: #e9e7e4;
font-size: 28px;
margin: 8px 0px 0px 30px;
float: left;
}
.header2{
color: #e9e7e4;
font-size: 16px;
float:left;
margin: 22px 0px 0px 220px;
}
#showinvheader{
color: #e9e7e4;
font-size: 14px;
margin-bottom: -2px;
text-align:center;
}
Lastly, here is the css sheet I'm using for compatibility with ie:
/* CSS Document */
.Navigation{
border: solid #181818 1px;
margin: -15px 5px 0px 5px;
}
.bigbox{
border: solid #181818 1px;
margin: 7px 5px 0px 5px;
}
.smallbox{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#banner{
border: solid #181818 1px;
margin: -1px 5px 0px 5px;
}
#headerimg{
border: solid #181818 1px;
margin: -1px 5px 0px 5px;
}
#contentbox{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#bannerads{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#bannerads2{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#toolbar{
border: solid #181818 1px;
margin: -1px 5px 0px 5px;
}
#featured{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#searchbox{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#advsearch{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#links{
border: solid #181818 1px;
margin: 7px 5px 0px 5px;
}
Well, for starters, your X-UA-Compatible header is messed up. You have a weird quot; value in there. This is likely preventing newer versions from rendering as IE7. However, you should probably just always render in standards mode, and make subtle changes for each browser using conditional comments.
If you must use the x-ua-compatible, then you should do it as an http header, rather than as a meta tag. PHP allows you to addheaders before it starts writing data to the client. Add the header there.
Upon further examination, your code is.. Crap. It's got 180+ validation errors, including things like putting block level elements in header elements. I would suggest making your HTML validate before anything else, as invalid code is the #1 reason for things to render differently on different browsers.
http://validator.w3.org/check?verbose=1&uri=http%3a%2f%2fspecialtysales.nfshost.com%2flookingtobuy2.php
Ok, sorry it took so long for me to write this...
The reason the code was malfunctioning was that a header tag didn't get closed.
<h1 class="header1">Looking to <font color="ed1c2e">Buy</font>?</h1>
<h2 class="header2">Buyers Tools:<h2>
So, if you're experiencing a similar problem make sure your tags are all closed.
Working Example: http://jsfiddle.net/4jmY2/4/
If you Zoom in/out (ctrl +/-) you will see the elements move around, how can I keep the aspect ratio so the content will remain the same no matter what size?
HTML
<div class="check_box">
<div class="check">
<div class="your_name">Your Name</div>
<div class="bank_name">Your Bank Name</div>
<div class="check_number_top">1001</div>
<div class="your_address">Your Address</div>
<div class="bank_address">Bank Address</div>
<br />
<div class="date">Date ________</div>
<br />
<div class="pay">Pay to the<br />Order of _______________________________ $________</div>
<br />
<div class="pay_line">_________________________________________ Dollars</div>
<br />
<div class="sign">_____________________</div>
<br />
<div class="check_number_bottom">⑈<strong>1001</strong>⑈</div>
<div class="routing_number">⑆<strong>123456789</strong>⑆</div>
<div class="account_number"><strong>987 6543210</strong> ⑈</div>
</div>
</div>
CSS
.check_box {
width: 300px;
}
.check {
border: 2px solid #1A1B1B;
background-color: #DFE5E5;
height: 110px;
font-size:80%;
font-family: Georgia;
padding:0px;
margin: 0px;
}
.your_name {
float:left;
padding:0px 30px 0px 5px;
font-size:105%;
}
.your_address {
float:left;
padding:0px 40px 0px 5px;
font-size:85%;
}
.bank_name {
float:left;
padding:0px 30px 0px 5px;
font-size:105%;
}
.bank_address {
float:left;
padding:0px 30px 0px 5px;
font-size:85%;
}
.check_number_top {
float:left;
padding:0px 0px 0px 40px;
font-size:105%;
}
.date {
float:left;
padding:0px 0px 0px 220px;
font-size:85%;
}
.pay {
float:left;
padding:0px 0px 0px 5px;
font-size:85%;
}
.pay_line {
float:left;
padding:0px 0px 0px 5px;
font-size:85%;
}
.sign {
float:left;
padding:0px 0px 0px 165px;
font-size:85%;
}
.check_number_bottom {
float:left;
padding:0px 0px 0px 5px;
font-size:85%;
font-family:"Arial Narrow"; /* need to change the font's of the numbers */
}
.routing_number {
float:left;
padding:0px 0px 0px 5px;
font-size:85%;
font-family:"Arial Narrow"; /* need to change the font's of the numbers */
}
.account_number {
float:left;
padding:0px 0px 0px 10px;
font-size:85%;
font-family:"Arial Narrow"; /* need to change the font's of the numbers */
}
.routing_number_tip {
float:left;
padding:0px 0px 0px 10px;
font-size:85%;
color:#1F4CA5;
}
.account_number_tip {
float:left;
padding:0px 0px 0px 10px;
font-size:85%;
color:#1F4CA5;
}
Well, I finally had a go at doing this. I had to do it from scratch, and it took a while.
Live Demo
It looks like this for me:
Tested in IE7/8 plus recent versions of Firefox, Chrome, Safari, Opera.
You can zoom in!
If there's anything wrong or you have any questions, let me know.
HTML:
<div class="check_box">
<div class="check">
<span class="your_left"><em>Your Name</em><br />Your Address</span>
<span class="your_mid"><em>Your Bank Name</em><br />Bank Address</span>
<span class="your_right"><em>1001</em></span>
<span class="date">Date<span></span></span>
<span class="pay_to">Pay to the<br />Order of<span></span></span>
<span class="dollar"><br />$<span></span></span>
<span class="dollars"><span></span>Dollars</span>
<span class="extraline"><span></span></span>
<span class="numbers">
<span>⑈<b>1001</b>⑈</span>
<span>⑆<b>123456789</b>⑆</span>
<span><b>987 6543210</b> ⑈</span>
</span>
</div>
</div>
CSS:
.check_box {
font: 10px/1.3 Georgia, serif;
border: 2px solid #1a1b1b;
background-color: #dfe5e5;
width: 292px;
padding: 4px;
margin: 0
}
.check {
position: relative;
height: 102px
}
.check > span {
position: absolute
}
.check em {
font-size: 12px;
font-style: normal
}
.date span, .pay_to span, .dollar span, .dollars span, .extraline span {
border-bottom: 1px solid #000;
zoom: 1 /* fix ie7 */
}
.your_left {
top: 0; left: 0
}
.your_mid {
top: 0; left: 95px; text-align: center
}
.your_right {
top: 0; right: 0
}
.date {
top: 28px; right: 0
}
.date span {
padding-left: 50px;
margin: 2px 0 0 3px
}
.pay_to {
top: 35px; left: 0
}
.pay_to span {
padding-left: 180px;
margin-left: 3px
}
.dollar {
top: 35px; right: 0; text-align: right
}
.dollar span {
padding-left: 50px;
margin-left: 3px
}
.dollars {
top: 62px; left: 0
}
.dollars span {
padding-left: 250px;
margin-right: 3px
}
.extraline {
top: 76px; right: 0
}
.extraline span {
padding-left: 120px
}
.numbers {
bottom: 0; left: 0
}
.numbers span {
margin: 0 10px 0 0
}
Not sure that I understand your question. But when I zoom in, the text components scale up while the background "check" style does not.
It sounds like you want the check to scale up as well. If so, you might need to create em-driven div styles, which will scale with the browsers font selection.
Here's a good article with several examples.