jasonc Posted November 21, 2011 Share Posted November 21, 2011 I have been playing around with the code and just can not get this image to be in the center of the page. How do I do this correctly? <!DOCTYPE HTML> <html> <head> <title>.........</title> </head> <body bgcolor="641416" link="#000000" vlink="#000000" alink="#000000" onload="switchAd(this);"> <div style="width: 760px; align: center;"><img src="images/header4.jpg" alt=""></div> </body> </html> Quote Link to comment Share on other sites More sharing options...
ZulfadlyAshBurn Posted November 21, 2011 Share Posted November 21, 2011 done. <div style="width: 760px;text-align:center;margin:0 auto;"><img src="images/header4.jpg" alt=""></div> Quote Link to comment Share on other sites More sharing options...
jasonc Posted November 21, 2011 Author Share Posted November 21, 2011 great thank you Quote Link to comment Share on other sites More sharing options...
ZulfadlyAshBurn Posted November 21, 2011 Share Posted November 21, 2011 No problem, please mark topic as solved. If my pleasure to help people xD Quote Link to comment Share on other sites More sharing options...
Frank P Posted November 21, 2011 Share Posted November 21, 2011 done. <div style="width: 760px;text-align:center;margin:0 auto;"><img src="images/header4.jpg" alt=""></div> There is no need to declare a width and a margin:auto for the div. Just text-align:center will do. See How to Center in CSS. Quote Link to comment Share on other sites More sharing options...
ZulfadlyAshBurn Posted November 21, 2011 Share Posted November 21, 2011 There is no need to declare a width and a margin:auto for the div. Just text-align:center will do. See How to Center in CSS. there is a need to declare a margin:0 auto; because he wants the div to be at the center of the website. where the width is consent, its probably something to do with the rest of the code, you can predict he don't need it unless you read the whole code. Quote Link to comment Share on other sites More sharing options...
jasonc Posted November 21, 2011 Author Share Posted November 21, 2011 now this is strange i can not get the image to be in the style, the image does not show up. re the rest of my code, there is no other code yet i am redoing a tabled page from scratch so adding in the parts bit by bit. <!DOCTYPE HTML> <html> <head> <title>.........</title> </head> <body bgcolor="641416" link="#000000" vlink="#000000" alink="#000000" onload="switchAd(this);"> <div style="width: 100%; text-align:center; margin:0 auto; background-image: url("images/header4.jpg"); background-repeat: no-repeat;"></div> </body> </html> Quote Link to comment Share on other sites More sharing options...
ZulfadlyAshBurn Posted November 21, 2011 Share Posted November 21, 2011 you must have some contents in the div for the background image to show up. <div style="width: 100%; text-align:center; margin:0 auto; background-image: url(images/header4.jpg); background-repeat: no-repeat;"></div> or you can set a minimum height to the same height as the image <div style="width: 100%; text-align:center; margin:0 auto; background-image: url(images/header4.jpg); background-repeat: no-repeat;min-height:100px;"></div> Quote Link to comment Share on other sites More sharing options...
ZulfadlyAshBurn Posted November 21, 2011 Share Posted November 21, 2011 I would recommend using width: 100%; unless you have a parent div which have a static width such as 760px Quote Link to comment Share on other sites More sharing options...
jasonc Posted November 21, 2011 Author Share Posted November 21, 2011 there is currently no parent div, probably won't be. the code i have given is the complete code to date and will be adding in the rest of the backgound images top to bottom and then having the text added over the top of the images. this code send the image to the left of the page, not to the center? <!DOCTYPE HTML> <html> <head> <title>.........</title> </head> <body bgcolor="641416" link="#000000" vlink="#000000" alink="#000000" onload="switchAd(this);"> <div style="width: 100%; height: 192px; text-align:center; margin:0 auto; background-image: url("images/header4.jpg"); background-repeat: no-repeat;"> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
ZulfadlyAshBurn Posted November 21, 2011 Share Posted November 21, 2011 just set the background-position to center <div style="width: 100%; height: 192px; text-align:center; margin:0 auto; background-image: url(images/header4.jpg); background-repeat: no-repeat;background-position:center;"> </div> Quote Link to comment Share on other sites More sharing options...
jasonc Posted November 21, 2011 Author Share Posted November 21, 2011 ok added in the backgound image to be centered code and now the page is starting to look good apart from the gap between the top and bottom of all the images <!DOCTYPE HTML> <html> <head> <title>.........</title> </head> <body bgcolor="641416" link="#000000" vlink="#000000" alink="#000000" onload="switchAd(this);"> <div style="width: 100%; height: 100%; text-align:center; margin:0 auto;"> <div style="width: 100%; height: 192px; text-align:center; margin:0 auto; background-image: url("images/header4.jpg"); background-repeat: no-repeat; background-position:center;"></div> <div style="width: 100%; height: 100px; text-align:center; margin:0 auto; background-image: url("images/navi.jpg"); background-repeat: no-repeat; background-position:center;">nav</div> <div style="width: 100%; height: 100%; text-align:center; margin:0 auto; background-image: url("images/pgbackgrd.jpg"); background-repeat: repeat-y; background-position:center;">MAIN CONTENT, IMAGE NEEDS TO REPEAT DOWN PAGE.</div> <div style="width: 100%; height: 100px; text-align:center; margin:0 auto; background-image: url("images/bottombanner.jpg"); background-repeat: no-repeat; background-position:center;"></div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
ZulfadlyAshBurn Posted November 21, 2011 Share Posted November 21, 2011 so now is there anymore problems? Quote Link to comment Share on other sites More sharing options...
jasonc Posted November 21, 2011 Author Share Posted November 21, 2011 using the code in my last post i get a gap between the vertical images. Quote Link to comment Share on other sites More sharing options...
ZulfadlyAshBurn Posted November 21, 2011 Share Posted November 21, 2011 upload your image i think there is white spaces in the image Quote Link to comment Share on other sites More sharing options...
jasonc Posted November 21, 2011 Author Share Posted November 21, 2011 i have opened all the images in MS Photo editor and there are no white spaces Quote Link to comment Share on other sites More sharing options...
jasonc Posted November 21, 2011 Author Share Posted November 21, 2011 here is a zip of the project so far... [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
Frank P Posted November 21, 2011 Share Posted November 21, 2011 there is a need to declare a margin:0 auto; because he wants the div to be at the center of the website. I don't think so. This is all he asked: I have been playing around with the code and just can not get this image to be in the center of the page. How do I do this correctly? Quote Link to comment Share on other sites More sharing options...
ZulfadlyAshBurn Posted November 21, 2011 Share Posted November 21, 2011 I don't think so. This is all he asked: I have been playing around with the code and just can not get this image to be in the center of the page. How do I do this correctly? yes, but bear in mind, he is using a div with a static width from the code given. margin:0 auto; is thus required. he didn't state that he only wants it to be in the center of the div but instead, he wants it center of the page. debate is over bro. Quote Link to comment Share on other sites More sharing options...
jasonc Posted November 21, 2011 Author Share Posted November 21, 2011 what my problem is now is that the text is jumping outside the divs. <!DOCTYPE HTML> <html> <head> <title>.........</title> <style> <!-- .header { width: 100%; height: 192px; text-align: center; margin: 0; background: url(header4.jpg) center top no-repeat; } .nav { width: 100%; height: 100%; text-align: center; margin: 0; background: url(navi.jpg) center top no-repeat; } .main { width: 100%; min-height: 100px; text-align: center; margin: 0; background: url(pgbackgrd.jpg) center top repeat-y; } .footer { width: 100%; height: 100px; text-align: center; margin: 0; background: url(bottombanner.jpg) center top no-repeat; } --> </style> </head> <body bgcolor="641416" link="#000000" vlink="#000000" alink="#000000" onload="switchAd(this);"> <div style="width: 100%; height: 100%; text-align: center; margin: 0 auto;"> <div class="header"></div> <div class="nav">nav</div> <div class="main">MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT v</div> <div class="footer">f</div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
jasonc Posted November 21, 2011 Author Share Posted November 21, 2011 gosh, no it is within the div i forgot the div is 100%!! ok how do i have text in the div so it does not go outside the lines inside the images ? Quote Link to comment Share on other sites More sharing options...
jasonc Posted November 21, 2011 Author Share Posted November 21, 2011 ok done a slight mockup of what i am looking for.. but so that if the page is full size the text is still within the lines. [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
ZulfadlyAshBurn Posted November 21, 2011 Share Posted November 21, 2011 I don't understand your question o.0 Quote Link to comment Share on other sites More sharing options...
Frank P Posted November 21, 2011 Share Posted November 21, 2011 debate is over bro. A debate is over when both debaters agree that it is over or when a referee says so. Not if just one party says it's over. Quote Link to comment Share on other sites More sharing options...
jasonc Posted November 22, 2011 Author Share Posted November 22, 2011 re the debate.... I do want the div to be in the center. I do want the images to be centered in the div and have the site container also centered. The code I provided in the first post was the full code and I then added to it to ensure that the other images in the next set of divs also showed correctly. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.