dtuhy 0 Report post Posted February 24, 2007 Ok so i just started learn html about a couple of weeks ago and i make a background image using this code: <style type="text/css">body { background-image:url("http://img.photobucket.com/albums/w59/tuhyd/backgrounds.jpg"); background-repeat: no-repeat}</style> and i am having trouble putting my text on the top in the center becasue my links are on the left every time i try and move the text up it moves the links down and separates them and i don't know what to do. Notice from serverph: added code tags. please use appropriate bbcodes as needed. Share this post Link to post Share on other sites
Kubi 0 Report post Posted February 24, 2007 Have you tryed just adding text to the image with photoshop or paint?Can you try this? <div align="center">Text</div> Share this post Link to post Share on other sites
jlhaslip 4 Report post Posted February 24, 2007 Usually, the text is inside of a "container" like a div, a paragraph or a span, etc. <body><div><p> Some Text Here </p></div>The way to get that "container" into the centre would be to set the left and right margins to 'auto', like this:[code]div { margin-left: auto; margin-right: auto; }That is the code you need, but IE doesn't get it right. IE understands div { text-align:center; } So to get in right in most browsers, simply combine the two rules into a single rule as follows :div { margin-left: auto; margin-right: auto; text-align:center; } That should do it for centring horizontally. Centring vertically is a little different. Set some margin-top to the div is the easy way, for now. start with a number and change it to suit. I'll start with 300px.div { margin-left: auto; margin-right: auto; text-align:center; margin-top: 300px; } Share this post Link to post Share on other sites
dtuhy 0 Report post Posted February 24, 2007 Well i have the image up there and it work the problem was that when i put my links and stuff on the left and them i try putting other text in the middle when i do that the links move down a separate, and i used paint to make this if that makes a difference(idk) Share this post Link to post Share on other sites
jlhaslip 4 Report post Posted February 24, 2007 Can you post your code or give a link to the code, please. it makes it easier to review the entire code for suggestions. Thanks. Share this post Link to post Share on other sites
dtuhy 0 Report post Posted February 24, 2007 <html> <head><style type="text/css">body { background-image:url("http://forums.xisto.com/no_longer_exists/404.png;); background-repeat: no-repeat; background-color:#000000;}#links{ width: 92px;height:100%;position: absolute; left: 1px;background-color:#000000;margin-left:0px;align: left;top:35px;} #main{ width: 100%px;height:100%;position: absolute; left: 99px;background-color:#000000;margin-left:0px;align: left;top:35px;}#header{ position: absolute; left: 512px;background-color:#000000;margin-left:0px;align: left;top:10px;} </style></head> <body><div id="header"><font color="green"><font size=4><b>Tuhy's Space</b></font></font></div><div id="links"><font color="white"><b><u>Links</u></b></font><br><a href="aboutme.html">About Me</a><br> <a href="soccer.html">Soccer</a><br><a href="games.html">Games</a><br><a href="vidoes.html">Vidoes</a><br><a href="homework.html">Homework</a><br><a href="chat.html">Chat</a></div><div id="main"><font color=white><center><p>Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â About my website: This website was recently made for my Website Design Class.<br>Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â The links on the Left are things that i enjoy to do and the games,videos are for your enjoyment, if you would <br>Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â like me to add a video or a game send me an email at dtuhy17@yahoo.com or if you would like <br>Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â to give me some tips on other things to put in here.This site is not yet finsihed an probably<br> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â will never be finished becasue i will be adding thingsas i go along. Thank you for Visiting <br>Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â My Website</center></text></div>ok so thats the whole code i got the the thing that i wanted to get working but let me know if you have any suggestions</div></body></html> Notice from serverph: to enclose longer codes, use codebox tags. please use appropriate bbcodes as needed. Share this post Link to post Share on other sites
matak 2 Report post Posted February 24, 2007 You need to enclose your div tags between div wrapper like so: <div id="wrapper"><div id="links">Links Code</div><div id="main">Main Code</div></div> Now you add css something like this div wrapper {width: 100%;}div wrapper links {width: 10%;}div wrapper main {width: 90%;text-align: center;} I think that should work right... Share this post Link to post Share on other sites
jlhaslip 4 Report post Posted February 24, 2007 I cleaned up a bunch of stuff for you. :PRemoved all the absolute positioning, and set some margins instead of using <br /> tags for spacing, centred only those items which mattered, etc.The only problem with this page, according to the validator, is the including of the style in the page itself. When you create a seperate css file and remove the css styling from this page, it should then validate to xhtml 1 strict, as per the dtd I used. Other than that, don't forget to study this page and figure it out before you use it as an assignment. The teacher will definitely figure out that you have cut and pasted the code if you don't know how it was designed.One way to assist you in figuring the design out is to use the Firefox Web Developer Extension. It lets you outline the div's and elements on the page. Check it out.The basic design of this page is a wrapper div which contains the Header, a content div, and a footer. Inside the content div is a nav div and an inner div. The Inner div is Floated left against the nav div.All the deprecated tags have been removed as well. The Font and Center tags are html 3.2 (old), so they shouldn't be used in today's pages. Since they are 'deprecated, some Browsers still use them, but the correct method is to use 'class' to define a style for them and assign the class to the elements which use that style. I have used a class on one of the paragraphs as a demonstration of its use.  <meta http-equiv="Content-Style-Type" content="text/css" /> <link type="text/css" rel="stylesheet" href="style.css" media="all" /></head><style type="text/css">* html { margin: 0; padding:0; height:100%; } body { background-color: #000000; color: #ffffff; }#wrap { margin: 0 auto; padding : 0 auto; text-align: center; height: 100%; min-height: 190px; }#header { }#nav { width: 150px ; float: left; }#content { text-align: center; }#wrap { }#inner { margin: 0 auto 0 155px; padding: 0; }#footer { margin: 0 auto ; padding : 0 auto; text-align: center; width: 100%; clear:both; }h1 { margin: 0; padding:0; color: green; }h2 { margin: 0; padding:0; }.classy { background-color: #ff6666; color: #0000ff; } </style><body> <div id="wrap" > <h1> Site Title </h1> <div id="content"> <div id="nav"><h3>Navagation</h3> <a href="aboutme.html">About Me</a><br /><a href="soccer.html">Soccer</a><br /><a href="games.html">Games</a><br /><a href="vidoes.html">Vidoes</a><br /><a href="homework.html">Homework</a><br /><a href="chat.html">Chat</a> </div> <div id="inner"> <h2>Tuhy's Space</h2><p>About my website: This website was recently made for my Website Design Class.<br />The links on the Left are things that i enjoy to do and the games, videos are for your enjoyment, if you would <br />like me to add a video or a game send me an email at or if you would like <br />to give me some tips on other things to put in here.This site is not yet finsihed an probably<br />will never be finished because i will be adding things as i go along. Thank you for Visiting <br /></p><p class="classy">this paragraph has class="classy" and will be styled differently than the others.</p></div><!-- close inner --></div><!-- close content --> <div id="footer"> <p>Site Footer</p> </div><!-- close footer --> </div><!-- close wrap --></body></html>  Hope this helps. Share this post Link to post Share on other sites
dtuhy 0 Report post Posted February 24, 2007 thanks alot for the help jlhaslip Share this post Link to post Share on other sites
matak 2 Report post Posted February 25, 2007 thanks alot for the help jlhaslipi think it is better to use percentage as value for width, couse of resolution issues. but that is your personal choice Share this post Link to post Share on other sites
jlhaslip 4 Report post Posted February 25, 2007 That was a template I had sitting there, so I didn't mod much. Simply placed his content in to the template.I find that using a fixed width for the link sidebar works well, but yes, em's would be suitable, too. In case a client uses a different size of font for the sidebar text. Share this post Link to post Share on other sites
matak 2 Report post Posted February 25, 2007 oh, yes of course. em's are really really usefull.. when scrolling text to enlarge it by using ems u can enlarge whole paragraph. you know, there is really lot's of fancy ways for "improving" site with css, but i kinda think that all of that is just complication and making site for end user to have trouble with.although html has passed from being used just for text sharing, it is still it's main purpose. good website has nicely arranged text, maybe a good search, and some way of contacting user.advanced sites, are however totally different story. Share this post Link to post Share on other sites
