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

bigbonthabeat

New Member
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 : )
 

Phreaddee

Super Moderator
Staff member
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
 

ronaldroe

Super Moderator
Staff member
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;}
 

bigbonthabeat

New Member
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:

PixelPusher

Super Moderator
Staff member
...
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

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



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;}

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



Thanks Phreaddee : )

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

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>
 

PixelPusher

Super Moderator
Staff member
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:

ronaldroe

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

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:
 

bigbonthabeat

New Member

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?
 

Phreaddee

Super Moderator
Staff member
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:

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.
 

PixelPusher

Super Moderator
Staff member
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:

Lol, i'm not saying your wrong, I just have not had that issue....but IE is very temperamental.
 

PixelPusher

Super Moderator
Staff member
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.

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).
 

PixelPusher

Super Moderator
Staff member
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?

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;
}
 

Attachments

  • background_tile.jpg
    background_tile.jpg
    9.1 KB · Views: 23

bigbonthabeat

New Member
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;
}

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?
 

PixelPusher

Super Moderator
Staff member
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?

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.
 

bigbonthabeat

New Member
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.

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:
Top