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>
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 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
CSS is my weak side and now I'm trying to improve it, can you please help me to spot what's the problem is, moreover which css style I'm missing.
<table>
<tr>
<td style=width:"177px; height:92px"><img src="logo.png"></td>
<td rowspan="2"><img src="img2.png"></td>
</tr>
<tr>
<td style=width:"177px; height:100px"><img src="img1.png"></td>
</tr>
</tr>
</table>
UPDATE:
I forgot to mention that I was doing HTML email so solved my issue. Thanks for your help
I think you just need to make the table default CellSpacing and CellPadding 0 (assuming the top picture in your post is the desired result)
<table cellpadding=0 cellspacing=0 >
Although DIV's may be easier
<div>
<div style = width:"177px; height:92px; float:left;">
<img src="logo.png"><br />
<img src="img2.png">
</div>
<div style=width:"177px; height:100px; float:left;">
<img src="img1.png">
</div>
</div>
Then, let's take it 1 step further
<style>
.wrapper
{
background-color:#ccc;
padding:5px;
}
.content
{
width:177px;
height:100px; /*Made them both 100px although one was 92px, this may not be correct*/
float:left;
}
</style>
<div class="wrapper">
<div class="content">
<img src="logo.png"><br />
<img src="img2.png">
</div><!--/content-->
<div class="content">
<img src="img1.png">
</div><!--/content-->
</div><!--/wrapper-->
The property you are looking for may be border-spacing, E.G. border-spacing: 0; (other table specific CSS properties) however you may wish to consult this topic first: Why not use tables for layout in HTML?
Try This one:
css
table {border:1px solid #ccc;
.logo{ width:100px; }.img2{ width:300px }
HTML
<table cellpadding="0" cellspacing="0">
<tr>
<td class="logo">
<img src="logo.png" /><br />
<img src="img1.png">
</td>
<td class="img2"><img src="img2.png"></td>
</tr>
</table>
height is the problem. Decrease the height of logo.png image.
I'm designing a website and I need it to look something like this http://www.spookycraft.net/
excluding the slide show and javascript and such, I just need 4 separate clickable blocks in the middle of a webpage, I've tried to use margin:auto and then re-position it using margin-left and margin-bottom ect but when I use margin-bottom It just splits apart more and acts rather interestingly here's my current code keep in mind I also need it to look the same on a higher resolution screen which is why I was attempting to use margin:auto;
<!DOCTYPE HTML>
<html>
<head>
<table border="10px"; class="head">
<tr>
<td>
<img src="http://www3.alcatel-lucent.com/partners/hp/data-center-network-connect/images/Alliance_DCNC_700x200.jpg" > </>
</td>
<tr>
</table>
<style media="screen" type="text/css">
.tone{
margin:auto;
}
.ttwo{
margin:auto;
}
.tthree{
margin:auto;
}
.tfour{
margin:auto;
}
.head{
margin:auto;
}
</style>
</head>
<body>
<table border="5px"; class="tone">
<tr>
<td>
<img src="http://www.wilsoninfo.com/300x300.gif"> </>
</td>
</tr>
</table>
<table border="5px"; class="ttwo">
<tr>
<td>
<img src="http://www.wilsoninfo.com/300x300.gif"> </>
</td>
</tr>
</table>
<table border="5px" class="tthree">
<tr>
<td>
<img src="http://www.wilsoninfo.com/300x300.gif"> </>
</td>
</tr>
</table>
<table border="5px" class="tfour">
<tr>
<td>
<img src="http://www.wilsoninfo.com/300x300.gif"> </>
</td>
</tr>
</table>
</body>
</html>
Any help would be appreciated! I'll be working to find a answer to my problem, and when I do I'll update this thread.
Don't use tables, they are a no-no in my books. Tables should not be used for structure in a HTML page these days, they should only be used for presenting data in a tabular format. Just use <div>s with a master wrapper <div> around them. Something like this is perfect:
HTML:
<div class="container">
<div class="box spacing"><img src="http://www.wilsoninfo.com/300x300.gif" width="100%"></div>
<div class="box spacing"><img src="http://www.wilsoninfo.com/300x300.gif" width="100%"></div>
<div class="box spacing"><img src="http://www.wilsoninfo.com/300x300.gif" width="100%"></div>
<div class="box spacing"><img src="http://www.wilsoninfo.com/300x300.gif" width="100%"></div>
</div>
CSS:
body{
margin:0;
padding:0;
}
.container{
overflow:hidden;
width:450px;
margin:0px auto;
}
.box{
width:200px;
height:200px;
float:left;
background-color:#ccc;
margin-bottom:20px;
}
.spacing{
margin-right:20px;
}
Demo here: http://jsfiddle.net/aRSNh/172/
I'm not familiar with table design, but if you want to build it with div I have my code here
<div class="container">
<div class="box"><img src="http://www.wilsoninfo.com/300x300.gif"></div>
<div class="box"><img src="http://www.wilsoninfo.com/300x300.gif"></div>
<div class="box"><img src="http://www.wilsoninfo.com/300x300.gif"></div>
<div class="box"><img src="http://www.wilsoninfo.com/300x300.gif"></div>
</div>
with this css
.container {
width: 680px;
margin: 10px auto;
}
.box {
float: left;
margin: 20px;
}
A nice library for fast CSS development is Twitter bootstrap http://twitter.github.io/bootstrap/index.html
Here is a quick example using bootstrap:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Layout Demo</title>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap- combined.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid" style="margin: 100px 0px; 0px; 0px;">
<div class="row">
<div class="offset6 span3"> <img src="http://www.wilsoninfo.com/300x300.gif"> </> </div>
<div class="span3"> <img src="http://www.wilsoninfo.com/300x300.gif"> </> </div>
</div>
<br>
<div class="row">
<div class="offset6 span3"> <img src="http://www.wilsoninfo.com/300x300.gif"> </> </div>
<div class="span3"> <img src="http://www.wilsoninfo.com/300x300.gif"> </> </div>
</div>
</div>
</body>
</html>
Plunker: http://embed.plnkr.co/iKgsmZ/preview