Doug
Member
Registered: 8th Oct 03
User status: Offline
|
I am designing a webpage, there is a background image that is set to repeat-x so that it covers the entire background regardless of screen size.
The layout of the webpage is that of a white square which I need to center both horizontally and vertically within the page so that it displays correctly on all monitors.
I am sure its a simple line of code or could be done through the use of a style sheet but I cant remember how to do it as last time I wrote CSS stuff was 3 years ago 
So as you can see I need to get the white area centered.
Is it 'float' or something?
|
Doug
Member
Registered: 8th Oct 03
User status: Offline
|
Can I use the align="absmiddle" command in dreamweaver?
|
Doug
Member
Registered: 8th Oct 03
User status: Offline
|
<body>
<style>
img.mycenter {margin-left:auto; margin-right:auto; display:block; text-align:center;}
</style>
<img class="mycenter" src="Main.png" height="600" width="800">
</body>
I have got it centered now using that code.
What would I need to change in that code to get it to sit equally from top and bottom like it is doing from the right and left?
|
Brett
Premium Member
Registered: 16th Dec 02
Location: Manchester
User status: Offline
|
I'd just do...
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle"><img src="main.png" /></td>
</tr>
</table>
|
Doug
Member
Registered: 8th Oct 03
User status: Offline
|
Top bombing 
Cheers bruv
|
Doug
Member
Registered: 8th Oct 03
User status: Offline
|
Right I have a problem....
Using the following code gets that image to float in the center perfectly but when I start adding some slices in fireworks and export the HTML file I am struggling to get it to work 
Code to get the image to float centrally:
code:
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle"><div align="center"><img src="Main.png">
</div>
</td>
</tr>
</table>
New page code that I need to get to float centrally instead of just the plain image:
code:
<table border="0" cellpadding="0" cellspacing="0" width="800"> <!-- fwtable fwsrc="home.png" fwpage="Page 1" fwbase="home.png" fwstyle="Dreamweaver" fwdocid = "1542789007" fwnested="0" -->
<tr>
<td>
<img src="images/spacer.gif" width="79" height="1" border="0" alt="" />
</td>
<td>
<img src="images/spacer.gif" width="163" height="1" border="0" alt="" />
</td>
<td>
<img src="images/spacer.gif" width="50" height="1" border="0" alt="" />
</td>
<td>
<img src="images/spacer.gif" width="39" height="1" border="0" alt="" />
</td>
<td>
<img src="images/spacer.gif" width="28" height="1" border="0" alt="" />
</td>
<td>
<img src="images/spacer.gif" width="143" height="1" border="0" alt="" />
</td>
<td>
<img src="images/spacer.gif" width="61" height="1" border="0" alt="" />
</td>
<td>
<img src="images/spacer.gif" width="91" height="1" border="0" alt="" />
</td>
<td>
<img src="images/spacer.gif" width="63" height="1" border="0" alt="" />
</td>
<td>
<img src="images/spacer.gif" width="83" height="1" border="0" alt="" />
</td>
<td>
<img src="images/spacer.gif" width="1" height="1" border="0" alt="" />
</td>
</tr>
<tr>
<td colspan="10"><img name="home_r1_c1" src="images/home_r1_c1.png" width="800" height="50" border="0" id="home_r1_c1" alt="" />
</td>
<td>
<img src="images/spacer.gif" width="1" height="50" border="0" alt="" />
</td>
</tr>
<tr>
<td rowspan="4"><img name="home_r2_c1" src="images/home_r2_c1.png" width="79" height="550" border="0" id="home_r2_c1" alt="" />
</td>
<td colspan="3"><a href="home.htm"><img name="home_r2_c2" src="images/home_r2_c2.png" width="252" height="38" border="0" id="home_r2_c2" alt="" /></a>
</td>
<td rowspan="2" colspan="6"><img name="home_r2_c5" src="images/home_r2_c5.png" width="469" height="478" border="0" id="home_r2_c5" alt="" />
</td>
<td><img src="images/spacer.gif" width="1" height="38" border="0" alt="" />
</td>
</tr>
<tr>
<td colspan="3"><img name="home_r3_c2" src="images/home_r3_c2.png" width="252" height="440" border="0" id="home_r3_c2" alt="" />
</td>
<td><img src="images/spacer.gif" width="1" height="440" border="0" alt="" />
</td>
</tr>
<tr>
<td rowspan="2"><img name="home_r4_c2" src="images/home_r4_c2.png" width="163" height="72" border="0" id="home_r4_c2" alt="" /></td> <td><a href="home.htm"><img name="home_r4_c3" src="images/home_r4_c3.png" width="50" height="21" border="0" id="home_r4_c3" alt="" /></a></td> <td colspan="2"><a href="welcome.htm"><img name="home_r4_c4" src="images/home_r4_c4.png" width="67" height="21" border="0" id="home_r4_c4" alt="" /></a></td> <td><a href="acquired.htm"><img name="home_r4_c6" src="images/home_r4_c6.png" width="143" height="21" border="0" id="home_r4_c6" alt="" /></a></td> <td><a href="therapy.htm"><img name="home_r4_c7" src="images/home_r4_c7.png" width="61" height="21" border="0" id="home_r4_c7" alt="" /></a></td> <td><a href="medicolegal.htm"><img name="home_r4_c8" src="images/home_r4_c8.png" width="91" height="21" border="0" id="home_r4_c8" alt="" /></a></td> <td><a href="contact.htm"><img name="home_r4_c9" src="images/home_r4_c9.png" width="63" height="21" border="0" id="home_r4_c9" alt="" /></a></td> <td rowspan="2"><img name="home_r4_c10" src="images/home_r4_c10.png" width="83" height="72" border="0" id="home_r4_c10" alt="" /></td> <td><img src="images/spacer.gif" width="1" height="21" border="0" alt="" /></td> </tr> <tr> <td colspan="7"><img name="home_r5_c3" src="images/home_r5_c3.png" width="475" height="51" border="0" id="home_r5_c3" alt="" /></td> <td><img src="images/spacer.gif" width="1" height="51" border="0" alt="" /></td> </tr> </table>
Does anyone have any suggestions?
[Edited on 26-11-2008 by Doug]
[Edited on 27-11-2008 by Doug]
|
Laney
Member
Registered: 6th May 03
Location: Leeds
User status: Offline
|
Use
margin: 0 auto;
width: whateverpx;
On nested divs. Theres examples out there!
|
Doug
Member
Registered: 8th Oct 03
User status: Offline
|
Could you give me an example of the code I need?
I am getting abit stuck here
|
Doug
Member
Registered: 8th Oct 03
User status: Offline
|
TTT for today, see if anyone can help me
|
