HTML - Centering Containers - Not Sure If This Works On Different Resolutions

Looks fine.


Does not look fine.

The first picture was fine because it was viewed with a 1024x768 resolution(which is the resolution that I'm working on my website with). However, any higher resolutions, and you'll see that the video goes out of place and moves too much to the right(second pic). I need to make it so that the video scales with all resolutions so it stays in place like in the first picture, no matter what the resolution is. Can anyone tell me how to fix this? Please be specific, i.e. what code? Thank you.

www.intoleranceclothing.com

So this is not my expertise to say the least. My page looks fine on my resolution at home (1280x768) but of course does not look as intended on any other resolution.

I have a few problems I'm trying to learn how to fix or control.

1) If you click the images of the shirts I want the popup to be centered in the x position and slightly below y center so the "Intolerance Clothing" still shows when the large picture is up. What would be the easiest way to go about this? Is there a way to set absolute position measured from the center of the page or how would I go about this?

2) Kind of along the same lines. The smaller pictures of the shirts align right up to the background image edges in my resolution. How can I go about positioning them so they are always the same location even if the resolution changes. Basically if the resolution gets bigger I'd like everything to just stay as is and add more black solid space around the image.

3) Another smaller change I'd like to make is currently the viewer has to click the larger image for it to close and they cannot bring up another lager image until it is closed. What do I need to modify to allow the larger image to be replaced by a new one if a different shirt is clicked?

Thanks for any suggestions on where to go read or look to help solve these issues or if someone is kind enough to point me in the right direction.

Hi!
I'm having a problem with my website on larger screens.
My website looks fine on my 1024 by 768 screen, but when I check it on higher resolution screens, all the content is stuck in the upper left corner leaving a big void on the right.
How would I make my content appear in the middle of the screen like most modern websites? Or is there another solution that somebody can propose?
Thank you for your time!

I'm making a website on my mac and when I view it it looks fine, but when I view it on my windows px on 1080x720 res it has everything moved to the right some and even the sizes are wrong. But when I change my res to 1280 x 1080 it looks how it does on my mac (which is 1280 x 800 res).

I'm guessing the resolutions are effecting the site's margins and size attributes.

Is there a way to fix this?

Hi,

I have added a screen shot to show what i mean here

A site i am working on reuires 4 boxes in the main content area. I have started the template and i have managed to get the first 2 boxs to always have the same height with the following scipt

Code:

function fixH(one,two) {
if (document.getElementById(one)) {
var lh=document.getElementById(one).offsetHeight;
var rh=document.getElementById(two).offsetHeight;
var nh = Math.max(lh, rh);
document.getElementById(one).style.height=nh+"px";
document.getElementById(two).style.height=nh+"px";
}
}
window.onload=function(){
fixH('box1','box2','box3','box4');
}

i have added box3 and box4 to the bottom part and i tried a number of ways to get it to work but box 3 and 4 just wont stretch to match the others height. Please can you let me know what needs to be added to make this work?

You will see box 1 and box 2 are the same height and this is done by using the script above. Box 3 and box 4 are not the same height.

Any suggestions?

extra info: The boxes are defined in my style sheet and i have not set the height because i dont want a fixed height. I want the boxes to stretch as i type out text into them but for them to keep the same layout on the pege so the top 2 boxes always need the same height and the bottom 2 need the same height aswell.

Hi,

I am a photographer and am trying to build my own site. Am using dreamweaver 8 and am ok using it, but my html is a little rubbish.

have been developing my site, www.robertallenweddingphotography.co.uk, however just realised i have been developing at 1024x768 but if you look at the site at a lower or higher resolution it looks v.bad.

Have read a few bits and pieces about using % instead of set pixels?! but am a bit lost! Can any body point me in the right direction? Basically want to end up with a site that looks 'correct' to as many people as possible!

Thanks Rob

Hey all.

Here is the link to the site: http://test.gdconf.com/scheduler/

Look at the bottom part of the page where you should see Session Wish List and myGDC Schedule.

If you look at the page in IE, there is extra spacing after the right-side scroll bar.

Where is that dead space coming from and how can it be removed?

It is making it so that the spacing is off on 2nd column.

Please let me know if you guys need any code.

Thanks.

so i'm working on my new site and everything seemed to be working find until i got to the 8th image

since the image is wide instead of a scroll arrow appearing to scroll the page over, the image just collapses below my other divs to fit.

can anyone help me fix this? thanks in advance guys

this is the website http://www.paulodourado.com/x_milk.html

and this is the page where I encounter problems
http://www.paulodourado.com/thrice.html

