Jump to content

plz help background margin


Rashidz

Recommended Posts

If you know how high the frame is and how high the buttons are, subtract the height of the frame from the combined height of all the buttons (plus their margins, padding, and borders). Now you have the total available space. Divide that by two to find how high each margin should be. Assign that value to the margin-top of the top button.

Link to comment
Share on other sites

this is the page ( html & css )(transpart.png is the fram & 1.jpg is the button)************************************************<style type="text/css">* {margin : 0 ; padding : 0}#m { margin-top:150; background-image:url("transpar.png") ; width:260px ; height:260px; }.b img { border :0 }.b { margin-top:1px ; }body { background-color:gray}#menu { margin-top:20px ; padding:3px }</style><center><div id="m" ><div id="menu" ><div class="b"><a href="#" > <img src="1.jpg" > </a></div><div class="b"><a href="#" > <img src="1.jpg" > </a></div><div class="b"><a href="#" > <img src="1.jpg" > </a></div><div class="b"><a href="#" > <img src="1.jpg" > </a></div><div class="b"><a href="#" > <img src="1.jpg" > </a></div></div></div>******************************************it work well in mozila , but in iexplorer and googleChrom no

Link to comment
Share on other sites

There are a couple of things wrong with your code. I will explain as I go along. This is close to working but the math is not quite right yet. I did not know the size of your images so I guessed.

<head><style type="text/css">* {margin : 0; padding : 0}#m { margin-top:150px;  background-image:url("transpar.png"); width:260px; height:260px; }/*margin-top was missing a unit - you said 150 and some browsers may assume that means pixels but not everybody agrees*/.b img { border:0; width:200px; height:40px;}/*if all images the same size then specify here.  It is easier if the browser knows ahead of time the size of the picture*//*now we need to do the math*//*5 images at 40 = 200*//*the box is 260 high*//*so we pad the first image by 30px*/.b img.top {padding-top:30px;}/*but you added another 5 px with margin top on 'b'  so 28 or 27 above should be right*/.b { margin-top:1px; }body { background-color:gray}/*I believe the only reason for this is to try to centre so remove it or adjust the arithmetic accordingly*/#menu { margin-top:20px; padding:3px }</style></head><body><center><div id="m" ><!-- <div id="menu" >  --><div class="b"><!--give the first one a bigger top margin--><a href="#" > <img class="top" src="1.jpg" > </a></div><!-- there are easier ways to target the first element of this group but we will keep simple for now  --><div class="b"><a href="#" > <img src="1.jpg" > </a></div><div class="b"><a href="#" > <img src="1.jpg" > </a></div><div class="b"><a href="#" > <img src="1.jpg" > </a></div><div class="b"><a href="#" > <img src="1.jpg" > </a></div></div><!--</div> --></body>

Also, you should assign a default background color to #m. That way if the image does nto load for any reason you still get a color to highlight it.Hope this helps...........Guy

Link to comment
Share on other sites

your design for menu, is suffering from divitis, collapsing margins issue, and would be more manageable if you used background image for anchor links rather than using img tag for menu buttons.

<body><center><div id="m"><div id="menu"><a href="#" >Home</a><a href="#" >Contact</a><a href="#" >About Us</a><a href="#" >Destinations</a><a href="#" >Stories</a></div></div></center></body>

<style type="text/css">* {margin: 0; padding: 0;}body { background-color:gray;}p{margin:0.9em;}#m { margin-top:150px;  background:url(transpar.png) no-repeat 0 0 transparent; width:260px; height:260px; overflow:hidden; }#menu { /*margin-top:7px; for 5 menu buttons*/ margin-top:33px; /*for 4 menu buttons*/}#menu a { display:block; width:235px; height:47px; background:url(1.jpg) no-repeat 0 0 transparent; margin-top:3px; color: #666; line-height:47px; text-decoration:none; }</style>

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...