|
HTML - Why Wont My Text Center?
hey guys,
In order to align text isnt the command something like this? <h3 align="center">Text Here</h3> Is this right? I know its something really simple just for some reason I cannot get my text to center in the webpage. Any suggestions? Many thanks in advance! Similar Tutorialshello im stuck for an answer as to how to make this work here is my website www.crusty.com the problem is nothing is staying center of the container as you can see im nerw at this so im un sure what to do to make it work PLEASE HELP here is the header code </head> <body> <div id="container"> <div id="head"> <a href="/"> <img src="/assets/img/logo_main.gif" alt="CRUSTY DEMONS" /> </a> <ul id="nav_main"> <li class="tours first"> <a href="/upcomingtours.shtml"> Crusty Tours </a> </li> <li class="riders"> <a href="/crustyriders.shtml"> Crusty Riders </a> </li> <li class="club"> <a href="/crustyclub.asp"> Crusty Club </a> </li> <li class="news"> <a href="/news.shtml"> News </a> </li> <li class="fleshwound"> <a href="http://www.fleshwoundfilms.com/" target="_blank"> Fleshwound </a> </li> <li class="babes"> <a href="/babes.shtml"> Crusty Babes </a> </li> <li class="links"> <a href="/links.shtml"> Links </a> </li> <li class="gallery"> <a href="/gallery.shtml"> Gallery </a> </li> <li class="hospitality_vtwo"> <a href="http://www.bigwoolly.com/crustydemons"target="_blank"> hospitality </a> </li> <li class="contact"> <a href="/contact.shtml"> Contact Us </a> </li> </ul> <!-- END HEADER > here is the (ineffective) code currently: <img style="float: left; width: 169px; height: 73px;" src="img/logo1.png" alt="" /> <h1 style="text-align: center;">random text</h1> the image shifts the left margin such that the text is centered as though the page width was 169px less than it really is. i'm not debating the code itself; the code above behaves as its meant to. aka no surprises. i just cant figure out the appropriate code to center the text across the entire real width of the page as though there was no image. i've tried div tags & all the things google hunting advised. no luck. other than finding this forum, which seems like it'll be a boon! thanx in advance for advise/comments/feedback/help. Hi guys, can someone help me. I'm trying to get my text to sit like this: however it sits like this: www.studioeighty.co.uk thanks Steve This is a problem that i driving me crazy. I have this forms on my website that people can use to post comments. They have one textarea that they should write their name in and another that they should write their comment. I try to make the default text "Namn" and "Kommentar", but only "Namn" is showing in firefox. The weird thing is though, that if I change places between the two textareas, both are showing fine. I provide the site with the source code, and for a quicker check, the code for the two textareas. <textarea name="db_comment_namn" type="text" value="Namn" rows="1" cols="15" style="font-size: xx-small; font-family: Verdana; font-weight: Bold; font-style: Italic; border: 1px inset #CCCCCC; padding: 1px;">Namn</textarea> <textarea name="db_comment_kommentar" type="text" value="Kommentar" rows="1" cols="50" style="font-size: xx-small; font-family: Verdana; font-weight: Bold; font-style: Italic; border: 1px inset #CCCCCC; padding: 1px;">Kommentar</textarea> http://foto.jaxell.se Thanks in advance. Hello everyone, would someone please help me with just vertically centering the text within the box that says "This page was last updated on Monday, May 16, 2011 @ 10:39 AM" it's for my site located @ http://www.trillionaireme.com Here is my CSS code: Code: body {background-color:#ffffff;border-style:solid;border-width:5px;border-color:gray;border-bottom-color:#ffffff;border-left-color:#ffffff;border-right-color:#ffffff;}
h1 {background-color:#f5f5f5;font-size:17px; color:grey; font-family:arial;word-spacing:30px;text-align:center;}
h2 {font-size:17px; color:grey; font-family:arial;word-spacing:30px;text-align:center;}
p {font-size:11px; color:grey; font-family:arial;}
p.bordertop {border-style:solid;border-width:5px;border-color:gray;border-top-color:#ffffff;border-left-color:#ffffff;border-right-color:#ffffff;}
p.borderbottom {border-style:solid;border-width:5px;border-color:gray;border-bottom-color:#ffffff;border-left-color:#ffffff;border-right-color:#ffffff;}
IMG.displayed {display:block; margin-left:auto; margin-right:auto;}
a:link {color:grey; text-decoration:none;}
a:visited {color:grey; text-decoration:none;}
a:hover {color:#c0c0c0; text-decoration:none;}
a:active {color:#c0c0c0;text-decoration:none;}
div.page {width:920px;padding:0px;border:0px;margin:0px auto;}
div.logo {width:200px;padding:0px;border:0px;margin:0px auto;}
div.topleftbox {width:250px;height:250px;padding:0px;border:1px;border-style:solid;border-color:#dcdcdc;position:relative;top:20px;left:1px;font-size:11px;color:grey; font-family:arial;}
div.topmiddlebox {text-align: center;width:375px;height:25px;padding:0px;border:1px;border-style:solid;border-color:#dcdcdc;position:relative;top:-15px;left:270px;font-size:11px;color:grey;font-family:arial;text-align:center;margin-}
div.toprightbox {width:250px;height:250px;padding:0px;border:1px;border-style:solid;border-color:#dcdcdc;position:relative;top:-15px;left:394px;font-size:11px;color:grey;font-family:arial;text-align:right;}
My html code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><title>TrillionaireMe</title><link rel="shortcut icon" href="images/trillionaireme.ico"> <head><link rel="stylesheet" type="text/css" href="trillionaireme.css" /></head><body> <h1> </h1><div class="logo"><a href="http://www.trillionaireme.com"> <img class="displayed" src="http://www.trillionaireme.com/images/trillionaireme.jpg" width="196" height="233" border="0" /></a></div> <h1> </h1> <p class="borderbottom"> </p> <div class="page"><h2> <a href="http://www.trillionaireme.com/fitness.html">Fitness</a> <a href="http://www.trillionaireme.com/nutrition.html">Nutrition</a> <a href="http://www.trillionaireme.com/money.html">Money</a> <a href="http://www.trillionaireme.com/relationships.html">Relationships</a> <a href="http://www.trillionaireme.com/parenting.html">Parenting</a> <a href="http://www.trillionaireme.com/music.html">Music</a> <a href="http://www.trillionaireme.com/literature.html">Literature</a> <a href="http://www.trillionaireme.com/you.html">You</a> <a href="http://www.trillionaireme.com/them.html">Them</a> <a href="http://www.trillionaireme.com/vision.html">Vision</a></h2> </div> <div class="page"> <div class="topleftbox">This is the top left box. <div class="topmiddlebox">This page was last updated on Monday, May 16, 2011 @ 10:39 AM <div class="toprightbox">This is the top right box. </div></div></div></div> </body></html> I have found out that the <center> tag </center> is now obseolete eventhough broswers still display it. I was wondering on how i go about centering text so that it does validate according to xhtml standards. Thanks. I am trying to do something pretty basic, but I dont understand the behavior or how to fix it. I want something to look like (where the '*' are centered): Code: *
*
test *
*
*
*
and am using the code: Code: <CENTER>*</CENTER> <CENTER>*</CENTER> test<CENTER>*</CENTER> <CENTER>*</CENTER> <CENTER>*</CENTER> <CENTER>*</CENTER> But the output looks like: Code: *
*
test
*
*
*
*
when i center the search and quick link box at the top using a line height of 100.... it pushes the header image down 12px's... and spaces the header from the body of the page... any fix? http://www.pzproductions.com/home Well i am creating a website for a college assignment and i need some help please. I want a div (or anything else that might work) to go in the space shown in the pic. I have tryed aligning a div right but it doesnt go into the gap i want it to, also normal text wont go there eithe. please bear with me. i had been out of touch with web design for a while. well, a long while actually. last time i designed a website css wasn't the standards. ================================================== have a look at the site below: http://amarssadal.com/pp/ now above the video, between the video and the frame outlining it you can see a gap. now i cant for the love of god figure out what the hell went wrong there. ny ideas. ny suggestions. what could be wrong? ================================================== also. to manage this website and one other website, i want to give the client the freedom to add and remove and make changes to the content. now as i understand there are CMS to do just that. but how do i apply them. could you help me or guide me to a very layman's tutorial or something on CMS. Thanks. Here's my code: Code: <div align="center" style="background-color:#4D4D4D;width:1000px;height:30px;border:1px solid #00137F;filter:progid:DXImageTransform. Microsoft.Glow(color=#00137F)"> I can't get the DIV to change size. I know I haven't put 'Width="" height="" ' but that doesn't work. It's strange because usually I would've thought that would work. Hi. Can anybody tell me why this isnt validating? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = UTF-8" /> <title>.:Welcome to Wollongong Motorcycle Club:.</title> <style type = "text/css" media = "all"> @import"css/global.css"; </style> </head> <body> <div class = "content"> <div class = "banner"> </div> <div class = "body"> <div class = "navBarStandard"> <a href = "index.html">Home</a> <span style = "vertical-align:-8px;">|</span> <b>Calendar</b> <span style = "vertical-align:-8px;">|</span> <a href = "news.html">News</a> <span style = "vertical-align:-8px;">|</span> <a href = "forms.html">Forms</a> <span style = "vertical-align:-8px;">|</span> <a href = "photos.html">Photos</a> <span style = "vertical-align:-8px;">|</span> <a href = "directions.html">Directions</a> <span style = "vertical-align:-8px;">|</span> <a href = "#">For Sale</a> <span style = "vertical-align:-8px;">|</span> <a href = "links.html">Links</a> <span style = "vertical-align:-8px;">|</span> <a href = "#">Coaching</a> <span style = "vertical-align:-8px;">|</span> <a href = "#">Pointscore</a> <span style = "vertical-align:-8px;">|</span> <a href = "#">Interclub</a> </div> <!-- All Content goes after this line --> <br /> <div class = "calendarContent"> <div class = "datesTopCorner"></div> <!-- All Calendar entries are put after this line --> <div class = "entry1">Sun 15/04/07 - Round 2 ClubChamps Mt Kembla - <b>TRACK CLOSED</b></div> <div class = "entry2">Sun 22/04/07 - <i>MX Pointscore round 2</i></div> <div class = "entry1">Sun 29/04/07 - Coaching JT assessment - book on club No.</div> <div class = "entry2">Sun 06/05/07 - Practice day, round 3 ClubChamps Kiama</div> <div class = "entry1">Sun 13/05/07 - Mothers Day</div> <div class = "entry2">Sun 20/05/07 - <i>MX Pointscore round 3</i></div> <div class = "entry1">Sun 27/05/07 - Practice Day</div> <div class = "entry2">Sun 03/06/07 - Working bee</div> <div class = "entry1">Sun 10/06/07 - <i>MX Pointscore round 4</i></div> <div class = "entry2">Mon 11/06/07 - Long weekend / practice day</div> <div class = "entry1">Sun 17/06/07 - Track Hire Heaven Vintage - <b>TRACK CLOSED</b></div> <div class = "entry2">Sun 01/07/07 - Round 3 ClubChamps Mt Kembla - <b>TRACK CLOSED</b></div> <div class = "entry1">Sun 08/07/07 - <i>MX Pointscore round 5</i></div> <div class = "entry2">Sun 15/07/07 - Practice day</div> <div class = "entry1">Sun 29/07/07 - Practice day</div> <div class = "entry2">Sun 05/08/07 - <i>MX Pointscore round 6</i>, round 5 ClubChamps Kiama</div> <div class = "entry1">Sun 12/08/07 - Practice day</div> <div class = "entry2">Sun 26/08/07 - Practice day</div> <div class = "entry1">Sun 02/09/07 - Fathers Day</div> <div class = "entry2">Sun 09/09/07 - <i>MX Pointscore round 7</i></div> <div class = "entry1">Sun 16/09/07 - Trials Presentation Day Mt Kembla - <b>TRACK CLOSED</b></div> <div class = "entry2">Sun 23/09/07 - Practice day</div> <div class = "entry1">Mon 01/10/07 - Long weekend / practice day</div> <div class = "entry2">Sun 07/10/07 - <i>MX Pointscore round 8</i></div> <div class = "entry1">Sun 14/10/07 - Aust GP Philip Island</div> <div class = "entry2">Sun 21/10/07 - Practice day</div> <div class = "entry1">Sun 04/11/07 - Rain day for MX</div> <div class = "entry2">Sun 11/11/07 - Practice day</div> <div class = "entry1">Sun 18/11/07 - Xmas party / Presentation day</div> <div class = "entry2">Sun 02/12/07 - Practice day</div> <div class = "entry1">Sun 16/12/07 - Practice day</div> <!-- No more calendar entries can be put after this line --> <div class = "datesBottomCorner"></div> </div> <br /> </div> <div class = "bottomCorners"> <div class = "BottomCornerBox"> <span> <br /><br /> © Wollongong Motorcycle Club Ltd<br /> Ph: (02) 42 671 931<br /> P.O. Box 401, Figtree NSW 2525 </span> </div> </div> </body> </html> As you can see, im using XHTML 1.0 transitional, but aparrantly it isnt valid The following is the validation error I got from w3: ------------------------------------------------------------------------------------------- Error Line 107 column 6: end tag for "div" omitted, but OMITTAG NO was specified. </body>You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">". Info Line 14 column 0: start tag was here. <div class = "content"> ------------------------------------------------------------------------------------------- It sounds like i've done something really stupid and simple, like misplacing a div tag or something Thanks for reading this (and hopefully helping me). If you want me to post my CSS or attach a copy of my website, just say so Thanks again, Chris hi there, i am working on a page: http://test.furryfrog.co.uk/rokka/private i cant get the content to clear on the right hand side and extend the content area to 100%? i have tried all manner of clears, end divs, 100%heights but i just cant get it. any help is most appreciated. Regards Neil I hope I will be able to get some help here with this small problem of mine. I'm trying to get my favicon to appear and I'm having no luck. I have a 32 pixel square favicon.ico file in my root dir, and I entered <link rel="icon" type="image/x-icon" href="http://firstlightphotographs.com/favicon.ico"> in the head tag. That should do it right? It's not working so I must be missing something. I hope someone can help, thanks a lot. This problem is pretty self explanatory, please have a look here. It shows a slideshow that is almost working, but the moment i add the images they just stack up... not hidden, and not animated. I think ive missed out on something. No idea where to pinpoint it.. thank u for looking into this. Hey so how come my div wont go across the whole page width? my code: Code: <style type="text/css">
#adminbar {
background-color: #464646;
background-image: -moz-linear-gradient(center bottom , #3F3F3F, #464646 5px);
box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15) inset;
color: #DDDDDD;
font: 11px sans-serif;
height: 28px;
position: relative;
width: 100%;
z-index: 99999;
}
</style>
<div id="adminbar">
<p> hi there</p>
</div>
Here is what it looks like: Please help, i would greatly apreciate it. http://sugarbat.org/plugboard The table wont align with the image. Why? |
|||||||