Rashidz Posted April 12, 2011 Share Posted April 12, 2011 hi plz i wanna put the buttons in center of the framei trying using positionement but it's not supported in other browsers plz helpthis is the image for detaillshttp://img59.imageshack.us/f/csscy.jpg/i wanna to put x in m where ( margin top = margin bottom ) supported by all browser Link to comment Share on other sites More sharing options...
jeffman Posted April 12, 2011 Share Posted April 12, 2011 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 More sharing options...
Rashidz Posted April 12, 2011 Author Share Posted April 12, 2011 tnx , but i don't undersand you bro.the probleme is when i add margin to te top of button , the height of frame (m) is growing also Link to comment Share on other sites More sharing options...
jeffman Posted April 12, 2011 Share Posted April 12, 2011 Post a link to the page, or post your HTML and CSS. Link to comment Share on other sites More sharing options...
Rashidz Posted April 12, 2011 Author Share Posted April 12, 2011 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 More sharing options...
cousineaug Posted April 12, 2011 Share Posted April 12, 2011 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 More sharing options...
Rashidz Posted April 14, 2011 Author Share Posted April 14, 2011 it work well in internet expolorerbut in mozila & chrom notplz bro check it23ko : http://www.megaupload.com/?d=KHLS8BWNtnx a lot Link to comment Share on other sites More sharing options...
Rashidz Posted April 15, 2011 Author Share Posted April 15, 2011 someone help plz .. Link to comment Share on other sites More sharing options...
dsonesuk Posted April 15, 2011 Share Posted April 15, 2011 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 More sharing options...
Rashidz Posted April 17, 2011 Author Share Posted April 17, 2011 now it's well :)tnxxxxxxxx a lot bro Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.