Back To Website Design Forum

Problems with Website layout

  • remon479
  • Novice
  • Novice
  • No Avatar
  • Joined: Sep 02, 2009
  • Posts: 19
  • Status: Offline

Post September 2nd, 2009, 8:12 am

Hi all,

I am having problems with the content in my clients website. You can see the headings in each webpage does not touch the top of the body cell. Now, I have used the "Valign: Top" code and it seems to have done no justice at all. Especially in the "testimonials" page, where the heading is a good few pixels from the top of the cell.

I have tried searching for resolutions to this matter on google, but can't get any related results. Does anyone know how i can get the content to move up, so the heading touches top of the cell?

Also, in IE 8, i have been trying to get rid of the horizontal Block scroll bar, how can i get rid of this? - this isnt a problem in the firefox browser

This is the website:

www.therajasthan.co.uk

Looking forward to your replies :)
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post September 2nd, 2009, 8:12 am

  • mk27
  • Proficient
  • Proficient
  • User avatar
  • Joined: Jun 09, 2009
  • Posts: 334
  • Status: Offline

Post September 2nd, 2009, 10:59 am

remon479 wrote:
I have tried searching for resolutions to this matter on google, but still no results.


Possibly because you do not know what to search for. For example, you use the term "body cell" but AFAIK this is not a real term. That does not, of course, mean that there is no term for it, just that other people will have to guess what it is (which obviously some of them, and certainly google, will not bother).
  • remon479
  • Novice
  • Novice
  • No Avatar
  • Joined: Sep 02, 2009
  • Posts: 19
  • Status: Offline

Post September 2nd, 2009, 12:44 pm

mk27 wrote:
remon479 wrote:
I have tried searching for resolutions to this matter on google, but still no results.


Possibly because you do not know what to search for. For example, you use the term "body cell" but AFAIK this is not a real term. That does not, of course, mean that there is no term for it, just that other people will have to guess what it is (which obviously some of them, and certainly google, will not bother).


I am aware of this. That is why i registered here to get help from experienced members from OZZU who have a more knowledge than me in HTML/CSS.

Thanks.
  • mk27
  • Proficient
  • Proficient
  • User avatar
  • Joined: Jun 09, 2009
  • Posts: 334
  • Status: Offline

Post September 3rd, 2009, 6:43 am

I think the term you were looking for is "div". Have you tried setting the css margin: property for the headings?
  • remon479
  • Novice
  • Novice
  • No Avatar
  • Joined: Sep 02, 2009
  • Posts: 19
  • Status: Offline

Post September 3rd, 2009, 6:59 am

Nope, i don't think so. I just can't simply keep the heading to touch the top of the cell. Its frustrating as Ive been trying to fix this problem for months :/

What properties do I have to use? I dont think i have used Divs, they are all tables
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post September 3rd, 2009, 7:17 am

The main problem with the site is that you're using mixed methods and approaches which don't work well together. Frankly, it's a mess and I don't mean to offend by saying that - it's just a fact.

The container you're using in that that table cell (testimonials page) is a P tag - which is being used improperly.

The markup looks like this...
Code: [ Select ]
<td height="362" valign="top" background="png and pics/thing.jpg" style="vertical-align: top;">
<div style="width: 628px; height: 398px; border: white; overflow: auto;"testimonials">
<p align="justify" class="style12"><em><strong>Testimonials</strong></em><br />
        <STYLE type="text/css">
<!--
BODY {
scrollbar-face-color: #990100;
scrollbar-highlight-color: #990100;
scrollbar-3dlight-color: #990100;
scrollbar-darkshadow-color: #990100;
scrollbar-shadow-color: #990100;
scrollbar-arrow-color: #ffffaf;
scrollbar-track-color: #ffffaf;
}
-->
        </STYLE>
        <span class="style23">Food Safety Awards</span><span class="style18"><br />
         <span class="style17"><strong>Year Awarded  : 2005 &amp; 2006<br />
      </strong>The Rajasthan is the only Licensed Restaurant in Chesham to be awarded the prestigious <strong>Silver Award</strong> for Food Safety by Chiltern District Council.<br />
      <br />
        </span></span><span class="style23">The Good Eating Guide</span><br />
       <span class="style19">We have been highly recommended by <a href="http://www.oceanpublishing.co.uk/index.php?action=display_restaurant&id=943" target="_blank">Ocean Publishing, The Good Eating Guide</a></span></p>
  1. <td height="362" valign="top" background="png and pics/thing.jpg" style="vertical-align: top;">
  2. <div style="width: 628px; height: 398px; border: white; overflow: auto;"testimonials">
  3. <p align="justify" class="style12"><em><strong>Testimonials</strong></em><br />
  4.         <STYLE type="text/css">
  5. <!--
  6. BODY {
  7. scrollbar-face-color: #990100;
  8. scrollbar-highlight-color: #990100;
  9. scrollbar-3dlight-color: #990100;
  10. scrollbar-darkshadow-color: #990100;
  11. scrollbar-shadow-color: #990100;
  12. scrollbar-arrow-color: #ffffaf;
  13. scrollbar-track-color: #ffffaf;
  14. }
  15. -->
  16.         </STYLE>
  17.         <span class="style23">Food Safety Awards</span><span class="style18"><br />
  18.          <span class="style17"><strong>Year Awarded  : 2005 &amp; 2006<br />
  19.       </strong>The Rajasthan is the only Licensed Restaurant in Chesham to be awarded the prestigious <strong>Silver Award</strong> for Food Safety by Chiltern District Council.<br />
  20.       <br />
  21.         </span></span><span class="style23">The Good Eating Guide</span><br />
  22.        <span class="style19">We have been highly recommended by <a href="http://www.oceanpublishing.co.uk/index.php?action=display_restaurant&id=943" target="_blank">Ocean Publishing, The Good Eating Guide</a></span></p>

