|
HTML - Html Alignment Problems
Hi guys,
I've created an advert with some affiliate links in that I want to display on my main pages of my website. I have only fairly recently jumped into the world of web design/development so I've probably not made the most efficient page. The advert is layed out inside a table that is 4 columns and 2 rows and everything seems fine when I view that page. Except, when I put this page into my main pages (via an iframe) it shows nearly correctly, but the alignment is slightly off: the second column in is a few pixels down than the others. I have checked the coding over and over to no avail. Is there maybe a reason for this? Or some tips that you could give? I did try yesterday by just copying and pasting the code directly from the advert page to the main pages which require them - but that's a whole new can of worms! The alignment of that attempt was beyond a joke (even then I couldn't work it out...). Many thanks in advance for your ideas. Similar TutorialsHi I'm having problems with the following set of code:- Code: <style> #columns { width: 600px; } #columns .column { position: relative; width: 46%; padding: 1%; border: solid 0px #000; } #columns .left { float: left; } #columns .right { float: right; }</style><div id="columns"> <div class="left column"> <p><b>What are your journey needs?</b></p><input type="checkbox" name="Journey Needs" value="Elderly">Elderly<br>
<input type="checkbox" name="Journey Needs" value="Wheelchair User">Wheelchair User<br>
<input type="checkbox" name="Journey Needs" value="Mobility Impaired">Mobility Impaired<br>
<input type="checkbox" name="Journey Needs" value="Unable to use own/public transport">Unable to use own or public transport<br>
<input type="checkbox" name="Journey Needs" value="No public transport available">No Public Transport available<br>
<input type="checkbox" name="Journey Needs" value="Group Hire - General Public">Group Hire - General Public<br>
<input type="checkbox" name="Journey Needs" value="Group Hire - Community Groups">Group Hire - Community Groups<br>
<input type="checkbox" name="Journey Needs" value="Youth">Youth<br>
</p>
</p> </div> <div class="right column"> <p><b>What is your journey purpose?<b></p><input type="Radio" name="Journey Type" value="Shopping">Shopping<br>
<input type="Radio" name="Journey Type" value="Hospital Appointment">Hospital Appointment<br>
<input type="Radio" name="Journey Type" value="G.P., Optician, Chiropodists, Physio,etc">G.P., Optician, Chiropodists, Physio. etc<br>
<input type="Radio" name="Journey Type" value="Day Care">Day Care<br>
<input type="Radio" name="Journey Type" value="Leisure">Leisure<br>
<input type="Radio" name="Journey Type" value="Education">Education<br>
<input type="Radio" name="Journey Type" value="Visiting (Hospital, etc)">Visiting (Hospital, etc)<br>
<input type="Radio" name="Journey Type" value="Other">Other<br>
<p>
</div></div></p>
<b>Please give more details:</b><br>
<textarea name="VisitorComment" maxlength="300" lengthcut="true" rows="6" cols="50">
</textarea><br><br>
I use two different browsers, IE7 (Version 7.0.5730.13CO) and Google Chrome (Version 12.0.742.142). Even though a simple solution would be to not use any column coding at all, thereby putting them one above the other, this makes the page too long so I am trying to get them side by side. The problem is that the page looks about perfect in IE but in Chrome the wording 'Please give more details' appears at the right-hand edge of the text area, unless you alter the page zoom in which case it appears above the radio functions. I've tried tagging as a table but the situation is then reversed: looks great in Chrome but in IE the check boxes are almost perfectly displayed and the radio functions are squashed. I'm not too familiar with tables or columns at this point. The table tags I hijacked from the Links page ( I was able to understand them enough to both remove and add new ldata to the table) on the site I'm helping develop and the column tags I gleaned from a html tutorial site. Is this just as issue with the way that different browsers display html or am I missing something in the tags? Thanks for looking and hope someone can help. hello i have found a solution. thanks anyway! Hi everyone, I'm working on a website for a family member who has a buisness doing antique restoration, I'm trying to make all the pages have the same alignment, the address is http://www.maxbarr.com/ if you click on the buttons along the top you'll see what i mean, some of them are the same alignment others are shifted slightly to the left, they all have exactly the same code as I've used a Dreamweaver template. However they do use stylesheets as well, with the gallery pages using two so I'm guessing it may be that. For bonus marks can someone tell me how to make the copyright information in the gallery section the same size as one the other pages. here is the code for the template: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>.:Max Barr Antique Furniture Restoration:.</title>
<style type="text/css" media="all">
<!--
@import url("../styles.css");
#header #logo a {
font-family: Times New Roman, Times, serif;
}
#index #outerWrapper #gradient #contentWrapper br {
color: #FFF;
}
#index #outerWrapper #gradient div {
color: #FFF;
}
-->
</style>
<!-- TemplateBeginEditable name="gallery info" --><!-- TemplateEndEditable -->
<!--[if IE 5]>
<style type="text/css">
#outerWrapper #contentWrapper #leftColumn1 {
width: 200px;
}
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
#outerWrapper #contentWrapper #content {
zoom: 1;
}
</style>
<![endif]-->
</head>
<body id="index">
<div id="header">
<div id="logo">
<a href="index.html" onmouseover=""> Max Barr Antique Restoration</a></div>
</div>
<div id="outerWrapper">
<div id="gradient">
<div id="nav" style="margin-bottom: 10px;">
<div align="center">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="profile.html">Profile</a></li>
<li><a href="restoration.html">Restoration</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
<div id="contentWrapper">
<div align="center"></div>
<div id="content"> <!-- TemplateBeginEditable name="Content" -->
<h1>This is the page title</h1>
<h2>This is the H2 tag</h2>
<!-- TemplateEndEditable --></div>
</div>
<div id="credit" align="center">Copyright © 2009 Max Barr
<br />
</div>
</div>
</div>
</body>
</html>
And here's the code for the stylesheet: Code: html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}
img {
border-style: none;
}
body {
background-color: #000000;
color: #333333;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 14px;
margin: 0 0 0 0;
padding: 0 0 0 0;
text-align: center;
background-image: url(images/body-bg.png);
background-repeat: repeat-x;
background-position: top;
}
h1 {
color: #FFFFFF;
font-size: 24px;
font-weight: normal;
line-height: 28px;
letter-spacing: -1px;
}
h2 {
color: #999999;
font-size: 18px;
font-weight: bold;
line-height: 20px;
}
a, a:link {
color: #CCCCCC;
font-weight: bold;
text-decoration: none;
}
a:visited {
color: #CCCCCC;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #FFFFFF;
text-decoration: bold;
}
a:focus {
color: #CCCCCC;
}
a:active {
color: #CCCCCC;
}
#outerWrapper {
margin: 0 auto 0px;
text-align: left;
width: 920px;
background: #fff url(images/content-bg.png) repeat-y left 13px;
}
#outerWrapper #gradient {
background-image: url(images/gradient-shadow.png);
background-repeat: no-repeat;
background-position: center top;
}
#header {
height: 80px;
background-image: url(images/header-bg.jpg);
background-repeat: no-repeat;
background-position: bottom;
width: 900px;
margin-right: auto;
margin-left: auto;
text-align: left;
padding-left: 20px;
}
#header #logo {
color: #FFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 28px;
font-weight: normal;
padding-top: 10px;
padding-left: 0px;
line-height: 50px;
float: left;
width: 1000px;
text-decoration: none;
}
#header #links{
color: #C06A05;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
float: right;
width: 370px;
text-align: right;
margin-top: 25px;
padding-right: 25px;
}
#links a, #links a:active, #links a:visited {
font-weight: normal;
color: #C06A05;
}
#header #links a:hover {
color: #CCCCCC;
text-decoration: none;
}
#nav {
height: 62px;
margin-right: 20px;
margin-left: 20px;
color: #FFFFFF;
background-color: #CCCCCC;
background-image: url(images/nav-bg.jpg);
background-repeat: repeat-x;
background-position: top;
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-left-color: #000000;
margin-bottom: 0px;
}
#nav ul {
margin: 0px;
padding: 0px;
}
#nav ul li {
margin: 0px;
display: block;
float: left;
list-style: none;
clear: right;
}
#nav ul li a {
display: block;
padding-right: 20px;
padding-left: 20px;
text-align: center;
color: #CCCCCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 62px;
font-weight: normal;
background-image: url(images/nav-border.jpg);
background-repeat: no-repeat;
background-position: right top;
}
#nav ul li a:hover {
background: url(images/nav-hover.jpg) repeat-x top;
text-decoration: none;
color: #FFFFFF;
}
#nav ul li#active {
background: url(images/nav-hover.jpg) repeat-x top;
text-decoration: none;
}
#nav ul li#active a {
color: #FFFFFF;
}
.subpage-navimage {
float: right;
}
#spacer {
background-image: url(images/nav-spacer.png);
background-repeat: no-repeat;
background-position: center top;
height: 27px;
}
#outerWrapper #feature {
height: 230px;
width: 880px;
margin-left: 20px;
margin-bottom: 5px;
background-image: url(images/feature.jpg);
background-repeat: no-repeat;
background-position: center top;
}
#outerWrapper #contentWrapper {
padding-right: 25px;
padding-left: 30px;
clear: both;
padding-top: 10px;
}
#outerWrapper #contentWrapper #leftColumn1 {
float: left;
padding: 0px;
width: 200px;
background-color: #232323;
border: 1px solid #161616;
}
#outerWrapper #contentWrapper #content {
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
background-color: #3E3E3E;
color: #CCCCCC;
border: 1px solid #2C2C2C;
font-size: 12px;
line-height: 18px;
}
#content-image {
margin-bottom: 15px;
}
#content ul li {
margin-bottom: 5px;
}
#outerWrapper #footer {
background: url(images/footer-bg.png) no-repeat left top;
height: 60px;
color: #666666;
text-align: center;
padding-top: 25px;
padding-right: 30px;
padding-bottom: 0px;
padding-left: 30px;
}
#leftColumnContent {
width: 190px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
color: #999999;
margin-right: 5px;
margin-left: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
#leftColumnContent h3 {
border: 1px solid #000000;
padding-top: 5px;
padding-bottom: 6px;
font-size: 12px;
padding-right: 4px;
padding-left: 4px;
background-image: url(images/sidebar-h3-bg.jpg);
background-repeat: repeat-x;
background-position: top;
color: #CCCCCC;
}
#leftColumn1 ul {
margin: 0px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}
#leftColumn1 ul li {
list-style: none;
display: inline;
}#leftColumn1 ul li a {
display: block;
padding: 4px 4px 4px 6px;
color: #999999;
}
#leftColumn1 ul li a:hover {
text-decoration: none;
background-color: #171717;
color: #CCCCCC;
}
.fltlft {
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
.fltrt {
float: right;
margin-left: 10px;
margin-bottom: 10px;
}
.sidebarlt {
padding: 6px;
border: 1px solid #000000;
background-color: #4E4E4E;
color: #CCCCCC;
}
.sidebardk {
color: #999999;
border: 1px solid #4A4A4A;
padding: 6px;
background-color: #1F1F1F;
}
.sidebardk a, .sidebardk a:hover, .sidebardk a:visited, sidebardk a:active {
color: #999999;
}
}
#credit {
text-align: center;
padding-top: 0px;
padding-bottom: 8px;
font-size: 11px;
color: #333333;
width: 920px;
margin-right: auto;
margin-left: auto;
}
#credit a, #credit a:hover, #credit a:visited, #credit a:active, #credit a:focus {
color: #333333;
font-weight: normal;
}
#index #outerWrapper #gradient p {
color: #FFF;
}
#index #outerWrapper #gradient div {
color: #FFF;
}
btw I know the code is very messy, I'm trying to learn more so I can clean it up a bit Thanks very much Hello ladies and gentlemen. Im having trouble aligning some buttons i made with an a big image and small image of the like. They need to look like this... http://i217.photobucket.com/albums/c...wayne/main.jpg but currently are out of sync and all stuffed up. I was wondering what i could do to correct he problem and make it like the image above. Thanks in advance Hi I know I'm probably committing a cardinal sin by using a table for this layout but that's what I've done. For some reason which I cannot determine the second column is not aligned with the first column in Chrome 11 and Firefox 3.6 but on IE it works correctly. http://wwwrobe.www39.a2hosting.com/?page_id=4 Any help would be greatly appreciated. Many thanks Hi guys, I have two problems with my site http://www.djash.com Both problems have to do with charts section. 1. The font size for the charts shows bigger in firefox and chrome - it shows correctly on IE as intended. 2. I need to decrease the gap between the "Mainstream House" Charts and the "RnB" charts but I haven't been able to find a way to do it. thanks a lot in advance for anyone who can help with these 2 issues Andreas New to the forum, but the title states it all. I'm trying to help someone find a fix for his website, when people use Internet Explorer 6 or 7 to view the site, it looks like this: http://img707.imageshack.us/img707/7493/badq.jpg Here is the link to the page he's having trouble with: http://biglake411.com/ When viewed in FF or IE8 it views fine. While just having everyone update to Internet Explorer 8 or FF would be the easiest thing, some people are viewing/using the website from work computers and cannot update. I think he used some kind of automatic generator to create the code. If you could help diagnose the problem it'd be much appreciated... Feel free to email me the fix or post it on here. Much appreciated everyone! On the website: www.jsbseafoods.20m.com Have the following problems: Browser Issues: 1.) When viewed with Microsoft Internet Explorer it is aligned to the left instead of centred, top of the company name is missing, company jpg and gif images missing? 2.) When viewed with Firefox company name is missing? 3.) When viewed with Chrome sometimes when you scroll down the page and then up, top part of the company name is missing? Other Issues2: *SOLVED* 4.) On the Homepage "/div>" appears at the bottom of the page, I cant find where this is in the html code to remove? *SOLVED* 5.) On the Location page in Firefox and Chrome the page has an un-necessary space below the google map, on Internet Explorer the page is cut short. It would be greatly appreciated if you could help with these issues, I have been looking through the html and css code and cant find the problems. Thanks James Hi guys, I've been frustrated for awhile trying to fix three of my problems. I just started making a site for myself today, the specific one is http://www.bcsticketsnow.com/rosebowl.html Anyway, I've got three problems, and appreciate any help anyone can offer on any of them: 1. I'm new to frames, and am told to stay clear of it. But I don't know php, so this is the only way I know to make a header, middle and footer on all 20 pages that I'm going to have where I only need to edit one to change all. So I have 3 frames in the frameset, header, mainrosebowl, and footer. I understand that cols="220,*,100" will make the header 220 pixels, the footer 100 px, and the middle part the rest of the window. But I'm trying to figure out a way to have it go deeper than the window. As you can tell, I've got a scroll bar on that middle frame. I want that frame to extend to more than 100% and push the footer below the visible window. So I'm really looking for a big scroll bar for the entire window to scroll down, not a mini scroll bar just for the middle frame. Is this possible? Having the cols add up to only the size of the window isn't what I'm looking for. 2. In the header frame, I've got that drop down menu (says "Bowl Events"). When I put the form in for the drop down menu, it kind of expanded the height of the table. It had less space before in that row of the table with the blue background. When I put the form in there, it kinda messed up the spacing. I essentially want to delete that space below bowl events to make the height of the row of that table like half the size. Any ideas? 3. For that same drop down menu, I'm trying to target each link in that menu to open up a new window (like target="_top"). But putting it after <option value="URL" target=..."> does nothing. Am I supposed to put it in the javascript? Here's what I have now: <script type="text/javascript"> function goToPage(dd) { var ind = dd.selectedIndex; if (ind == 0) { return; } var url = dd.options[ind].value document.location=url; } </script> <form> <select name="eventlist" onChange="goToPage(this); return false;" size="1" style="border: 0; BACKGROUND: navy; COLOR: white; FONT-FAMILY: arial; FONT-SIZE: 15px; font-weight: bold;"> <option value="">Bowl Events</option> <option value="http://www.bcsticketsnow.com/bcschampionship.html" onclick="header.location.href='_top'">BCS Championship</option> <option value="http://www.bcsticketsnow.com/rosebowl.html">2009 Rose Bowl</option> <option value="http://www.bcsticketsnow.com/orangebowl.html">2009 Orange Bowl</option> <option value="http://www.bcsticketsnow.com/fiestabowl.html">2009 Fiesta Bowl</option> <option value="http://www.bcsticketsnow.com/sugarbowl.html">2009 Sugar Bowl</option> <option value="http://www.bcsticketsnow.com/chickfilabowl.html">2009 Chick-Fil-A Bowl</option> <option value="http://www.bcsticketsnow.com/capitalonebowl.html">2009 Capital One Bowl</option> <option value="http://www.bcsticketsnow.com/cottonbowl.html">2009 Cotton Bowl</option> <option value="http://www.bcsticketsnow.com/holidaybowl.html">2009 Holiday Bowl</option> </select></form> In the new website I am building, I have one line that displays at the top of the page out of place. It is similar to 2 other pages that are coded correctly. I think the best way to describe it is for you to take a look. NOTE: ALTHOUGH PAGES ARE .PHP, THEY ARE JUST HTML FILES WITH PHP EXTENSION, SOME PHP IS GOING TO BE IMPLEMENTED IN THE FUTURE BUT THERE IS NONE YET. Page that is wrong: www.heartlandcustom.com/greenproducts.php Similar correct pages: www.heartlandcustom.com/residentialproducts.php www.heartlandcustom.com/commercialproducts.php Code: HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>insidecontent</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
}
-->
</style></head>
<body bgcolor="#587652">
<!-- DO NOT MOVE! The following AllWebMenus code must always be placed right AFTER the BODY tag-->
<!-- ******** BEGIN ALLWEBMENUS CODE FOR greentext ******** -->
<script type='text/javascript'>var MenuLinkedBy='AllWebMenus [4]',awmMenuName='greentext',awmBN='DW';awmAltUrl='';</script>
<script charset='UTF-8' src='greentext.js' type='text/javascript'></script>
<script type='text/javascript'>awmBuildMenu();</script>
<!-- ******** END ALLWEBMENUS CODE FOR greentext ******** -->
<!-- DO NOT MOVE! The following AllWebMenus linking code section must always be placed right AFTER the BODY tag-->
<!-- ******** BEGIN ALLWEBMENUS CODE FOR residentialtext ******** -->
<script type="text/javascript">var MenuLinkedBy="AllWebMenus [4]",awmMenuName="residentialtext",awmBN="730";awmAltUrl="";</script>
<script charset="UTF-8" src="residentialtext.js" type="text/javascript"></script>
<script type="text/javascript">awmBuildMenu();</script>
<!-- ******** END ALLWEBMENUS CODE FOR residentialtext ******** -->
<!-- ******** BEGIN ALLWEBMENUS CODE FOR menu ******** -->
<script type='text/javascript'>var MenuLinkedBy='AllWebMenus [4]',awmMenuName='menu',awmBN='DW';awmAltUrl='';</script>
<script charset='UTF-8' src='menu.js' type='text/javascript'></script>
<script type='text/javascript'>awmBuildMenu();</script>
<!-- ******** END ALLWEBMENUS CODE FOR menu ******** -->
<!-- ImageReady Slices (insidecontent.psd) -->
<table id="Table_01" width="781" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5"><img id="insidecontent_01" src="images/insidecontent_01.jpg" width="780" height="97" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="97" alt="" /></td>
</tr>
<tr>
<td colspan="4"><div align="center">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
width="711" height="350" id="CoffeeCup" align="middle">
<param name="movie" value="myalbum3.swf"/>
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="salign" value="lt" />
<param name="bgcolor" value="#ffffff" />
<embed src="myalbum3.swf" quality="high" bgcolor="#ffffff" width="711" height="350"
name="CoffeeCup" scale="noscale" salign="lt" align="middle" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
<p> </p>
<p> </p>
<p> </p>
<p align="left"> </p>
</div>
<span id='awmAnchor-greentext'> </span></td>
<td rowspan="5"><img id="insidecontent_03" src="images/insidecontent_03.jpg" width="47" height="653" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="575" alt="" /></td>
</tr>
<tr>
<td id="awmAnchor-menu"></td>
<td colspan="3" rowspan="2"><img id="insidecontent_05" src="images/insidecontent_05.jpg" width="193" height="40" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="35" alt="" /></td>
</tr>
<tr>
<td rowspan="3"><img id="insidecontent_06" src="images/insidecontent_06.jpg" width="540" height="43" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="5" alt="" /></td>
</tr>
<tr>
<td rowspan="2"><img id="insidecontent_07" src="images/insidecontent_07.jpg" width="20" height="38" alt="" /></td>
<td><img id="insidecontent_08" src="images/insidecontent_08.jpg" width="121" height="22" alt="" /></td>
<td rowspan="2"><img id="insidecontent_09" src="images/insidecontent_09.jpg" width="52" height="38" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="22" alt="" /></td>
</tr>
<tr>
<td><img id="insidecontent_10" src="images/insidecontent_10.jpg" width="121" height="16" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="16" alt="" /></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
Thanks, Anders Hi, when I save a word doucment as a html, the Alignment moves from centered to Left alignment. Is this normal? Can i stop this from happening? I am a basic user of a PC. Thanks. SD Hi Everyone, I'm really needing help. I'm taking a stab at building my first webpage to my Dad's business. I am trying to figure out how to put a company logo in the top left corner, but every time I do it moves everything around. Does anyone have any idea on how I can keep the current format but also put a logo in the top left corner? Any and all help is greatly apprecaited as this is the 3rd or 4th forum I have posted on looking for help. The site is www.bennettspainting.com Best Regards, Aetrox Can someone help me. If you go to ColinQuinn.Net, you can see all the text is in one column under the pic. I want to get the text to the right of the photo, and proceed the text all the way across in normal form. If I paste it to word, it comes out fine. I dont understand whats wrong with it. Thanks. Hi This is what i have: PHP Code: div id="wrapper"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="17%" ><img src="element.png" width="230" height="381" /></td> <td width="29%" align="left">middle</td> <td width="25%" align="left" background="backimg.png"><p>dfg</p></td> <td width="29%"></td> </tr> </table> </div> and this is what i get: Basically i have a table with 3 cells, the left (with the pink effect), the middle, and the right side. What i want is that image effect which is in left side of the page to be always aligned at top. should i create another <div> inside the <td> and put the image in the <div> ? is there a good way to do this ? Thanks Hello all, I am having a problem which I can't seem to figure out with an html page. I sliced up a photoshop image then turned it into a web page. I took the html table from the sliced up header, and plugged it into the final web page. It looked like it was aligned properly in Dreamweaver, however when I viewed the webpage there were some alignment issues with the page. Here is the link to the misaligned page: http://test.gridpointpm.com Here is the code for part of the index page that includes the header with the alignment issues: 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></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="layout.css" rel="stylesheet" type="text/css" />
<script src="maxheight.js" type="text/javascript"></script>
</head>
<body id="page1" onload="new ElementMaxHeight()">
<div class="w">
<div class="site_center">
<div class="site_center1">
<div id="header">
<div class="flash">
<!-- Save for Web Slices (indexheader.psd) -->
<table id="Table_01" width="866" height="441" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="13">
<img src="images/index_01.jpg" width="866" height="66" alt=""></td>
<td>
<img src="images/spacerh.gif" width="1" height="66" alt=""></td>
</tr>
<tr>
<td colspan="13"><img src="images/index_02.jpg" width="866" height="206" alt="" /></td>
<td>
<img src="images/spacerh.gif" width="1" height="206" alt=""></td>
</tr>
<tr>
<td colspan="7" rowspan="2">
<img src="images/index_03.jpg" width="632" height="114" alt=""></td>
<td colspan="5">
<img src="images/index_04.jpg" width="157" height="34" alt=""></td>
<td rowspan="6">
<img src="images/index_05.jpg" width="77" height="169" alt=""></td>
<td>
<img src="images/spacerh.gif" width="1" height="34" alt=""></td>
</tr>
<tr>
<td colspan="5" rowspan="2">
<img src="images/index_06.jpg" width="157" height="95" alt=""></td>
<td>
<img src="images/spacerh.gif" width="1" height="80" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="images/index_07.jpg" width="360" height="15" alt=""></td>
<td rowspan="3">
<img src="images/index_08.jpg" width="180" height="40" alt=""></td>
<td rowspan="4">
<img src="images/index_09.jpg" width="92" height="55" alt=""></td>
<td>
<img src="images/spacerh.gif" width="1" height="15" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/index_10.jpg" width="153" height="40" alt=""></td>
<td>
<img src="images/index_11.jpg" width="42" height="16" alt=""></td>
<td rowspan="3">
<img src="images/index_12.jpg" width="9" height="40" alt=""></td>
<td>
<img src="images/index_13.jpg" width="58" height="16" alt=""></td>
<td rowspan="3">
<img src="images/index_14.jpg" width="98" height="40" alt=""></td>
<td rowspan="3">
<img src="images/index_15.jpg" width="31" height="40" alt=""></td>
<td>
<img src="images/index_16.jpg" width="44" height="16" alt=""></td>
<td rowspan="3">
<img src="images/index_17.jpg" width="7" height="40" alt=""></td>
<td>
<img src="images/index_18.jpg" width="55" height="16" alt=""></td>
<td rowspan="3">
<img src="images/index_19.jpg" width="20" height="40" alt=""></td>
<td>
<img src="images/spacerh.gif" width="1" height="16" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/index_20.jpg" width="42" height="24" alt=""></td>
<td rowspan="2">
<img src="images/index_21.jpg" width="58" height="24" alt=""></td>
<td rowspan="2">
<img src="images/index_22.jpg" width="44" height="24" alt=""></td>
<td rowspan="2">
<img src="images/index_23.jpg" width="55" height="24" alt=""></td>
<td>
<img src="images/spacerh.gif" width="1" height="9" alt=""></td>
</tr>
<tr>
<td>
<img src="images/index_24.jpg" width="180" height="15" alt=""></td>
<td>
<img src="images/spacerh.gif" width="1" height="15" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</div>
</div>
Any help would be much appreciated. Thanks in advance. I have my sidebar to the bottom center. I want it to the left of my content. l-------------l ----------------------------------------------------------------- l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l------------ l l----------------------------------------------------------------l That's what I want it to look like. Here's my code right now; <center><TR height=*> <TD bgcolor=2f2f2f valign="left"><font color=eaeaae> <CENTER> <BR><BR> <TABLE border=0> <TR width=25%><TD bgcolor=green><CENTER><FONT SIZE="+3"><A HREF="index.html">Home</A></FONT></CENTER></TD></TR> <TR><TD bgcolor=darkgreen><CENTER><FONT SIZE="+3"><A HREF="characters.html">Characters.</A></FONT></CENTER></TD></TR> <TR><TD bgcolor=green><CENTER><FONT SIZE="+3"><A HREF="mguide.html">Mission Guide</A></FONT></CENTER></TD></TR> <TR><TD bgcolor=darkgreen><CENTER><FONT SIZE="+3"><A HREF="contact.html">Contact</A></FONT></CENTER></TD></TR></center> </CENTER> </font></TD> <TD valign="left"> I've created a frameset, and on the top frame I have a flash animation, and on the main frame is where my stuff is loaded! The thing is, the top is aligned to center, and the main frame too! but on the main frame isn't aligned with the top one, I think is because of the scrollbar! It aligns between the left end of the browser and the scroll bar instead of the right end of the browser... is there a way to align without the scrollbar?? i can't disable the scrollbar because i need it LoL Hope you understand what I'm saying ... LooL check this link http://black1c3.awardspace.com/ so you can see what i'm saying the two images are not aligned... thanks for your time!! Hi I'm a bit of a newbie to any kind of HTML codes Ive made a Test website so I can try out this piece of software that helps to create mobile web sites using HTML Here's the Website : http://82.45.130.37/atozcouriers/ftp...001/index.html Heres the HTML : http://www.2shared.com/document/XdlY...html?(Password :21) I am using notepad to edit as any web editor messes up the viewing of the website in a Mobile Browser The mobile Browser is Safari on iPad,iPhone or iPod touch My problem only happens on one page , the homepage. It aligns the main body to the right a bit and adds a line I've experimented a bit but as I'm a newbie I'd don't know what to do. Any help would be gratefully appreciated. Thanks keirjohnharry im not sure if this is an issue with html or css but im i have 3 columns in a table of 1 row and im using css to assign a background image to the table columns and the 1st and 3rd column will not top align the background image properly to line up with the background image of the 2nd column (or possibly its the 2nd not lining up with the 1st and 3rd) i will link to the site and post the affecting code here (you can view source on the page to see the html) http://www.wiffleague.com/main.php Code: td.mainBoxTitle
{
background-color: #4d6066;
background-image: url('../images/topmiddleedge.png');
background-repeat: repeat;
background-position: top left;
background-attachment: fixed;
font-family: Geneva, Verdana, Tahoma;
color: #000000;
font-size: 8pt;
text-decoration: none;
font-weight: bold;
border-left: 0px;
border-right: 0px;
border-top: 0px;
border-bottom: 0px;
}
td.mainBoxTitleLeft
{
background-color: #4d6066;
background-image: url('../images/topleft.png');
background-repeat: no-repeat;
background-position: top left;
font-family: Geneva, Verdana, Tahoma;
color: #000000;
font-size: 8pt;
text-decoration: none;
font-weight: bold;
border-left: 0px;
border-right: 0px;
border-top: 0px;
border-bottom: 0px;
}
td.mainBoxTitleRight
{
background-color: #4d6066;
background-image: url('../images/topright.png');
background-repeat: no-repeat;
background-position: top right;
font-family: Geneva, Verdana, Tahoma;
color: #000000;
font-size: 8pt;
text-decoration: none;
font-weight: bold;
border-left: 0px;
border-right: 0px;
border-top: 0px;
border-bottom: 0px;
}
note: the 3 background images in question were sliced off of the same original psd file and exported as png files using the same pixel height per slice (35px) and a 35px width for the left and right image with a 3px width for the middle image |
|||||||