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
Related
Currently I find myself a table that contains within it a div with a video player, but is moved around on the left side of the screen, I'd like to hit GrindPlayer, how can I do?
<style type="text/css" media="screen">
#GrindPlayer p{
text-align:center;
}
#GrindPlayer{
margin:0 auto;
}
</style>
<table width="100%" border="0" cellspacing="5">
<tr>
<td>
<div id="GrindPlayer">
<p>
Alternative content
</p>
</div>
</td>
</tr>
</table>
and if I can put the full table at the top of the screen. Thank you
If you want the div inside the table at the center, this is the solution.
#GrindPlayer p{
text-align:center;
}
#GrindPlayer{
margin:0 auto;
}
<table width="100%" border="1" cellspacing="5">
<tr>
<td>
<div id="GrindPlayer">
<p>
Alternative content
</p>
</div>
</td>
</tr>
</table>
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;
}
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>
Notice how the first HTML/CSS works when you re-size the browser horizontally. It will shrink no further than around 800 pixels, but it will expand as far as you drag the right edge of the browser. It will also correctly overflow the table at the top and scroll it horizontally.
The thing I don't like about the first code snippet is where the scrollbar is. I want it to show up within the borders of the fieldset, so even if I narrow the browser down to 800 pixels wide, I can see both the left and right sides of the fieldset's border.
The second code snippet is exactly the same as the first except I add another div tag to the mix, inside of the field set and around the grid. Notice how the top fieldset's width won't correctly shrink when you make the viewport of your browser narrower. Any ideas on why it doesn't work, what I can do to get it to work like the first code snippet?
I don't think I'm describing this clearly, but if you run the two side by side, and expand and contract the horizontal edge of your browser windows, you'll see the differences between the two.
I'm pretty new to CSS and HTML layout, so my understanding of why CSS handles sizing the way it does in some situations is still really confusing to me.
Working HTML file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Content-Style-Type" content="text/css"></meta>
<style type="text/css">
#divBody {
margin-top: 5px;
top:24px;
margin-top: 10px;
}
#divContainer
{
top: 5px;
position:relative;
min-height:100%;
#width:expression(document.body.clientWidth < 830? "800": "90%" );
width:90%;
min-width: 800px;
padding-bottom:70px;
}
#divMasterGrid {
position:relative;
margin:5px;
top:5px;
width:99%;
margin:0 auto;
overflow-x:scroll;
}
#divRadioButtonArea {
position:relative;
top:20px;
height:51px;
font-size: 12px;
width:99%;
margin:5px;
}
</style>
<title>TEST TEST</title>
</head>
<body id="divBody">
<div id="divContainer" class="gridRegion">
<div id="divMasterGrid">
<fieldset style="margin: 5px;">
<legend style="font-size: 12px; color: #000;">Numbers</legend>
<table border="1px">
<tr>
<td>One
</td>
<td>Two
</td>
<td>Three
</td>
<td>Fout
</td>
<td>Five
</td>
<td>Six
</td>
<td>Seven
</td>
<td>Eight
</td>
<td>Nine
</td>
<td>Ten
</td>
<td>Eleven
</td>
<td>Twelve
</td>
<td>Thirteen
</td>
<td>Fourteen
</td>
<td>Fifteen
</td>
<td>Sixteen
</td>
<td>Seventeen
</td>
<td>Eighteen
</td>
<td>Nineteen
</td>
<td>Twenty
</td>
</tr>
</table>
</fieldset>
</div>
<div id="divRadioButtonArea">
<fieldset style=" padding-left: 5px;">
<legend style="color: #000; height:auto">Colors</legend>
<table style="width:100%;padding-left:5%;padding-right:5%;">
<tr>
<td>
<input type="radio" name="A" value="Y"/><label>Red</label>
</td>
<td>
<input type="radio" name="O" value="O"/><label>White</label>
</td>
<td>
<input type="radio" name="W"/><label>Blue</label>
</td>
</tr>
</table>
</fieldset>
</div>
</div>
</body>
</html>
Broken HTML file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Content-Style-Type" content="text/css"></meta>
<style type="text/css">
#divBody {
margin-top: 5px;
top:24px;
margin-top: 10px;
}
#divContainer
{
top: 5px;
position:relative;
min-height:100%;
#width:expression(document.body.clientWidth < 830? "800": "90%" );
width:90%;
min-width: 800px;
padding-bottom:70px;
}
#divTopFieldSet {
position:relative;
margin:5px;
top:5px;
width:99%;
}
#divRadioButtonArea {
position:relative;
top:20px;
height:51px;
font-size: 12px;
width:99%;
margin:5px;
}
#divTable {
position:relative;
width:99%;
margin:5px auto;
overflow-x:scroll;
}
</style>
<title>TEST TEST</title>
</head>
<body id="divBody">
<div id="divContainer" class="gridRegion">
<div id="divTopFieldSet">
<fieldset style="margin: 5px;">
<legend style="font-size: 12px; color: #000;">Numbers</legend>
<div id="divTable">
<table border="1px">
<tr>
<td>One
</td>
<td>Two
</td>
<td>Three
</td>
<td>Fout
</td>
<td>Five
</td>
<td>Six
</td>
<td>Seven
</td>
<td>Eight
</td>
<td>Nine
</td>
<td>Ten
</td>
<td>Eleven
</td>
<td>Twelve
</td>
<td>Thirteen
</td>
<td>Fourteen
</td>
<td>Fifteen
</td>
<td>Sixteen
</td>
<td>Seventeen
</td>
<td>Eighteen
</td>
<td>Nineteen
</td>
<td>Twenty
</td>
</tr>
</table>
</div>
</fieldset>
</div>
<div id="divRadioButtonArea">
<fieldset style=" padding-left: 5px;">
<legend style="color: #000; height:auto">Colors</legend>
<table style="width:100%;padding-left:5%;padding-right:5%;">
<tr>
<td>
<input type="radio" name="A" value="Y"/><label>Red</label>
</td>
<td>
<input type="radio" name="O" value="O"/><label>White</label>
</td>
<td>
<input type="radio" name="W"/><label>Blue</label>
</td>
</tr>
</table>
</fieldset>
</div>
</div>
</body>
</html>
I hope this is what you mean:
I've moved the overflow-x and width rules to #divTopFieldSet - the contents of the div correctly scrolls when the body becomes too narrow to contain the table.
To tell you the truth, I'm not 100% sure of the root cause of this. When an element with a percentage width is set to overflow:scroll, it doesn't automatically shrink to crop its contents - it seems like the children of the element play a part. Because the table has a minimum width of its own (determined by the contents of the cells), the surrounding container will not shrink past the outer edge of the table. On top of that, there is the calculation of percentage widths - width:99%; means '99% of the parent container's width' - if the parent container isn't based on the size of the viewport, that 99% won't change when you resize, either.
Applying the overflow rule to a container further up the tree (divTopFieldSet) does work, though.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Content-Style-Type" content="text/css"></meta>
<style type="text/css">
#divBody {
margin-top: 5px;
top:24px;
margin-top: 10px;
}
#divContainer
{
top: 5px;
position:relative;
min-height:100%;
#width:expression(document.body.clientWidth < 830? "800": "90%" );
width:90%;
min-width: 800px;
padding-bottom:70px;
}
#divTopFieldSet {
position:relative;
margin:5px;
top:5px;
width:99%;
overflow-x:scroll;
}
#divRadioButtonArea {
position:relative;
top:20px;
height:51px;
font-size: 12px;
width:99%;
margin:5px;
}
#divTable {
margin:5px auto;
}
</style>
<title>TEST TEST</title>
</head>
<body id="divBody">
<div id="divContainer" class="gridRegion">
<div id="divTopFieldSet">
<fieldset style="margin: 5px;">
<legend style="font-size: 12px; color: #000;">Numbers</legend>
<div id="divTable">
<table border="1px">
<tr>
<td>One
</td>
<td>Two
</td>
<td>Three
</td>
<td>Fout
</td>
<td>Five
</td>
<td>Six
</td>
<td>Seven
</td>
<td>Eight
</td>
<td>Nine
</td>
<td>Ten
</td>
<td>Eleven
</td>
<td>Twelve
</td>
<td>Thirteen
</td>
<td>Fourteen
</td>
<td>Fifteen
</td>
<td>Sixteen
</td>
<td>Seventeen
</td>
<td>Eighteen
</td>
<td>Nineteen
</td>
<td>Twenty
</td>
</tr>
</table>
</div>
</fieldset>
</div>
<div id="divRadioButtonArea">
<fieldset style=" padding-left: 5px;">
<legend style="color: #000; height:auto">Colors</legend>
<table style="width:100%;padding-left:5%;padding-right:5%;">
<tr>
<td>
<input type="radio" name="A" value="Y"/><label>Red</label>
</td>
<td>
<input type="radio" name="O" value="O"/><label>White</label>
</td>
<td>
<input type="radio" name="W"/><label>Blue</label>
</td>
</tr>
</table>
</fieldset>
</div>
</div>
</body>
</html>
Let us know if this isn't what you need...