SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Minimalistic band webpage

    I am designing a very (very) simple webpage for my band. So far, everything is moving rather smoothly... but I came across one problem.

    Some of the section's content is short enough to fill the page and a scroll bar doesn't appear. However, some of the sections of content needs to be scrolled, and so a scroll bar appears. When this change happens between sections, the top header and menu shifts over and it doesn't look very seamless. It really bothers me.

    How do I fix this?

    http://www.myosismusic.com

    I will probably use this thread to continue posting any questions I have for the site. Any suggestions/opinions would be appreciated as well.

    Thanks,
    DM

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One way is to always have the page 1px higher than the viewport:
    Code CSS:
    html, body {margin:0; padding:0; height:100%;}
    body {padding-bottom:1px;}
    Happy ADD/ADHD with Asperger's

  3. #3
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool.. I'll try that. Where do I put that code?

  4. #4
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In the embedded style you have. But when the site is ready put the embedded style in an external stylesheet.
    Happy ADD/ADHD with Asperger's

  5. #5
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well I'll try to read up on that but at this point, I'm not sure how to do it.

    So I just add the code in with the other style codes? I don't do much coding... I juse use Dreamweaver.

    Also, I was looking at the site on my iPhone today and I noticed some things. If I go from the news page to the blog page, the entire page shrinks really small when going to the blog page. If I then go to the Bio section, it gets bigger again.. except this time, the menu is different to where it wont fit and so it wraps down underneath the menu. In some pages, the line at the end of the menu wraps down to the bottom.

    The whole page is screwy like this. None of it is consistent. I don't understand because for the most part, I just copied the code from one page and put it into another and then edited it. In dreamweaver, the whole page looks fine but when in any browser... it acts funky.

  6. #6
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok.. this is driving me crazy. I put your code in there and it didn't do anything. Almost every section of the webpage shifts up or down, left or right whenever I navigate through the page. It doesn't make any sence! I don't understand why no one here has any idea how to fix this. This post has been up for a week.

  7. #7
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by abjectevolution View Post
    Ok.. this is driving me crazy. I put your code in there and it didn't do anything. Almost every section of the webpage shifts up or down, left or right whenever I navigate through the page. It doesn't make any sence!
    I can't speak for anyone else, but the advice I give (when I'm qualified to give it) doesn't apply to iPhone or mobile displays. From looking at the code on your home page in Firefox, you didn't enter in that CSS snippet. Replace your body CSS code with this:

    Code:
    body {
    	background-color: #000000;
            padding-bottom:1px;
    }
    Quote Originally Posted by abjectevolution View Post
    I don't understand why no one here has any idea how to fix this. This post has been up for a week.
    This post is on its third day, not a week. You were given what I believe to be proper advice on how to fix it, but as far as I can see, you didn't take it. We are more than glad to help people who ask, but, speaking for myself only, I don't take well to demands for help. If you intend to make demands, you should pay someone to design and code your site for you.

    Without combing through your code, I would guess that the jumpiness you're experiencing comes from the absolutely unnecessary table structure you're using (or you're allowing Dreamweaver to produce). If you're going to design sites, you need to take the time to design them properly. If nothing else, you can find a one-column template that is CSS-driven and not table-driven, and implement your design into that.

  8. #8
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did add that code to the first two sections and still, the header and menu jumped around... so I took the code out.

    I have decided to go through the site and add a red border to the content in all the pages. I also removed the space between the header and the red border.

    I have come across something. In some sections in Dreamweaver, the header looks like there is a line break between it and the top of the page. In other pages, there is no break and the header touches the top of the webpage. I have tried to figure out why this space is there on some sections and not on others. I don't understand why it did this one some pages and not the others.

  9. #9
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    I took a look at a daughter page and this is the CSS code I found:

    Code:
    html, body {margin:0; padding:0; height:100%;}
    body {padding-bottom:1px;}
    
    body,td,th {
    	color: #00FFFF;
    }
    body {
    	background-color: #000000;
    }
    You've got far too many body tags competing with one another. Try this (and someone with more CSS skills correct me if I'm doing this wrong):

    Code:
    html, body {margin:0; padding:0; height:100%;}
    body {
            background-color: #000000;
            padding-bottom:1px;
    }
    
    body,td,th {
    	color: #00FFFF;
    }
    I'm not sure about that body and body,td,th tag with its competing background colors, either, but I don't work with tables very often, so I don't know if that's valid or not. HTML Tidy isn't flagging it for me.

    You might do better to code this in HTML Strict and not XHTML Transitional.

  10. #10
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried that and it defaulted the links back to blue with underlines.

  11. #11
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by abjectevolution View Post
    I did add that code to the first two sections and still, the header and menu jumped around... so I took the code out.
    Try what I gave you.

    Quote Originally Posted by abjectevolution View Post
    I have come across something. In some sections in Dreamweaver, the header looks like there is a line break between it and the top of the page. In other pages, there is no break and the header touches the top of the webpage. I have tried to figure out why this space is there on some sections and not on others. I don't understand why it did this one some pages and not the others.
    I don't work in Dreamweaver, so I can't say why this is happening, but as a rule of thumb, never trust what Dreamweaver shows you in its View Page (or whatever) setting. Save your results and look at it in Firefox or Opera. If the code is the same in the different pages, it should look the same, but many other things could be going on that would cause the kind of squashing you're seeing.

    Again, you need to lose that table structure. It would make your code far simpler and easier to work with. If you're not comfortable creating your own, try some of the template structures here and modify them for your needs:

    http://www.oswt.co.uk/xhtml_css_layouts/
    http://www.openwebdesign.org/
    http://www.getcsstemplates.com/onecolumn.html

  12. #12
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by abjectevolution View Post
    I tried that and it defaulted the links back to blue with underlines.
    Now that's bizarre. Something more fundamentally strange is going on in your CSS for that to happen. If it were me, I'd throw out the code and start from scratch--easier to do it right from the outset than try to hunt down unusual problems.

    Again, I'm not a CSS or code guru. There are those in here who could find this and fix it with no problem, but I'm not those people.

  13. #13
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Normaly, I wouldn't have a problem with starting over... but I don't have enough time to do that. The band has a release date for the single and the webpage is a part of that. I know that it would probably be easier in lots of ways if it was all done in css and maybe after this whole ordeal is over, I can go back through and re-do it. But for now... I really need something simple up on the net that provides all the content that I need it to.

    I know that Dreamweaver's presentation isn't always faithfull, but I recognize it in IE as well. In fact... I think it's just the news/blog sections that have the Header touching the top. The rest, the header is moved down a notch. I actualy like the former look better. So I went to the header and added a shift+enter break between it and the top of the page. On Dreamweaver, it looks fine... but when opened in a browser, it just barely nudges down when you go to other sections. I even tried deleting the image and then re-inserting it to try and make it just like the others... but it still touches the top of the page. It's almost as if there is a margin up there that is lower in some pages and in other pages, there is no margin.

    And I'm not even sure if that "margin" is what's causing the overall shifting around of sections. But it's definatly something that needs to be fixed regardless.

  14. #14
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here look at this in IE7.

    Go to the news section. Now go to the blog section. The menu shifts down. Now click "Derek" in the blog section and the menu shifts back up... but not as far up as it is in the news section.

    That's what I'm talking about when it comes to that. It's like the menu has a top margin that is different in different sections between the menu and the top border of the table.

    And then there also seems to be a top margin between the header and the top of the page that is also different on different pages.

  15. #15
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Part of your problem is that you're specifying table heights. Tables don't have heights, it's invalid code:

    http://apptools.com/examples/tableheight.php

    On your recording page:
    Code:
    <table width="541" height="484" border="4" align="center" cellpadding="10" cellspacing="0" bordercolor="#FF0000">
    On your news page:
    Code:
    <table width="541" height="773" border="4" align="center" cellpadding="5" cellspacing="0" bordercolor="#FF0000" bgcolor="#000000">
    If this is your biggest problem, just release the page as is--most people won't be overly bothered by the jumpiness (not everyone is as persnickety as web designers). Fix it properly and put up the new version when you've gotten it right. And get rid of the tables!

    Also, you use different fonts in different pages (or you don't specify fonts in some pages), and that doesn't help.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •