Issues with site resizing

HTML & CSS
1

hi there peeps, here is the issue i am trying to learn css and have hit bit of a brickwall…

what i am trying to achieve is this to create the site so that when i change the browser window the site remains centred at the moment it moves if i resize the window how do i achieve this to remain centred here is the site so far its still a work in progress…

404 Page Not Found! tesst2/index.html

thanks

2

Try putting a wrapper div around your content, and set the wrapper to use: margin:0 auto;

That will set the top and bottom margins to 0 and the left and right margins to auto.

BTW, you link appears to have an issue, maybe a space?

3

Better link? Untitled Document

4

opps sorry about that [url=http://test-bench.99k.org/mfoam test2/test.html/url]

i would like to achieve the feel that the browser fits the window no matter what the size! there seems to be a big space on the right how do i cure that issue?

5

Let’s try again: Untitled Document

6

You actually have more important issues with the resizing (parts floating over things).

If you put your entire content in a wrapper div, you can set the wrapper to have margin:0 auto; and the left and right margins will be equal for all screen sizes.

your CSS would have:


#wrapper {margin:0 auto;}

and the html would be:


<div id="wrapper">
content goes here
</div>
7

Yeah, welcome to why you don’t put spaces in filenames or directory names online…

There’s a lot of HTML, CSS and other oddities in here that frankly, I wouldn’t have in there in the first place. Even as a working code the two separate stylesheets when you don’t even have media targets, use of transitional basically saying you’re writing code like it’s still 1998, over the top non-semantic use of ENDLESS wrapping div for nothing, the made up fictional FB tags that would make me tell facebook where to shove it, and a number of DIV that don’t even look like they’re closed where they should be (the willy-nilly oddball indenting scheme a possible culprit for that).

I’d REALLY recommend taking a giant axe to that flash for nothing animooted bull. Has no business even being on a website.

You’ve also got some just plain outright bizzare nonsense in there, like the “list1” class on every anchor. If they’re all getting the same class inside one parent tag (like UL) they don’t need a class! the H1/h2 pairing also should probably be only one heading because, well… you aren’t starting a section and a subsection, you’re just starting ONE section… Worse is the use of a H4 around plaintext for no good reason, without even having a h3 in-between on what are quite obviously just paragraphs of content text!

The inlining of style in the footer, use of vertical breaks all around what should just be a list… not great either… and you’ve got a presentational image behind text in there with a IMG tag? That doesn’t even make sense.

So, first order of business is cleaing up the markup… which should probably go something like this:


<!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="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Untitled Document
</title>

</head><body>

<div id="pageWrapper" class="home">
	<h1>
		Mfoam<br />
		<small>Pressure Relieving Solutions</small>
		<span><!-- image replacement --></span>
	</h1>

	<div id="flashHeader">
		<!--[if IE]>
			<object
				classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
				width="600" height="100"
			>
		<![endif]-->
		<!--[if !IE]>-->
			<object
				type="application/x-shockwave-flash"
				data="http://test-bench.99k.org/mfoam%20test2/flash/mfoam_flash.swf"
				width="600" height="100"
			>
		<!--<![endif]-->
			<param name="movie" value="http://test-bench.99k.org/mfoam%20test2/flash/mfoam_flash.swf" />
			<param name="quality" value="high" />
			<param name="bgcolor" value="#000000" />
			<param name="play" value="true" />
			<param name="loop" value="true" />
			<param name="wmode" value="window" />
			<param name="scale" value="showall" />
			<param name="menu" value="true" />
			<param name="devicefont" value="false" />
			<param name="salign" value="" />
			<param name="allowScriptAccess" value="sameDomain" />
			<a href="http://www.adobe.com/go/getflash">
				<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player">
			</a>
		</object>
	<!-- #flashHeader --></div>

	<div class="socialLinks">
		<a href="http://twitter.com/share" class="twitter-share-button">Tweet</a>
		<div id="fb-root"></div>
		<script
			src="http://connect.facebook.net/en_US/all.js#appId=180008755386902&amp;xfbml=1"
		></script>
		<!-- the following is why FB dev's need to hang their sleazeball heads in shame -->
		<fb:like href="" send="true" layout="button_count" width="450" show_faces="true" font="arial"
		></fb:like>
	<!-- .socialLinks --></div>

	<ul id="mainMenu">
		<li><a href="#">Home</a></li>
		<li>
			<a href="#">Mfoam</a>
			<ul>
				<li><a href="#">Visco Elastic Foam</a></li>
				<li><a href="#">Manufacturing Process</a></li>
				<li><a href="#">Compliance</a></li>
			</ul>
		</li>
		<li><a href="#">Products</a>
			<ul>
				<li><a href="#">OT Mattresses</a></li>
				<li><a href="#">Bariatic Matresses</a></li>
				<li><a href="#">Accessories</a></li>
			</ul>
		</li>
		<li><a href="#">Pressure Relief</a>
			<ul>
				<li><a href="#">Pressure Mapping</a></li>
				<li><a href="#">Pressure Sores</a></li>
			</ul>
		</li>
		<li><a href="#">Our Partners</a>
			<ul>
				<li><a href="#">OEM Manfacturers</a></li>
				<li><a href="#">Become A Partner</a></li>
				<li><a href="#">Testimonials</a></li>
			</ul>
		</li>
	</ul>

	<div id="sideBar">

		<div id="subNavigation">
			<h2>Navigation:</h2>
			<ul>
				<li><a href="#">Link 1</a></li>
				<li><a href="#">Link 2</a> </li>
				<li><a href="#">Link 3</a> </li>
				<li><a href="#">Link 4</a> </li>
			</ul>
		<!-- #subNavigation --></div>

		<div id="newsList">
			<h2>News</h2>
			<ul>
				<li>
					<span>00.11.22 <span>-</span></span>
					<a href="#"News Article title AS link</a>
				</li><li>
					<span>00.11.22 <span>-</span></span>
					<a href="#"News Article title AS link</a>
				</li><li>
					<span>00.11.22 <span>-</span></span>
					<a href="#"News Article title AS link</a>
				</li><li>
					<span>00.11.22 <span>-</span></span>
					<a href="#"News Article title AS link</a>
				</li><li>
					<span>00.11.22 <span>-</span></span>
					<a href="#"News Article title AS link</a>
				</li><li>
					<span>00.11.22 <span>-</span></span>
					<a href="#"News Article title AS link</a>
				</li><li>
					<span>00.11.22 <span>-</span></span>
					<a href="#"News Article title AS link</a>
				</li>
			<ul>
		<!-- #sideBarNews --></div>

	<!-- #sideBar --></div>

	<div id="content">
		<h2>
			Welcome to MFOAM
			<small>a market leader in pressure relieving solutions for the medical industry</small>
		</h2>
		<p>
			MFOAM is a subsidiary of <a href="#" text-decoration="none">Richardson Healthcare Limited.</a> The company has over 50 years experience in the development and manufacture of support systems for operating tables.
		</p><p>
			MFOAM mattresses and accessories are the result of an extensive research and development program. We tested numerous foams from the world's leading manufacturers until the ideal combinations were found.
		</p><p>
			Unlike like many other support systems available, MFOAM uses multi density foam technology to optimise pressure reduction and offer a superior product for the industry.
		</p><p>
			MFOAM mattresses are widely available from many OEMs and are used on operating tables around the world.
		</p>
	<!-- #content --></div>

	<div id="footer">
		<ul>
			<li><a href="#">sitemap</a></li>
			<li><a href="#">xml</a></li>
			<li class="last"><a href="#">news</a></li>
		</ul>
		&copy; Mfoam 2001
	<!-- #footer --></div>

<!-- #pageWrapper --></div>

</body></html>

Notice the consistent indentation letting me line up all my closing tags, the use of heading orders allowing me to properly have the h1 before all content (start of the main section), with the sub-headings all the start of subsections.
Closing comments on a… major </div> make sure I know which one is being closed – I put them before the tag so as to avoid a couple IE rendering bugs (dissapearing content and double render) as well as one that rears it’s ugly head every time a new version of FF decides to have a code regression.

Pitches about a fifth of the code in the trash, while keeping more than enough hooks and wrappers to apply the styling you were trying to accomplish.

I’m out the door for dinner/late lunch out, but when I get back I’ll belt out some example CSS, and if I have time I’ll do up one of my famous “section by section” breakdowns explaining the HTML, CSS and why I choose the tags, attributes and CSS properties that I do.

8

thanks for that i really appreciated that you told me what i needed to know, and showed me the best way to achieve this on my learning curve, the offer of volume 2 is much appreciated and needed i think :slight_smile: thanks i will compare the 2 and see what i have learned!

9

Wow, even in cleaning up that markup I left a lot of bugs in… Finally got it cleaned up and working “how I’d do it”

http://www.cutcodedown.com/for_others/timski08/site2/template.html

as usual the directory:

Index of /for_others/timski08/site2

is wide open for easy access to the bits and pieces.

I probably won’t have time tonight as I’ve got some real coding to do, but if I have time tomorrow I’ll put together an explanation of the how/why/where for that.