HTML - Alignment Probs.
Hello all, I had this place recommended to me for all my noob questions, as I'm in the process of teaching myself website development.
So here comes the 1st one..... I've got a couple of pages on my site where I'm displaying an RSS feed. It looks fine in Google Chrome and Firefox with the text aligned to the left where I want it, but when opened in IE6or7 it seems to centre the text. Can anybody shed any light on this. Here's my code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>East of England Bikers - British Superbike News</title> </head> <body> <div align="center"> <a href="http://www.eastofenglandbikers.com/" target="_blank"> <img src="http://www.eastofenglandbikers.com/templates/subsilverlike/images/top.jpg" width="728" height="100" border="0" alt="EoEB East of England Bikers Logo" /> </a><br> <script type="text/javascript"><!-- google_ad_client = "pub-8453164609750420"; /* 728x90, created 27/01/09 */ google_ad_slot = "5373671969"; google_ad_width = 728; google_ad_height = 90; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> <?php $olderror_reporting =error_reporting(0); include ("http://rssfeedreader.com/rss3/rss.php?url=http%3A%2F%2Fnews.google.com%2Fnews%3Fhl%3Den%26ned%3Dus%26ie%3DUTF-%26output%3Drss%26q%3DBritish%2BSuperbike&newpage=1&chead=&atl=1&desc=1&owncss=&eleminate=&auth=&dts=1&width=730&max=10&tlen=0&rnd=&bt=1&bs=Solid&nmb=&ntb=&naf=&nst=&nwd=0&nht=0&dlen=0&lstyle=-1&lc=Blue&bg=White&bc=Gray&spc=&ims=1&tc=&ts=8&tfont=Verdana,+Arial,+Sans-serif&rf=".$HTTP_SERVER_VARS['SERVER_NAME'].$HTTP_SERVER_VARS['PHP_SELF']."&phpout=1"); error_reporting($olderror_reporting); ?> </table> <a href="http://www.eastofenglandbikers.com/?&sitemap">Sitemap</a> - <a href="http://www.eastofenglandbikers.com/">Back</a> </div> </body> </html> Hope it's ok to show my link to the page: http://www.eastofenglandbikers.com/r..._superbike.php Many thanks in advance. Please be gentle. Similar TutorialsHey all got bit of a prob here! I need the bg picture to fit the background plz help HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>I-C-U - The corner inside the code</title> <meta name="author" content="DarkHat" /> <meta name="subject" content= "anonymous, antivirus, chat, hacker, hackers, internet security, proxy, security, trading, webdesign" /> <meta name="Description" content="Trade your secrets at I.C.U" /> <meta name="Classification" content= "I-C-U is here for you and you are there for the others who needs the help with security etc..." /> <meta name="Keywords" content= "anonymous, antivirus, chat, hacker, hackers, internet security, proxy, security, trading, webdesign" /> <meta name="Geography" content="Sweden/Usa" /> <meta name="Language" content="English, Swedish, Danish, Norwegean" /> <meta http-equiv="Expires" content="Dec 2012 10:10:10 GMT" /> <meta http-equiv="CACHE-CONTROL" content="NO-CACHE" /> <meta http-equiv="PRAGMA" content="NO-CACHE" /> <meta name="Copyright" content="DarkHat , -I.C.U-" /> <meta name="Designer" content="DarkHat" /> <meta name="Publisher" content="I.C.U" /> <meta name="Revisit-After" content="10" /> <meta name="distribution" content="Global" /> <meta name="Robots" content="INDEX,FOLLOW" /> <meta name="city" content="Gothenburg" /> <meta name="country" content="Sweden" /> <link rel="stylesheet" href="/css/style.css" type="text/css" /> <link rel="stylesheet" href="/css/frontstyle.css" type="text/css" /> <link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> <link rel="shortcut icon" href="/favicon.ico" /> <link rel="icon" type="/ico" href="/favicon.ico" /> <script type="text/javascript" src="js/jquery-1.2.6.js"> </script> <script type="text/javascript" src="js/startstop-slider.js"> </script> </head> <body> <div id="page-wrap"> <div id="slider"> <div id="mover"> <div id="slide-1" class="slide"> <h1>LinkerZ</h1> <p>LinkerZ nr.1 webpage for the hacker! There is links to different communitys, movie portals, radio stations, all about the interesting world thrue the hackers eyes</p><a href="http://i-c-u.se/LinkerZ/"><img src= "images/slide-2-image.jpg" alt="learn more" /></a> </div> <div class="slide"> <h1>Designz Webdeveloper</h1> <p>Designz Webdeveloper! oh well the name say it all. A team of web designers that makes designs to a new level of creating living appearense</p><a href= "http://i-c-u.se/EliteDesignz/index.html"><img src="images/slide-1-image.jpg" alt="learn more" /></a> </div> <div class="slide"> <h1>I-C-U Chat</h1> <p>The place for you that got somthing to say! A place for the sharing of interest off all from hacking to music to security etc...</p><a href= "http://i-c-u.se/icuchatter.html"><img src="images/slide-3-image.jpg" alt= "" /></a> </div> </div> </div> </div> </body> </html> HTML Code: { margin: 0; padding: 0; } body { font-family: "Lucida Grande", Arial, Sans-Serif; background: #000;} a { text-decoration: none; outline: none; } a img { border: none; } h2 { font-family: Georgia, Serif; font-size: 36px; text-align: center; font-weight: normal; } #page-wrap { background: black; width: 980px; margin: 0 auto; padding: 50px 0; } #slider { background: white url(../images/slider-bg.jpg); height: 475px; overflow: hidden; position: relative; margin: 50px 0; } /* DEFAULT is for three panels in width, adjust as needed This only matters if JS is OFF, otherwise JS sets this. */ #mover { width: 2800px; position: relative; } .slide { padding: 40px 30px; width: 900px; float: left; position: relative; } .slide h1 { font-family: Helvetica, Sans-Serif; font-size: 30px; letter-spacing: -1px; color: #ac0000; } .slide p { color: #000000; font-size: 12px; line-height: 22px; width: 300px; } .slide img { position: absolute; top: 20px; left: 400px; } #slider-stopper { position: absolute; top: 1px; right: 20px; background: #ac0000; color: white; padding: 3px 8px; font-size: 10px; text-transform: uppercase; z-index: 1000; } this issue has been solved This is the first site I've done. I want to add some screenshots to the center of the page but can't figure out how to keep the links in place at the left. When I add the pics the links move down to make room for the pics. How do I get the links to stay in place at the left of the screenshots? Thank you for any help. Krytin http://ghostfleet.bravehost.com/ghostfleet.htm Hope someone can suggest something. I am working with a programme that uses three templates to structure the web site, feeds articles, author page and site map on a daily basis to my web site. I attempted to insert Adsense ad units to templates and unfortunately everything is out of line now. this can be viewed at http://daviddutch.com/currency/articles/index.html Question is how do I bring everything else back in line please as when I look at coding there is no clear place to put the adsense HTML code to get things lined up correctly. Hope someone can offer wisdom and guidance. cheers Hi there. I use the following code to show a swf file and align it vertically and horizontically but i can do only the horizontal alignment. Any help about the vertical? Thanks in advance HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Site</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-utf-8" /> <style type="text/css" media="screen"> body { margin:0; text-align:center; } div#content { text-align:center; vertical-align:middle;} object#content { display:inline; vertical-align:middle;} </style> <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> swfobject.embedSWF("main.swf", "myContent", "1400", "910", "9.0.0"); </script> </head> <body> <div style="vertical-align:middle"> <div id="myContent" style="vertical-align:middle"></div> </div> </body> </html> Hi Guys Here is some css I use for my footer, I want it to be centered but only span 98% of the distance, however when I change the width to 98% it only cuts off the 2% from the right hand side and justifies the footer to the left. Any Help? Thanks Code: #footer{ clear: left; width: 100%; background: white; color: black; text-align: center; padding: 2px 0; } Hey all, Just a question about my amature portfilio site that im creating. On some pages, graphics and blog, for example, http://www.freewebs.com/breakdowninc.../graphics.html http://www.freewebs.com/breakdowninc/pages/blog.html I am wanting to center the graphics/blog parts overhead of the copywrite text, found at the bottom of my page. Example: I have centered the graphics images, using align="center" yet they go off the side slightly. Anyway can how can I align them appropriately, without using "position:absolute" because it screws with the mini/maximising of my page. Cheers hey guys im getting a weird b0rder ar0und my <div>, i d0nt kn0w what it is..can anyb0dy help me please? ive been l00king at div pr0perties but i havent been able t0 eliminate that b0rder - im n0t even sure its fr0m the div but i'd think it is. the b0rder im talking ab0ut is the black 0ne. c0me t0 think 0f it.. its n0t a b0rder - the black secti0n is a <th> and the black is its backgr0und, but the <div> inside the <th> simply d0esnt extend in it t0 100% :/ http://www.hotlinkfiles.com/files/57...cument_7_.html I have a div which contains a line of text as a url. When clicked, a div is displayed directly below, and the content is different depending on the user. Currently, the div opens and two left hand sides align. I would like to cause the right hand sides to align instead, with the divs growing to the left if the text is larger. Is this possible? It's not that huge of a deal because its only an under construction page... but I'd like to know how to get this page looking the same in both IE and Firefox. The only real issues with IE right now is that the image isn't centered and the yellow tape bg is 1px off from where it should be... thanks for any help! http://www.pzfantasyfootball.com Code: <html> <head> <title>PZ Fantasy Football » Under Construction</title> <style type="text/css"> * {margin: 0; padding:0;} p {margin-top: 15px;} h2 {font-size: 25px; border-bottom: 1px solid #fff; margin-bottom: 10px;} body { background-image: url(images/Metal_Texture-PhotoshopTower.jpg); background-color: #000; color: #fff; font-family: calibri, arial, verdana; } a, a:visited, a:active {color: #09f;} a:hover {color: #06c;} #wrap { width: 800px; margin: 0 auto; } .yellowtape { position: absolute; bottom: 0; width: 100%; height: 524px; background-image: url(images/yellowtapebg.gif); background-repeat: repeat-x; } .construction { position: absolute; bottom:0; background-image: url(images/pzfantasyfootballunderconstruction.jpg); width: 800px; height: 600px; } .text { position: relative; left: 300px; top: 225px; width: 500px; font-size: 18px; text-align: left; } </style> </head> <body> <div class="yellowtape"></div> <div id="wrap"> <div class="construction"> <div class="text"><h2>11/1/07 » Site Under Construction Again</h2>Well once again we enter construction mode. I just wasn't feeling the league site, no one really used it much, it didn't have much content that Yahoo! couldn't already offer, and it just really ended up being a waste of time. So now I'm going to give it a shot with a fantasy help site. I know I've done this before, but my future may hold something in the sports industry, so now I look to try and establish a well read site in order to help achieve my goals. I'm not 100% sure if the new site will be done before the end of this season, however it should be done in time for the 2008 NFL Draft. Hope to see you all soon! <p />Oh, and feel free to contact me via the forums <a href="http://www.pzfantasyfootball.com/forums">here</a>. </div> </div></body> </html> Good morning, I cannot figure out how to get the images one on top of the other (in a straight line) here http://divamaggie.com/?p=60 . I tried Code: <br>, <p> and simply line spaces, but nothing seems to be working. I'm really hoping someone can tell me what I'm doing wrong. Hi, I am trying to figure out how I can align text with an image using spacing (strictly HTML). I have applied the vspace and hspace tags to my image, but then my image won't be aligned flush with the text. Is there any way I can set up spacing on just one side of the image? Hi, Can someone help me align the two images at the bottom of the html page (view attachment) in the center. It should be compatible with IE and Firefox 3. I have attached sample code in the .doc file. Thanks in advance, Ronnie I don't understand! On my end when I upload it to the server and open an html file in the browser, everything looks fine. But when other people look at the site, it looks totally different. Text boxes are disgusting, I use CSS positioning and it puts everything totally off of the layout. Hi All, I am pulling some data from MySQL and i need to display on screen with Left / Right Alignment. For The example <table width="85%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td> Now here i am looking if database-loc = left the data will go left side else it will go right side.\ pulling data from DB is okay with me. Now i am looking some idea how to format div so it shuld set accordingly. Currenly i tried the below but all go to the left. <div align="left">Left Line</div> <div align="left">Left Line</div> <div align="left">Left Line</div> <div align="right">Right Line</div> <div align="right">Right Line</div> <div align="right">Right Line</div> It is going in right side but it is down of left <div> it must go to the top with right direction some thing like valign="top" </td> </tr> </table> I hope i explain it well, i am sorry for my language. On my website, www.JKRfan.com , the alignment on the layout is a little bit off and I can't figure out why. The problem with the alignment also changes from page to page. Will somebody please help? Thanks, Kristen This works in FF but in IE7 the last table is aligned to the left of the next table instead of underneath it? HTML Code: ' <table width="800" border="0"> <tr> <td width="400" align="center" class="style4"> <p> </p> <p class="style3">How can we help? </p></td> <td width="400" align="center" class="style4"> <p> </p> <p class="style3"> Services </p> </td> </tr> </table> <hr color="#000000" /> <table align="left" cellpadding="0"width="400" border="0"> <tr> <td height="472" background="leftservbg.gif"><blockquote> <p align="left"> </p> <p align ="left" fo>Granny's Helping Hands provides competent relief for care givers. We can also help with children and new mothers with baby care. Before we assign a Nureses Aide to you, a representative from our office may visit you to develop a plan of care. This assessment helps us choose the best companion or aide to meet your needs. </p> <p align="left">We offer a variety of billing options to our clients. Most insurances are welcome. We are also a contracted participant of the local Area Agency for the Aging's Waiver and Options programs. In addition we are proud participants of Commcare, OBRA, and Independence Waivers. Our services are avialble from 1 1/2 to 24 hours a day, 7 days a week.</p> <p align="left"> </p> <p align="left"> </p> </td> </tr> </table> <table align="left" cellpadding=""width="400" border="0"> <tr> <td width ="95"></td> <td width="190" height="236" valign="top" background="rgtservbg.gif" > <p class="space"> </p> <p align="center"><strong> Personal Care</strong></p> <blockquote> <p align="left" >Granny's Helping Hands provides competent relief for care givers</p></td> <td width ="95"></td> </tr> </table> <table align="left" cellpadding=""width="400" border="0"> <tr > <td background="rgtservbg.gif" height="236" width="190" > <p> </p> <p>Granny's Helping Hands provides competent relief for care givers</p></td> <td background="rgtservbg.gif" width="190" > <p> </p> <p>Granny's Helping Hands provides competent relief for care givers</p></td> </tr> </table> i know this question has probably been asked 10000 times, but, how do i align an image so that it will be in the center of the entire page (like dead center) -------|------- -------|------- -----img----- -------|------- -------|------- Hi folks, I'm having a distressing issue with my website. I have a table of thumbnails that must line up very specifically to fit with a background image. Not so hard, the page appears perfectly when I view it by itself (http://natehess.org/working/work/rec...rk_layout.html) But when I drop it into a Scrolling DIV script (Aaron Boodman's) a get a peculiar spacing issue on the set of 8 thumbnails in *FireFox*. The issue doesn't appear in IE, but gotta get it right. The problem page is http://natehess.org/working/work/recent_work.html If anyone would be willing to provide a reccomendation or slog through my code I'd appreciate it. I built the page in dreamweaver, so it's not the cleanest code ever, but I'm at a loss at this point. Thanks so much for any help. |