Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
in the center of the page 1
- Thread starter davikokar
- Start date
-
1
- #2
Yup. See this example:
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
Vragabond - my company considers that url as a "Blog or Forum" and therefore is blocked by our firewall
Can you provide another link or post the code in this forum? I have been using javascript to vertically center content on a page and move it around on screen resize - the horizonal is easy by setting wrapper/body css attributes, but have never been able to find a good pure CSS version of vertical centering.
FYI - here is my code (100% of my users where I implemented this are on IE - it's for a corporate intranet, so this version only works in IE - I have since re-written it to work in FF, but that code is sitting on my computer at home.)
--------
GOOGLE is a great resource to find answers to questions like "how do i..."
If you don't know exaclty what you want to do or what to search on, try Google Suggest: --------
I have recently been semi-converted to ensuring all my code (well most of it) works in both javascript and non-javasc
Can you provide another link or post the code in this forum? I have been using javascript to vertically center content on a page and move it around on screen resize - the horizonal is easy by setting wrapper/body css attributes, but have never been able to find a good pure CSS version of vertical centering.
FYI - here is my code (100% of my users where I implemented this are on IE - it's for a corporate intranet, so this version only works in IE - I have since re-written it to work in FF, but that code is sitting on my computer at home.)
Code:
<html>
<head>
<script language="javascript">
window.onload = function() {vCenter();}
function vCenter() {
var winHeight = document.getElementsByTagName('body')[0].clientHeight;
var contentHeight = 300;
var vCenterLoc = (winHeight - contentHeight) / 2;
var contentBlock = document.getElementById("content");
contentBlock.style.marginTop
= (contentHeight < winHeight)
? vCenterLoc
: 0;
}
</script>
<style>
body {
margin: 0 auto;
text-align:center;
}
#content {
border: 1px solid #000000;
padding: 3px;
width: 500px;
height: 300px;
margin: 0 auto;
text-align: left;
}
</style>
</head>
<body onResize="vCenter();">
<div id="content">
<p><strong>Lorem ipsum</strong> <a href="[URL unfurl="true"]http://www.lipsum.com"[/URL] target="_blank">what's this?</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean nibh. Donec malesuada. Donec neque. Sed elit ligula, venenatis ac, vehicula et, pulvinar ut, orci. Sed sagittis, lectus sed sodales rhoncus, quam leo sodales mi, sit amet pulvinar eros magna sed ipsum. Sed non metus.</p>
</div>
</body>
</html>--------
GOOGLE is a great resource to find answers to questions like "how do i..."
If you don't know exaclty what you want to do or what to search on, try Google Suggest: --------
I have recently been semi-converted to ensuring all my code (well most of it) works in both javascript and non-javasc
Try and see it here. Same code, just with added doctype:
If you can't, here's the code (please note this is not my code):
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
If you can't, here's the code (please note this is not my code):
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>CSS vertical center using float and clear</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
body {
background-color:#fc6;
color:#630;
font:100.01%/1.4 sans-serif;
text-align:center; /* horizontal centering for IE Win quirks */
}
#distance {
width:1px;
height:50%;
background-color:#fc6;
margin-bottom:-13.75em; /* half of container's height */
float:left;
}
#container {
margin:0 auto;
position:relative; /* puts container in front of distance */
text-align:left;
height:27.5em;
width:45em;
clear:left;
background-color:#ff9;
border:1px solid #c93;
border-top-color:#fff;
border-left-color:#fff;
}
#container div {
font-size:80%;
float:right;
width:17em;
margin-left:2em;
}
#container div h2 {
font-size:120%;
font-weight:bold;
text-transform:uppercase;
margin:1em 0 0;
}
#container div h3 {
font-size:100%;
font-weight:bold;
margin:.5em 0 0 .75em;
}
#container ul {
margin-left:2em;
}
#container li span {
font-size:70%;
}
#container h1 {
font-size:120%;
padding-top:2.4em;
margin-left:2.4em;
}
#container p {
margin:1.5em 13.6em 1.5em 3em;
}
address {
font-weight:normal;
font-size:80%;
font-style:normal;
text-align:right;
margin:0 20em 0 3em;
}
</style>
</head>
<body>
<div id="distance"></div>
<div id="container">
<div>
<h2>Tested in</h2>
<h3>Win XP SP1</h3>
<ul>
<li>Firefox 1.04</li>
<li>Opera 6.06 / 7.23 / 8.0</li>
<li>Netscape 6.1 / 7.1</li>
<li>IE 5.0 / 5.5 / 6</li>
</ul>
<h3>Mac OS9</h3>
<ul>
<li>Mozilla 1.2.1</li>
<li>Netscape 7</li>
<li>IE 5</li>
<li>WaMCom <span>[thx T. Jung]</span></li>
<li>iCab 3.0 Beta 340 <span>[thx T. Jung]</span></li>
</ul>
<h3>Mac OSX</h3>
<ul>
<li>Safari 1.0.3 / 1.3</li>
<li>Firefox 1.0.4</li>
<li>Netscape 7</li>
<li>Opera 6</li>
<li>Camino</li>
<li>IE 5</li>
</ul>
</div>
<h1>CSS vertical centering using float and clear - crossbrowser (?)</h1>
<p>
This box stays in the middle of the browser's viewport.<br>
The content does not disappear when the viewport gets smaller than the box.
</p>
<p>
It even works in IE5 Mac - the doctype triggers this browser to quirks-mode and the IEMac-only stylesheet kills the height for html, body.
</p>
<address>fricca[at]uk2.net | 07.08.05</address>
</div>
</body>
</html>[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
Thanks V!
--------
GOOGLE is a great resource to find answers to questions like "how do i..."
If you don't know exaclty what you want to do or what to search on, try Google Suggest: --------
I have recently been semi-converted to ensuring all my code (well most of it) works in both javascript and non-javasc
--------
GOOGLE is a great resource to find answers to questions like "how do i..."
If you don't know exaclty what you want to do or what to search on, try Google Suggest: --------
I have recently been semi-converted to ensuring all my code (well most of it) works in both javascript and non-javasc
BillyRayPreachersSon
Programmer
And they don't consider this to be a forum?
Coedit Limited - Delivering standards compliant, accessible web solutions
Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
Coedit Limited - Delivering standards compliant, accessible web solutions
Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
BRPC said:
I had to get this site unblocked, "they" deemed it important enough to allow access.
It's crazy, however, as A LOT of the code available out there is posted in blogs and as a programmer/developer I don't have access to it - I end up most of my time checking Microsoft's KB and support forums and I'm sure I don't need to describe those postings to anyone
--------
GOOGLE is a great resource to find answers to questions like "how do i..."
If you don't know exaclty what you want to do or what to search on, try Google Suggest: --------
I have recently been semi-converted to ensuring all my code (well most of it) works in both javascript and non-javasc
- Thread starter
- #8
- Status
Similar threads
- Locked
- Question
- Locked
- Question
- Locked
- Question