|
HTML - Html Layout Problem
hey guys!
I have a strange problem and I have no idea even what to ask google to find a solution... I'm writeing a simple html page. I have one outside div and everithing must be inside of it. I created some green and yellow borders just to see if layout works fine... The problem: There is some text in the main section. You can see it HERE. But if I add some text to that same middle div inside the table, than the table jums outside of its containing div. Check out HERE. The main(middle) div has overflow property set to "-moz-scrollbars-vertical;". So it should not make bigger div, but just bigger vertical scroll. The table height property is set to 100%. Any ideas??? _________________________________________________________________ You can also download the whole page via this LINK. Similar TutorialsHi all, I love the design of this forum. I have a very annoying HTML problem and really need help. Would REALLY appreciate it. On some of the pages there's too much space between the table cells. I've tried EVERYTHING and couldn't find the source of the problem. Take it as a challenge and please help... Try this: http://www.canaseed.com/Search.aspx?search=csdc I've attached a gif file that describes the problem. Thank you so much for your help... In software programming languages you can apply layout to a software program and i'm trying to apply the same philosiphy to web sites. I've been using just <div> tags with settings of its attributes (width, height, floats & margins etc..) to get what a layout i want and recently just came across that you can use tables to contstruct a layout aswell. which idea is better and which is better design that allows future extensibility? cheers I was wondering how I can go about making a single HTML page that all my pages reference to place menus and pictures. The only thing I want to change is content in the middle portion of the page but I don't want to use frames. I have a css already made and that works wonderfully it's just a bit tedious to go through and edit each html document individually every time I change something on the menu's or pictures. As far as I can tell I can't do that in the CSS (place the HTML code directly I mean for divs and such). Any help is greatly appreciated. I just finished writting an HTML email. All looked fine when it was in the browser then I tested it in my email client and all the layout is wrong. my </BR> dont seem to have any affect also im not sure why only some of the   are being shown and not displayed as spaces (??) Heres the code : Code: Content-Type: text/html; charset=us-ascii
Content-Transfer-Encoding: 7bit
MIME-Version: 1.0
<html>
<style type="text/css">
body {
font-family:verdana;
font-size:90%;
line-height:160%;
}
table.mainsection {
background-color:#838B8B;
width:50%;
color:white;
text-align:left;
font-size:99%;
padding:1px;
margin-top:5px;
}
table.subsection {
background-color:#B7C3D0;
color:white;
width:49%;
color:white;
text-align:left;
font-size:88%;
margin-left:14px;
margin-top:5px;
padding:1px;
}
</style>
<body>
<img src="http://graphics.adaptec.com/us/templates/head_logo.gif" />
<p>
<table class=mainsection >
</tr>
<th>Logical device information</th>
<tr>
</table>
Logical device number 0</br>
   Logical device name : RAID1Mirror</br>
   RAID level : 1</br>
   Status of logical device : Optimal</br>
   Size : 476150 MB</br>
   Read-cache mode : Enabled</br>
   Write-cache mode : Enabled (write-back)</br>
   Write-cache setting : Enabled (write-back)</br>
   Partitioned : No</br>
   Protected by Hot-Spare : No</br>
   Bootable : Yes</br>
   Failed stripes : No</br>
<table class=subsection >
</tr>
<th>Logical device segment information</th>
<tr>
</table>
   Segment 0 : Present (0,0) </br>
   Segment 1 : Present (0,1) </br>
<table class=mainsection >
</tr>
<th>Physical Device information</th>
<tr>
</table>
   Channel #0:</br>
      Transfer Speed : SATA 3.0 Gb/s</br>
      Device #0</br>
         Device is a Hard drive</br>
         State : Online</br>
         Supported : Yes</br>
         Transfer Speed : SATA 3.0 Gb/s</br>
         Reported Channel,Device : 0,0</br>
         Vendor : ST350032</br>
         Model : 0A</br>
         Firmware : SD15</br>
         Size : 476940 MB</br>
         Write Cache : Enabled (write-back)</br>
         FRU : None</br>
         S.M.A.R.T. : No</br>
      Device #1</br>
         Device is a Hard drive</br>
         State : Online</br>
         Supported : Yes</br>
         Transfer Speed : SATA 3.0 Gb/s</br>
         Reported Channel,Device : 0,1</br>
         Vendor : ST350032</br>
         Model : 0A</br>
         Firmware : SD15</br>
         Size : 476940 MB</br>
         Write Cache : Enabled (write-back)</br>
         FRU : None</br>
         S.M.A.R.T. : No</br>