The P tag refers to this CSS definition...
Code: [ Select ]
.style12 {
    font-family: "Times New Roman", Times, serif;
    font-size: xx-large;
    color: #9068AE;
}
  1. .style12 {
  2.     font-family: "Times New Roman", Times, serif;
  3.     font-size: xx-large;
  4.     color: #9068AE;
  5. }


My suggestion is to rebuild the site correctly. In lieu of that, however, I believe the space at the top is caused by the browsers default margining for P tags. You could try to remove that thusly(this will effect the rest of the page and/or site)...
Code: [ Select ]
.style12 {
     margin:0;
    font-family: "Times New Roman", Times, serif;
    font-size: xx-large;
    color: #9068AE;
}
  1. .style12 {
  2.      margin:0;
  3.     font-family: "Times New Roman", Times, serif;
  4.     font-size: xx-large;
  5.     color: #9068AE;
  6. }


There are so many overlapping problems, however, it may not be that simple.
- dM
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post September 3rd, 2009, 7:23 am

The horizontal scrollbar on the menu page is being evoked somewhere in this mess (starting somewhere around line 155)...

Code: [ Select ]
    <td background="png and pics/thing4.jpg"><div style="width: 628px; height: 398px; border: white; overflow: auto; "menu">
     <p><span class="style23">Menu<a name="top" id="top"></a> </span>
  1.     <td background="png and pics/thing4.jpg"><div style="width: 628px; height: 398px; border: white; overflow: auto; "menu">
  2.      <p><span class="style23">Menu<a name="top" id="top"></a> </span>


"overflow: auto;".
- dM
  • remon479
  • Novice
  • Novice
  • No Avatar
  • Joined: Sep 02, 2009
  • Posts: 19
  • Status: Offline

Post September 3rd, 2009, 7:30 am

I do agree with you, it is a mess. I am running the website off Dreamweaver, the code isnt organised and the CSS is all over the place. It isn't professional, I get it.

Apart from the mess, all i care about it removing the space. Dreamweaver does not show this space in Design View, it actually touches the top of the table. Whereas on the browsers its a different story.

Can you talk me through removing the p tags in more detail maybe? And how that would remove the space.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post September 3rd, 2009, 7:53 am

First off, you can't trust the design pane in Dreamweaver or any WYSIWYG editor. :) I only use them to quickly locate sections of markup.

I could walk you through removing the P tags, but that's not going to be a panacea for your problems here.

Instead, here's an example of what I think it should look like...
Code: [ Select ]
<td> <!-- NOTE: I wouldn't use TABLEs as primary containers -->
    <h1>Testimonials</h1>
    <h2>Food Safety Awards</h2>
    <p>"The Rajasthan is the only Licensed Restaurant in Chesham to be awarded the prestigious Silver Award for Food Safety by Chiltern District Council."</p>
    <p>Years Awarded : 2005 &amp; 2006</p>    
    <h2>The Good Eating Guide</h2>
    <p>We have been highly recommended by Ocean Publishing, The Good Eating Guide</p>
    <h2>Customer Testimonials</h2>
    <div class="testimonial_container">
        <p>"Brilliant Food and top marks for hospitality.</p>
        <p>Being a local, I have been to the Rajasthan a few times now and I love it! The food is VERY good, and your host Mojib oozes that old-style hospitality that these days is so hard to find. I can definitely recommend this restaurant!"</p>
        <p><a href="#">Traveler Reviews - Aug 10, 2009</a></p>
    </div>
    <div class="testimonial_container">
        <p>"I just wanted to thank you for the brilliant service you provided on Saturday night. Mine was the group of 22 guys on Saturday night, and we thought you served us fantastically well, and the food was superb. It was a celebration ahead of my wedding in a few weeks' time, and you really helped to create a fantastic evening.</p>
        <p>Thank you very much again.<br />Will"</p>
        <p>Tue 02/06/2009</p>
    </div>
