width is making crazy!

jrahma

Hi,

Please check this:

http://www.rmc.bh/dept

and the same here http://www.rmc.bh/en/team

why the two boxed on the left (contents) and right (menu) is taking 50% even when I am setting 100% for the content and 200px for the menu?

here is the dept.php:

<table width="100%" cellpadding="0" cellspacing="10px" border="1">
<tr><td colspan="2"><?php include("header.php"); ?></td></tr>
<tr><td colspan="2"><hr></td></tr>
<tr>
<td valign="top" width="200px"><?php include("menu.php"); ?></td>
<td valign="top" width="100%">
<h2>الأقسام</h2>
</td>
</tr>
</table>

and this is the menu.php just in case:

<html>
<head>
<style type="text/css">
.sidebarmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: bold 13px Verdana;
width: 180px; / Main Menu Item widths /
border-bottom: 1px solid #ccc;
}
.sidebarmenu ul li{
position: relative;
}

/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #012D58; /*background of tabs (default state)*/
}

.sidebarmenu ul li a:visited{
color: white;
}

.sidebarmenu ul li a:hover{
background-color: black;
}

/*Sub level menu items */
.sidebarmenu ul li ul{
position: absolute;
width: 170px; /*Sub Menu Items width */
top: 0;
visibility: hidden;
}

.sidebarmenu a.subfolderstyle{
background: url(right.gif) no-repeat 97% 50%;
}

/* Holly Hack for IE \*/
* html .sidebarmenu ul li { float: left; height: 1%; }
* html .sidebarmenu ul li a { height: 1%; }
/* End */

</style>

<script type="text/javascript">

//Nested Side Bar Menu (Mar 20th, 09)
//By Dynamic Drive: [url]http://www.dynamicdrive.com/style/[/url]

var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas

function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
else //else if this is a sub level submenu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
ultags[t].style.visibility="visible"
ultags[t].style.display="none"
}
}
}

if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)
</script>

</head>
<body>

<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li><a href="http://www.rmc.bh/en">ENGLISH</a></li>
<li><a href="http://www.rmc.bh/">الصفحة الرئيسية</a></li>
<li><a href="about">حول المركز</a></li>
<li><a href="team">الأطباء</a></li>
<li><a href="dept">الأقسام</a></li>
<li><a href="services">الخدمات</a></li>
<li><a href="album">ألبوم الصور</a></li>
<li><a href="health">صحتكم تهمنا</a></li>
<li><a href="careers">التوظيف</a></li>
<li><a href="contact">اتصل بنا</a></li>
</ul>
</div>
<br><br><div style="text-align: center;"><a href="http://webmail.rmc.bh/" target="_blank"><img src="images/staff_email.jpg" border="0" /></a></div>
</body>
</html>

steamPunk

Hi, firstly, your html is totally out whack - this is the structure of your page :

<html dir=ltr lang=en-us>
<head dir=ltr lang=en-us>
(...)
</head>
<body dir=ltr lang=en-us>

<table width="100%" cellpadding=0 cellspacing=10px>
<tr><td colspan=2>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
</head>
<body>
</body>
</html>

</td></tr>
<tr><td colspan=2><hr></td></tr>
<tr>
<td valign=top width=200px><html>

<head>
<style type="text/css">

</style>
<script type="text/javascript">
</script>
</head>
<body>


<div class=sidebarmenu>
/div>

</body>
</html>

when it should be :

<html>
<head>
// all meta tags, css etc here
</head>

<body>
// all content here
</body>
</html>

also you shouldn't use tables for page layout

It would be a good idea if you read some stuff about html and basic page structure

bradgrafelman

Thread moved to ClientSide Technologies forum (since this has nothing to do with PHP).

Along the same lines as steamPunk's final suggestion above, you might also want to make sure your HTML document consists of valid markup before you try to figure out why it isn't doing what you expect it to be doing.

jrahma

that's because I am including a page within a page? so should I remove the html, head and body from the menu.php?

jrahma

if not using table to layout my page then what's your recommendation?

jrahma

ok.. I changed the layput and now I am using DEV but I have a question.. looking at my attached code, how can specify a different page title for every page?

steamPunk

in you header.php you can put

<title><?php echo $header; ?></title>

then in every page that includes the header.php you can put

$header = "&#1605;&#1585;&#1603;&#1586; &#1575;&#1604;&#1585;&#1587;&#1575;&#1604;&#1577; &#1575;&#1604;&#1591;&#1576;&#1610;";

BEFORE you include the file

$header = "&#1605;&#1585;&#1603;&#1586; &#1575;&#1604;&#1585;&#1587;&#1575;&#1604;&#1577; &#1575;&#1604;&#1591;&#1576;&#1610;";
require_once("header.php");

steamPunk

the code is still a bit of a mess though - try it like this

index.php :

<?php 
$header = "&#1605;&#1585;&#1603;&#1586; &#1575;&#1604;&#1585;&#1587;&#1575;&#1604;&#1577; &#1575;&#1604;&#1591;&#1576;&#1610;"; 
require_once("head.php"); // doctype and <head> etc
require_once("header.php");  

require_once("menu.php");
?>

// specific page content goes here

<?php 
require_once("footer.php");

?>

ModoTupintip

A very beginner at this. i was adding and removing text, playing with the app. The width is now 3169. I cant seem to get the width back to a smaller size. If I go to the Layout Property and and try to make is it less that 3169 I get an error that i cannot due to positioning of objects. i attached a screen shot.

Thanks,
Richard