|
HTML - Alignment Problem
Similar TutorialsOn my website, www.JKRfan.com , the alignment on the layout is a little bit off and I can't figure out why. The problem with the alignment also changes from page to page. Will somebody please help? Thanks, Kristen I've been putting my layout into html from photoshop and finally finished, thing is I was using Firefox to view it as I went along. Now when I view it in Internet Explorer, there is this small unexplained space on the right side of my header image that is screwing up the page, plus the table that I have the navigations links on the top left has way more spacing between rows than it does on Firefox. Here's the layout: http://www.ff12guide.com/ the two problems a 1) the empty space to the right of 'header_red.jpg' and 'top-2-shadow.jpg' at the top of the page 2) the links in the 'sections' area at the top-left (characters, combat, etc.) is much more spaced out than it is in Firefox, and does not look right I absolutely cannot figure out how to fix this and it's driving me nuts, anyone have an idea? i have uploaded my website. i m facing a problem. my website appears differently in different computers. its like changing alignment, table spreading so so. i used table to develop the site. how can i fix this problem. Can anyone help me? I am practicing code from a file and I am having issues. Specifically, I the geogebra applet is supposed to be framed in the right side, where the "buttons" are the left. I can't figure out why the file is not on the right side in its own section. Any suggestions? I am attaching the code using a word document... I highlighted what I feel is the problem. Nick I'm really stuck here. This has worked in the past, but not it seems to not be working. It must be a really easy fix. HTML Code: <body style="font-family:Georgia;"> <div align="center"> <div id="content"> Lorem ipsum... </div> </div> </body> I want the "content" field to be center aligned, but it is still sitting there on the left. How do I fix this? Thanks! Hi, I've finally created a 2 level CSS menu and I've positioned a DIV layer below it for the content. However, I would like to know how to shift the content DIV layer up, closer to the menu (horizontal one). Or is my coding for the menu causing a problem? Here's my site btw: Click Hi, I can usually troubleshoot basic html issues, but don't have much knowledge of frames. The page design is a basic 2-frame horizontal format with body content files that swap in and out from a header menu bar. Both header and body files are centered, and should be visually seamless. The problem is when the main body frame is set to scrolling="yes", the scroll bar in the browser window offsets the center of the frame, and the two frames appear out of alignment. If the main body frame is set to scrolling="no" then they line up properly (but obviously cannot scroll down through the page). You can view the issue he http://www.sequentz.com/menutest/index.htm I would greatly appreciate some help sorting this out, so that the two files align seamlessly and the bottom file can scroll. Thank you. Hey Can someone please tell me how I can cushion the object on the right to the content in the center? I can't use fixed widths, since the width of the central content differs. If I remove 'float: right;' from .css, the object goes behind the central content. HTML: Code: <div class="breadcrumbs-container">
<div class="breadcrumbs-left"></div>
<span class="breadcrumbs">
<a href="{U_INDEX}" accesskey="h">{L_INDEX}</a>
<!-- BEGIN navlinks -->
<img src="{T_THEME_PATH}/images/breadcrumb_arrow.gif" width="8" height="9" alt=">" />
<a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a>
<!-- END navlinks -->
</span>
<div class="breadcrumbs-right"></div>
</div><!-- /breadcrumbs container -->
CSS: Code: .breadcrumbs-container {
background: transparent;
margin: 0;
padding: 0;
height: 30px;
width: 100%;
}
.breadcrumbs {
background: url("{T_THEME_PATH}/images/breadcrumb-bg.png") repeat-x;
height: 30px;
float: left;
vertical-align: middle;
line-height: 30px;
}
.breadcrumbs-left {
background: url("{T_THEME_PATH}/images/breadcrumb-bg-left.png") left no-repeat;
width: 50px; height: 30px;
float: left;
}
.breadcrumbs-right {
background: url("{T_THEME_PATH}/images/breadcrumb-bg-right.png") right no-repeat;
width: 50px; height: 30px;
float: right;
}
Thanks Hi am trying to get multiple tables with different number of columns to be aligned properly. I'd expect the columns width the same width of both tables to be align properly. But they are not, as you can see on the attached picture at the bottom of the page. The first two columns look good, but the more columns I add the more shrewd up the result gets. Does anybody know how to get them properly aligned ? Of course it works if the width is given in px not in %, but that is not what I want to do. Using a single table and colspan is also not an option, as this is a simplified example of the problem. Thanx in advance. HTML Code: <html>
<body>
<style type="text/css">
.width100pro {
width: 100%;
}
.c1-6 {
width: 15%;
}
.c1-12 {
width: 5%;
}
.t1 {
width: 35%;
}
.t2 {
width: 65%;
}
.b25 {
width: 25px;
}
.b100 {
width: 100px;
}
</style>
<table class="width100pro">
<tr>
<td class="c1-12"><input value="TestSMall" class="b25"></td>
<td class="c1-6"><input value="TestBig" class="b100"></td>
<td class="c1-12"><input value="TestSMall" class="b25"></td>
<td class="c1-6"><input value="TestBig" class="b100"></td>
<td class="c1-12"><input value="TestSMall" class="b25"></td>
<td class="c1-6"><input value="TestBig" class="b100"></td>
<td class="c1-12"><input value="TestSMall" class="b25"></td>
<td><input value="TestBig" class="b100"></td>
</tr>
</table>
<table class="width100pro">
<tr>
<td class="c1-12"><input value="TestSMall" class="b25"></td>
<td class="c1-6"><input value="TestBig" class="b100"></td>
<td class="c1-12"><input value="TestSMall" class="b25"></td>
<td class="c1-6"><input value="TestBig" class="b100"></td>
<td class="c1-12"><input value="TestSMall" class="b25"></td>
<td><input value="TestBig" class="b100"></td>
</tr>
</table>
</body>
</html>
Hi all, my first post... I'm having troubles when i try to add a table after a left aligned table. When i add the second table it goes just at right of the previous table, not at bottom as i want. Example: HTML Code: <table width="60%" border="1" align="left" >
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<table width="60%" border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Any sugestions about placing the second table at bottom of first one are welcome. I am haveing trouble with my links..they are not going all the way to the right side..they stay under the text here is my website http://www.highlandartworld.com/ any sugestions? Goodday, This is a bit of a follow-up on my previous question, but in some ways, it's also a seperate problem: Have a look at this. In the first table, the height is determined by 'height="200"' and the position of the 'Text' is 24 pixels above the bottom, exactly what I wanted. But now in the second table: Here the height is determined by the content of the first row and the 'Text' part's height is way to big. What happened? Why isn't it showing a table with the height I have set? What should I do to tell a cell it's height, starting from the bottom of the table? Thank you for your help, Laurens, OK well This workse perfectly with a .html document, but when I use .php it all goes bad, http://rapid-hook.com/script-2/index.php The arrows ar suppose to be aligned with each other, but theres a gap between the table, for the bottom only, not sure how to fix this. Hello there, I am in serious need of help. I am working on a site where I could update the navbar at any time and not have to change the code on numerous pages. After some reading, I concluded that the use of an SSI would be a suitable solution. With that being said, my headache ensues. I have developed an outline in dreamweaver for my website, and have created a div where the ssi will be placed. The navbar was created in Fireworks. In IE, i can get the menu to appear where I want it, which is below the flash image below the header, however, when I run the mouse over the dropdown, the drop down appears some 50 pixels above the navbar. I am thinking that this might be a css problem. In Firefox, the div tag appears off to the left and when the mouseover is done, the dropdown appears in the same place as they have in IE. In both instances, the dropdown menu is in line with the image used in the navbar. I would really appreciate any help someone could offer. If someone could send me a working solution, I would be even more grateful. I think my eyes are tired of viewing the code. the site can be viewed at the following url: http://www.prestigeinteractive.com/wmems2/ I would greatly appreciate any help you can offer. Thanks, Greg ps. if you would like the source files, email me at gwhite@prestigeinteractive.com Hi, There may be an easy solution but ive spent over 3 hours trying to correct this now. Basically i have 3 pages, each of which i 'saved as' to ensure the basic layout was identical. When the pages are aligned left they are all perfectly aligned, however as soon as i align them centrally, the heating and plumbing pages, for some reason indent themseleves slightly right compared to the bathrooms page. This is so frustrating. Can anyone see why and offer a solution to get them all aligned perfectly central? Thanks!! P.S. I think i may have wittled this down to a problem with the main content area, it seems when i apply the css h2 tag or remove the image it suddenly jumps. I have got them all aligned perfectly centrally before with no css in the main content area. any ideas? Hi all, Newbie here. So I've built an HTML website and I want to vertically centralise it because it looks a little funny on larger screens at the moment. I have followed several tutorials worth of direction on how to do it and tables seem to be the easiest but I'm having a problem with getting the table to "fit to window". This is the table instantiation: <table align="center" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> The problem is that the height is not working. If I change it to a specific value such as 900px then it works perfectly but it must be getting the wrong value otherwise. Has anyone encountered this before and can you help? The site is http://www.thechapelstudios.co.uk So, I'm having trouble getting a table to align over a background in IE. It looks fine in every other browser as you can see he But this is what it looks like in IE, about 1 pixel over: You can view the site at: http://www.ringaroundwithrosie.com/aboutrosie2.html and the CSS here. Does anyone see anything that could explain why it is not aligned properly in IE? Thanks for your help! I am hoping that someone may have a solution for me - in one of my table columns I have 3 images (logos that link to sites) and I have set them with a vertical top alignment - so that when the page goes long - the logos stay at the top - this works perfectly in all browsers, except (of course) IE... would anyone know how to fix this? My site can be viewed at http://bebywebtest.9k.com/history.html ... if you click open the collapsible menus - you can see the logos - start to center themselves down the page - instead of staying at the top... <br /> </td> <td width="5" rowspan="3"> </td> <td width="380" height="179" bordercolor="#000066" bgcolor="#FFFFFF"><div align="center"><a href="http://www.israelbonds.ca"><img src="Images/header-march-2006.gif" alt="bonds" name="israelbonds" width="256" height="100" border="0" valign="top" id="israelbonds" /></a></div></td> </tr> SO - if anyone has any suggestions on how to remedy this fiasco - I would be most grateful! Thanks. Hi, I am having dramas with a template and it lining up with the Backgroung Image. The template has the same background image as the page background but its like a mesh effect so its a real pain in the butt to line up. And its not working because different screen resolutions and browser widths move the template on the page background. See he http://www.superiorshine.com.au/new If you load the page and the make your browser width smaller you will see the template move along the background image this is why it never lines up cause its floating all over it. Is there anyway i can stop this? I have spent a total of 7 hours fiddling with the background and i still cant get it to work. My last resort is to go into the .PSD and make the website width and height bigger then peoples resolution and save for web and make the bits outside the template (background image) a picture in a cell so the page doesnt see images and expands the scroll bars. Here is the template overlapping: www.superiorshine.com.au/sample/overlap.jpg Any other idea's as this is really getting to me LOL.. Cheers Can someone please help me and shed light on this? TIA!! I'm building an ecommerce site and there are 4 thumbnails that you can click on, then the main image swaps to the thumbnail you just clicked on (like how most ecommerce sites work). But I won't have 4 thumbnails all the time, maybe 2 or 3 but maximum of 4. When I test the page with 4 thumbnails, it works fine. But if I have only 2 or 3 thumbnails, the spacing looks odd on Firefox. (Looks perfect on Safari) I want them to be always left justified but they look like they are forced to be centered in the space given. What am I doing wrong? I appreciate any help! The following code is for the thumbnail: Code: <tr> <td width="60" align="left"><a href="#" onClick="javascript:image_click(1);return false;"><img border="0" src="thumbnail.asp?file=[image1]&maxx=60&maxy=0" name="pimage1"></a> </td>
<td width="5" align="center"></td>
<td width="60" align="left"><a href="#" onClick="javascript:image_click(2);return false;"><img border="0" src="thumbnail.asp?file=[image2]&maxx=60&maxy=0" name="pimage2"></a> </td>
<td width="5" align="center"></td>
<!--END: image2-->
<!--START: image3-->
<td width="60" align="left"><a href="#" onClick="javascript:image_click(3);return false;"><img border="0" src="thumbnail.asp?file=[image3]&maxx=60&maxy=0" name="pimage3"></a> </td>
<td width="5" align="center"></td>
<!--END: image3-->
<!--START: image4-->
<td width="60" align="left"><a href="#" onClick="javascript:image_click(4);return false;"><img border="0" src="thumbnail.asp?file=[image4]&maxx=60&maxy=0" name="pimage4"></a> </td>
<td width="5" align="center"></td>
<td width="60" align="left"></td></tr>
<!--END: image4-->
|
|||||||