If you are looking to center your motd vertically, the following page had good information.
http://www.vdotmedia.com/blog/vertically-center-content-with-css/ Just be aware that if you cut and paste, like I did, you might have a problem with matching charsets. You're probably better off to copy it manually, and not to cut and paste. That little problem wasted me a good few hours... Drek Crazy Canucks wrote: > Thanks! Now I've got to figure out how to get it centred in different > resolutions... > > Yours looks great as well. The infamous Cream Bun Clan. :) > > Patrick Shelley wrote: > >> I'm glad you sorted it! >> >> Your MOTD looks ace! >> >> Check out ours: >> >> www.sidesteal.com/l4d/l4dmotd.html >> >> On 11/19/08, Crazy Canucks <[EMAIL PROTECTED]> wrote: >> >> >>> Actually, I ended up having to move it in 8 pixels from the edge of the >>> window. You can see a screen shot of what it ended up looking like in >>> the following thread, along with two pics of what it looked like before, >>> although they don't show the shift effect as clearly as it appeared in >>> game, due to resampling. >>> >>> >>> http://www.crazy-canucks.com/index.php?name=PNphpBB2&file=viewtopic&p=8757#8757 >>> >>> I'll paste the code of my motd below so others can see what I had to do, >>> if they end up with the same issues: >>> >>> >>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >>> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> >>> <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en"> >>> <head> >>> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> >>> <title>Drekland: Age of Chivalry MOTD</title> >>> <style type="text/css"> >>> body { >>> >>> font-family: Arial; >>> font-size: 0.9em; >>> color: #ffddbb; >>> background-color: #8a7c5a; >>> margin: 0; >>> } >>> >>> >>> #border_left { position: fixed; left: 0; top: 0; bottom: 0; width: 8px; >>> background: #442200; } >>> #border_top { position: fixed; left: 0; top: 0; right: 0; height: 8px; >>> background: #442200; } >>> #border_right { position: fixed; top: 0; right: 0; bottom: 0; width: >>> 8px; background: #442200; } >>> #border_bottom { position: fixed; left: 0; bottom: 0; right: 0; height: >>> 8px; background: #442200; } >>> >>> #corner_tl { position: fixed; top: 0; left: 0; height: 52px; width: >>> 52px; margin: 8px 0 0 8px; } >>> #corner_tr { position: fixed; top: 0; right: 0; height: 52px; width: >>> 48px; margin: 8px 2px 0 2px; } >>> #corner_bl { position: fixed; bottom: 0; left: 0; height: 48px; width: >>> 52px; margin: 2px 0 2px 8px; } >>> #corner_br { position: fixed; bottom: 0; right: 0; height: 48px; width: >>> >>> 48px; margin: 2px; } >>> >>> img.corner_graphic { height: 44px; width: 44px; } >>> >>> >>> #content { text-align: center; margin-top: 3%; } >>> >>> a { font-size: 1.2em; font-weight: 500; color: #ffffff; text-decoration: >>> none; } >>> a:hover { color: #ffddbb; text-decoration: underline; } >>> >>> h1 { font-size: 1.3em; font-weight: 600; color: #ffbb00; } >>> h2 { font-size: 1.1em; font-weight: 500; color: #ffff00; } >>> h3 { font-size: 1.0em; font-weight: 400; color: #cccccc; } >>> h4 { font-size: 1.1em; font-weight: 500; color: #882200; } >>> >>> #rules_title { text-align: center; text-decoration: underline; >>> font-size: 0.9em; font-weight: bold; line-height: 200% } >>> #rules_content { text-align: left; margin-left: 20%; font-size: 0.9em; >>> line-height: 150% } >>> </style> >>> </head> >>> >>> <body> >>> <div id="border_top"></div> >>> <div id="border_left"></div> >>> <div id="border_right"></div> >>> <div id="border_bottom"></div> >>> >>> <div id="corner_tl"><img class="corner_graphic" >>> src="images/cc_cg_tl.gif" alt="" /></div> >>> <div id="corner_tr"><img class="corner_graphic" >>> src="images/cc_cg_tr.gif" alt="" /></div> >>> <div id="corner_bl"><img class="corner_graphic" >>> src="images/cc_cg_bl.gif" alt="" /></div> >>> <div id="corner_br"><img class="corner_graphic" >>> src="images/cc_cg_br.gif" alt="" /></div> >>> >>> <div id="content"> >>> <h1>Welcome to Drekland: Age of Chivalry!</h1> >>> <h2>This is the Crazy Canucks Gaming Community official server.</h2> >>> <h3>We are always open to new members. >>> <br />If you would like more information please visit:</h3> >>> <a >>> href="http://www.crazy-canucks.com/cc_details.html";>www.crazy-canucks.com >>> </a> >>> <br /><br />----------------------------------------------------- >>> <div id="rules_title">Server Rules</div> >>> <div id="rules_content"> >>> <b>1.</b> Have fun!<br /> >>> <b>2.</b> Treat your fellow warriors with respect.<br /> >>> <b>3.</b> Please keep the server healthy for >>> families. Keep the foul language to a minimum. >>> </div> >>> <br />----------------------------------------------------- >>> <h4>Friendly Fire is ON!</h4> >>> </div> >>> </body> >>> </html> >>> >>> >>> >>> >>> Crazy Canucks wrote: >>> >>> >>>> Patrick, don't spend any time on this, I think I've got it sorted. I'm >>>> deleting the images from my ftp. I needed to move the images in 6 >>>> pixels from the edge of the window for some reason. Now that I've done >>>> that, they display properly. They aren't exactly in the corners >>>> anymore, but they might look better even discounting the distortion. >>>> >>>> For anyone who faces the same issue, here is the relevant code: >>>> >>>> [style] >>>> #border_left { position: fixed; left: 0px; top: 0px; bottom: 0px; width: >>>> 6px; background: #442200; } >>>> #border_top { position: fixed; left: 0px; top: 0px; right: 0px; height: >>>> 6px; background: #442200; } >>>> #border_right { position: fixed; top: 0px; right: 0px; bottom: 0px; >>>> width: 6px; background: #442200; } >>>> #border_bottom { position: fixed; left: 0px; bottom: 0px; right: 0px; >>>> height: 6px; background: #442200; } >>>> >>>> #corner_tl { position: fixed; top: 0px; left: 0px; height: 50px; width: >>>> 50px; margin: 6px 0px 0px 6px; } >>>> #corner_tr { position: fixed; top: 0px; right: 0px; height: 50px; width: >>>> 48px; margin: 6px 2px 0px 2px; } >>>> #corner_bl { position: fixed; bottom: 0px; left: 0px; height: 48px; >>>> width: 50px; margin: 2px 0px 2px 6px; } >>>> #corner_br { position: fixed; bottom: 0px; right: 0px; height: 48px; >>>> width: 48px; margin: 2px; } >>>> >>>> img.corner_graphic { height: 44px; width: 44px; } >>>> >>>> [body] >>>> <div id="corner_tl"><img class="corner_graphic" >>>> src="images/cc_cg_tl.gif" alt="" /></div> >>>> <div id="corner_tr"><img class="corner_graphic" >>>> src="images/cc_cg_tr.gif" alt="" /></div> >>>> <div id="corner_bl"><img class="corner_graphic" >>>> src="images/cc_cg_bl.gif" alt="" /></div> >>>> <div id="corner_br"><img class="corner_graphic" >>>> src="images/cc_cg_br.gif" alt="" /></div> >>>> >>>> Good lord what a pain in the ass that one was. One small window's worth >>>> of code and it ended up sucking up two full days... >>>> >>>> Anyway, thanks for trying to help. >>>> >>>> Drek >>>> >>>> Crazy Canucks wrote: >>>> >>>> >>>> >>>>> I should add, the motd works perfectly in a normal IE browser window. >>>>> It's only in game that I have the problem with the images being offset. >>>>> I can only guess that IE uses a different browser engine for that kind >>>>> of functionality. Maybe one that is based on older code because I know >>>>> from doing some research that others have had this same problem with >>>>> older versions of IE. >>>>> >>>>> Drek >>>>> >>>>> Crazy Canucks wrote: >>>>> >>>>> >>>>> >>>>> >>>>>> *link to images* >>>>>> <http://www.crazy-canucks.com/images/public/motd_corner_images.zip> >>>>>> >>>>>> Thanks, you don't know how much I appreciate this. >>>>>> >>>>>> I wasn't originally positioning the body. I did that so I could change >>>>>> the positions for the images from fixed to absolute. I had no better >>>>>> luck with fixed posistions. Both the code and the css validate. At >>>>>> that point I wasn't concerned with it being pretty or optimized, I was >>>>>> just trying to get it to work. >>>>>> >>>>>> Just in case the link above doesn't work: >>>>>> >>>>>> http://www.crazy-canucks.com/images/public/motd_corner_images.zip >>>>>> >>>>>> Drek >>>>>> >>>>>> Patrick Shelley wrote: >>>>>> >>>>>> >>>>>> >>>>>> >>>>>> >>>>>>> Without loading this into dreamweaver, i'd try adding px to ALL your >>>>>>> measurements: >>>>>>> >>>>>>> #border_left { position: absolute; left: 0; top: 0; bottom: 0; width: >>>>>>> 6px; background: #442200; } >>>>>>> >>>>>>> Should read: >>>>>>> >>>>>>> #border_left { position: absolute; left: 0px; top: 0px; bottom: 0px; >>>>>>> >>>>>>> >>> width: >>> >>> >>>>>>> 6px; background: #442200; } >>>>>>> >>>>>>> I aslo wouldnt bother with positioning the body in css. I'll load it >>>>>>> >>>>>>> >>> up in >>> >>> >>>>>>> DW later, send me a lin to the images also if poss >>>>>>> >>>>>>> Pat >>>>>>> _______________________________________________ >>>>>>> To unsubscribe, edit your list preferences, or view the list archives, >>>>>>> >>>>>>> >>> please visit: >>> >>> >>>>>>> http://list.valvesoftware.com/mailman/listinfo/hlds_linux >>>>>>> >>>>>>> >>>>>>> >>>>>>> >>>>>>> >>>>>>> >>>>>>> >>>>>> _______________________________________________ >>>>>> To unsubscribe, edit your list preferences, or view the list archives, >>>>>> >>>>>> >>> please visit: >>> >>> >>>>>> http://list.valvesoftware.com/mailman/listinfo/hlds_linux >>>>>> >>>>>> >>>>>> >>>>>> >>>>>> >>>>>> >>>>> _______________________________________________ >>>>> To unsubscribe, edit your list preferences, or view the list archives, >>>>> >>>>> >>> please visit: >>> >>> >>>>> http://list.valvesoftware.com/mailman/listinfo/hlds_linux >>>>> >>>>> >>>>> >>>>> >>>>> >>>> _______________________________________________ >>>> To unsubscribe, edit your list preferences, or view the list archives, >>>> >>>> >>> please visit: >>> >>> >>>> http://list.valvesoftware.com/mailman/listinfo/hlds_linux >>>> >>>> >>>> >>>> >>> _______________________________________________ >>> To unsubscribe, edit your list preferences, or view the list archives, >>> please visit: >>> http://list.valvesoftware.com/mailman/listinfo/hlds_linux >>> >>> >>> >> _______________________________________________ >> To unsubscribe, edit your list preferences, or view the list archives, >> please visit: >> http://list.valvesoftware.com/mailman/listinfo/hlds_linux >> >> >> > > > _______________________________________________ > To unsubscribe, edit your list preferences, or view the list archives, please > visit: > http://list.valvesoftware.com/mailman/listinfo/hlds_linux > > _______________________________________________ To unsubscribe, edit your list preferences, or view the list archives, please visit: http://list.valvesoftware.com/mailman/listinfo/hlds_linux