Hi there.

So I don't need it for 800x600, only the sizes over 1024x768.

Basically I made this template which I need to be able to be re-sized when in your browser. I thought I did this right, however I forgot about other resolutions other than 1024x768. When in higher res, the tables break a little and from what I can make out just get a little larger.

What I can't work out is how to make them all work properly most large resolutions?

Link to the template is he
http://www.ruthlessintent.com/penguins/

Hi tell me if it's not the right place to post this question but I would like to know how to make my website look the same in all screen resolutions and for all browsers. Right now it looks fine in the 800x600 and 1024x768 resolutions for all the major browsers but when I view it with a 1366x768 resolution all the pages are skewed to the left in firefox and only some pages are centered in IE8.
Here's the site : http://www.lost-vision.com/

Code for the "contact me" page that isn't centered in both browsers in 1366x768 resolution :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="description" content="Your description goes here" />
	<meta name="keywords" content="your,keywords,goes,here" />
	<meta name="author" content="Your Name" />
    <link rel="shortcut icon" href="img/favicon.ico">
	<link rel="stylesheet" type="text/css" href="andreas06.css" title="andreas06" media="screen,projection" />
	<title>Contact Me</title>
<style type="text/css">
<!--
body {
	background-color: #191919;
	margin:0 auto;
	padding-left: 11.2%;
	padding-right: 11.2%;
}
-->
</style></head>

<body>
<div align="center">
<div id="container">
	<a id="top"></a><p class="hide">Skip to: <a href="#nav">site menu</a> | <a href="#leftside">section menu</a> | <a href="#content">main content</a></p>

	<div id="sitename">
		<h1>&nbsp;</h1>
		</div>

	<div id="nav">
		<ul>
		  <li><a href="index.html">Home</a></li>
		  <li><a href="affiliates.html">Links</a></li>
			<li><a href="contact.html">Contact me</a></li>
			<li><a href="empty.html"> </a></li>
		</ul>
	  <p class="hide"><a href="#top">Back to top</a></p>
	</div>
 
<div id="wrap1">
		<div id="wrap2">
	  <div id="leftside">
				<p class="soft">&nbsp;</p>
				<p class="soft">&nbsp;</p>
				<p class="soft">&nbsp;</p>
			  <p><!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="shoutbox_balistik" src="http://www6.shoutmix.com/?shoutbox_balistik" width="140" height="400" frameborder="0" scrolling="auto">
<a href="http://www6.shoutmix.com/?shoutbox_balistik">View shoutbox</a>
</iframe>
<!-- End ShoutMix --></p>
			
	      </div>
          
			<div id="content">
				<h1>&nbsp;</h1>
				<p><strong>E-mail:</strong></p>
				<p> <a href="mailto:maitre_mechant@msn.com">maitre_mechant@msn.com</a></p>
				<p><a href="mailto:balistik94@gmail.com">balistik94@gmail.com</a></p>
			  <p>&nbsp;</p>
				<p><strong>On other sites:</strong></p>
				<p><a href="http://balistik94.livejournal.com/">LiveJournal</a></p>
				<p><a href="http://www.youtube.com/user/balistik94">Youtube</a></p>
				<p>&nbsp;</p>
				<p>&nbsp;</p>
				<p>&nbsp;</p>
				<p>&nbsp;</p>
				<p>&nbsp;</p>
				<p>&nbsp;</p>
				<p>&nbsp;</p>
				<p>&nbsp;</p>
				<p>&nbsp;</p>
				<p>&nbsp;</p>
				<p>&nbsp;</p>
				<p>&nbsp;</p>
				<p>&nbsp;</p>
				<p>&nbsp;</p>
			  <p class="intro center">&nbsp;</p>
			  <p class="intro center">&nbsp;</p>
			  <p class="hide"><a href="#top">Back to top</a></p>
			</div>
	  </div>

		</div>
      </div>
      </div>
 </body>
</html>

Thanks in advance for your help.

Im designing a new site and I was kind of wondering a few things that I was hoping to get some answers to. I wasnt sure where this should be posted so if its in the wrong spot please accept my appology. So I do know I want to do alot of css and make it look very professional.

1) I remember at one time that you should make the site big enough to accomidate an 800x600 resolution. But considering that 1024x768 and bigger is pretty common place should I be scaling up to that or still stay at 800x600?

My webpage:

http://beamsvillepharmacy.com/site/index.html

Fits my browser perfectly, however when viewed on other computers with a lower resoultion, the page doesn't fit and is too large.

How can I edit my code, or go about making it automatically fit with different resolutions?

