Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12
  1. #1
    Senior Member Sean Thompson's Avatar
    Join Date
    May 2012
    Posts
    106
    Member #
    31720
    I know a lot of HTML but it's all been self-taught and I keep running into these unkowns when trying to make sites that look how I actually want them to.

    I want to make my site a minimum of 940 px wide- if the browser is less than this in width, users will have to scroll horizontally.

    If the browser is more than 940 px wide however- I want images to appear to "connect" with my header image(show as a full width header) and nav image(show as a full width nav).

    Check out the attachment to see what I mean.
    Sean
    Attached Images Attached Images

  2.  

  3. #2
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Honestly, there's a dozen ways to do what you're asking, but I have to ask .

    Why 940px ?

    What's your max-width gonna be ? I currently run 1 monitor at 1920px, which means I'll have about 500 px border with absolutely no content in it on each side of the 940.

    I have a 47" TV hooked to a laptop, but the display is capable of 2680 px wide.. Meaning this content will be a little strip of content in the middle of display.

    So, why 940px ?

  4. #3
    Senior Member Sean Thompson's Avatar
    Join Date
    May 2012
    Posts
    106
    Member #
    31720
    The width of the content doesn't matter, 940, 960, 1000, whatever- I'm just making it for average viewers using normal screen sizes.

    What I don't know how to do is use images in my margins(the outer "space" on each side of the main content) to give the appearance of a "full width header/nav/footer". And the key thing here is that I want to use images that don't flex/resize with screen width- as browser size increases, more of the image appears to take up the space. I don't know how to do this but I see it everywhere.

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,723
    Member #
    5580
    Liked
    718 times
    Show us where you see it ... give us a link.
    We can then show you what they did to achieve it.


  6. #5
    Senior Member Sean Thompson's Avatar
    Join Date
    May 2012
    Posts
    106
    Member #
    31720
    I guess I cannot find an example but I know this is used.

    Look at these 2 attachment drawings I made and you will see what I mean.

    The header image in the margins is what I'm focusing on. On the larger browser, more of it is visible. On the smaller browser, less of it is visible. The main header image obviously stays centered but in the margins we have these "add-ons" that make the header image full width. I'm pretty sure this is not the same as "margin: auto".
    Attached Images Attached Images

  7. #6
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,723
    Member #
    5580
    Liked
    718 times
    For me, I would need to see where it is used. I can't think of how it would be done.


  8. #7
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Depending on the background you're going to use for the header, you could:

    1. Create a header div at 100% , 0 margin, 0 padding, center the image in the header as a background, hide the overflow...

    2. Create a second div for the header the overlays the header div but is the same width as your body content div... Center the background image using hidden overflow ...

    As the browser resizes... The divs will fill with the background, and depending on the background image...

    I personally don't do fixed with content and fluid headers... There just too many variables, and unless you just running either solid color backgrounds or Gradients... Usually a lot of tweaking to the image needed to get it right.

    I opt for a fluid container and just adjust everything based on % to adjust to the thousands of screen sizes.

    5-8 years ago, 960 was considered a standard width... ( if you google 960 grid ), but with the advent of 16:9 resolution monitors, using a 960 width as your basis for design ... You might as well use tables for your layout.

  9. #8
    Senior Member Sean Thompson's Avatar
    Join Date
    May 2012
    Posts
    106
    Member #
    31720
    I will try this- I'm pretty sure the "background header" image is going to resize with the browser though? (as in bend/skew itself-this isn't what I want)

    But how do you make one header div "overlay" another one?
    Thanks for all the replies
    SEan

  10. #9
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Quote Originally Posted by Sean Thompson, post: 248140
    I will try this- I'm pretty sure the "background header" image is going to resize with the browser though? (as in bend/skew itself-this isn't what I want)

    But how do you make one header div "overlay" another one?
    Thanks for all the replies
    SEan
    How big is your background image ?

    I just did a fixed background for a site 2400px wide... Max width on design was 2400px

    page content was set to 90% and header background was an image 2200px wide centered overflow hidden ...

    The center of the header background is displayed when the browser opens... If the user increases the width of the page... ( tested on my 47" TV ), the header background keeps just getting larger and larger... Staying centered. Until it hits its max-width.

    You could create a "class" for the header that sits inside the header div... Probably be easiest and least amount of code. Just remember to either use a reset or make sure to define your margins and padding for everything.

    Again, it all depends on the images your using for this.

    The one I did was of a sillhouette of a sailboat ... On a small screen... You see the center of the boat... As your screen gets wider... You see the entire ship, the ocean... And the sunset in the background ( if your browser screen is wide enough ).

    Doubtful, many users will ever see the sunset... With some creative editing, I was able to make the header background image less than 30k

  11. #10
    Senior Member Andrew Yurlov's Avatar
    Join Date
    Apr 2011
    Location
    Portland, OR
    Posts
    1,306
    Member #
    27566
    Liked
    181 times
    So what you want is a header that goes from 1 side all the way to the other with an image that is not altered in scale with different browser sizes? And you also want the content to always stay centered at 960px?

    As for the header in a header to align it.. I'm using that now. I have one div named header which is just a visual aspect that has width an 100%. Then I just nest another div inside the header named header_align. Then I just center the header_align div and make the background transparent thus all your content in your header is centered.

    I'm still not sure this is what you mean but I hope this helped.

    EDIT: I would also suggest you use at least 990px for your content width because that used to be the standard for older monitors. I haven't seen a 960px monitor in forever...
    Artificial intelligence is nothing compared to natural stupidity -Someone

    Design is a funny word. Some people think design means how it looks.
    But of course, if you dig deeper, itís really how it works.
    -Steve Jobs




Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:55 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com