|
HTML - Centering And Justifying Text
Im trying to center and justifty text on my website and really stuggling with it. Any help is appreicated!!
Thanks Dave Similar TutorialsHello chaps, I have a .php page and for some unknown reason the text will not centre itself in each of the cells. It's centred in the horizontal aspect, but vertically it always starts at the top. I thought that one only had to use the align="centre" tag when declaring the table. Interestingly if I convert the .php to .htm then the text does centre itself. What am I missing! Cheers etala I have a mobile application and the text is top aligned in the Blue division rather than centered: <div class="header"> <span style="">TREO 600 LITIGATION</span> </div> Not sure what to put in the Span tag. .header { height: 2.0em; background-color: blue; text-align: center; color: white; font-weight: bold; } And I am viewing this as a Mobile application on an iPhone. Todd I am trying to create a page header that has an image on the left and text that should be centered, however the centering takes into consideration the image. I would like the centering to use the full width. Can this be done? http://www.toddcary.com/pvrc/test1/header.html I don't know if this should really go in the css forum or here, but here it is. The page in question is at the following link: http://www.sikaband.com/archives/new/index.html and the css file being referenced is: http://www.sikaband.com/archives/new/blackstyle.css Viewing the page in Firefox, the links in the navigation bar are centered the way they ought to be. Safari for some reason shunts the text off to the right a good ways. When I put a visible border on the div in question, I can see that the div itself is aligned properly, it's just the text inside that's off. I'm confused. I have a web page that I had to convert from a .psd file to an html and I'm not able to center a submit button and the text field next to it. I've tried various alignments but I'm also limited by what I can do because when you convert from .psd to html the entire page is one form. I don't have an external link but I'm able to provide html if necessary. Can someone please take a look at my code and offer some suggestions? Thank you Doug Hi. I can't figure out how to have all the tables on my site aligned to the centre yet have the text in them aligned to the left. In other words I want 2 margins either side of the central body of my site. How can I do this? Thanks. how can i center the nav on this page? http://fantasyfootball.pzproductions.com/testing 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> 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? I am working on a website, and I have been trying to center the homepage so that it looks the same on every computer/ browser. It's sort of set up as a juvenile div layout. I've been using other layouts as an example so I don't really know how to fix what I don't want from theirs. I'd like the main image to be centered but I can't figure it out. It's positioned absolutely which might be part of the problem but I don't know what else to set it as. Also, on top of centering the image horizontally, I was wondering if there was any way that I could position it in the very center of the page. The link is http://appleseatmoregrass.webs.com/index.htm Hi, I'm trying to develop a fluid layout for a webpage - and I have two 50% <divs> that have images in them, and the width of these <divs> add to 100% of course. So from my resolution and slightly smaller ones it looks like they are centered. However, when I scale the browser down to a smaller size, they get squished together because they float left. How can I make it so one falls below the other and they become centered on the page at the same time? Cheers... I have a marquee coming in from the right as normal but want it stop in the centre of the page instead of at the far left. I cannot seem to find any reference to the code required. Thanks Lamarinapete I have a page laid out, but its not centering the main table? All the contents should be centered on the page but its shoved to the left. Take a look he www.puliz.com/default2.htm Also, there is a gap in the graphics just below the image map that I have placed there. Any ideas? Thanks in advance! Scott I'm currently using this template for blogger that's not made by myself and i've been trying to get it to center horizontally but it's not working. I'm hardly experienced with html so any help would be appreciated. Thanks in advance! HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML><head>
<title>The City That Never Sleeps</title>
<script type="text/javascript">
function changeNavigation(id)
{document.getElementById('content').innerHTML=document.getElementById(id).innerHTML}
</script>
<style type="text/css">
body {
background-image: url(http://i1015.photobucket.com/albums/af277/sleepingtoys/city/citybg.jpg);
background-repeat: repeat-x;
background-attachment: fixed;
background-color: #F0F0F0;
font: normal 8pt "Arial", sans-serif;
color: #808080;
line-height: 1.5;
text-align: justify;
}
#navbar-iframe{
display: none;height: 0px;
}
#bottom {
background: #222;
height: 20px;
width: 100%;
position: fixed;
bottom: 0;left: 0;z-index: 1;
}
#sun{
padding:5px;
background: #222222;}
#post{
filter: alpha (opacity=90);
-moz-opacity: 0.50; opacity: 0.90;
-webkit-transition-duration:1s;
padding:1px 3px 3px 0px;}
#post:hover{
filter: alpha (opacity=100);
-moz-opacity: 1.00; opacity: 1.00;
-webkit-transition-duration: 1s;
padding:1px 3px 3px 0px;}
#posts {
background: #ffffff;
vertical-align: top;
width: 520px;
-moz-border-radius: 10px 0 10px 10px;
-webkit-border-radius: 10px 0 10px 10px;
padding: 5px 10px 10px 10px;}
#postbody img {
padding: 6px;
background:#fafafa;
border: 1px solid #e1e1e1;}
#music img {
padding: 6px;
background:#111;
border: 0px solid #222;}
#moon {
background: transparent;
position: absolute;
top: 20px;
left: 315px;
width: 60%; }
#rain {
position: fixed;
width: 250px;
bottom: 10px;
left: 50px;}
#rain #content {
-webkit-border-radius: 10px 10px 0 0px;
-moz-border-radius: 10px 10px 0 0px;
background: #222222;
color: #999;
margin: 10px 0 0;
padding: 8px; }
::selection {
color: #888888;
background: #f5f5f5; }
::-moz-selection{
background: #f5f5f5;
color: #888888;}
.blogger-labels{
border-top: 1px solid #f8f8f8;
font-size: 10px;
padding-top: 5px;
margin: 10px auto 0 auto;
text-align: right;}
strong, b {color:#81A8B8;}em, i {color: #B94159 ; font-weight:bold;}u {color: #A79C8E ;border-bottom: 1px solid #A79C8E;}
a {
font: bold 8.5pt "helvetica", sans-serif;
color: #888;
text-decoration: none;
text-transform: lowercase;}
a:hover {
-moz-transition-duration: 1s;
-webkit-transition-duration:1s;
color: #ffffff; }
blockquote {
background-image:url("http://i589.photobucket.com/albums/ss333/HeartsAloud/dl/hbq.gif");
background-repeat: no-repeat;
background-position:top right;
font: normal 8pt "arial", monospace;
color: #999;
margin: 1px 0px 1px 0px;
border-top: 1px solid #eeeeee;
border-bottom: 1px solid #eee;
-webkit-transition-duration:1s;
padding: 9px 0px 9px 0px; }
blockquote:hover {
-webkit-transition-duration:1s;
color: #555; }
.date {
font: normal 20pt "helvetica", sans-serif;
text-transform: lowercase;
color:#dddddd;
letter-spacing:-3pt;}
.title {
font: normal 18pt "helvetica", sans-serif;
border-bottom: 1px solid #f5f5f5;
margin-top:-10pt;
margin-bottom:2px;
font-style:italic;
letter-spacing: -2pt;
color:#f1f1f1;
text-transform: lowercase; }
.time{
font: bold 30pt "arial", sans-serif;
-moz-border-radius: 0 7px 7px 0px;
-webkit-border-radius: 0 15px 15px 0px;
height: 50px;
background: #f9f9f9 !important;
padding: 1px 3px 3px 0px;
float: left;
position: relative;
color:#f1f1f1;
font-weight:bold;
letter-spacing:-6.5pt;
filter: alpha (opacity=70);
-moz-opacity: 0.70;
opacity: 0.70;
-webkit-transition-duration:1s;
}
.time:hover{
filter: alpha (opacity=90); -moz-opacity: 0.90; opacity: 0.90;
-webkit-transition-duration:1s;
padding:1px 3px 3px 0px;}
.clouds{
font: normal 18pt "helvetica", sans-serif;
font-color:#333333;
letter-spacing:-2pt; }
.sky{
text-align: right;
padding: 0 9px 0px 0px;
font: bold 40pt "helvetica", sans-serif;
letter-spacing:-7pt;
text-transform: lowercase;
line-height:50%;
color:#222;}
.navi {
background: #222222;
color: #555555;
border-bottom: 1px solid #333;
font: normal 8pt "helvetica", sans-serif;
letter-spacing: 3pt;
margin: 0;
padding: 8px 5px;
text-align: right;
text-transform: uppercase;
-webkit-transition-duration:1s; }
.navi:hover {
-webkit-transition-duration:1s;
background: #222;
color: #999999;
cursor: default;
border-right:140px solid #333; margin-right: 0px;}
a.label:link, a.label:active, a.label:visited {
text-decoration: none; display: block; font: bold 30pt "arial", sans-serif; color: #e4e4e4; text-align: center; padding-bottom: 3px; margin:5px;
}
a.label:hover{
color: #A6ACA7; }
</style></head>
<body>
<div id="rain">
<div class="sky">
The City That Never Sleeps
</div>
<div id="content">
<div id="music">
<img src="http://i1015.photobucket.com/albums/af277/sleepingtoys/wocky/3.jpg">
Best viewed in <b>Google Chrome</b>, screen resolution 1280 x 1024.
Do not put too much content under each header or else some of the content could not be seen.
</div>
</div>
<div class="navi" style="border-top: none;" onClick="changeNavigation('about')">ABOUT</div>
<div class="navi" onClick="changeNavigation('affiliates')">AFFILIATES</div>
<div class="navi" onClick="changeNavigation('archive')">ARCHIVES</div>
<div class="navi" onClick="changeNavigation('tagboard')">TAGBOARD</div>
<div id="sun">
</div>
<div id="about" style="display: none;">
<div class="clouds">profile</div>
<div id="music">
<img src="http://i1015.photobucket.com/albums/af277/sleepingtoys/wocky/1.jpg">
It's best to keep it short and sweet. (:
</div>
</div>
<div id="affiliates" style="display: none;">
<div class="clouds">affiliates</div>
<div id="music">
<img src="http://i1015.photobucket.com/albums/af277/sleepingtoys/wocky/5.jpg">
<a href="http://struckbywanderlust.tumblr.com" target="_blank">tumblr</a>
<a href="http://heartsaloud.livejournal.com" target="_blank">livejournal</a>
<a href="http://heartsinink.livejournal.com" target="_blank">heartsinink</a>
<a href="http://twitter.com/heartsaloud" target="_blank">twitter</a>
<div class="clouds">credits</div>
This skin is made by <a href="http://blogskins.com/me/sleepingtoys" target="_blank">sleeping</a><a href="http://about.me/halfway" target="_blank">toys</a>.<br>
Resources: <a href="http://www.sxc.hu/" target="_blank">1</a>, <a href="http://weheartit.com/entry/2591643" target="_blank">2</a>,
<a href="http://weheartit.com/entry/442753" target="_blank">3</a>, <a href="http://weheartit.com/entry/2868529" target="_blank">4</a>,
<a href="http://weheartit.com/entry/2867826" target="_blank">5</a>
</div>
</div>
<div id="archive" style="display: none;">
<div class="clouds">archives</div>
<div id="music">
<img src="http://i1015.photobucket.com/albums/af277/sleepingtoys/wocky/4.jpg">
<td width="235px" valign="top">
<form name="form1">
<select style="font-size:8pt;color:#999999;font-family: helvetica;background-color:#333333; border:1px solid #222222; padding: 0px; width: 235px;" onChange="location.href=this.options[this.selectedIndex].value;">
<option value=''>Archives</option>
<BloggerArchives>
<option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>
</BloggerArchives>
</select>
</form>
</td>
</div>
</div>
<div id="tagboard" style="display: none;">
<div class="clouds">talk</div>
<div id="music">
<img src="http://i1015.photobucket.com/albums/af277/sleepingtoys/wocky/2.jpg">
Any usable chat widget goes in here.<br>
A pop-up <a href="http://cbox.ws">cbox</a> is recommended.
If you do not want a pop-up cbox, its width should not exceed 250px.
</div></div>
</div>
<div id="moon">
<br><br><br>
<Blogger>
<br>
<table id="post" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="posts">
<div class="date">posted : <BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader></div>
<div class="title">title : <$BlogItemTitle$></div>
<div id="postbody"><$BlogItemBody$></div>
<td valign="top" width="112">
<div class="time" align="center"><a class="label" href="#top">
<$BlogItemDateTime$> </a>
</div></div>
</td></tr></table>
</Blogger>
<br><br>
<div id="bottom"></div>
</div>
</body></html>
I have a page that is not being centered on the background in both IE 6&7 but looks perfect in FF. I am not sure what is wrong because the template I used is vaild Here is the page http://www.mesquitechristmas.com/wea...Z119&icao=KHQZ I have been banging my head all day an maybe just need another pair of eyes. -Thanks http://www.jesdeis.com/index2.php the image window area WAS centered. and should still be. all i did was change the menu. but i cant figure out why its no longer centered. also. the funky character in front of the copyright. that is NOT in my source. Hi everyone, I couldn't really find a thread with this question... If there's already one with a solution to the problem, a link to the thread would be prefered over an answer here. Basically, my problem is that a layout I made doesn't center properly in IE. I have an y-repeated background in the center of the page, and on top a table. In Firefox everything looks fine and dandy, but in IE the table is a few pixels off to the left causing an error in the alignment. http://lastsong.sadil.net/ I don't really know how to fix it - I like it coded with tables better than with divs, so recoding it into divs won't do. (I am aware it doesn't validate on 6 points for those who care, but I can live with that for now...) If anybody has a solution to this problem, I'd love to hear it. Thanks! Hi, Have just uploaded a new website. In Safari, Opera and Firefox the webpage floats in the middle of the browser page, as I want it to. In some versions of IE its sits to the far left. Here is the page: http://www.ironworksstudio.co.uk/ And here is the CSS: Code: *{
margin: 0;
padding: 0;
}
body{
font-family: Helvetica, Verdana, Arial, sans-serif;
font-size: 15px;
color: #000000;
background-color:#000000;
}
#container {
margin-right: auto;
margin-left: auto;
margin-top: 15px;
width: 700px;
background-color:#000000;
}
p{
padding-top: 10px;
font-size: 13px;
line-height: 18px;
}
#header {
margin-right: auto;
margin-left: auto;
margin-bottom: 0;
height: 100px;
width:700px;
background-color:#000000;
padding: 0 0 10px 0;
}
#menu ul{
margin-left:0;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
background-color:#FFFFFF;
}
#menu li{
text-align: center;
text-decoration: none;
color: #ffffff;
background-color: #000000;
list-style-type: none;
width: 84px;
height: 20px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom; 3px;
margin-right: 2px;
margin-left: 2px;
float: left;
border: 1px solid;
}
#menu li:hover {
color: #ffffff;
background-color: #333333;
}
#menu li a {
text-decoration: none;
color: #ffffff;
}
#menu li a:hover {
color: #ffffff;
}
#footer {
font-size:12px;
font-family: Helvetica, Arial, sans-serif;
width: 700px;
margin-right: auto;
margin-left: auto;
clear: both;
background-color:#000;
color: #FFF;
}
#top_image {
margin-bottom:20px;
clear: left;
background-color:#000000;
}
#menu {
float: left;
width: 700px;
margin-bottom:10px;
background-color:#000000;
}
#two_column {
font-size:12px;
font-family: Helvetica, Arial, sans-serif;
line-height:1.4;
margin-top: 10px;
margin-bottom: 50px;
float: left;
width: 700px;
text-align: left;
background-color:#000;
}
#l_column {
font-size:12px;
font-family: Helvetica, Arial, sans-serif;
color:#FFF;
line-height:1.4;
margin-top: 10px;
margin-right: 30px;
margin-bottom: 50px;
float: left;
width: 335px;
text-align: left;
background-color:#000;
}
#l_column a{color:999999;}
#r_column {
font-size:12px;
font-family: Helvetica, Arial, sans-serif;
color:#fff;
line-height:1.4;
margin-top: 23px;
float: right;
width: 335px;
background-color:#000;
padding: 0 0 10px 0;
}
.left {
font-size:12px;
font-family: Helvetica, Arial, sans-serif;
width: 335px;
float: left;
text-align: left;
border: 2px solid #000000;
border-collapse: collapse;
background-color:#000000;
}
.right {
font-size:12px;
font-family: Helvetica, Arial, sans-serif;
width: 335px;
float: right;
text-align: left;
border: 2px solid #000000;
border-collapse: collapse;
margin-top:12px;
background-color:#000000;
}
th {
font-weight: bold;
font-size:13px;
color: #000000;
background-color:#FFFFFF;
padding: 5px;
}
td {
padding:5px;
}
tr {
color:#FFFFFF;
}
.rowstyle1 {
border-bottom:1px dotted;
}
#gallery {
background-color:#000;
width: 680px;
padding-left: 0;
}
#gallery ul { list-style: none;
margin-left: 0;
}
#gallery li {
padding-left:1.2px;
}
#gallery ul li { display: inline;
padding-right: 0;
}
#gallery ul img {
border: 0;
border-width: 0;
}
#gallery ul a:hover img {
border: 0 solid;
}
#gallery ul a:hover { color: #cccccc; }
hr {color:#333333;
border-style:normal;
padding: 0 0 0 0;
margin: 0 0 10 0;
}
h2 {color:#ffffff;}
</style>
|
|||||||