Pixelpost

Sergio de la Torre · #1 12-23-2005, 08:08 PM

I want to put a block in the middle of this page, but i dont know to do it.
http://www.sergiodelatorre.com/photo...hp?x=templates

I cant know what will be the height or width...

Help!

**blinking8s**+ · #2 12-23-2005, 08:10 PM

there are height and width tags...check the doc/ folders tag list file

you use something like
div class="title" style="<IMAGE_WDITH>"

or something along those lines

height isnt something you can easily control, just by knowing the dimensions that safely fit, and how well your footer breaks when this is pushed out of the picture, or overlaps...

#3 12-24-2005, 12:06 PM

Quote:

Originally Posted by Sergio de la Torre

I want to put a block in the middle of this page, but i dont know to do it.

<div align="center"> does not help?

Sergio de la Torre · #4 12-24-2005, 01:06 PM

Vertical centering

Horizontal is easy to do

#5 12-24-2005, 01:14 PM

try CSS with:

margin-top:auto;margin-bottom:auto

that might help!

**blinking8s**+ · #6 12-24-2005, 03:51 PM

just google it

'centering with css' or 'center content css' or something, you will find more than enough help

Wearefive · #7 12-26-2005, 10:18 PM

This will work for a centred box however is you need to virtically center the box as well you will need another approach. The outer container will be full width and the box 200px square. The text-align:left will correct the text-align:center inherited from the outer container.

<div id="container" style="text-align:center;">
<div id="box" style="width:200px;height:200px;text-align:left;">
[content]
</div>
</div>

Hope this helps.

Michael.

Wearefive · #8 12-26-2005, 10:30 PM

This is the best and 100% cross platform horizontal and vertically centred box model I've found so far. Works with IE/WIN, FIREFOX/WIN, IE/MAC, FIREFOX/MAC, SAFARI/MAC... It even works on IE/Mac Classic (Mac OS 9).

-- START --

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS - Vertically Centered Box</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
body {
margin:0px;
}
#outerContainer {
position:relative;
height:50%;
border:solid #F00 1px;
}
#theBox {
position:absolute;
left:50%;
bottom:-25px;
width:100px;
height:50px;
border:solid #000 1px;
margin-left:-50px;
}
</style>
</head>
<body>

<div id="outerContainer">
<div id="theBox"></div>
</div>

</body>
</html>

-- END --

**GeoS**+ · #9 12-28-2005, 06:42 AM

http://www.jakpsatweb.cz/css/css-ver...-solution.html

**blinking8s**+ · #10 12-28-2005, 11:37 AM

bet you i can figure out 31 flavours with google

Pixelpost

Authentic Photoblog Flavour