</td>
  1. <td> <!-- NOTE: I wouldn't use TABLEs as primary containers -->
  2.     <h1>Testimonials</h1>
  3.     <h2>Food Safety Awards</h2>
  4.     <p>"The Rajasthan is the only Licensed Restaurant in Chesham to be awarded the prestigious Silver Award for Food Safety by Chiltern District Council."</p>
  5.     <p>Years Awarded : 2005 &amp; 2006</p>    
  6.     <h2>The Good Eating Guide</h2>
  7.     <p>We have been highly recommended by Ocean Publishing, The Good Eating Guide</p>
  8.     <h2>Customer Testimonials</h2>
  9.     <div class="testimonial_container">
  10.         <p>"Brilliant Food and top marks for hospitality.</p>
  11.         <p>Being a local, I have been to the Rajasthan a few times now and I love it! The food is VERY good, and your host Mojib oozes that old-style hospitality that these days is so hard to find. I can definitely recommend this restaurant!"</p>
  12.         <p><a href="#">Traveler Reviews - Aug 10, 2009</a></p>
  13.     </div>
  14.     <div class="testimonial_container">
  15.         <p>"I just wanted to thank you for the brilliant service you provided on Saturday night. Mine was the group of 22 guys on Saturday night, and we thought you served us fantastically well, and the food was superb. It was a celebration ahead of my wedding in a few weeks' time, and you really helped to create a fantastic evening.</p>
  16.         <p>Thank you very much again.<br />Will"</p>
  17.         <p>Tue 02/06/2009</p>
  18.     </div>
  19. </td>
- dM
  • remon479
  • Novice
  • Novice
  • No Avatar
  • Joined: Sep 02, 2009
  • Posts: 19
  • Status: Offline

Post September 3rd, 2009, 8:02 am

digitalMedia wrote:
The horizontal scrollbar on the menu page is being evoked somewhere in this mess (starting somewhere around line 155)...

Code: [ Select ]
    <td background="png and pics/thing4.jpg"><div style="width: 628px; height: 398px; border: white; overflow: auto; "menu">
     <p><span class="style23">Menu<a name="top" id="top"></a> </span>
  1.     <td background="png and pics/thing4.jpg"><div style="width: 628px; height: 398px; border: white; overflow: auto; "menu">
  2.      <p><span class="style23">Menu<a name="top" id="top"></a> </span>


"overflow: auto;".


Im not sure if i understand. Would you care to provide more detail?

Ill have a go at removing the p tags :)
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 8922
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Post September 3rd, 2009, 8:07 am

Hi remon479,

In the very top of your HTML document find this:

Code: [ Select ]
<style type="text/css">


Immediately below that line add this:

Code: [ Select ]
body {
    margin:0;
}
  1. body {
  2.     margin:0;
  3. }


That should remove the space at the top.

I agree with DM on the rest, however, I believe to just fix your specific problem the above resolution should work.
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • remon479
  • Novice
  • Novice
  • No Avatar
  • Joined: Sep 02, 2009
  • Posts: 19
  • Status: Offline

Post September 3rd, 2009, 8:59 am

Bigwebmaster wrote:
Hi remon479,

In the very top of your HTML document find this:

Code: [ Select ]
<style type="text/css">


Immediately below that line add this:

Code: [ Select ]
body {
    margin:0;
}
  1. body {
  2.     margin:0;
  3. }


That should remove the space at the top.




No result :(
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 8922
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Post September 3rd, 2009, 9:06 am

I just realized I read your problem wrong. What I thought you wanted fixed was this gap:

Attachments:
website_top_gap.JPG


Which that change I had you make removed that.

If you actually want that gap there go ahead and remove my last change.

In my screenshot are you wanting the larger heading text "Menu" to be moved up?
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • remon479
  • Novice
  • Novice
  • No Avatar
  • Joined: Sep 02, 2009
  • Posts: 19
  • Status: Offline

Post September 3rd, 2009, 9:10 am

I haven't noticed the change untill now. But yeah, its the space in between the bottom of the banner and where it says "Menu" :)
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 8922
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Post September 3rd, 2009, 9:14 am

Try this. The change is very similiar:

Where you found this text again:

Code: [ Select ]
<style type="text/css">


Immediately below that line add this:

Code: [ Select ]
p {
    margin:0;
}
  1. p {
  2.     margin:0;
  3. }
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post September 3rd, 2009, 9:14 am

1, 2

Post Information

  • Total Posts in this topic: 17 posts
  • Users browsing this forum: No registered users and 180 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.