I have a simple html page but the body is too close to the left. I would like to leave some margin from the left. In other words, I would like to shift the html body to the right.
The html code is as follows;
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>head title</title>
</head>
<body>
<h1>Test Page</h1>
<table class="table table-bordered" style="width: auto">
<thead>
</thead>
<tbody>
<tr>
<td>
<strong>Column1</strong>
</td>
<td>Col1 data</td>
</tr>
<tr>
<td>
<strong>Column1</strong>
</td>
<td>Col2 data</td>
</tr>
</tbody>
</table>
<form novalidate="" class="simple-form">PersonID
<input type="text" />
<BR><BR>
name
<input type="text" />
<BR><BR>
<button ng-click="submit()" id="submit_btn">SUBMIT</button>
</form>
<br>
</div>
</body>
</html>
What can I do to shift the html body slightly to the right so that it does not appear too close to the left side?
Inbetween your head tags add this:
<style type="text/css">
<!--
body {
padding: 10px;
}
-->
</style>
That'll push everything inside the body tags by 10px. Change it to what looks best for you though. 10px might not be much.
Are you using Bootstrap? You can center your content with a simple CSS code
body {
width: 800px;
margin-left: auto;
margin-right: auto;
}
I don't know but if this is what you mean..
body {
padding-left: 20px;
}
or
body {
margin-left: 20px;
}
you can do this... add to the body tag
<body style="margin-left:50px;">
<body style="margin-left: 50px"> should do the job.
You can read more on the CSS box-model here and here is a pretty good tutorial.
Just insert this tag in
<style type="text/css">
body { padding-left:10px; }
</style>
padding-left value can be adjusted as per your need !
you can also get this done by..
css
body{
width:95%;
margin:0 auto;
}
Related
I am designing a webpage and want the layout to remain the same regardless of screen size. I have looked at POSITION variables like fixed, absolute and relative and explanations but cannot find a clear answer. I believe it has something to do with nesting divisions. Can someone give me a more clear answer as to how this work? Thanks
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link href='http://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
<title></title>Test
<style type="text/css">
body
{
margin:0;
padding:0;
width:1300px;
height:650px;
color: black;
position:relative;
font-family: 'Satisfy', cursive;
background: #F4EEFE url(backgrounds/linen2.jpg) center center fixed no-repeat;
table td { border:0;vertical-align:top; }
#main {margin:0 auto;}
table.master {position:absolute;width:100%;height:100%;}
td.david {position:relative;}
td.richard {position:relative;vertical-align:bottom;}
td.forBackground{vertical-align:middle;}
td.middle{height:100px;}
#david{margin-top:10%;}
#richard{margin-bottom:15%;}
img.top{z-index:999;}
#button{z-index:999;display:block;text-decoration:none;bottom:2px; height:25px;clear:both;float:right; margin-left:47%; position:fixed; border:0px; padding:0px;}
img.davidbio{z-index:999;display:block;text-decoration:none;bottom:15%; height:200px;width:250px;clear:both;float:left; margin-left:11%; position:fixed; border:0px; padding:0px;}
</style>
</head>
<body>
<div id="container" class="container">
<div id="background-image" class="background-image"></div>
<div id="content">
<center>
<table class="master" border="0">
<tr>
<td width="20%" class="david"><div id="david"><?php include('david.php'); ?></div> </td>
<td width="55%" class="forBackground">
<div id="main" class="main">
<center>
<table class="background" border="0">
<tr>
<td>
</td>
</tr>
<tr>
<td class="middle"><center><br/><br/><font size="5">Text here</font> <br/><font size="7">Names here</font></center></td>
</tr>
<tr>
<td class="middle"><center><img src="heart.png" title="" alt="" width="200px" height="150px" /></center></td>
</tr>
<tr>
<td class="middle"><center><font size="5">Date<br/>
Time<br/>
Location</font></center></td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</center>
</div>
</td>
<td width="20%" class="richard"><br/><br/><br/><div id="richard"><?php include('richard.php'); ?></div></td>
</tr>
</table>
</center>
</div>
<input type="button" name="button" id="button" class="button" value=" Click Here;" onClick="MyWindow=window.open('input.php','MyWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no')" style="color:#F7D358;background-color:#D33033;border:1px solid;
border-top-right-radius:2em;
border-top-left-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;"></button>
<img src="davidbio.png" class="davidbio" alt="" title=""/>
</div>
</body>
</html>
Jsfiddle: http://jsfiddle.net/9hdz2/1/
If you want all the elements to stay in the same position whatever the size of the window, you need wrap all these elements in a tag (for example a div) and give it a fixed width.
For example (lets say the container has an id : #container), CSS :
#container{
width:960px;
margin:0 auto; /*this is to horizontaly center the element
in the window if the window is wider than 960px/*
}
Then you need to use relative or static (default) positioning on the elements inside it and you can use percentages as they are calculated on the parent dimensions which is fixed.
You can also use absolute positioning if you give the #container a relative position.
For your aim, I would avoid using fixed positioned elements as their position is calculated according to window and therefore will not follow the #container flow.
This explantion is simple so I highly recommend you look through more thorough definitions espacialy on CSS positioning.
You can find some here :
CSS positioning overview
Can't seem to be able to get IE9 to center the table (id="needToCenter") within the div. It works fine in FF.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<BODY>
<FORM id=viewDevicesForm method=post name=viewDevicesForm action=/viewDevices.jsf>
<DIV style="border: 1px grey solid; MARGIN-TOP: 20px; WIDTH: 100%;">
<TABLE id="needToCenter" style="MARGIN: auto" border=0 cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD><A style="HEIGHT: 22px; FONT-WEIGHT: 900" id=viewDevicesForm:_idJsp146 href="http://localhost:9082/viewDevices.jsf?Flow=view#" name=viewDevicesForm:_idJsp146>MASS EDIT</A>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</FORM>
</BODY>
</HTML>
Instead of using the html4 doctype, try the html5 doctype. That will force ie9 to use standards rendering and may fix issues.
<!DOCTYPE html>
Oh, and as an aside, you should be using CSS.
You could wrap your table with a <center> tag. It's deprecated on HTML 4.01 and not supported on HTML 5. But since you're using HTML 4.0 I think it'll work.
Just add text-align:center as this:
<DIV style="text-align:center;border: 1px grey solid; MARGIN-TOP: 20px; WIDTH: 100%;">
margin: auto only works for explicitly-sized elements. Add a width to your table if you want it to center itself inside it's container.
Example: http://jsfiddle.net/mqqu9/
<div style="border: 1px grey solid; margin-top: 20px; width: 100%;">
<table id="needToCenter" style="margin: 2em auto; width: 80%; border: solid 1px #c00;">
<tbody>
<tr>
<td>
<a style="height: 22px; font-weight: 900" id="viewDevicesForm:_idJsp146" href="http://localhost:9082/viewDevices.jsf?Flow=view#" name="viewDevicesForm:_idJsp146">MASS EDIT</a>
</td>
</tr>
</tbody>
</table>
</div>
I added a border and top & bottom margin to the table to make it obvious how the table renders.
This is my page source:
<html style="height: 100%">
<head>
<link rel="stylesheet" media="screen" href="/public/stylesheets/main.css">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body style="height: 100%; margin: 0px">
<table>
<tr>
<th>
<img src="/public/images/logo.jpg" alt="logo" id="logo" />
</th>
</tr>
</table>
<iframe id="testFrame" src="/public/site_down.gif" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100" width="100">
</body>
</html>
The code below shows the logo in center of page in Firefox, but left aligned in IE. How do i make it browser independant so that it always shows in center?
<table>
<tr>
<th>
<img src="/public/images/logo.jpg" alt="logo" id="logo" />
</th>
</tr>
</table>
The iframe code is left aligned in Firefox and IE, with IE showing V scroll bar, Firefox does not. I want to make iframe flexible so that the client can drop any image/html code so that it will always be centered without any scroll bars showing up.
My css
table
{
border-width: 0 0 1px 1px;
border-spacing: 0;
border-collapse: collapse;
margin:auto;
vertical-align:middle;
}
td
{
margin: 0;
padding: 4px;
border-width: 1px 1px 0 0;
}
Centered pages generally work like this:
<body>
<div id="wrapper">
...your side contents...
</div>
</body>
CSS:
#wrapper {
width:960px;
margin-left:auto;
margin-right:auto;
}
The same technique can be used to center anything, including your image and your Iframe. Give it a class or ID and apply the same CSS pattern.
I am having issues with my CSS. I am trying to make information display in 2 columns, denoted by the .left and .right classes.
You can see the issues at my jsFiddle
EDIT: Altering answer based on comments.
You are displaying tabular data - so use Tables. You can avoid nested tables by using the tbody tag, as demonstrated by this similar question:
For this solution, what you'll do is create a table. Each TBODY will represent one 'group' of data. In each group, the first column will be for the metadata (like thead), and the second column will be the actual data:
<table>
<tbody> <!-- First Set of Data -->
<tr>
<td> Sessions </td>
<td> 1 </td>
</tr>
<tr>
<td> Date </td>
<td> 1/1/2003 </td>
</tr>
...
</tbody>
<tbody> <!-- Second set of Data -->
<tr>
<td> Sessions </td>
<td> 5 </td>
</tr>
...
</tbody>
</table>
You can then style more easily using an external stylesheet, perhaps using the :nth-child selector and / or the colgroup tag or Javascript.
You might also get more answers if you re-name your question to something like "How to display tabular data with left hand column as key".
Here's a way to do what you're trying to do without using aboslute positioning (which is prone to breaking).
http://jsfiddle.net/WSEH4/33/
Basically, using inline-blocks guarantees that elements will not overlap if the CSS is incorrect. However, the best solution to your problem would just be to use tables instead. Tables exist for situations like this, with a label/value system.
Alternatively you can done it via floating. Example shown via demo.
http://jsfiddle.net/WSEH4/36/
I much prefer to use divs over spans: ( jsFiddle: http://jsfiddle.net/WSEH4/44/ )
HTML:
<!DOCTYPE html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div style="display: block;">
<div class="child">Where</div>
<div class="child">China</div>
<div class="clear"/>
<div class="child">Voltage</div>
<div class="child">220 V</div>
<div class="clear"/>
<div class="child">Frequency</div>
<div class="child">50 HZ</div>
<div class="clear"/>
<div class="child">Plug Type</div>
<div class="child">USA</div>
<div class="clear"/>
</div>
</body>
CSS:
.child
{
float: left;
top: 6px;
left: 6px;
width: 25%;
padding-right: 10px;
white-space: nowrap;
border-bottom: 1px solid #eee;
}
.clear
{
clear: both;
display: block;
}
Hey you can do this as like this
Css
div{
margin-top:10px;
}
.right{
float:left;
width:50%;
border-right:solid 1px red;
}
.left{
float:right;
}
HTML
<div style="display: block;width:200px;overflow: hidden;">
<div class="right">China</div>
<div class="left">Plug Type</div>
<div class="right">220 V</div>
<div class="left">Frequency</div>
<div class="right">50 HZ</div>
<div class="left">Voltage</div>
<div class="right">USA</div>
<div class="left">Where</div>
</div>
Live demo http://jsfiddle.net/rohitazad/WSEH4/52/
Can anyone help me to make an HTML code based on DIV's which has a simular result as this TABLE based code:
<HTML>
<BODY>
<STYLE>
html,body {height:100%;}
</STYLE>
<TABLE cellpadding=0 cellspacing=0 height=100% width=100%>
<TR>
<TD bgcolor=pink>
Page content...<BR>111<BR>222<BR>333
</TD>
</TR>
<TR>
<TD bgcolor=yellow id=footer style="height:1%">
Footer...<BR>111<BR>222<BR>333<BR>
<BUTTON onclick="document.getElementById('footer').innerHTML+='<BR>more footer...';">Increase footer</BUTTON>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
add this as CSS to your footer..
#footer{
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background-color : //whichever color you want
}
You need to specify minimum height of the center div/element.
For example following HTML snippet would ensure that footer is always at least 600px from the top of the browser
<html>
<head>
</head>
<body>
<div style="min-height: 600px;" id="center-content">
</div>
<div id="footer">
</div>
</body>
</html>