Hi,<br /><br />I'm very new to all this so please go easy!<br /><br />I'm creating a web page by placing a group of image slices using absolute postioning <br /><br />e.g. <IMG STYLE="position:absolute; TOP:0px; LEFT:0px; WIDTH:36px; HEIGHT:128px" SRC=http://www.webdesignerforum.co.uk/lofiversion/index.php/"Web-concept-2-pg2_01.gif"> and then all the other images in their respective positions, you get the idea...<br /><br />I have managed to get a coloured background behind the group of images but I need the whole group to sit in the centre of the page, how do I do this?<br /><br />Thanks <img src="http://www.webdesignerforum.co.uk/style_emoticons/default/unsure.gif" style="vertical-align:middle" emoid=":unsure:" border="0" alt="unsure.gif" /><!--content-->
I don't get what you mean. <img src="http://www.webdesignerforum.co.uk/style_emoticons/default/unsure.gif" style="vertical-align:middle" emoid=":unsure:" border="0" alt="unsure.gif" /> Can you post a link?<!--content-->
I was about to type out a solution, but then thought it's best if we know what you've got already, in order to comment properly. If you can post a link to your page, or paste your code here, then we'll be in a better position to help you. Have you got your elements inside a container <div>? It's best to create a container div and centre that on the page and then put your elements within that.<!--content-->
I have barely started yet (as you can see!), but here's what I've got so far. I will have loads more images in there which will all go together to make one big image in the end (but need to be sliced up to create links) which I want in the centre of the page. Is this enough to go off?<br /><br /><br /><br /><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"<br /><br /> "http://www.w3.org/TR/html4/loose.dtd"><br /><html><br /><br /><head><br /> <title> Orangutan Creative </title><br /></head><br /><body><br /><body bgcolor="#333333"><br /><IMG STYLE="position:absolute; TOP:0px; LEFT:0px; WIDTH:36px; HEIGHT:128px" SRC=http://www.webdesignerforum.co.uk/lofiversion/index.php/"Web-concept-2-pg2_01.gif"><br /><br /><IMG STYLE="position:absolute; TOP:0px; LEFT:36px; WIDTH:74px; HEIGHT:128px" SRC=http://www.webdesignerforum.co.uk/lofiversion/index.php/"Web-concept-2-pg2_02.gif"><br /><br /><br /><br /></body><br /><br /><br /></html><br /><!--content-->
i am unsure if this will work but it works when the text,images etc is in a table its the best solution:<br /><br /><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"<br /><br />"http://www.w3.org/TR/html4/loose.dtd"><br /><html><br /><br /><head><br /><title> Orangutan Creative </title><br /></head><br /><body><br /><body bgcolor="#333333"><br /><u><center></u><br /><IMG STYLE="position:absolute; TOP:0px; LEFT:0px; WIDTH:36px; HEIGHT:128px" SRC=http://www.webdesignerforum.co.uk/lofiversion/index.php/"Web-concept-2-pg2_01.gif"><br /><br /><IMG STYLE="position:absolute; TOP:0px; LEFT:36px; WIDTH:74px; HEIGHT:128px" SRC=http://www.webdesignerforum.co.uk/lofiversion/index.php/"Web-concept-2-pg2_02.gif"><br /><br /><br /><br /></body><br /></html><br /><br />If this doest work then put the images in a table and then center it with the centre tags (underlined above). It would be best if you can just dreamweaver or other web publishing software there is a free 30 day trial for it on the adobe site, once you use it you'll never go back!!<br /><br /><!--content-->
This is bad advice.<br /><br />Don't use web wysiwyg editors unless you understand HTML and CSS properly. Separate content from presentational code correctly and don't use absolute positioning unless you understand why you're using that method. <br /><br />Floating elements for positioning is a much tidier solution.<br /><br /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1--><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><br /><html lang ="en"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><br /><title> Orangutan Creative </title><br /><style type="text/css"><br />* {<br />Â Â Â Â padding: 0;<br />Â Â Â Â margin: 0;Â Â Â Â <br />}<br />html {<br />Â Â Â Â min-height: 100.1% /* scrollbar fix for firefox */Â Â Â Â <br />}<br />body {<br />Â Â Â Â width: 110px;<br />Â Â Â Â margin: 0 auto;<br />Â Â Â Â background-color: #333;<br />}<br />#image1 {<br />Â Â Â Â float: left;<br />Â Â Â Â width: 36px;<br />Â Â Â Â height: 128px;Â Â Â Â <br />}<br />#image2 {<br />Â Â Â Â float: left;<br />Â Â Â Â width: 74px;<br />Â Â Â Â height: 128px;Â Â Â Â <br />}<br /></style><br /><br /></head><br /><body><br />Â Â Â Â <div id="container"><br />Â Â Â Â Â Â Â Â <img id="image1" src=http://www.webdesignerforum.co.uk/lofiversion/index.php/"Web-concept-2-pg2_01.gif" alt=""><br />Â Â Â Â Â Â Â Â <img id="image2" src=http://www.webdesignerforum.co.uk/lofiversion/index.php/"Web-concept-2-pg2_02.gif" alt=""><br />Â Â Â Â </div><br /></body><br /></html><!--c2--></div><!--ec2--><br /><br />I've set the width on the body to the size of these images as I'm not sure if there's anymore code to this layout. You could always apply the same principle on the container or create a <div id="header"> and apply the width and margins to that instead.<br /><br />(Whilst the container isn't actually required for this page, I've included it as it would be required if there is further content to be added.)<br /><br />Hope that helps.<!--content-->
I don't get what you mean. <img src="http://www.webdesignerforum.co.uk/style_emoticons/default/unsure.gif" style="vertical-align:middle" emoid=":unsure:" border="0" alt="unsure.gif" /> Can you post a link?<!--content-->
I was about to type out a solution, but then thought it's best if we know what you've got already, in order to comment properly. If you can post a link to your page, or paste your code here, then we'll be in a better position to help you. Have you got your elements inside a container <div>? It's best to create a container div and centre that on the page and then put your elements within that.<!--content-->
I have barely started yet (as you can see!), but here's what I've got so far. I will have loads more images in there which will all go together to make one big image in the end (but need to be sliced up to create links) which I want in the centre of the page. Is this enough to go off?<br /><br /><br /><br /><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"<br /><br /> "http://www.w3.org/TR/html4/loose.dtd"><br /><html><br /><br /><head><br /> <title> Orangutan Creative </title><br /></head><br /><body><br /><body bgcolor="#333333"><br /><IMG STYLE="position:absolute; TOP:0px; LEFT:0px; WIDTH:36px; HEIGHT:128px" SRC=http://www.webdesignerforum.co.uk/lofiversion/index.php/"Web-concept-2-pg2_01.gif"><br /><br /><IMG STYLE="position:absolute; TOP:0px; LEFT:36px; WIDTH:74px; HEIGHT:128px" SRC=http://www.webdesignerforum.co.uk/lofiversion/index.php/"Web-concept-2-pg2_02.gif"><br /><br /><br /><br /></body><br /><br /><br /></html><br /><!--content-->
i am unsure if this will work but it works when the text,images etc is in a table its the best solution:<br /><br /><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"<br /><br />"http://www.w3.org/TR/html4/loose.dtd"><br /><html><br /><br /><head><br /><title> Orangutan Creative </title><br /></head><br /><body><br /><body bgcolor="#333333"><br /><u><center></u><br /><IMG STYLE="position:absolute; TOP:0px; LEFT:0px; WIDTH:36px; HEIGHT:128px" SRC=http://www.webdesignerforum.co.uk/lofiversion/index.php/"Web-concept-2-pg2_01.gif"><br /><br /><IMG STYLE="position:absolute; TOP:0px; LEFT:36px; WIDTH:74px; HEIGHT:128px" SRC=http://www.webdesignerforum.co.uk/lofiversion/index.php/"Web-concept-2-pg2_02.gif"><br /><br /><br /><br /></body><br /></html><br /><br />If this doest work then put the images in a table and then center it with the centre tags (underlined above). It would be best if you can just dreamweaver or other web publishing software there is a free 30 day trial for it on the adobe site, once you use it you'll never go back!!<br /><br /><!--content-->
This is bad advice.<br /><br />Don't use web wysiwyg editors unless you understand HTML and CSS properly. Separate content from presentational code correctly and don't use absolute positioning unless you understand why you're using that method. <br /><br />Floating elements for positioning is a much tidier solution.<br /><br /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1--><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><br /><html lang ="en"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><br /><title> Orangutan Creative </title><br /><style type="text/css"><br />* {<br />Â Â Â Â padding: 0;<br />Â Â Â Â margin: 0;Â Â Â Â <br />}<br />html {<br />Â Â Â Â min-height: 100.1% /* scrollbar fix for firefox */Â Â Â Â <br />}<br />body {<br />Â Â Â Â width: 110px;<br />Â Â Â Â margin: 0 auto;<br />Â Â Â Â background-color: #333;<br />}<br />#image1 {<br />Â Â Â Â float: left;<br />Â Â Â Â width: 36px;<br />Â Â Â Â height: 128px;Â Â Â Â <br />}<br />#image2 {<br />Â Â Â Â float: left;<br />Â Â Â Â width: 74px;<br />Â Â Â Â height: 128px;Â Â Â Â <br />}<br /></style><br /><br /></head><br /><body><br />Â Â Â Â <div id="container"><br />Â Â Â Â Â Â Â Â <img id="image1" src=http://www.webdesignerforum.co.uk/lofiversion/index.php/"Web-concept-2-pg2_01.gif" alt=""><br />Â Â Â Â Â Â Â Â <img id="image2" src=http://www.webdesignerforum.co.uk/lofiversion/index.php/"Web-concept-2-pg2_02.gif" alt=""><br />Â Â Â Â </div><br /></body><br /></html><!--c2--></div><!--ec2--><br /><br />I've set the width on the body to the size of these images as I'm not sure if there's anymore code to this layout. You could always apply the same principle on the container or create a <div id="header"> and apply the width and margins to that instead.<br /><br />(Whilst the container isn't actually required for this page, I've included it as it would be required if there is further content to be added.)<br /><br />Hope that helps.<!--content-->