Results 1 to 12 of 12

Thread: Website Layout Problem

  1. #1
    Join Date
    Nov 2007
    Location
    KL
    Posts
    3
    Rep Power
    0

    Question Website Layout Problem

    Hello everyone here,

    I am still new here and seeking for some help in designing my website. I am designing website with two column layout, header and footer which is fixed width 100%. In order to achieve this, I also use <div>. Everything seems to run well, unfortunately when I resize the browser, the font and layout seems to shrink. I am seeking for help so that whenever I resize the browser, the layout would be the same with the scrollbar at the left an bottom to view the page. I also attach here the picture for the problem in which I am trying to resolve. Thank you.

    Before resize:
    img134.imageshack.us/img134/305/beforedl5.th.jpg

    After resize:
    img179.imageshack.us/img179/4023/afterfy1.th.jpg
    *Everything seems to go wrong, the font goes down and the layout also shrink

  2. #2
    Join Date
    Sep 2005
    Location
    in my body lar...
    Posts
    1,325
    Rep Power
    0
    put your code out or link actual link to your html and/css page.... just by showing tat 2 small images... its hard for us to know what you have done in your coding....

    again and again...plz help us to help you lar.....

  3. #3
    Join Date
    Nov 2007
    Location
    KL
    Posts
    3
    Rep Power
    0
    Sorry for the technical problem, here is my code:

    1.index.html

    <head>
    <title></title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>

    <body class="twocolumn">
    <div id="header">Some content</div>
    <div id="left">Some content</div>
    <div id="center">Some content</div>
    <div id="footer">Some content</div>
    </body>

    </html>

    2. style.css

    @charset "utf-8";
    /* CSS Document */
    body{
    color:#FFFFFF;
    font-size:xx-large;
    margin: 0;
    padding: 0;
    }
    .twocolumn #header {
    background-color:#00FF00;
    padding: 10px;
    height: 100px;
    }
    .twocolumn #left {
    position: absolute;
    background-color:#FF0000;
    width: 200px;
    height:400px;
    }
    .twocolumn #center {
    background-color:#0000FF;
    margin-left: 200px;
    height:400px;
    }
    .twocolumn #footer{

    background-color:#CC00CC;
    }

    Hope you can help me here, the only solution that I can find right now is changing the width to px or em which is quite difficult for me. Thank you.

  4. #4
    Join Date
    Jun 2001
    Location
    Mystic Kingdoms
    Posts
    2,749
    Rep Power
    278

  5. #5
    Join Date
    Jun 2001
    Location
    Mystic Kingdoms
    Posts
    2,749
    Rep Power
    278
    its about position : absolute.
    and about percentage.
    and there's also fixed width.

    you didn't understand the rule.
    when doing mixed absolute + % + px = screw/mess up.
    unless you had a very good math calculation

    if you want a flexible layout... it's better use % and float.
    Last edited by mysticmind; 10-01-2008 at 12:30 AM.

  6. #6
    Join Date
    Mar 2006
    Location
    Kuantan
    Posts
    182
    Rep Power
    169
    Hmmph..so is there a way to prevent this?
    so far i still can figure a way...
    and prominent site like Digg...also has this kinda problem...
    but no users will actually resize a site in such a way right?
    DonT ShoW to ShOw pls ppl

  7. #7
    Join Date
    Sep 2005
    Location
    in my body lar...
    Posts
    1,325
    Rep Power
    0
    Just like bro mystic says.... mixed absolute + % + px = screw/mess up.

    you either stick with a fixed width in px/em or go everthing %... but the problem that you have in %, when you resize the screen the floating div will go messy also.

    If you really wanted to go 100% of screen size, use the traditional html table coding and that will work better than CSS


    the below is how i do it in %.. i would suggest you use a fixed width for all the div instead... ....

    HTML code:
    <html>
    <head>
    <title>Test Page</title>
    <LINK href="styles.css" type=text/css rel=stylesheet>
    </head>

    <body>
    <div class="container">

    <div class="header">
    This is the header
    </div>

    <div class="LeftSidebar">
    this is the leftsidebar

    </div>

    <div class="content">
    This is the content
    </div>

    <div id="cleardiv"></div>

    <div class="footer">
    This is the footoer
    </div>
    <div>

    </body>
    </html>
    Styles.css
    BODY
    {
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 9pt;
    background: #FFFFFF;
    }


    div.container
    {
    width: 100%;
    background: #FFFFFF ;
    }


    div.header
    {
    background-color: #FFFF99;
    clear: left;
    Height: 150px;
    }

    div.LeftSidebar
    {
    float: left;
    width: 20%;
    height: 200px;
    background-color: #FFCC99 ;
    }

    div.Content
    {
    float: left;
    width: 80%;
    background-color: #00FFFF;
    }

    #cleardiv
    {
    clear: both;
    }

    div.footer
    {
    background-color: #99FF99;
    width: 100%;
    Height: 50px;
    }



  8. #8
    Join Date
    Jan 2008
    Location
    KL
    Posts
    26
    Rep Power
    0
    Hello Guy...

    May I know what is the different between using table and <div> to make the web page layout?

    Is that using the <div> plus CSS is the better way?

    How about this?

    Code:
    <style type="text/css">
    .chromestyle{
    width: 100%;
    font-weight: bold;
    }
    
    .chromestyle ul{
    border: 1px solid #BBB;
    width: 80%;
    padding: 10px 0;
    margin: 0;
    text-align: left; 
    }
    
    .chromestyle ul li a{
    color: #494949;
    padding: 4px 7px;
    margin: 0;
    border-right: 1px solid #B5E2FE; 
    }
    </style>
    
    </head>
    
    <body>
    <!-- HTML CODE -->
    <div class="chromestyle" id="chromemenu">
    <ul>
    <li>1st content</li>
    <li>List</li>
    </ul>
    <ul>
    <li>2nd content</li>
    </ul>
    <ul>
    <li>3th content</li>
    </ul>
    </div>
    </body>
    </html>
    What is the what the use of this?

    Las time I use the table to do the layout, unfortunately the layout position is always run away depend on the browser screen resolution.
    Any suggestion to over come this problem. Is that using <div> plus CSS and make it?

    Waiting for solution.
    Thanks

  9. #9
    Join Date
    Jun 2001
    Location
    Mystic Kingdoms
    Posts
    2,749
    Rep Power
    278
    Quote Originally Posted by c2z.coe View Post
    Hello Guy...


    What is the what the use of this?

    Las time I use the table to do the layout, unfortunately the layout position is always run away depend on the browser screen resolution.
    Any suggestion to over come this problem. Is that using <div> plus CSS and make it?

    Waiting for solution.
    Thanks
    because you used % not fixed width.
    do MATH calculation yourself.

  10. #10
    Join Date
    Nov 2007
    Location
    KL
    Posts
    3
    Rep Power
    0
    It's quite sometimes since I posted this question, well the solution do works sometimes but I figured out something that when I used px instead of %, it did run well. Thanks for the solution iamfreelancer, but for those quite not familiar with the "<div>" thing. I suggest you better use the traditional table way to solve the layout problem.

  11. #11
    Join Date
    Jan 2008
    Location
    KL
    Posts
    26
    Rep Power
    0
    It's quite sometimes since I posted this question, well the solution do works sometimes but I figured out something that when I used px instead of %, it did run well. Thanks for the solution iamfreelancer, but for those quite not familiar with the "<div>" thing. I suggest you better use the traditional table way to solve the layout problem.
    Ya. I have also try using the px to fix the table's width. But somehow sometimes it is fail to show a good layout in different screen resolution.

    Is that any thing have to avoid when using table?

    Are this kind of problem will occur if using <div> CSS?

  12. #12
    Join Date
    Sep 2005
    Location
    in my body lar...
    Posts
    1,325
    Rep Power
    0
    Quote Originally Posted by c2z.coe View Post

    Are this kind of problem will occur if using <div> CSS?
    like our bro mysticmind mentioned... its the % problem.. no matter its css or traditional table code.. its still the same problem when using % on a resizable screen... however in a table manner, you can solv 90% of the problem if your coding is right....

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. CSS layout
    By yipguseng in forum Website Design
    Replies: 11
    Last Post: 17-05-2007, 04:01 PM
  2. problem with WMF layout loading
    By yipguseng in forum FeedBack & Suggestion
    Replies: 6
    Last Post: 17-04-2007, 10:26 AM
  3. My First Blog Layout. :)
    By zola in forum Blogging Discussion
    Replies: 10
    Last Post: 09-05-2005, 06:29 PM
  4. What do you think of my site's layout?
    By xaph in forum Websites Review and Suggestion
    Replies: 9
    Last Post: 28-12-2003, 02:47 PM

Posting Permissions

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

Search Engine Optimization by vBSEO 3.5.0 RC1 PL1

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112