(Right now it's all simple width="" height="", and that's how I was fitting it)

Thanks.

I placed an image in the backround of a table on my page. It looks fine on my computer with a square monitor set at 1024x768 pix. When I viewed it on another monitor, a wide screen it displayed about half of my image to the right of where I placed it in the table. Can this be corrected so the image looks correct in all screen resolutions? Here is a link to the page in question. It's the motor in the upper left. The image name is: log2.gif

http://cb750sandcastonly.com/new/

Thank You.

so what is the easiest and best way to center a div within a div? or a div within anything else for that matter.

How do you center vertically?

and

How do you venter horizontally?

I have a website and I used css to make my Div tags set to absolute. The only problem is that when you open it in a browser, the browser won't open big enough and wil block out some of my content (forcing me to scroll to the left or maximize the borswer to see the whole page) . How do i make the divs always appear in the center of the page always. Also how do i make it so when you change the siz of the browser my divs will change with it to remain in the center. I tried doing the margin auto trick but it still doesn't work. Here is my stle sheet code and the web page html code... any help would be appreciated.
/* CSS Document */


#wrapper {margin-right: auto;
margin-left: auto;
margin-top: 20px;
margin-bottom: 0;;}


body {
margin : 0px 0px 0px 0px;
background-color: #E1AE5A;
background-repeat: repeat;
}
#top {
position: absolute;
height: 48px;
width: 900px;
left: 250px;
top:3px;
border:0px none;
z-index:1;
color: #000033;
}

#main {
position: absolute;
top: 542px;
left: 328px;
z-index:5;
width: 745px;
color: #FFFFFF;
height: 28px;
}

#flash {
position: absolute;
top: 130px;
left: 299px;
z-index:4;
width: 803px;
color: #FFFFFF;
height: 419px;
}

.style1 {

font-family: Eurostile;
color: #FFFFFF;
}

.style2 {
font-family: Helvetica;
}
#Layer1 {
position:absolute;
left:300px;
top:121px;
width:804px;
height:540px;
z-index:3;
background-color: #000033;
border: medium solid #FFFFFF;
}

.style3 {
font-family: Eurostile;
}

#Layer2 {
position:absolute;
left:111px;
top:170px;
width:71px;
height:124px;
z-index:4;
}

.style4 {color: #000000}

#Layer3 {
position:absolute;
left:482px;
top:72px;
width:37px;
height:56px;
z-index:2;
}
#Layer4 {
position:absolute;
left:652px;
top:72px;
width:24px;
height:31px;
z-index:2;
}
#Layer5 {
position:absolute;
left:822px;
top:72px;
width:84px;
height:58px;
z-index:2;
}
#Layer6 {
position:absolute;
left:992px;
top:72px;
width:95px;
height:50px;
z-index:2;
}

#Layer7 {
position:absolute;
left:331px;
top:139px;
width:750px;
height:446px;
z-index:9;
}

#Layer11 {
position:absolute;
left:319px;
top:72px;
width:12px;
height:10px;
z-index: 2;
}

#Layer8 {
position:absolute;
left:302px;
top:98px;
width:791px;
height:48px;
z-index:10;
}
#Layer9 {
position:absolute;
left:299px;
top:40px;
width:32px;
height:20px;
z-index:0;
}
#Layer10 {
position:absolute;
left:1016px;
top:595px;
width:24px;
height:26px;
z-index:10;
}


and the html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" land="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles.css" rel="stylesheet" type="text/css">

</head>
<body>
<div id="top">
<h1 align="center" class="style3 style4">on The side, Inc. </h1>
<p align="center" class="style3">&nbsp;</p>
</div>

<div class="style2 style3" id="main">on The side is a value added promotional marketing organization focused on working with companies to make them more market-facing. We take time to learn about our clients' business model, industry and previous marketing agendas before taking a next step OR leap - if necessary.</div>
<div id="Layer1"></div>
<div id="flash" align="center">
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="425" height="400">
<param name="movie" value="main.swf">
<param name="quality" value="high">
<embed src="main.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="425" height="400"></embed>
</object>
</div>
<div id="Layer3"><a href="who.html"><img src="who.jpg" width="100" height="70" border="0"></a></div>
<div id="Layer4"><a href="what.html"><img src="what.jpg" width="100" height="70" border="0"></a></div>

<div id="Layer5"><a href="ideas.html"><img src="ideas.jpg" width="100" height="70" border="0"></a></div>
<div id="Layer6"><a href="why.html"><img src="why.jpg" width="100" height="70" border="0"></a></div>
</body>
</html>