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.
Related
I am a newbie in HTML and currently working on my University project work and I really need some help. I am using a background box for the "blog-like" website which needs to align title and short text on the left and contents with hyperlinks on the right.
So far I have used a cell to align them but to say the least, it looks very ugly and moreover affects spacing. No matter what I tried I can't change the contents on both sides without a response from another. Is it possible to arrange content somehow another way instead of using a single cell for an entire box and dividing percentage for each side? I have uploaded a picture of the website below
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Your Personal Guide To Best Hardcore Events
</title>
<style type="text/css">
body {
background: url(http://webprojects.eecs.qmul.ac.uk/at315/background.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
background-attachment: fixed
}
.background {
display: flex;
justify-content: center;
}
div.transbox {
margin: 0px;
background-color: #ffffff;
border: 1.5px solid black;
opacity: 0.6;
filter: alpha(opacity=60);
width: 100%;
max-width: 1300px;
}
</style>
</head>
<body>
<p align="center">
<img src="http://webprojects.eecs.qmul.ac.uk/at315/header.png" style="width:70%;" border="0" alt="" />
</p>
<div class="background">
<div class="transbox">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<th width="75%" align="left">
<h2>
Articles:
</h2>
</th>
<th width="20%" align="center">
<ul style="list-style: none;">
<li>
Homepage
<br />
<br />
</li>
<li>
<small><a href="http://www.qmul.ac.uk" style=
"text-decoration:none">Architects</a></small>
</li>
<li>
<small><a href="https://www.facebook.com" style=
"text-decoration:none">Northlane</a></small>
</li>
<li>
<small><a href="http://www.bbc.co.uk" style=
"text-decoration:none">Attila</a></small>
</li>
</ul>
</th>
</tr>
<tr>
<td align="left">
<h4>
<strong>Architects Rocking Brixton</strong>
</h4>Read our article about Architects headlining their biggest sold-out UK show!
<hr />
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td align="left">
<h4>
<strong>Architects Rocking Brixton</strong>
</h4>Read our article about Architects headlining their biggest sold-out UK show!
<hr />
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td align="left">
<h4>
<strong>Architects Rocking Brixton</strong>
</h4>Read our article about Architects headlining their biggest sold-out UK show!
<br />
<br />
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Main page of the website
In this situations it is best to use flex and max width. It is very good to responsive design so.
.background {
display: flex;
justify-content: center;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60);
width: 100%;
max-width: 1000px;
}
Change your browser size, It work good for all sizes. And the best part is if the screen has width < 1000px the table fills all of the screen.
just change this tag:
<table style="padding:0 5% " width = "90%" border="0" cellpadding="0" cellspacing="0">
I want to use CSS to reproduce the behaviour of the simple HTML table below.
The HTML table has a width of 100% with just one row and three columns.
Each column contains an image where image1 is left-aligned; image2 is centered; and image3 is right-aligned.
Importantly, when the browser window is resized to be very small, the images should not overlap or wrap onto the next line. They should simply stay next to each other in the same line (this is what the table solution does).
This sounds like such a simple requirement, but I've been struggling with this for many hours and so any help would be very much appreciated.
<html>
<head>
<title>Test</title>
</head>
<body>
<table width="100%">
<tr>
<td align="left">
<img width="150" height="129" src="image1.gif">
</td>
<td align="center">
<img width="400" height="120" border="0" src="image2.jpg"> <!-- This is the main logo -->
</td>
<td align="right">
<img width="141" height="80" src="image3.png">
</td>
</tr>
</table>
</body>
</html>
You can use display: table and display: table-cell to get similar properties of a table.
html
<div class="table">
<div class="table-cell center">
<p>Center</p>
</div>
<div class="table-cell left">
<p>Left</p>
</div>
<div class="table-cell right">
<p>Right</p>
</div>
</div>
css
.table{
display: table;
}
.table-cell{
height: 100px;
width: 100px;
display: table-cell;
vertical-align: middle;
}
.center{text-align: center;}
.left{text-align: left;}
.right{text-align: right;}
Check out this pen: http://codepen.io/codefancy/pen/PqQjyb/
I finally came up with a rather messy solution. It uses conditional comments to provide a work-around for Internet Explorer (versions 5 upwards). The following code passes W3C markup and css validation. This solution could be extended to produce the 'holy grail' of a fluid 3-column layout without using tables.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB" lang="en-GB">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Test</title>
<style type="text/css">
.table{
display: table;
width: 100%;
}
.table-cell{
height: 100px;
width: 100px;
display: table-cell;
vertical-align: middle;
}
.center{text-align: center;}
.left{text-align: left;}
.right{text-align: right;}
</style>
<!--[If IE]>
<style type="text/css">
.table{
display: none;
}
.table-cell{
display: none;
}
</style>
<![endif]-->
</head>
<body>
<div class="table"><div class="table-cell left">
<!--[If IE]></div></div><table width="100%"><tr><td class="left"><![endif]-->
<img width="150" height="129" alt="star" src="image1.gif" />
<!--[If IE]><div><![endif]-->
</div><div class="table-cell center">
<!--[If IE]></div></td><td class="center"><![endif]-->
<img width="400" height="120" alt="logo" src="image2.jpg" /> <!-- This is the main logo -->
<!--[If IE]><div><![endif]-->
</div><div class="table-cell right">
<!--[If IE]></div></td><td class="right"><![endif]-->
<img width="141" height="80" alt="thumbs up" src="image3.png" />
<!--[If IE]><div><div><![endif]-->
</div></div>
<!--[If IE]></td></tr></table><![endif]-->
</body>
</html>
Thanks for all the help - I've been looking for a solution like this for a very long time.
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;
}
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.