CSS Problems

[SENOR]

Hi, so Im having two coding problems in css.

1) Fluid layouts with things that need to be 100%. I just do width: 100% but inlarge monitors thinsgwill just look so long, is there a way to set it so 100% things look the same in all screen resolutions?

2) Outer Glows/ Drop Shadows. SO Im coding a lyout when I relaize im nto sure what to do for a rounded rectangle/ square that has an outer glowall the way around it. What do i do?

Thanks so much.

[JohnN]

yes there is, use maxwidth then set a pixels width. this *should* sort it.

the best way is to create a few images, one for each corner then one for each side. set it out like this:

have a 3x3 table

top left: corner image
top center: border background
top right: corner image
center left: border image
center center: CONTENT
center right:border image
bottom left: corner image
bottom center: border background
bottom right: corner image

[SENOR]

I code in Divs.. :S

[JohnN]

allright: just do a 3x3 set of divs:p

<div style='float:left'>top left:<div>topmiddle</div><div style='float:right;'>top right</div>
<br break='all' />
<div style='float:left'>middle left:<div>CONTENT</div><div style='float:right;'>middle right</div>
<br break='all' />
<div style='float:left'>bottom left:<div>bottom center</div><div style='float:right;'>bottom right</div>

[SENOR]

Ok, as to my screen resolution problem.

heres my site so far www.smberns.com/smberns

If you ahve a alrge broswer its going to look very big.... SO Is there a wya I can fix this?

[JohnN]

you don't have to use percent, you can just do it in pixels.... the average screen size is about 1024 pixels, remember to allow 20 for the scroll bar.

[iBrightDev]

you don't have to use percent, you can just do it in pixels.... the average screen size is about 1024 pixels, remember to allow 20 for the scroll bar.

that is why i normally just do a fixed width of 980 to make sure there is enough room myself. :D

@SENOR, if you do a fixed width, you will have a lot less problems with the site. i suggest putting a page container div around everything, set the width to 980, and do the margin left and the margin right both to "auto". that will center it on the page, and you will be in business.

[SENOR]

That wont look good with the header and footer comingout of nowhere?

[themoose]

You can use max-width and min-width pseudos for restricting how fluid fluid designs can be.

[SENOR]

Mind telling me the code and where to put?

I tried:

in body and in wrapper

min-width: 800px;
max-width: 1024px;

and both times it cut the header and footer off in large screen resolutions..

[iBrightDev]

That wont look good with the header and footer comingout of nowhere?

you could contain it all in a nice box if it looks odd to you. but, without doing that, i am sure it would look fine too, a lot of sites do things that way.

[SENOR]

Have you seen www.smberns.com/smberns ?

What would you suggest the most pro thing to do.

[iBrightDev]

yeah, i saw it, and it would probably look fine by using a fixed width. give it a test, and see how it looks, if it looks odd, put it in a container with a nice gradient/shadow border.

[SENOR]

Ok as to my outer glow problem Ive got the that working but one problem.

Heres my CSS:

#main {
margin: auto;
padding: 0;
margin-top: -7px;
width: 723px;
height: 300px;
}

#main #left {
background: url(images/left.png) repeat-y;
width: 21px;
float: left;
margin: 0 0 0 0;
height: inherit;
}

#main #right {
background: url(images/right.png) repeat-y;
width: 21px;
float: right;
margin: 0 0 0 0;
height: inherit;
}

#main #content {
background: #111111;
height: inherit;
width: 681px;
margin-left: 21px;
}

#footer {
margin: auto;
background: url(images/bottom.png) no-repeat;
width: 723px;
height: 30px;
margin-top: 0;

font-family: Verdana, Arial, Tahoma, sans-serif;
font-size: 0.6em;
color: #ffffff;
text-indent: 20px;
}



My body:


<div id="wrapper">
<div id="header"></div>
<div id="nav"></div>
<div id="main">
<div id="left"></div>
<div id="right"></div>
<div id="content">
<h1 class="left">Title</h1></div>
</div>
<div id="footer">Copyright</div>
</div>


For the left and right to expand with content i set the height to inherit but thats onyl working in firefox.. what do i do?