::: Need some help with my 1st webpage :::

Discussion in 'Web Design' started by bigbonthabeat, Feb 8, 2011.

to remove all ads.
  1. bigbonthabeat

    bigbonthabeat New Member

    Messages:
    47
    What is the best way to get a webpage to fit most screen resolutions in Adobe Dreamweaver? I am building a website for the first time and I've been researching for hours on this topic. I've found 2 options:

    1. fixed image that doesn't expand
    2. fluid image that adjusts to resolution size

    I found that I don't like the way a 'fluid' website looks...I just want my background image to be fixed, like these websites below:

    http://www.freshkaufee.net/
    http://www.diddydirtymoney.com

    When my website is being viewed on larger screens, the only thing I want to change is that 'more' of my background will appear(just as in the above examples)...I don't want any expanding to take place. Here is an example of my background so far:

    http://i187.photobucket.com/albums/x292/bigbonthabeat/12001024WebsiteBryson.jpg

    I want more/less of the repeating pattern in the background to appear on bigger/smaller resolutions. I don't want ANY blank spaces

    How would I achieve this?
    A big thanks to everyone who is helpful : )
     
  2. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    put all your webpage contents within a wrapper
    HTML:
    <body>
    <div id="wrapper">
    ....
    ....
    </div>
    </html>
    
    and
    Code:
    #wrapper {
    width: /*the width of your page contents, around 960px is good */
    margin: 0 auto /*this will centre your content */
    }
    
    and place the following in your body tag
    Code:
    body {
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    background-image: url('YOUR_REPEATING_IMAGE.jpg');
    background-repeat: repeat;
    }
    
    with a wrapper set at 960px it'll fit on screens down to 1024x768
     
  3. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    There's 2 ways to do what you're asking.

    Method 1:
    Set your entire page inside a wrapper (assuming you haven't already).
    Set the left and right margins to auto.

    like so:

    HTML:
    Code:
    <div id="wrapper">
    H
    T
    M
    L
    </div>
    CSS:
    Code:
    #wrapper {margin-left:auto; margin-right:auto;}
    Alternate (buggy in IE - go figure) CSS:
    Code:
    #wrapper {margin:0 auto;}
    Method 2:
    As before, content wrapper.
    This time, we're going to set position to absolute, left to 50%, and a negative margin that's half the width of the div.

    So, if the div is, say 800px:

    HTML:
    Code:
    <div id="wrapper">
    H
    T
    M
    L
    </div>
    CSS:
    Code:
    #wrapper {position:absolute; left:50%; margin-left:-400px;}
     
  4. bigbonthabeat

    bigbonthabeat New Member

    Messages:
    47
    Thank you for the posts : )

    So would I do this by creating a wrapper then going to INSERT > DIV TAG ? Sorry for my 'noobness'...I'm a music producer trying to build a website

    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    I also have one more question:

    If I wanted to animate the Home, bio, etc buttons (as in the site below), would I need flash for that?

    http://www.runnersmusicgroup.com/
     
    Last edited: Feb 8, 2011
  5. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    that particular menu - yes, however similar can be done with jquery as well.
     
  6. bigbonthabeat

    bigbonthabeat New Member

    Messages:
    47
    Thanks Phreaddee : )

    How do I make a wrapper ? And how would I insert the code for it?
     
  7. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    No need to add 100% width or height, this a default behavior of the body tag. Also to save yourself the time and code, you could just clear all margins and padding from all elements. Then add what you need, when you need it. Like so:

    Code:
    * {
       margin:0;
       padding:0;
    }
    body {
      background:url (images/yourbgimage.png) top center repeat-x;
    } 
    
    Less code the better :D



    You shouldn't have issues with shorthand in IE? I use it and my sites render correctly in IE6.



    A "wrapper" div, also called "container", is pretty much an html element that contains (wraps) all the markup for your page (acts just like the body). For example:

    HTML:
    <body>
       <div class="wrapper">
            <!-- YOUR SITE MARKUP -->
        </div>
    </body>
    
     
  8. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    All in all you should not need a wrapper though. Figure your site will be broken down (usually) into three main sections: header, content, footer. Just use grouping and set the common properties for all.

    Generic 960px site
    Code:
    div.header, div.content, div.footer {
      width:960px;
      margin:0 auto;
    }
    
    HTML:
    <body>
       <div class="header">...</div>
       <div class="content">...</div>
       <div class="footer">...</div>
    </body>
    
    Simple, and sweet.
     
    Last edited: Feb 8, 2011
  9. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    I always seem to have issues with the margin:0 auto; in IE. Clearly, the problem lies somewhere between the chair and the keyboard :eek:
     
  10. bigbonthabeat

    bigbonthabeat New Member

    Messages:
    47
    thanks for this info PixelPusher...one more question:

    What resolution size does the .png file need to be so that it won't have to tile on higher resolutions?
     
  11. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    perhaps it does "appear" to display that behaviour by default, but without declaring that, one would not be able to use fluid layouts, or percentages in general as they need a parent at 100% to work from.
    also without it your wrapper will not fill the screen. neither height nor width.
     
  12. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Lol, i'm not saying your wrong, I just have not had that issue....but IE is very temperamental.
     
  13. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    True, this is the case for 100% height. Width on the other hand...any div will expand to 100% width of its parent unless you declare a specific value or alter the default display property (block).
     
  14. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Ok you lost me...I thought you wanted the background to tile on higher resolutions, with the site staying centered?

    If you are asking what size your repeating background image should be, you will want to see where you can crop so that it create a seamless connection when two are stacked next to each other. The background you linked to in the first post is fairly intricate, but still usable. I attached a small jpeg for the background. If you set this to repeat on both x and y coordinates you will be golden.

    CSS
    Code:
    body {
       background:#fff url(images/background_tile.jpg) top left scroll repeat;
    }
    
     

    Attached Files:

  15. bigbonthabeat

    bigbonthabeat New Member

    Messages:
    47
    I decided to go with the tiled image, but then I noticed that I need the black header line at the top to extend all the way out to the ends of the page (but at the same time, fade in the middle of the page-------> as in the 1st pic of my 1st post). Is there a way to do this in Dreamweaver if the header black line is separted from the background?
     
  16. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Yeah its definitely possible. You will need the unique section in the middle if the black part as one image, and then grab a section with just the bar and the shadow that you will use to repeat on the x axis. The repeating section will need to a smart crop, just like i did for the body background, so that it tiles seamlessly.
     
  17. bigbonthabeat

    bigbonthabeat New Member

    Messages:
    47
    Sorry, I'm not quite sure if I understood what you typed. This is what I have done already:

    1. I have made the BLACK LINES in photoshop (faded towards the middle of the page, but not at the outsides of the page.

    2. I have set my repeating background image in Dreamweaver

    Now, how do I incorporate the black lines into my Dreamweaver project? I was thinking to make the box at the top as a header, but then I wouldn't be able to emboss the black lines (as I did in photoshop) and also, I wouldn't be able to fade the black lines as they approached the symbol towards the middle of the page.

    ALSO, I wanted to put a header at the top that is white, but slowly fades into light grey. I made a header in Dreamweaver and inserted a gradient pic into that header which I made in photoshop (200 x 1 to optimize size). But when I view this in the browser, there are gaps (see pic below)

    http://i187.photobucket.com/albums/x292/bigbonthabeat/gaps.jpg
     
    Last edited: Feb 10, 2011

Share This Page