SillyDog701

Message Centre 3.0

Skip to content

Adjusting Margins After Center Justifying

Need technical advice on coding your web pages? Covers HTML, JavaScript, CSS, and some server side technologies. Also the issue of some webpages not displayed well.

Moderator: Don_HH2K

Post a reply

Adjusting Margins After Center Justifying

Postby 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
kindaoverrated
new member
new member
 
Posts: 3
Joined: Fri 20 May, 2005 11:33 am
Top

Postby 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)
Laptop: HP Compaq nx6325 - Turion 64 X2 @ 2GHz, 2GB DDR2, 100GB HD, ATI Radeon X300, 15" LCD, Seven Pro
Handheld: Palm Treo 650 - Intel PXA270 @ 312MHz, 10MB RAM, 32MB flash, 2.7" LCD, Palm OS 5.4
User avatar
Don_HH2K
Moderator
Moderator
 
Posts: 5112
Joined: Sun 09 May, 2004 3:59 pm
Top

Postby 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+
akbash
silver member
silver member
 
Posts: 364
Joined: Mon 09 Feb, 2004 9:13 pm
Top
Post a reply

Return to Web Design and Page Coding

Who is online

Registered users: Google [Bot]

Powered by phpBB © phpBB Group
Cheap Web Hosting

support SillyDog701
[SillyDog701 home] [Netscape] [download NS] [MozInfo701] [MacCentre701] [Feedback] [Search] [Sitemap]
All messages posted in this forum do not necessarily represent SillyDog701. This forum is operated by Antony Shen. All rights reserved. Copyright Notice. Privacy Statement.		 get FirefoxMade on a Mac