|
HTML - Alignment / Widths
Hello all,
Just quick question: 1.) I am on Blogger and I want the layout to be centered (not the text). How can I achieve this? 2.) I have 4 containers (navigation at top, main for posts, sidebar for more navigation, and a footer), what is the best way to have a width that looks great/compatible on IE-FF as well as smaller CRT's to widescreen LCD's? 3.) Any other tips/suggestions/clean up on my coding would be much appreciated. Thanks in advance, I apologize if this is a bit much... Code: body {
background:$bgcolor;
background-image: url();
background-repeat: repeat;
background-attachment: fixed;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}
a img {
border-width:0;
}
/* Header
-----------------------------------------------
*/
#header-wrapper {
margin:0 2% 10px;
border:0px solid $bordercolor;
width: 1072px;
}
#header-inner {
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}
#header {
margin: 5px;
border: 0px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
}
#header a:hover {
color:$pagetitlecolor;
}
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}
#newnavbar {
position: absolute;
width: 1072px;
height: 50px;
margin: 0 auto;
margin-top: 0px;
font-weight: normal;
background: url("")no-repeat;
}
#newnavbar a{
color:#000000;
}
#newnavbar a:hover{
color:#ff9900;
}
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
position: absolute;
margin: 0 auto;
padding:10px;
width: 1072px;
text-align:$startSide;
font: $bodyfont;
}
#wrap2 {
width: 1072px;
}
#main-wrapper {
background:#000000;
margin: 0 auto;
width: 672px;
float: left;
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
background:#000000;
margin: 0 auto;
width: 400px;
float: right;
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
/* Headings
----------------------------------------------- */
h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}
/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
}
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {
color:$textcolor;
}
.post p {
margin:0 0 .75em;
line-height:1.6em;
}
.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}
.comment-link {
margin-$startSide:.6em;
}
.post img {
padding:4px;
border:1px solid $bordercolor;
}
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}
/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
#blog-pager-newer-link {
float: $startSide;
}
#blog-pager-older-link {
float: $endSide;
}
#blog-pager {
text-align: center;
}
/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.main .Blog {
border-bottom-width: 0;
}
/* Profile
----------------------------------------------- */
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
padding: 4px;
border: 1px solid $bordercolor;
}
.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
color: $sidebarcolor;
font-weight: bold;
line-height: 1.6em;
}
.profile-datablock {
margin:.5em 0 .5em;
}
.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}
.profile-link {
font: $postfooterfont;
text-transform: uppercase;
letter-spacing: .1em;
}
/* Footer
----------------------------------------------- */
#footer {
width: 1072px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
#rec{
width: 400px;
height: 35px;
background: url("")no-repeat;
}
#cat{
width: 400px;
height: 30px;
background: url("")no-repeat;
}
#aut{
width: 400px;
height: 35px;
background: url("")no-repeat;
}
#new{
width: 400px;
height: 35px;
background: url("")no-repeat;
}
#bar{
width: 400px;
height: 22px;
background: url("")no-repeat;
}
/** Page structure tweaks for layout editor wireframe */
}
body#layout #header {
margin-$startSide: 0px;
margin-$endSide: 0px;
}
]]></b:skin>
</head>
<body>
<div id='outer-wrapper'><div id='wrap2'>
<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='5' showaddelement='yes'>
<b:widget id='Header1' locked='true' title=' (Header)' type='Header'/>
<b:widget id='HTML6' locked='false' title='Navigation' type='HTML'/>
</b:section>
</div>
<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'/>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML2' locked='false' title='WELCOME' type='HTML'/>
<b:widget id='HTML3' locked='false' title='MEMBERS' type='HTML'/>
</b:section>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>
</div> <!-- end content-wrapper -->
<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
<b:widget id='HTML1' locked='false' title='Content' type='HTML'/>
</b:section>
</div>
</div></div> <!-- end outer-wrapper -->
</body>
</html>
Similar TutorialsHi guys, I have a problem with table widths used to arrange content on a website. Why am I not using DIVs? Because it's too time consuming at the moment to convert it over, and my client is not familiar with DIVs and has no time to learn it. So I have to stick to using tables for him to maintain on his own. Here's a quick rundown on my table layout. ----------------------------- |TD1-------------|TD1a****| ------------------ |TD2-------------|********| ------------------ |TD3-------------|********| ------------------ |TD4-------------|********| |Table 2----------|********| ------------------------------ |TD5-------------|********| ------------------------------ That's my attempt to illustrate my layout. I'm using * and - as fillers, the editor removes all the empty spaces... My problem is, TD1 to TD3 and TD5 aligns nicely vertically - they all have the same / correct width. However, TD4 with a table inside is slight shorter in width than it should. About 1 or 2 px. The following shows the screenshots. zoomed in.... I need to get that TD4 with the table inside to have the same width as the others. I have tried removing all BORDER and BORDERCOLOR codes from all the table tags, no use. I tried using both CSS and the table tag WIDTH to control it, still doesn't work. Need suggestions!! Please click here to see my code. It's a little messy... http://www.thienkaiwei.com/index7.html Hi Guys, I'm having major problems with setting the widths of columns on my page. As per attached pic, I'm trying to get the three main columns to be exactly 300 however it is putting it as 300 (308) in the design view which means the backgrounds in some of the table cells are repeating as shown in box and the text is spreading across the table cell width of what the figure is in brackets and not the 300 I want it to be. Any one got any ideas - its driving me nuts ! Why the "R w50" text is not on the right?? And why the widths on the top table are not correct? How can I fix it? Code: <table border=1 cellpadding=5 cellspacing=0>
<tr>
<td style=\"width:30px;\">w30</td>
<td>n</td>
<td style=\"text-align:right; width:50px;\">R w50</td>
</tr>
<tr>
<td colspan=3>
<table border=1 cellpadding=5 cellspacing=0 bordercolor=red width=100%>
<td style=\"width:30px;\">w30</td>
<td>n n n n n n n n n n n n n n n n n n n</td>
<td style=\"text-align:right; width:50px;\">R w50</td>
</table>
</td>
</tr>
</table>
Code: <table border="0" width="900" cellspacing="0" cellpadding="0"> <tr> <td> Text part 1</td> <td> Text Part 2</td> </tr> </table> Hi All i have the above piece of code which shows a 2 colum table. How can i set the widths of my cols to match the width of the text that is in it? I.e set col 1 to the width of text that is in it ( will not always be same length) and have cols 2 start as soon as this finishes. Im assuming this is a simple thing to do but im just not sure. Hi all, thank you in advance to anyone that can help. I'm sure this is probably an issue that has been covered in the past however I have had no luck finding it. I have a 2 column table with an iframe the left column. Firefox shows this correctly, the edge of the cell meets with the iframe etc, but when viewed in IE, the table widths change dramatically. I have inserted two images (firefox v IE) to show what is happening. If anyone can find what I have done wrong, I would greatly appreciated. Please, keep the replies in simple terms, I'm a bit of a n00b... [IMG][img=http://img2.freeimagehosting.net/uploads/36b3e47e84.jpg][/IMG] Is it possible to set a table's width as something like this? HTML Code: <table width="100%-100px"> Hi all, thank you in advance to anyone that can help. I'm sure this is probably an issue that has been covered in the past however I have had no luck finding it. I have a 2 column table with an iframe the left column. Firefox shows this correctly, the edge of the cell meets with the iframe etc, but when viewed in IE, the table widths change dramatically. I have inserted two images (firefox v IE) to show what is happening. If anyone can find what I have done wrong, I would greatly appreciated. Please, keep the replies in simple terms, I'm a bit of a n00b... As you can see, the gray table background has overlapped over the iframe. Basically what I want is a floating table head that follows you around when you scroll the table. Did all that, but the problem is that you need to cut out the head of the table to make it float. The problem comes where you have a table that has no column width set so the column width is determined by the content of tbody. I'm trying to make the browsers keep rendering the entire table, but hide the tbody so the columns won't loose their widths. It works fine in Mozilla and Opera, but IE has problems. Here is the code: HTML Code: <html>
<head>
<style type="text/css">
table
{
border-collapse: collapse;
}
tbody td
{
line-height: 0px;
visibility: hidden;
}
</style>
</head>
<body>
<table id="table_test"
border="0" cellpadding="0" cellspacing="0"
style="background-color: red;">
<thead>
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
<th>column4</th>
<th>column5</th>
<th>column6</th>
<th>column7</th>
</tr>
</thead>
<tbody>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
</tbody>
</table>
</body>
</html>
And the result can be seen in the attached picture. Any ideas how to solve this or another way to preserve the thead column widths? why the table i have dont expand over browser borders when sum of td widths is bigger than screen width? How can i overcome this problem? 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 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 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>
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, 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 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? 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 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. 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;
}
|
|||||||