HTML - A Slight Layout Problem.
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? Similar TutorialsHi, My website was nearly there, and I paid someone to work on my website and he ended up recoding the layout, and now some things arnt sitting right. I will try to explain this as best as I can. I would really, REALLY appreciate any help people can give me, I was supposed to have this site done last weekend . Here is a link: to the current site: LINK Im trying to do two things to it. I need the yellow box to sit in the horizontal center of the blue box and I need to remove the space above the main gallery image and the top of the yellow box. Here is my css for the box: Code: #content { margin: 0 0 0 180px; overflow: auto; background: #00f; } #main-image-container { width: 690px; margin: 0 auto; position: relative; /*margin:0 auto 0 10%;*/ text-align: center; background: #fc6; } #main-image-container { position: relative; float:left; /*margin:0 auto 0 10%;*/ text-align: center; margin-left:10%; /*background: #00f;*/ } #main-image-container #sliding-frame p { position: relative; height: 470px; overflow: hidden; } #main-image { /*position: absolute;*/ cursor: nw-resize; z-index: 10; background-color: #111; } Here is the HTML / PHP for the block (most of this is just for generating the thumbnails at the bottom): Code: <div id="content"> <div id="main-image-container" {if $theme.imageCount == 0}style="display:none"{/if}> {if $theme.imageCount > 0} <div id="slideshow-controls"> <ul id="control-buttons"> <li><button id="controls-left"> <img src="{g->theme url="images/controls-left.png"}" alt="{g->text text="Left"}" /> </button></li> <li><button id="controls-play"> <img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Play"}" /> </button></li> <li><button id="controls-right"> <img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Right"}" /> </button></li> </ul> </div> <div id="sliding-frame"> <div id="loading"> {g->text text="Loading Album..."} </div> <p><img src="{g->theme url="images/blank.png"}" alt="{g->text text="Main image placeholder"}" id="main-image" /></p> </div> {/if} <div style="height:100px;clear:both;"></div> {assign var="childrenInColumnCount" value=0} {assign var="subalbumCount" value=0} <div id="thumbs-container"{if $theme.imageCount < 1 } style="background:none; margin-top:30px"{/if}> <div id="gsThumbMatrix" align="left"> <ul style="list-style:none;"><li style="float:left;"> <table align="left"> <tr valign="top"> {foreach from=$theme.children item=child} {if !$child.canContainChildren && $child.entityType != 'GalleryLinkItem'} {if ($childrenInColumnCount == $theme.params.columns)} {* Move to a new row *} </tr></table></li><li style="float:left;"><table align="left"><tr valign="top"> {assign var="childrenInColumnCount" value=0} {/if} {assign var=childrenInColumnCount value="`$childrenInColumnCount+1`"} {assign var=childSummary value=$child.summary|markup|escape:html} {assign var=childDescription value=$child.description|markup|escape:html} <td class="giItemCell"> {if isset($theme.params.itemFrame) && isset($child.thumbnail)} {g->container type="imageframe.ImageFrame" frame=$theme.params.itemFrame} <a href="{g->url params=$theme.pageUrl arg1="itemId=`$child.id`"}">{g->image id="%ID%" item=$child image=$child.thumbnail class="%CLASS% giThumbnail size:=`$child.size`= summary:=`$childSummary`= description:=`$childDescription`="}</a> {/g->container} {elseif isset($child.thumbnail)} <a href="{g->url params=$theme.pageUrl arg1="itemId=`$child.id`"}">{g->image item=$child image=$child.thumbnail class="r giThumbnail size:=`$child.size`= summary:=`$childSummary`= description:=`$childDescription`="}</a> {else} <a href="{g->url params=$theme.pageUrl arg1="itemId=`$child.id`"}" class="giMissingThumbnail"> {g->text text="no thumbnail"} </a> {/if} </td> {else} {assign var=subalbumCount value="`$subalbumCount+1`"} {/if} {/foreach} {* flush the rest of the row with empty cells *} {section name="flush" start=$childrenInColumnCount loop=$theme.params.columns} <td width="70"> </td> {/section} </tr> </table></li> </ul> </div> </div> </div> {* Loop around for the albums this time *} {assign var="childrenInColumnCount" value=0} {if $subalbumCount > 0} <div id="subalbums-container"> <table id="gsSubAlbumMatrix"> <tr valign="top"> {foreach from=$theme.children item=child} {if $child.canContainChildren || $child.entityType == 'GalleryLinkItem'} {if ($childrenInColumnCount == 2)} {* Move to a new row *} </tr><tr> {assign var="childrenInColumnCount" value=0} {/if} {assign var=childrenInColumnCount value="`$childrenInColumnCount+1`"} <td class="giAlbumCell gcBackground1"> {if isset($child.thumbnail)} <a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}" style="clear:both;"> {g->image item=$child image=$child.thumbnail}<br /> {$child.title|entitytruncate:25}</a> {else} <a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}" class="giMissingThumbnail"> <img src="{g->theme url="images/missing.png"}" width="40" height="40" alt="{g->text text="no thumbnail"}" /><br /> {$child.title|entitytruncate:25}</a> {/if} {g->block type="core.ItemInfo" item=$child showDate=false showOwner=$theme.params.showAlbumOwner showSize=false showViewCount=false showSummaries=true class="giInfo"} </td> {/if} {/foreach} {* flush the rest of the row with empty cells *} {section name="flush" start=$childrenInColumnCount loop=2} <td> </td> {/section} </tr> </table> </div> {/if} {/if} {if !empty($theme.navigator)} <div class="gbBlock gcBackground2 gbNavigator"> {g->block type="core.Navigator" navigator=$theme.navigator} </div> {/if} {* Store these results in a JavaScript-accessible set of arrays so the slideshow can get at them *} <script type="text/javascript"> // <![CDATA[ var slideshowImageWidths = new Array({if $theme.imageCount==1}1); slideshowImageWidths[0] = {$theme.imageWidths}; {else}{$theme.imageWidths});{/if} var slideshowImages = new Array(); {foreach from=$theme.children key=i item=it} {if !$it.canContainChildren && $it.entityType != 'GalleryLinkItem'} slideshowImages.push('{if isset($it.image)}{g->url arg1="view=core.DownloadItem" arg2="itemId=`$it.image.id`" arg3="serialNumber=`$it.image.serialNumber`" htmlEntities=false}{else}{g->url params=$theme.pageUrl arg1="itemId=`$it.id`" htmlEntities=false}{/if}'); {/if} {/foreach} // ]]> </script> <!--end content--></div> Im trying to have the top of the blue box line up with the top of the red box, and remove the gap above the main gallery image and the top of the yellow box. Could anyone tell me why this is happening, it wasnt happening before and I have no idea what he changed. I'm trying to have 1 line of copyright at the bottom of each page on a site, but i am having to use loads of breaks to get it to the bottom each time, because when i do
Code: style="position: absolute; bottom: 5px;" in the div for it, it just goes straight to the bottom of the page before scrolling down. By that i mean when you open the page it is at the bottom, but there is more below it which you need to scroll down to, so really it is somewhere in the middle of the page. Hope i explained that well enough :-S If not here's a screenshot :-p http://i56.photobucket.com/albums/g1...wco99/cpss.png Any ideas? I got this little problem, if you view the below page on IE it shows fine, but on FF it shows a space after the flash. http://www.test.muslimways.com Any advice? 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! 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? 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 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! 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 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, 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 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? I created this portal to help promote my business in a competition I was invited to take place. Anyways it works in FF, Chrome, Safari, but doesn't work in IE. I wonder if anyone could help me figure out the problem. I feel confident I"m just stupidly overlooking something. Vote.VisiblyCreative.com 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> 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. Here is my site at current: www.omgpcgames.com When viewed in high resolutions, the page streches - I don't want this to happen. Instead, I want the layout to remain in the center, and the two sides open up to reveal a blank background. My reasoning? See this On the left is what it looks like in a high resolution, on the right what I want it to look like. Any ideas on what I can do? It's a joomla site - so that may complicate things slightly. Hello, I am having trouble placing my PNG file over my flash. I am using z index and absolute positioning but the PNG will not center itself on the webpage over the flash file. It ends up in a weird position above the flash. Thanks! Code: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ss - [design, photo, art]</title> <meta name="description" content="ss - Los Angeles Graphic Designer, Photographer, and Artist" /> <meta name="keywords" content="graphics graphic design designer designs portfolio website los angeles california ca ss print photography photograph poster posters illustration illustrations catalogs catalog company branding logo logos stationery magazine editorial" /> <style type="text/css"> /*<![CDATA[*/ /* hide from ie on mac \*/ html { height: 100%; overflow: hidden; } #flashcontent { height: 100%; } /* end hide */ body { height: 100%; margin: 0; padding: 0; } div#frame{ /*placement*/ position:absolute; z-index:9999; } #flash{ position:absolute; z-index:1; } /*]]>*/ </style> <script src="Scripts/swfobject_modified.js" type="text/javascript"> </script> <script type="text/javascript"> //<![CDATA[ var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-16886040-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); //]]> </script> <style type="text/css"> /*<![CDATA[*/ body { background-image: url(content/background.jpg); } /*]]>*/ </style> </head> <body> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td align="center" valign="middle"> <div id="frame"><img src="content/frame.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /></div> <div id="flash"></div> <table width="100" border="0" cellspacing="0" cellpadding="0"></table> <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600"><param name="movie" value="ss3.swf" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="6.0.65.0" /> <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. --> <param name="expressinstall" value="Scripts/expressInstall.swf" /> <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. --> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="ss.swf" width="800" height="600"><!--<![endif]--> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="6.0.65.0" /> <param name="expressinstall" value="Scripts/expressInstall.swf" /> <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. --> <div> <h4>Content on this page requires a newer version of Adobe Flash Player.</h4> <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p> </div> <!--[if !IE]>--></object> <!--<![endif]--></object></td> </tr> </table> <script type="text/javascript"> //<![CDATA[ swfobject.registerObject("FlashID"); //]]> </script> </body> </html> Hello. =) A few weeks ago, I made this thread saying that I'm (basically) still new to HTML...and now I'm forcing myself to use an HTML editor. (I decided to use KompoZer, and I've been using it for a few days.) Right now, I'm playing around with it and trying to create different site layouts. I came up with a design (which involves using DIVs), but I'm really having some problems: What the site is supposed to look like [GIF image] What the site actually looks like (for now) [HTML document - CSS is embedded in the page] ...Truth be told I drew that picture first, then I went online and found a similar-looking layout (since I can't make one from scratch yet; I still don't really understand how DIVs+CSS work). So I tried modifying the layout as best I could, and I didn't do such a great job. ^^; Anyway, I want the layout to be "liquid", so if you resize your browser everything shrinks nicely. But whenever I reduce my browser size, the header and footer start moving. How do I stop this from happening? Can anyone tell me the correct code I should be using? Thanks in advance!! PS: 1) You see those "white spaces" in the picture I drew? Well, I figure the best way to add those spaces is by modifying some background images, like what I did here. If I'm wrong, or you know a better way to do this, please tell me!! 2) If you scroll the HTML document, you might notice that it's hard to read the top line of text (because it's "hidden" behind the header DIV). I think the best way to solve this problem is by making the bottom of the header DIV transparent...or, by adding a second DIV at the bottom of the header, and then making that second DIV transparent. I heard you can use "filter:chroma" to do this, but for some reason I can't get it to work with hex colors OR pictures. =( 3) Do you think it's easier/makes more sense to try and edit this other layout instead? It scrolls the same way, and it already has a header and footer...plus the bottom of the header is already a different color, so I should be able to make it transparent. This layout doesn't have a side column, but I can make one using code like this, right?: HTML Code: body { color: white; background-color: #000000; background-image: url(stars_bg3.gif); background-image: url(foot-head.gif) bottom 300px right; background-repeat: no-repeat; background-attachment: fixed; border-top: 6px solid white; border-right: 0; border-bottom: 6px solid #FFFFFF; border-left: 6px solid #FFFFFF; padding-left: 184px; overflow: hidden; margin: 0px; } Hello, I cannot seem to get my css menu to work in harmony with my html table. Here is where the problem lies: http://www.beta.iquorum.net It looks fine sometimes when the page is maximized. However, when you resize the browser to a smaller size, it distorts the alignment. I know it does this because the layer that the menu resides in has a fixed coordinate position, while my table is aligned via the align tag in my HTML code. Is there a way to somehow put the menu inside of the cell of my table? Every time I try, it completely ruins the layout of the page and prevents the menu from functioning correctly. Is there a way to possibly define a fixed coordinate position for a table rather than using the align="center" tag? Just a thought. Thanks for any suggestions. |