<table class=mainsection >
</tr>
<th>Controller information</th>
<tr>
</table>
   Controller Status : Optimal</br>
   Channel description : SATA</br>
   Controller Model : Adaptec 2420SA</br>
   Controller Serial Number : CCEE20</br>
   Physical Slot : 2</br>
   Installed memory : 128 MB</br>
   Copyback : Disabled</br>
   Background consistency check : Disabled</br>
   Automatic Failover : Enabled</br>
   Defunct disk drive count : 0</br>
   Logical devices/Failed/Degraded : 1/0/0</br>
<table class=subsection >
</tr>
<th>Controller Version Information</th>
<tr>
</table>
   BIOS : 5.2-0 (15611)</br>
   Firmware : 5.2-0 (15611)</br>
   Driver : 1.1-5 (2459)</br>
   Boot Flash : 5.2-0 (15611)</br>
<table class=subsection >
</tr>
<th>Controller Battery Information</th>
<tr>
</table>
   Status : Not Installed</br>
</p>
</html>
Thanks, Hello, My website needs a fresh-over, so I decided to fix everything up to the XHTML 1.0 Standard. While doing that, I've also been trashing some of the old layouts and trying to make my website more clear & surmountable, both for the search engines & the surfing user. When working on the links page, I ran into problems though. The table and images simply didn't do the same I wanted them to do, and I've been trying several re-designs to make things alright again. Here is what I've got until now (Image Removed): (A) The content on the website, is not taking 100% width & height. If I use 100% & 100% height on the page, I'll just get this. (B] The table needs the same width as the body (100%). But I am still unable to use neither width or height, as it looks like they don't really do any matters in this case. There must be a bug somewhere inside the HTML or CSS Code, that makes this page very hard to give layout. I just cannot find it myself, so I am asking for your help. It can be because I am using a wrong attribute or tag to create the layout of my website, but I am sure that you got more knowledge on that area, than I. You can see the webpage yourself by clicking on the below URL: Link Removed Thank you, Urnemanden I'm having so much trouble with this. I have a site (from photoshop) that will have have fluid layout (100% width) but I want the footer to "stick" to the bottom of the window (unless content goes longer). Here is content part of the html (which is a bit messed up now from trying many things) <div id=container> <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr></tr> <tr> <td height="235" bgcolor="#FFFFFF"> </td> <td width="1000" rowspan="5" valign="top"><!-- ImageReady Slices (screencapture3.psd) --> <table width="1002" height="400" border="0" cellpadding="0" cellspacing="0" id="Table_01"> <tr> <td height="58" colspan="9"><img src="images/rightthere_01.jpg" width="417" height="58" alt="" /></td> <td colspan="10"><img src="images/screencapture2_01.jpg" width="583" height="58" alt="" /></td> </tr> <tr> <td colspan="9"><img src="images/rightthere_logo.jpg" alt="" width="417" height="76" border="0" /></td> <td colspan="3" rowspan="2"><img src="images/seniors.jpg" alt="" width="140" height="177" border="0" /></td> <td width="139" rowspan="2"><img src="images/caregivers.jpg" alt="" width="139" height="177" border="0" /></td> <td colspan="3" rowspan="2"><img src="images/physicians.jpg" alt="" width="142" height="177" border="0" /></td> <td colspan="3" rowspan="2"><img src="images/disabilities.jpg" alt="" width="162" height="177" border="0" align="top" /></td> </tr> <tr> <td height="101" colspan="9"><img src="images/inhome_tagline.jpg" alt="" width="417" height="101" border="0" /></td> </tr> <tr> <td colspan="19" bgcolor="#69781B"><img src="images/nav_top.jpg" width="1000" height="51" alt="" /></td> </tr> <div id:navigation></div> <td width="59"><a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image44','','images/about_ro.jpg',1)"><img src="images/about.jpg" name="Image44" border="0" id="Image44" /></a></td> <td width="15"><img src="images/div1.jpg" width="15" height="17" alt="" /></td> <td width="144"><a href="why.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image45','','images/why_ro.jpg',1)"><img src="images/why.jpg" name="Image45" width="144" height="17" border="0" id="Image45" /></a></td> <td width="17"><img src="images/div2.jpg" width="17" height="17" alt="" /></td> <td width="114"><a href="what.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image46','','images/what.jpg',1)"><img src="images/what.jpg" name="Image46" width="114" height="17" border="0" id="Image46" /></a></td> <td width="17"><img src="images/div3.jpg" width="17" height="17" alt="" /></td> <td colspan="4" bgcolor="#8B9849"><a href="who.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image43','','images/who_ro.jpg',1)"><img src="images/who.jpg" name="Image43" width="127" height="17" border="0" id="Image43" /></a></td> <td width="16"><img src="images/div4.jpg" alt="" width="16" height="17" align="left" /></td> <td colspan="3"><a href="consider.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image47','','images/consider_ro.jpg',1)"><img src="images/consider.jpg" name="Image47" width="195" height="17" border="0" id="Image47" /></a></td> <td width="19"><img src="images/div5.jpg" width="19" height="17" alt="" /></td> <td colspan="2"><a href="careers.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image48','','images/careers_ro.jpg',1)"><img src="images/careers.jpg" name="Image48" width="188" height="17" border="0" id="Image48" /></a></td> <td width="19"><img src="images/div6.jpg" width="19" height="17" alt="" /></td> <td width="70"><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image49','','images/contact_ro.jpg',1)"><img src="images/contact.jpg" name="Image49" width="70" height="17" border="0" id="Image49" /></a></td> </tr> <tr> <td colspan="19" bgcolor="#6A791C"><img src="images/nav_bot.jpg" width="1000" height="42" alt="" /></td> </tr> <tr></tr> <tr> <td colspan="7"><div id=leftcontent> <h4>Left Content</h4> </div></td> <td width="4"> </td> <div id=maincontent> <td colspan="11"><h1>Main Content</h1></td> </div> </tr> <tr> <td><img src="images/spacer.gif" width="59" height="1" alt="" /></td> <td><img src="images/spacer.gif" width="15" height="1" alt="" /></td> <td><img src="images/spacer.gif" width="144" height="1" alt="" /></td> <td><img src="images/spacer.gif" width="17" height="1" alt="" /></td> <td><img src="images/spacer.gif" width="114" height="1" alt="" /></td> <td><img src="images/spacer.gif" width="17" height="1" alt="" /></td> <td width="8"><img src="images/spacer.gif" width="8" height="1" alt="" /></td> <td><img src="images/spacer.gif" width="1" height="1" alt="" /></td> <td width="42"><img src="images/spacer.gif" width="42" height="1" alt="" /></td> <td width="76"><img src="images/spacer.gif" width="76" height="1" alt="" /></td> <td><img src="images/spacer.gif" width="16" height="1" alt="" /></td> <td width="48"><img src="images/spacer.gif" width="48" height="1" alt="" /></td> <td><img src="images/spacer.gif" width="139" height="1" alt="" /></td> <td width="8"><img src="images/spacer.gif" width="8" height="1" alt="" /></td> <td><img src="images/spacer.gif" width="19" height="1" alt="" /></td> <td width="115"><img src="images/spacer.gif" width="115" height="1" alt="" /></td> <td width="73"><img src="images/spacer.gif" width="73" height="1" alt="" /></td> <td><img src="images/spacer.gif" width="19" height="1" alt="" /></td> <td><img src="images/spacer.gif" width="70" height="1" alt="" /></td> </tr> </table></td> </tr> <tr> <td height="110" bgcolor="#869343"> </td> <td height="110" bgcolor="#6A791C"> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> </tr> </div> <div id= "footer"> <td width="100%" height="79" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <td width="0%" bgcolor="#859242"> </td> <td width="1000" bgcolor="#697819"><img src="images/footer.jpg" alt="" height="79" /></td> <td width="26%" bgcolor="#697819"> </td> </tr></table> </div></tr></tr></body> </html> and my css p { color: #6a6a6a; font-size: 15px; line-height: 20px; font-family: georgia, "Lucida Grande", Verdana, Arial ; top: 0; margin-top: 0; } h1 { color: #667824; font-size: 30px; font-family: verdana ; font-weight: bold; line-height: 30px; top: 0; margin-top: 0; } h4 { color: #4d4f53; font-size: 30px; font-family: verdana ; font-weight: bold; line-height: 30px; top: 0; margin-top: 0; } h2 { color: #667824; font-size: 20px; font-family: Arial, Verdana } h3 { color: #fff; font-size: 10px; font-family: "Lucida Grande", Verdana, Arial ; font-weight: normal; font-style: normal; } ul { color: #667824; font-weight: bold; font-size: 12px; font-family: verdana, Arial ; line-height: 14px; } h5 { color: #4d4f53; font-size: 10px; font-family: "Lucida Grande", Verdana, Arial ; font-weight: normal; font-style: normal; } A:link {text-decoration: none; color: 667824} A:visited {text-decoration: none; color: B71234} A:active {text-decoration: none} A:hover { color: B7CEC4; text-decoration: none; } html, body { margin:0; height: 100%; width: 100% } body >#container { margin:0; padding:0; height:auto; min-height:100%; position:relative; } #clearfooter {overflow:auto; padding-bottom: 79px;} #maincontent { float:left; min-width: 100px; } #leftcontent { min-width: 50px; } #left{ left: -1; right: 0; min-width: 100px; max-width: 200px; min-height: 235px; } #centerleft{ left: -1; right: 0; min-width: 172px; max-width: 200px; min-height:100px; } #right { position:relative;/*ie needs this to show float */ min-width:1px; max-width:200px; float:right; } #footer { width:100%; text-align:center; position:relative; margin:0; height:79px; clear:both; } #navigation { max-width: 1000px; vertical-align; top; text-align: left; } table { border-collapse: collapse; } please help. Hey all, I'm new here, and I love the layout of this website! I like the bright colors! Anyway... I created a website layout/site in Photoshop CS 5. The website: www.thegarbagedump.net I saved it as a html & images.. The issue I am having is when you click one of the bottons I want it to open the html document and display it within that square area with the border around it. I know I probably need a frame to do this, however I dont know how to add a frame, and it appears photoshop saved it in tables.. Could you please review the html source, and tell me how/where to add a frame, and make the Home, About, Domains button appear within that square area with the border? Thank You, Justin Hi There, Im a new member to this site and have become one due to a layout problem I just cant seem to sort - Never had it before and can normally sort this type of issue but am stumped! The address is: http://www.adamsgraphicdesign.co.uk/sf/index.htm When you browse through the navigation buttons at the top you will notice some pages skip left a couple of pixels. I need to stop this and make sure all pages remain in the same place - Any hints or cures on this would be massively appreciated as it needs to go live this weekend!!!! Cheer in advance Overtired and confused! Hi there I have a layout problem with a news listings page. The listings are database driven and some results pages are fine whereas some others break. I wonder if anyone can help me? http://www.zleeps.co.uk/news.asp?offset=30 Cheers, Kev Having a problem with my layout Here is the link... I can't get the text to stop overflowing out of the div. It only seems to be doing it horizontally. Vertically it is doing fine but i'm trying to get the background image to stretch and it wont do it! Okay, first of all sorry for posting so much, just I keep on running into problems with my layout that I'm making. Hmm, so I'm using the "hover", "active", and "visited" attributes for my layout that I'm creating right? When I click on the link, it turns into the automatic purple after I've visited it(or whatever color it is?). I don't want the automatic purple. I just want to keep it the same color (light blue) that it already is. I tried making it so that its blue after its visited, but what happened was that none of the "hover" tributes were applied. Can someone help me? Link: http://www.freewebs.com/noeylani94/index.htm In IE7 and 8, the layout of the page is fine but in IE6 it seems to wrap the long table to the end of the page (down). Now, im just looking at the source/code and didnt design the layout but no idea why its doing it. from what I am seeing, when the width of the table with the columns exceeds the width of the page, scrollbars are being added (which is fine) and therefore it shows the entire table right at the bottom fo the page instead of where it should be, in the middle/next to the content on the left handside. not sure what more to add as I cannot publish a link as there is no live site but in development. its using tables, tr's and th's Code: <thead> <tr> <th> Name </th> <th> Address 1 </th> <th> Address 2 </th> <th> Address 3 </th> <th> City </th> <th> County </th> <th> Post code </th> <th> Switchboard </th> <th> Fax </th> <th> Url </th> <th> Business sector </th> <th> Status </th> <th> First name </th> <th> Last name </th> <th> Title </th> <th> Job title </th> <th> Email </th> <th> Direct dial </th> <th> Mobile </th> <th> Mail DPA suppression </th> <th> Date mail DPA suppressed </th> <th> Email DPA suppression </th> <th> Date email DPA suppressed </th> <th> Telephone DPA suppression </th> <th> Date telephone DPA suppressed </th> <th> F10 registration </th> </tr> </thead> when from the firstname heading to the last column heading is removed, the layout is fine.... but when adding them in, thats where the problem happens. any ideas? Hello all! Got this huge problem which kept me up for like 30 hours now. The layout on http://www.easydialer.nu/facelift/index.html couldn't be more different in IE than FF. How in the world can be able to get the layout that is shown in FF, work in IE? Feels like I've tried everything now. Every suggestions, thoughts or help will be warmly appreciated. Thank you! http://img148.imageshack.us/my.php?i...titled3pd9.jpg I would like the image at the very bottom of that pic to go underneath my iframe, how would i do this? Thanks in advance.All help is appreciated! Code: <html> <head> <title>Untitled-2</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <p> <!-- ImageReady Slices (Untitled-2.psd) --> </p> <table id="Table_01" width="750" height="801" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="9"> <img src="images/Untitled-2_01.gif" width="750" height="131" alt=""></td> </tr> <tr> <td colspan="2"> <img src="images/Untitled-2_02.gif" width="206" height="35" alt=""></td> <td> <img src="images/Untitled-2_03.gif" width="103" height="35" alt=""></td> <td> <img src="images/Untitled-2_04.gif" width="68" height="35" alt=""></td> <td> <img src="images/Untitled-2_05.gif" width="70" height="35" alt=""></td> <td> <img src="images/Untitled-2_06.gif" width="66" height="35" alt=""></td> <td> <img src="images/Untitled-2_07.gif" width="82" height="35" alt=""></td> <td colspan="2"> <img src="images/Untitled-2_08.gif" width="155" height="35" alt=""></td> </tr> <tr> <td colspan="9"> <img src="images/Untitled-2_09.gif" width="750" height="32" alt=""></td> </tr> <tr> <td rowspan="0"> <img src="images/Untitled-2_10.gif" width="95" height="602" alt=""></td> <td colspan="7"><iframe src="page.html" width="576" height="500"></iframe> </td> <td rowspan="0"> <img src="images/Untitled-2_12.gif" width="79" height="602" alt=""></td> </tr> <tr> <td colspan="7"> <img src="images/Untitled-2_13.gif" width="576" height="102" alt=""></td> </tr> <tr> <td> <img src="images/spacer.gif" width="95" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="111" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="103" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="68" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="70" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="66" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="82" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="76" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="79" height="1" alt=""></td> </tr> </table> <!-- End ImageReady Slices --> </body> </html> Dear All, I have a page here http://183.78.169.53/tyre2/swap2.html. The problem is that I want to make the tyre images align with the join like here http://183.78.169.53/tyre2/page3.html and also make the text appear over the image not beside or on top of it. What are the html fine tunes I need to perform tried many thing like margin etc did not work too? Hi all, Just wondered if someone could help me figure out why (once the page has fully loaded) some of the text displayed is cut in half, horizontally !! I have tried all kinds of things to put it right. Any ideas would be greatly appreciated. The web page in question is http://www.holidayadvertising.com/An...rchresults.php Thanks Yarni 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? Hi, I am new to HTML and want to set the layout for my page as follows:- (1) The complete page size for my webpage is 1024x768. (2) I want to set a top Banner starting from left with width= 824 and Height = 180. (3) Then I want to have a skyscrapper Banner starting exactly where the above top banner ends and has width = 200 and height = 768. (4) Just below the top banner(as stated in point2) I will have the logo and below that all the products. I am using Front Page 2000. Please help me get started with putting up this layout. Thanks very much. Best Regards, Gagan |
|||||||