46 users online (0 members and 46 guests)  


  Results 1 to 15 of 15

Related

  1. Replies: 1
  2. Problem in tags    Forum: PHP Forum
    Replies: 8
  3. meta tags    Forum: Search Engine Optimization - SEO - Forum
    Replies: 9
  4. META tags    Forum: HTML Forum
    Replies: 6
  5. Tags????????????    Forum: HTML Forum
    Replies: 4
  1. #1
    PJ_11's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2003
    Location
    UK
    Posts
    7

    Tabless layout using css and div tags

    I am attempting to lay my site out, without tables. To do this I have created 2 classes: .left and .right :

    .left{text-align: justify; font-size: 10pt; font-family: Arial, sans-serif; float: left; width: 10%; height: 100%; border-right-style: solid; border-width: thick; border-color: #ff9900; background-color: #3399ff;}

    .right{ text-align: Left; font-size: 10pt; font-family: Arial, sans-serif; float: center; width: 80%; height: 100%; width: auto; padding-left: 5%; }

    I have assigned these classes to two div blocks in order to separate my page.

    I have noticed that in lower resoultions, the "stuff" in the .right sometimes renders below the .left "stuff, instead of adding a horizontal scroll bar - which is what I want it to do! This always happens on the forum on my site.

    I am a css novice so any input would be welcome. My site is www.british-bodybuilding.co.uk

    Thanks in advance

    PJ

  2. #2
    Android's Avatar

    Status
    Offline
    Join Date
    Oct 2002
    Location
    I AM CANADIAN
    Posts
    440
    It appears to be OK in 800 X 600 and I can pull the right side in considerably before the layout breaks. I wouldn't call it a concern unless you know that most of your users are on 640 X 480 or on PDA.
    I'll try playing with absolute positioning and see what happens.

  3. #3
    PJ_11's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2003
    Location
    UK
    Posts
    7
    Thansk for taking a look, it mainly seems to happen on the forum on, even on 1024 768. If you register I will validate ur membership immeadiately, then you can see for yourself.

    Cheers

  4. #4
    Android's Avatar

    Status
    Offline
    Join Date
    Oct 2002
    Location
    I AM CANADIAN
    Posts
    440
    If you put:

    Code:
    position:absolute;top:0px;
    in both .left and .right classes then both divs will be positioned at the top of the page absolutely and adjust with the resolution.
    Things were't going as expected for me. I had a horizontal scrollbar at 1024 X 768 until I realized that there was a table set to width=100% in the .right div. I changed that to 90% and it seemed to snap into place.
    Soooooo.....you might have to play with the values, but you should be able to solve your problem. If you're still having problems with your forum layout then post again.
    Good luck!

  5. #5
    PJ_11's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2003
    Location
    UK
    Posts
    7
    Thanks for the advice! I have added that code to my css, and it now the .right stuff fits at the side of the .left stuff. However, instead of adding a horizontal scroll bar to the page, it overlaps the .left hiding a small part of my menu bar, why is that? But anyway, although it is not exactly as I would like it, this is much better than someone seeing a blank page and not knowing to scroll downwards. Thanks for your help. Any ideas y there is no scroll bar would be appreciated.

    Thanks

    PJ

  6. #6
    Android's Avatar

    Status
    Offline
    Join Date
    Oct 2002
    Location
    I AM CANADIAN
    Posts
    440

    Talking

    I just found that you've got two width attributes for your .right class (width:100% and width:auto). I tried it with width:80% and got a different (maybe better) result.
    Try that.

  7. #7
    PJ_11's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2003
    Location
    UK
    Posts
    7
    Hi there, tried that, and it works for the most part, but some of the pages still fall of the bottom of the page?? Is this just a css thing, or am I doing something wrong?

    Thanks

    PJ

  8. #8
    Android's Avatar

    Status
    Offline
    Join Date
    Oct 2002
    Location
    I AM CANADIAN
    Posts
    440
    I forgot something else:
    I removed all the table tags and the page didn't break.
    I would suggest making a test copy of the page and try removing all the table,tr,td tags in the .right div and see what happens. That might be causing trouble as well.

  9. #9
    PJ_11's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2003
    Location
    UK
    Posts
    7
    Thansk for all your help, I will give it a try - but which page are you talking about?

  10. #10
    Android's Avatar

    Status
    Offline
    Join Date
    Oct 2002
    Location
    I AM CANADIAN
    Posts
    440
    LOL, I'm still on the index page. I'll register for the forum and see what's there. I prefer not to use my work email for registration, and they block internet based email around here, so if i have to open the confirmation, it might have to wait until I'm home tonight. (Won't stop me from trying though
    Last edited by Android; 04-28-2003 at 10:57 AM.

  11. #11
    HTML's Avatar
    Administrator

    Status
    Offline
    Join Date
    Aug 2000
    Posts
    3,445

    Follow HTML On Twitter Add HTML on Facebook Add HTML on Google+ Add HTML on Linkedin Visit HTML's Youtube Channel
    Welcome to the forums PJ_11 ,

    Please do not take this personally, as it is aimed more as a message to the community as a whole, you just gave me a good opportunity to make the point .

    Our fellow community members here at AHFB are anxious and quick to help their brother/sister webmasters, therefore the least we can do is make the task as simple as possible for those who offer assistance.

    One thing that is helpfull is giving a URL, or at the least some source code. The URL is the best option as the person helping can usually spot the problem when looking at the site, and can go straight to the problem area in the code.

    Something else that needs to be considered is password protected/ registration pages, A test account should be made and the account info posted. The person that offers his/ her time and knowledge should never have to go through hoops to help. A person may wish to limit access on the test account, which is fine and in some circumstances advised, you may also close the test account after the problem is solved. Of course than it would be considerate to make a final post "Problem solved, test account closed" editing the post with the test account to remove the acct info.

    Some members may see it will take more time than they have available and skip the post, make it as easy as possible and you are bound to get the quickest help.</ramble>

    Dave

  12. #12
    Android's Avatar

    Status
    Offline
    Join Date
    Oct 2002
    Location
    I AM CANADIAN
    Posts
    440
    Good point Dave.
    and PJ_11, as for the layout of the page in question (being the forum page) I don't think that there is really anything there that can't be solve much the same way. Some positioning and readjusting values.

    Let us know if you're still having any problems.

  13. #13
    PJ_11's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2003
    Location
    UK
    Posts
    7
    Cheers matey, I have validated all pending memberships, when you try and make a post it will happen then!
    Thanks again
    PJ

  14. #14
    PJ_11's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2003
    Location
    UK
    Posts
    7
    Sorry about the last post, I didnt read the previous ones - my bad. Yes I totally agree, if someone is taking the time out to helpl you, then I should make their job as easy as possible. Sorry about that. I have set up an account for you to use. USERNAME: nuts_11 PASSWORD:help , please dont make any posts though, unless they are relevant LOL! But if you click the link to post a reply/topic you will see what I mean.
    Many thanks
    PJ

  15. #15
    Android's Avatar

    Status
    Offline
    Join Date
    Oct 2002
    Location
    I AM CANADIAN
    Posts
    440

    A few hints

    It's been awhile since I've dealt with 5 levels of nested tables
    A good start to troubleshooting is to put a border on all of the tables and give them different colours. It might point you to the problem area. Not having all the images for the buttons, I had to give them approximate height and width attributes as well. (Always a good idea in case images aren't downloaded for some reason. (Try it, you'll see what I mean).
    After I changed a few values (for curiosity's sake) I thought "what the hey" and changed the "cols=95" value in the text area to 70, and it shifted to the correct position.
    Oh yeah, don't forget to position the .right div absolutely (I used "top:5px")
    If you're going CSS completely (styles and positioning) a really good excercise is to completely remove the table, tr, td tags and rebuild the content with presentation elements.
    Have fun
    It might take alot of fiddling!
    Any help?



Tags for this Thread