HTML - Centering Links
Is it possible to center links using the link tags itself: something like
<a href align:center > Similar TutorialsHi everyone, I hope I have posted this in the right area. This is my first time posting here. I currently have my main pages listed at the top of my site as graphics (see fussybaby.ca). I would like to potentially remove these graphics and use text links instead - I had the graphics designed for me, so I can't just go in and make new ones, however I'd like to change/rearrange the links and add some new ones. So my question is: How hard is this to do? Is this something I need to hire someone to do for me? Thanks in advance for any advice! I have a website and I used css to make my Div tags set to absolute. The only problem is that when you open it in a browser, the browser won't open big enough and wil block out some of my content (forcing me to scroll to the left or maximize the borswer to see the whole page) . How do i make the divs always appear in the center of the page always. Also how do i make it so when you change the siz of the browser my divs will change with it to remain in the center. I tried doing the margin auto trick but it still doesn't work. Here is my stle sheet code and the web page html code... any help would be appreciated. /* CSS Document */ #wrapper {margin-right: auto; margin-left: auto; margin-top: 20px; margin-bottom: 0;;} body { margin : 0px 0px 0px 0px; background-color: #E1AE5A; background-repeat: repeat; } #top { position: absolute; height: 48px; width: 900px; left: 250px; top:3px; border:0px none; z-index:1; color: #000033; } #main { position: absolute; top: 542px; left: 328px; z-index:5; width: 745px; color: #FFFFFF; height: 28px; } #flash { position: absolute; top: 130px; left: 299px; z-index:4; width: 803px; color: #FFFFFF; height: 419px; } .style1 { font-family: Eurostile; color: #FFFFFF; } .style2 { font-family: Helvetica; } #Layer1 { position:absolute; left:300px; top:121px; width:804px; height:540px; z-index:3; background-color: #000033; border: medium solid #FFFFFF; } .style3 { font-family: Eurostile; } #Layer2 { position:absolute; left:111px; top:170px; width:71px; height:124px; z-index:4; } .style4 {color: #000000} #Layer3 { position:absolute; left:482px; top:72px; width:37px; height:56px; z-index:2; } #Layer4 { position:absolute; left:652px; top:72px; width:24px; height:31px; z-index:2; } #Layer5 { position:absolute; left:822px; top:72px; width:84px; height:58px; z-index:2; } #Layer6 { position:absolute; left:992px; top:72px; width:95px; height:50px; z-index:2; } #Layer7 { position:absolute; left:331px; top:139px; width:750px; height:446px; z-index:9; } #Layer11 { position:absolute; left:319px; top:72px; width:12px; height:10px; z-index: 2; } #Layer8 { position:absolute; left:302px; top:98px; width:791px; height:48px; z-index:10; } #Layer9 { position:absolute; left:299px; top:40px; width:32px; height:20px; z-index:0; } #Layer10 { position:absolute; left:1016px; top:595px; width:24px; height:26px; z-index:10; } and the html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" land="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="styles.css" rel="stylesheet" type="text/css"> </head> <body> <div id="top"> <h1 align="center" class="style3 style4">on The side, Inc. </h1> <p align="center" class="style3"> </p> </div> <div class="style2 style3" id="main">on The side is a value added promotional marketing organization focused on working with companies to make them more market-facing. We take time to learn about our clients' business model, industry and previous marketing agendas before taking a next step OR leap - if necessary.</div> <div id="Layer1"></div> <div id="flash" align="center"> <object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="425" height="400"> <param name="movie" value="main.swf"> <param name="quality" value="high"> <embed src="main.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="425" height="400"></embed> </object> </div> <div id="Layer3"><a href="who.html"><img src="who.jpg" width="100" height="70" border="0"></a></div> <div id="Layer4"><a href="what.html"><img src="what.jpg" width="100" height="70" border="0"></a></div> <div id="Layer5"><a href="ideas.html"><img src="ideas.jpg" width="100" height="70" border="0"></a></div> <div id="Layer6"><a href="why.html"><img src="why.jpg" width="100" height="70" border="0"></a></div> </body> </html> how can i center the nav on this page? http://fantasyfootball.pzproductions.com/testing so what is the easiest and best way to center a div within a div? or a div within anything else for that matter. How do you center vertically? and How do you venter horizontally? Hi, I'm new to the site and I'm just here to ask a question. I've been having trouble with my webpage trying to center everything. The problem is that at home my webpage is centered (When you zoom out everything stays centered) but as for school I zoom out and everything stays to the left and I'm pretty sure I left all the code the same from computer to computer. I don't think it is the resolution because I had changed my resolution to the same as at school. This is my coding (I'm an amateur at Html and don't know CSS): <title>Home - WebBanners</title> </head> <p align="center"> <div style="position:absolute;top:0px; left:0px; right:0px; bottom:0px;" align="center"> <body topmargin="0" leftmargin="0" bgcolor="#0099FF"> <img src="Banner.gif" width="1280" height="290" border="0" usemap="#Map" /> <map name="Map" id="Map"> <area shape="rect" coords="140,233,302,285" href="Home.html" /> <area shape="rect" coords="330,233,543,286" href="Samples.html" /> <area shape="rect" coords="565,240,722,287" href="Prices.html" /> <area shape="rect" coords="752,229,905,286" href="About.html" /> <area shape="rect" coords="945,235,1122,284" href="Contact.html" /> </map> <font face="Georgia, Times New Roman, Times, serif" size="+4" color="white"><p align="center"> <u> Welcome To WebBanners!</u></p></font> </p> <table align="center"> <tr> <td><font face="Georgia, Times New Roman, Times, serif" color="black" size="7"><strong>H</strong></font> <font face="Georgia, Times New Roman, Times, serif" size="+2" color="white">ere we make special just-for-you banner. <br /> <br> <font face="Georgia, Times New Roman, Times, serif">Every banner is unique to the person who have ordered them.<br /> <br><font face="Georgia, Times New Roman, Times, serif">They are sold at a reasonable price and if you don't <br>like them then we offer full money back guaranteed. <br /> <br /> We also have an interactive department where you can <br />talk to one of 'us' through the microphone so we can help you. <br />All you have to do is ask through the E-mail. <br /> <br /> We can make tons of banners for your website such as the one above <br />or see more <a href="Samples.html">Here</a> <br /> <br /> We have prices for your special needs. <br />All of the banners we offer are your ideas. <br />Ask and we can do it for you! Click <a href="Prices.html"> Here </a> for prices. <br /> <br /> Want to learn more about us? Click <a href="About.html"> Here </a> for more information. <br /> <br /> Going to buy one of our offers? Need help in finding something? <br />Click <a href="Contact.html"> Here </a> to contact us! For your design! </font> </td> <td align="center"> <font face="Georgia, Times New Roman, Times, serif" color="Green" size="+3"><u><strong>So Why Pick Us? </font> </u> </strong> <br /> <br /> <font face="Georgia, Times New Roman, Times, serif" color="Green" size="+2"> <li>We have 100% Money Back Guarantee <br /> <li>Satisfaction Guarantee<br /> <li>Our Prices beat the Competitors<br /> <li>24 Hour Service <br /> <li>Interactive Department <br /> <br /> <br /> <br /> <img src="Ordernow!.gif" /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </body> </html> Please help me with the following. This is not a problem in Firefox; only in IE. I am having trouble centering one DIV with a DIV to the left of the centered DIV. The DIV that is blue I would like centered according to the browser width and the red DIV I would like the same vertically as the blue DIV only left justified. In Firefox this works correctly the way I would expect. In IE the left justified div appears "pushes" the DIV ( in blue ) that I want centered further to the right; making it un-centered. thanks for any assistance. Code: <div width="100%"> <div align = "left" style="width:200px;float:left;background-color:#ff0000;"> <p style="font-size: 8pt;">This needs to be left justified........</p> <p style="font-size: 8pt;">This needs to be left justified........</p> <p style="font-size: 8pt;">This needs to be left justified........</p> </div> <div align="center" style="background-color:#00ff00;"> <div style="width: 500px;background-color:#0000ff;"> <p style="font-size: 8pt;">this needs to be centered.................................................................................. </p> <p style="font-size: 8pt;">this needs to be centered.................................................................................. </p> <p style="font-size: 8pt;">this needs to be centered.................................................................................. </p> <p style="font-size: 8pt;">this needs to be centered </p> </div> </div> I just noticed that the site I coded is not centered but is aligned to the left on resolutions larger than 1024x768. Is there a way to fix this? Here is the css for the main div which has all the content. #container { position:absolute; left:0px; top:0px; width:1002px; height:auto; margin:0px auto; border:0; padding:0; Here is the code i have for the only(and first) page of the website. HTML Code: <!DOCTYPE html> <html> <body background="piginsun.png"> <div id="container" style="width:1903px"> <div align="center"> <div id="header" style="position:relative;width:100%;margin-top:0px;margin-bottom:0px;text-align:center"> <h1 style="margin-bottom:0;"> </div> <div style="width:340px;text-align:left;align:center;"> <a href="http://www.w3schools.com"><img width="868" height="90" src="mcad.png" alt="html.html" style="border:0;margin-top:0px;"></a> <div id="menu" style="height:315px;width:120px;float:left;"> <b><a target="_top" href="html.html">Home</a></br></br> <b><a target="_top" href="html_forums.asp">Server Forums</a></br></br> <b><a target="_top" href="html_updates.asp">Server Updates</a></br></br> <b><a target="_top" href="html_videos.asp">Server Videos</a></br></br> <b><a target="_top" href="html_staff.asp">Server Staff</a></br></br><b><a target="_top" href="html_pics.asp">Server Pictures</a></br></br> <b><a target="_top" href="html_donate.asp">Donations</a></br><b></br><a target="_top" href="html_contact.asp">Contact Us</a> </div> <div id="content" style="height:940px;width:1200px;text-align:center;"> <font size=40px;font color="#7373FF">Random</font><font size=40px;font color="#CB59E8">Craft</font></br> <i>A Minecraft Server</i> </br> <div id="content" style="height:598px;width:1200px;text-align:center;"> </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> <div id="footer" style="clear:both;text-align:center;"> Copyright ®RandomCraft Server</div> </div> </body> </html> I need some help centering the whole thing. It looks good now but is off to the side, i need it centered. If someone could show me how to do that, that would be awesome. Thanks Hi. I can't remember how to center a table to the center of the page. Here is my current code: HTML Code: <table style="width: 66%" > <tr> <td class="style4"> <a href="http://au.youtube.com/user/bombardieraddict123" style="color:white" class="style5"> Bombardieraddict123</a></td> </tr> <tr> <td style="background-color:white">More Information Will go here</td> </tr> </table> I want it to be centered in the middlof thepage. How can I do that? thanks I am having difficulty centering pages for Firefox and Chrome. Please view the source code of http://www.alicm.com. It centers fine in all versions of IE. Definitely need a little help. I am not very experienced, so any "before and after" pasting of coding would be very much appreciated. Thanks in advance. Hello all, I'm hoping someone can help me with what should be a super simple thing, but I'm not sure if I've just been staring at this code too long or what. Basically all I am trying to do is center my footer on the page, but it seems glued to the left side. I've tried putting in <div align="center" within my HTML, and auto values for my margins in CSS, but neither seem to do the trick. Can anyone help me out? Related markup is below: <div id="footer" align="center"> <div class="container"> <div class="leftFooter"> <ul class="footerNavMain top"> <li class="first"><a href=" ">Products</a></li> <li> | </li> <li><a href=" ">FAQ</a></li> <li> | </li> <li class="last"><a href=" ">Where To Find Us</a></li> </ul> <ul class="footerNavMain bottom"> <li class="first">Phone Number</li> <li> | </li> <li class="last"><a href=" ">Email Link</a></li> </ul> <div class="copyright"> <sup>©</sup> 2011 Copyright™, All Rights Reserved. </div><!-- copyright close div --> </div> <!-- left footer close div --> </div><!-- container close div --> </div> CSS #footer { background: url("/Assets/footer2.jpg") no-repeat scroll 0 0; display: block; float: left; height: 75px; width: 900px; margin-left: auto; margin-right: auto; } #footer .container { height: 75px; margin-left: auto; margin-right: auto; padding-right: 45px; padding-top: 3px; width: 900px; } #footer .leftFooter { background: none repeat scroll 0 0; color: #FFFFFF; display: block; float: left; height: 100%; margin-left: 5 px; overflow: hidden; position: relative; width: 900px; } #footer .rightFooter { background: none repeat scroll 0 0 #4E4E4E; color: #FFFFFF; display: block; float: right; height: 100%; margin-left: 15 px; position: relative; width: 355px; } #footer .copyright { display: block; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; height: 15px; left: 0; line-height: 13px; position: absolute; text-align: center; top: 50px; width: 900px; z-index: 1; font-weight: 700; } #footer a:link{ color: #FFFFFF; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; } #footer a:visited { color: #FFFFFF; text-decoration: none; font-size: 11px; } #footer a:hover{ color: #000000; text-decoration: underline; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; } #footer ul.footerNavMain { display: block; float: left; margin-top: 5px; width: 900px; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; } #footer ul.footerNavMain.top { margin-left: 185px; width: 900px; } #footer ul.footerNavMain.bottom { margin-left: 145px; width: 900px; color: #000000; } #footer .footernavMain li { display: block; float: left; padding-left: 4px; padding-right: 4px; } #footernav li a:link { color: #FFFFFF; text-decoration: none; font-size: 11px; } #footernav li a:visited { color: #FFFFFF; text-decoration: none; font-size: 11px; } #footernav li a:active { color: #000000; text-decoration: underline; font-size: 11px; } #header nav li.last, #footerNavMain li.last { padding right: 0; } #footer .footerNavMain li.first { background: none repeat scroll 0 0 transparent; padding-left:0; } I am trying to center some text in a table, but horizontally only. It centers vertically inside a cell in a table when i use either of these tags. HTML Code: <h2 style="text-align:center"> <center>text</center> How do i fix this? I clarified what i want in the attatched picture. My site is working correctly in bot Safari & FF but I can't seem to get it to center in IE7. In Safari and FF, the content is centered and the window can be shrunk down to 1000px without scrollbars appearing (which is what I want). In IE7 its all sliding to the right and scrollbars are appearing at 1150px or something like that (which is what I want definitely don't want). This template is a little bit problematic because the background image for the blue area extends outside the central column on the left side and I need it to disappear when the window width is shrunk. I hope that makes sense. I can't figure out an alternative solution that works in IE7, any ideas? Check out the template in question at: http://current-post.com Hi all I have a question which im sure is very simple to answer but has been frustrating me for three days (yes i am aware i may have prooved my own ineptitude ) If any of you have a moment could you have a look at the code below. What im trying to do is center the divs no matter what the screen resolution.Im hoping, due to my huge lack of experience, that im just missing something very obvious. Below is the code ... TEMPLATE HTML Code: body { background-color: #000000; } --> </style> <link href="Stylesheets/DT CSS.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- a:link { color: #b46633; } .style1 { font-family: "Times New Roman", Times, serif; font-size: large; } --> </style></head> <body> <div id="outer"> <div align="center" id="Header"></div> <div id="links"> <p><a href="Home.html" class="style1">Home<br /> <br /> </a><br /> </p> </div> <div align="center" id="Main"> <p align="center">"It does not do to leave a live dragon out of your calculations, if you live near him."<br /> <em>(JRR Tolkien - The Lord of the Rings)</em></p> <br /> <p align="center">Throughout time since mankind begun our imaginations have activly sought out what we could not see or understand. Demons have haunted our dreams and gods have soothed them. Our minds have conjured terrible creatures for our warriors to battle and places for the adventurous to explore. One of the greatest and widest spread of these creatures is the Dragon. A true testimony to the power of imagination. This website is in dedication to the mightiest of our minds creations. The infomation found here is the result of many hours research and passion and i hope you find it useful.<br /> Welcome to Dragons Touch</p> </div> <div id="News">Content for id "News" Goes Here</div> </div> <h1 align="center"> </h1> </body> </html> CSS PHP Code: body { font-family: "Times New Roman", Times, serif; background-color: #000000; background-repeat: no-repeat; color: #FFFFFF; font-size: medium; width: 100%; position: relative; left: auto; right: auto; bottom: auto; margin-right: 20px; margin-left: 20px; margin-top: 20px; margin-bottom: 20px; } #outer { width: 80%; background-color:#FFFFFF; margin-top: 50px; margin-bottom: 50px; margin-left: auto; margin-right: auto; padding: 0px; border: thin solid #000000; } #Header { position: absolute; height: 150px; width: 800px; left: 121px; top: 0px; background-image: url(../Images/NewBanner.jpg); color: #F0F0F0; background-color: #000000; background-repeat: no-repeat; margin: 0px; } Links { top: 150px; position: relative; height: 350px; width: 150px; bottom: auto; } #links { top: 151px; height: 350px; width: 126px; clip: rect(auto,auto,auto,auto); position: absolute; font-family: "Times New Roman", Times, serif; padding-top: 50px; font-size: large; font-weight: normal; font-style: normal; text-transform: none; padding-left: 40px; text-align: left; list-style-position: inside; left: 41px; margin: 0px; } #Main { font-family: "Times New Roman", Times, serif; position: absolute; height: auto; width: 620px; left: 208px; top: 151px; right: 800px; margin: 0px; } #News { position: absolute; left: 829px; top: 151px; width: 162px; height: 406px; margin: 0px; hello there can someone please give some advice / fixes for centering my website in IE and Chrome etc I programmed it in Dreamweaver and previewed it in Safari and Firefox where it looks lovely and central, however people have told me that in IE it is centered to the left. I can't figure out how to fix it. http://www.formconstant.co.uk any help would be greatly appreciated john OK, just put my new site up etc. I'm just finishing it with images etc for my friends: http://bparch.freehostia.com/ When you look at the images on the front page, is there a way of centering them? Here is the CSS for the gallery: Code: ul#gallery { margin:0 auto; padding:0; list-style-type:none; width:90%; font-family: verdana, arial, helvetica, sans-serif; text-align: center; } ul#gallery li { float: left; margin:5px; text-align: center; } ul#gallery li p { text-align: center; margin:5px 0; } Here is the CSS for the other parts: Code: body { margin:0px; padding:0px; font-family:verdana, arial, helvetica, sans-serif; color:#333; background-color:#ccccff; } h1 { margin:0px 0px 0px 0px; padding:0px; font-size:28px; line-height:28px; font-weight:900; color:#666666; text-align: center; } h2 { font-size:22px; text-align: center; } p { font:11px/20px verdana, arial, helvetica, sans-serif; margin:0px 0px 16px 0px; padding:0px; } #Content>p {margin:0px;} #Content>p+p {text-indent:30px;} a { color:#09c; font-size:11px; text-decoration:none; font-weight:600; font-family:verdana, arial, helvetica, sans-serif; } a:link { color:#00009c;} a:visited { color:#00009c;} a:hover { color:#ccccff ; background-color:#FFFFFF; border-style:dashed; border-color:black; border-width:1px 0px } .headings { color: #000000; text-decoration: underline; font-size: 20px; font-weight: bold; } #Header { margin:50px 0px 10px 0px; padding:17px 14px 14px 20px; /* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */ height:33px; /* 14px + 17px + 2px = 33px */ border-style:solid; border-color:black; border-width:1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */ line-height:11px; background-color:#eee; text-align: center; /* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity. Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it. IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style declaration. The incorrect IE5/Win value is above, while the correct value is below. See http://glish.com/css/hacks.asp for details. */ voice-family: "\"}\""; voice-family:inherit; height:14px; /* the correct height */ } /* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct length values to user agents that exhibit the parsing error exploited above yet get the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */ body>#Header {height:14px;} #Content { margin:0px 50px 50px 200px; padding:10px; background-color:#eee; border:1px dashed #666666; } #Menu { text-align: center; position:absolute; top:110px; left:20px; width:172px; padding:10px; background-color:#eee; border:1px dashed #666666; line-height:17px; /* Again, the ugly brilliant hack. */ voice-family: "\"}\""; voice-family:inherit; width:150px; } /* Again, "be nice to Opera 5". */ body>#Menu {width:150px;} Thanks -- Chris Hi. First off I'm new to this forum so Hello! I wanted to know how to make sure my websites 'float' in the middle of the screen, like this for example http://www.richardjohntaylor.com/billymurray i.e. whatever size the window, the image always remains centred. The website above is only a single image. How would I do it with my other sites, which are tables making up many images, eg. http://www.terrystone.biz or http://www.trconsultants.co.uk I edit using Dreamweaver. Thanks Richard Nevermind....... |