JOIN DEVPPL

It looks like you are new here. If you want to get involved, click on Join below!



Centered and Fixed with HTML


M

keyboard_arrow_up
0
keyboard_arrow_down


First Post Mark as Spam mihaialex
Posts: 1 - Registered: 2013-08-02 07:49:44

Hello guys,

First of all i need to say that i am using a DIY website editor tool. I have downloaded a template and i edited the index.html file a little. However, there is something that i can't do.

Basically i want to have the {Navigator} be on the very top of the page while also being centered and fixed.

I managed to make it on the top and fixed, but i cannot center it... below is the index.html file. I will mark up the area related to the {navigator}. Please let me know if you have any suggestions on how to center it while also being fixed and on top.

Thanks a bunch !

<head>
<title>{TITLE}</title>
<!--CHARSET-->
<link rel="stylesheet" href="style.css" type="text/css" />
<!--CSS-->
<!--HEAD-->
</head>

<body class="diybackground">
<table cellpadding="0" cellspacing="0" id="rv_top_adjust_width_0">

<tr>
<td align="left" valign="top">
<!-- START LOGO -->
<div style="position: absolute;">
<div id="Layer1" style="position:relative; left:20px; top:50px; width:120; height:60; text-align:center; z-index:1; overflow:visible; white-space:nowrap;">{LOGO}</div>
</div>
<div style="position: absolute;">
<div id="Layer2" style="position:relative; left:200px; top:60px; width:auto; height:auto; text-align:left; z-index:2; overflow:visible; white-space:nowrap;" class="company">{COMPANY_NAME}</div>
</div>
<div style="position: absolute;">
<div id="Layer3" style="position:relative; left:200px; top:100px; width:auto; height:auto; text-align:left; z-index:3; overflow:visible; white-space:nowrap;" class="slogan">{SLOGAN}</div>
</div>
<!-- END LOGO -->
<table cellpadding="0" cellspacing="0" width="100%">

Below this line is the segment i need help with
------------------------------------------------------------------------------------------------------------------------------
<tr style="position:fixed">
<td class="bgnavigator" "align="center" height="40" valign="top">
<table align="center" ><tr><td>{NAVIGATOR}</td></tr></table>
</td>
</tr>
------------------------------------------------------------------------------------------------------------------------------
Above this line is the segment i need help with


<tr><td class="header_line1"><img src="images/spacer.gif" alt="" width="1" height="1" /></td></tr>
<tr><td class="header_line2"><img src="images/spacer.gif" alt="" width="1" height="1" /></td></tr>
<tr>
<td class="bgheader" align="left"><img src="images/headerimage.gif" width="780" height="120" alt="" /></td>
</tr>
<tr><td class="header_line3"><img src="images/spacer.gif" alt="" width="1" height="1" /></td></tr>
<tr><td class="header_line4"><img src="images/spacer.gif" alt="" width="1" height="1" /></td></tr>
<tr>
<td align="left" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td class="body_line1"><img src="images/spacer.gif" alt="" width="1" height="1" /></td></tr>
<tr><td class="body_line2"><img src="images/spacer.gif" alt="" width="1" height="1" /></td></tr>
<tr><td class="bgtshadow"><img src="images/spacer.gif" alt="" width="1" height="12" /></td></tr>
<tr>
<td align="left" valign="top">
<table cellpadding="0" cellspacing="0" width="100%" class="bgbody">
<!-- Begin TOP -->
<tr>
<td align="center" class="magin">{TOP}</td>
</tr>
<!-- End TOP -->
<!-- Begin PATHWAY and ICON -->
<tr>
<td class="magin">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<!-- Begin PATHWAY -->
<td align="left" width="99%">{PATHWAY}</td>
<!-- End PATHWAY -->
<!-- Begin ICON -->
<td align="right">{ICON}</td>
<!-- End ICON -->
</tr>
</table>
</td>
</tr>
<!-- End PATHWAY and ICON -->
<tr>
<td align="left" valign="top">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<!-- Begin SIDE1 -->
<td width="160" align="center" valign="top" class="magin">{SIDE1}</td>
<!-- End SIDE1 -->
<td align="left" valign="top" class="magin" id="rv_adjust_width_0">{BODY}</td>
<!-- Begin SIDE2 -->
<td width="160" align="center" valign="top" class="magin">{SIDE2}</td>
<!-- End SIDE2 -->
</tr>
</table>
</td>
</tr>
<!-- Begin FOOTER -->
<tr>
<td align="center" class="magin">{FOOTER}</td>
</tr>
<!-- End FOOTER -->
<!-- Begin BOTTOM -->
<tr>
<td align="center" class="magin">{BOTTOM}</td>
</tr>
<!-- End BOTTOM -->
<tr>
<td align="center" valign="bottom">
<table cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="bottom" class="marginpw">{RVBANNER}</td>
<td width="8"></td>
<td align="center" valign="bottom" class="marginpw">{POWERED}</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="bgbshadow"><img src="images/spacer.gif" alt="" width="1" height="18" /></td>
</tr>
<tr>
<td class="bgfooter"><img src="/images/spacer.gif" alt="" width="1" height="30" /></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>




J

keyboard_arrow_up
0
keyboard_arrow_down


Reply #1 Mark as Spam joosilveira
Posts: 2 - Registered: 2013-08-10 19:58:41

Hello,

To make it center create a div top 0px and left 0px with a width of 100%. Set a height of 50px for example. Set the align="center" for this div. Finally, set position fixed.

After that create a child div with a width of 900px (for example). Done. It will be crentralized and on top of everything else. You should set a proper zindex to the fixed div in order to nothing else be on top of it.

Hope it helped.






JOIN DEVPPL

It looks like you are new here. If you want to get involved, click on Join below!




MENU
Advertising