Web Design and Graphics Room. Thread, How best to vertically centre text

Yorkshire Carper · #1 9th-December-2007, 05:27 PM

Hi
Does anyone know how I would best go about vertically centering the text in the layer in my new site, the text 'A1 Roofing Services' is what I refer to.
The page its on being here:
www.a1roofingservices.co.uk/new_index.html

I am using Dreamweaver 8 so would appreciate it if the answer could involve the use of both the DW8 programme and also the actual code too if possible.

Thanx
craig
PS I am strictly a website design beginner!

CPS · #2 9th-December-2007, 06:18 PM

What I can see is that in layer3 you have set the background to "left:182px",
so with the text in the style3 centered the whole banner is moved to the right by the 182px in layer3.
So as far as I can see decreasing this value will move the banner to the left.
You may not need any value, or an instruction in the layer that positions it in the center.
I am not familier with layers, Sky may have a better understanding than myself.
I stick to the easy way of doing the same thing.

Yorkshire Carper · #3 9th-December-2007, 06:41 PM

Hi Peter
Hopefully Sky will be able to help me with that as I do hope to continue building the site using layers. Also I wonder if you might have misunderstood what I am trying to achieve Peter?...I want to centre align vertically the 'A1 Roofing Services' text as I said ,in the layer in which it resides and not horizontally centre align, as so far as i am aware I have achieved centre horizontal alignment already?

cheers
craig

CPS · #4 9th-December-2007, 06:58 PM

OK sorry I see what you mean, I was looking for why the whole page was off center.
Are you codeing for a high screen resolution,
I would not code for any higher than 1024x768.
I have to scroll the page side to side to see the right hand edge using 1024x768,
thats why I suggested lowering the pixels on the left edge.
Dont know the answer to your question as yet though.

CPS · #5 9th-December-2007, 07:35 PM

Had a little read of my DW book.
You can have nested layers, one layer within another.
You draw the new layer within an existing layer in DW.
This allows you to place the new layer in any position within the first layer.
What I am thinking is if your text was a transparent giff in the new layer,
this would allow you to center it vertically as well as horizontally.
Or have I finally lost the plot.

UPDATE
I put this into Google "centering text vertically in a layer"
it turns out this is not easy to do, read them for yourself and
see if you can work with one of the options.

My suggestion above is close to an answer,
some advocate using a table to solve the problem.
The text has to be contained in some way so it can be centered within a layer.
EG:the text and container/layer are the same height,
then it can be centered in the parent layer.

UPDATE Monday
Done a test in DW, just added a layer within the banner layer,
made the BG color the same added the text.
You just move it to the center position required,
both vertically and horizontally, works a treat and solves the problem.

Works OK in FF, Opera, Netscape.
IE does not place it correctly, there's a surprise.
This is the code used for the test, resolution 1024x768

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>

<body>
<div id="Layer1" style="position:absolute; width:705px; height:96px; z-index:1; left: 132px; background-color: #CCCCFF; layer-background-color: #CCCCFF; border: 1px none #000000; top: 6px;"> 
  <div id="Layer3" style="position:absolute; width:704px; height:12px; z-index:1; top: 80px; left: 1px; background-color: #9933FF; layer-background-color: #9933FF; border: 1px none #000000;"></div>
</div>
<div id="Layer2" style="position:absolute; width:461px; height:43px; z-index:2; top: 34px; left: 249px;"> 
  <h1><font face="Times New Roman, Times, serif">Test Position Vertical/Horizontal</font></h1>
</div>
</body>
</html>

Skyrunner · #6 12th-December-2007, 12:39 PM

To centre text in a div. you'd put a class on the text, then you could position it wherever you wanted within it's parent div. :wink:

I'm seeing your page as Peter does, with a gap on the left. Looks as if he's hit the nail on the head with regard to your screen resolution, and you are using absolute positioning. You'll get users with different resolutions in their browsers, so the design needs to be more fluid so it fits all screens without any sideways scrolling.

Looks like this...

(Is that you in the photo?

)

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode