Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Jun 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    picture resizing and overall layout

    Hello all.

    i will do my best not to stuff up the posting this time. i have reworked my web site at www.aashaaron.com with 4 css docs. I don't knw why but i can't post the code in its entirety here, so the first link is to a page that shows the code. the second is to the web site. here are my dilema's.

    I have read a lot of tutorials but seem to be missing something. I would like the page to have no scroll bars, which i have achieved on my computer at home, but when i view it on a different laptop at home (diff res) I can not see the pictures at all. they are just outlined with red x's in the top left hand corner. also, in a different computer the picture on the right is too large and i get scroll bars.

    I guess my questions are for directions on where to fix this, ie: can you resize the picture according to the resolution it is being displayed on?
    Does the code i have put in for the page layout represent what i am trying to say in the above?

    any help would be greatly appreciated.

    kindest regards
    bret

    www.aashaaron.com/csscodes.html
    www.aashaaron.com

    also, i am using dreamweaver mx to assist me in my building, i noticed that it doesn't show .jpg pictures for some reason, but when i changed them to .gif, i could see them, is there a reason for that?
    Last edited by an63lu5; 06-27-2007 at 03:17 AM. Reason: workedout something else to ask

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by an63lu5 View Post
    i have reworked my web site at www.aashaaron.com with 4 css docs.
    I suggest that you combine the 4 CSS files into 1 single CSS file. Maybe you are not aware that one is allowed to put in more that one selector in each CSS file?

    Quote Originally Posted by an63lu5 View Post
    I would like the page to have no scroll bars
    I'm not sure that this is a good idea because scrollbars are there for a reason. But the method is like this:
    Code:
    html {
      overflow: hidden;
    }
    However, this won't work until you fix (1) below.

    Quote Originally Posted by an63lu5 View Post
    when i view it on a different laptop at home (diff res) I can not see the pictures at all. they are just outlined with red x's in the top left hand corner. also, in a different computer the picture on the right is too large and i get scroll bars.
    I'm not sure what the problem is. Which browsers were you using?

    (1)
    You have specified this document type:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    Are you aware this triggers quirks mode?

    I recommend that you use this instead:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/REC-html40/strict.dtd">
    (2)
    I see some nasty errors in your CSS. You better run it through the CSS validator and fix those errors.

  • #3
    New Coder
    Join Date
    Jun 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    85 views and only 1 reply

    hi all, i know that my post might seem quite newbieish, but i have done tutorials and am just having a little trouble trying to get the last part of my page to work, i don't think that after 85 people have viewed the post, only 1 person can offer some assistance, and that too wasn't in answer to the question i posted.

    in reply to the response, i could not get a .jpg file to be viewed online, i changed them to .gifs and they work. the problem i am having is when the browser is resized, the picture stays the same, and hte nav bar on the bottom collapses on itself. is there a way to have the web page check the users screen res, and resize the pic to accommodat that? or am i just better off makeing that picture a little smaller, and centering it according to that person.

    any help would be great. thanks

  • #4
    Regular Coder
    Join Date
    Mar 2007
    Location
    Quebec
    Posts
    261
    Thanks
    6
    Thanked 7 Times in 7 Posts
    well... generally the smallest screen resolution now used is 1024x728... so if the images conform well to that, they will fit everything else. You could use javascript do check screen size and display correct CSS doc... but its better if you just have one that works for all resolutions.

    Also, I believe the second post in this thread DID answer some questions, or gave you the means to figure them out yourself.

  • #5
    New Coder
    Join Date
    Jun 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yr right, it did answer a question i had asked in relation to the overflow and i thank you for that.

    let me maybe say what the client is asking.

    he wants the web page to look like a wide screen flim. and he wants te picture to take up teh space from green line to green line. i explained to him that if the picture did that, it would not be teh same on everyones computer, and the length would take up way more room on teh page, leaving not much more room for anything else on the front. if i was to make the pic smaller in width ie: cro it, i could do it.

    my question i gues now comes that when i resizse my screen web browser, the navigation panel on the bottom, resizes itself to show all buttons. I will put my script through the validator, but if i set the screen size to 99% it opens up quite nicely. do i set a size of 99% for the nav bar too, instead of auto, so it doesn't resize like that? and just has scroll bars?

    sorry, i tried to make the post short, but i ramble, that will do for now

    an63lu5

  • #6
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by an63lu5 View Post
    my question i gues now comes that when i resizse my screen web browser, the navigation panel on the bottom, resizes itself to show all buttons. I will put my script through the validator, but if i set the screen size to 99% it opens up quite nicely. do i set a size of 99% for the nav bar too, instead of auto, so it doesn't resize like that? and just has scroll bars?
    It sounds like you want a page with fixed width.

    Example:
    Code:
    body {
      width: 800px;
    }
    I think you will get better response if you start fixing the coding errors in your HTML as well as your CSS even if they may not be directly related to your questions. I was trying to help you with that in my first post, but I don't see any improvement.

  • #7
    New Coder
    Join Date
    Jun 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think you will get better response if you start fixing the coding errors in your HTML as well as your CSS even if they may not be directly related to your questions.
    yes, i did see that in your first post, the line you said to change was something that dreamweaver put in when i started the new page, i have looked up the quirky mode, i am going to have to go back and do some more investigation on that, thanks.

    an63lu5

  • #8
    New Coder
    Join Date
    Jun 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    getting there, but have a few more questions

    ok, i have simplified my code into 1 css file as requested, it is pasted below. the borders of the elements are there so i can see what changes when i change things. I can not see the border for my 'navigation element', any reason that would be?

    i have a book on css and stuff now, but i am a little confused with absolute, relative static etc. In the book they made a page with a central box called #wrap, then put all the objects inside that, i have done the same but also can only see the top border (in blue dots). when it comes to positioning, if something is relative the book says it is relative to its origional position. can someone give me or point me in a laymens terms explanation of positioning pls?
    2) the page is looking very close to what i would like it to look, the other thing i am getting lost in though is the sizes. i am assuming that 100% is the total width of a page, so if you have a picture in an element that was set to 50%, then that pic wuld take up 50% of that page. if you ahve 3 elements, ie: header footer, and main body, the sum of those widths must not go over 100% in order not to get scroll bars correct?

    sorry just getting a little confused. anyway, check out the code and let me know if i am on the right track.
    cheers
    bret

    here is web site running with this current code.
    www.aashaaron.com


    /* page layout and style */
    body {
    background-color: #000;
    font-family: PledgeBlack;
    color: #29bc00;
    }
    /*wrap box to enclose whole page*/
    #wrap {
    height: 95%;
    border: 2px dotted #1d00ff;
    width: 100%;
    margin: 1px;
    }

    /* header box layout */
    #header {
    position: relative;
    top: 2px;
    left: 2px;
    border-style: dotted;
    height: auto;
    border-width: 1px;
    width: auto;
    }
    /* index page main body box*/
    #indexbody {
    position: relative;
    width: auto;
    height: 550px;
    top: 5%;
    margin-top: 100px;
    border-top: 1px solid #0f0;
    border-bottom: 1px solid #0f0;
    border-style: dotted;
    border-width: 1px;

    }
    /* navigation box layout*/
    navigation {
    position: relative;
    width: auto;
    border: 10px dotted #f00;

    }

  • #9
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Your closing tag for the #wrap div is right after it's starting tag. Move it down just above the closing body tag:

    Code:
    <div id="wrap">
    <div id="header"><img src="images/AashAaroncom.gif">
    </div>
    <div id="indexbody"> 
    	<img src="images/webcouch.gif" align="right"> <img src="images/icuweb.gif" width="189" height="267">
    
      </div>
    <div id="navigation">
    <!-- roll over images for navigation buttons -->
    <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('button1','','images/buttons/whoiaashover.gif',1)"><img src="images/buttons/whoiaashup.gif" name="button1" width="151" height="26" border="0"></a> 
    <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('button2','','images/buttons/actingtuitover.gif',1)"><img src="images/buttons/actingtuitup.gif" name="button2" width="111" height="25" border="0"></a> 
    </div>
    </div>
    Well, this is one problem solved. You can add any padding yourself, if wanted.


  •  

    Posting Permissions

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