SillyDog701

by **kindaoverrated** » Wed 01 Jun, 2005 10:07 pm

I know this is extremely basic, but after apply the <center> command to my html, how can i then adjust the Top margin?

here is what im working with:

Code: Select all: <center> <img src="http://www.hatesomethingbeautiful.com/riggedrecords/images/Left Graphic Continuation.jpg" width="79" height="45"> <a href="http://www.hatesomethingbeautiful.com/riggedrecords" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home','','http://www.hatesomethingbeautiful.com/riggedrecords/images/Home Button.gif',1)"> <img src="http://www.hatesomethingbeautiful.com/riggedrecords/images/Home Button.jpg" name="home" width="72" height="45" border="0"> </a> <a href="http://www.hatesomethingbeautiful.com/riggedrecords" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('news','','http://www.hatesomethingbeautiful.com/riggedrecords/images/News Button.gif',1)"> <img src="http://www.hatesomethingbeautiful.com/riggedrecords/images/News Button.jpg" name="news" width="72" height="45" border="0"> </a> <a href="http://www.hatesomethingbeautiful.com/riggedrecords" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('bands','','http://www.hatesomethingbeautiful.com/riggedrecords/images/Bands Button.gif',1)"> <img src="http://www.hatesomethingbeautiful.com/riggedrecords/images/Bands Button.jpg" name="bands" width="72" height="45" border="0"> </a> <a href="http://www.hatesomethingbeautiful.com/riggedrecords" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('tour','','http://www.hatesomethingbeautiful.com/riggedrecords/images/Tour Button.gif',1)"> <img src="http://www.hatesomethingbeautiful.com/riggedrecords/images/Tour Button.jpg" name="tour" width="72" height="45" border="0"> </a> <a href="http://www.hatesomethingbeautiful.com/riggedrecords" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('media','','http://www.hatesomethingbeautiful.com/riggedrecords/images/Media Button.gif',1)"> <img src="http://www.hatesomethingbeautiful.com/riggedrecords/images/Media Button.jpg" name="media" width="72" height="45" border="0"> </a> <a href="http://www.hatesomethingbeautiful.com/riggedrecords" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('info','','http://www.hatesomethingbeautiful.com/riggedrecords/images/Info Button.gif',1)"> <img src="http://www.hatesomethingbeautiful.com/riggedrecords/images/Info Button.jpg" name="info" width="72" height="45" border="0"> </a> <a href="http://www.hatesomethingbeautiful.com/riggedrecords" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('store','','http://www.hatesomethingbeautiful.com/riggedrecords/images/Store Button.gif',1)"> <img src="http://www.hatesomethingbeautiful.com/riggedrecords/images/Store Button.jpg" name="store" width="72" height="45" border="0"> </a> <a href="http://www.hatesomethingbeautiful.com/riggedrecords" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('links','','http://www.hatesomethingbeautiful.com/riggedrecords/images/Links Button.gif',1)"> <img src="http://www.hatesomethingbeautiful.com/riggedrecords/images/Links Button.jpg" name="links" width="72" height="45" border="0"> </a> <a href="http://www.hatesomethingbeautiful.com/riggedrecords" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('releases','','http://www.hatesomethingbeautiful.com/riggedrecords/images/Releases Button.gif',1)"> <img src="http://www.hatesomethingbeautiful.com/riggedrecords/images/Releases Button.jpg" name="releases" width="105" height="45" border="0"> </a> </center>

i also would like to eliminate the 5 pixel gap between images, that is apparently created due to a fault in my coding.

any help please!?

BBCode applied by Admin

UserAgent: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0

by **Don_HH2K** » Thu 02 Jun, 2005 4:01 pm

I believe you can fix all of this via CSS. If you're not using a stylesheet already, add this to the <HEAD> section of your document.

Code: Select all: <style type="text/css"> CENTER {margin-top: (howevermany)px;} IMG {margin-left: 0px; margin-right: 0px;} </style>

This is not different with XHTML, unless you want to do it the super-strict way, in which you need to define the stylesheet as CDATA, like this:

Code: Select all: <style type="text/css" xml:space="preserve" ><![CDATA[ CENTER {margin-top: (howevermany)px;} IMG {margin-left: 0px; margin-right: 0px;} ]]></style>

UserAgent: Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv:1.7.8) Gecko/20050511 Donzilla/0.7PR2 (WML/1.3; WML/1.2; WML/1.1; WML/1.0)

by **akbash** » Thu 02 Jun, 2005 11:15 pm

If you're trying to butt the topmost image right against the top of the window, it's actually the body element you're interested in:

Code: Select all: body { margin-top: 0px }

I don't think the <center> element adds a vertical margin.

All browsers seem to add a couple of pixels around every image, it isn't part of the image's margin, and I don't know a good, generalized method for collapsing it to nothing. Explicitly setting the image's margins to 0 doesn't change the layout in any browser I've tried.

UserAgent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8b2) Gecko/20050530 Firefox/1.0+

SillyDog701

Adjusting Margins After Center Justifying

Adjusting Margins After Center Justifying

Who is online