|
HTML - Problem With Div-based Layout
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;
}
Similar TutorialsHello there, I always make webpages using tables. The usual outline for me is a vertical menu bar at the left that is of STATIC width, and a window on the right that displays the conent with a DYNAMIC width. So I pretty much want the left pane to take up i.e. 200px and the right pane to take up the rest of the page. With tables, it's easy b/c you can just set the table width to 100%, define the td width of the left pane, and the right pane will automatically resize itself to fill the page. I'm trying to adapt a div-based layout now and I can't figure out how to do that with divs. I've been playing with it, but keep running into problems. If I set float:left, after a certain point in making the window narrower, the right div jumps below the left div, etc.. Can someone give me some hints or point me in the right direction as to how to achieve the same effect I had using tables? Thanks! 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! 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! 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 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! 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 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. 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? 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> 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 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>
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. 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 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 Please tell me how I can get the login to sit directly under the menu on the following site: http://www.smilescanning.com/default.asp By the way, I am using ssi so I can't put the login into the menu div because the menu shows up on all pages and I just want the login to show up on the default page. Thanks~ 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. Hey Guys I have a problem when viewing my website in firefox. However, It works in opera, safari and Quanta's preview window. I have unwanted gaps underneath buttons images that have rollovers. Wrong: Correct: The code is: Code: <TABLE border="0" cellpadding="0" cellspacing="0">
<TR><TD><IMG src="images/sidebar_top.gif"></TD></TR>
<TR><TD><IMG src="images/sidebar.gif"></TD></TR>
<TR><TD> <!-- Home Button -->
<a href=""
onmouseout="document.btn_home.src=btn_home_nm.src"
onmouseover="document.btn_home.src=btn_home_hv.src" >
<img src="images/btn_home_nm.gif" border="0" name="btn_home">
</a>
</TD></TR>
<TR><TD> <!-- Opening Times Button -->
<a href=""
onmouseout="document.btn_opening_times.src=btn_opening_times_nm.src"
onmouseover="document.btn_opening_times.src=btn_opening_times_hv.src">
<img src="images/btn_opening_times_nm.gif" border="0" name="btn_opening_times">
</a>
</TD></TR>
I don't get these gaps on firefox if I remove the a tag like this: Code: <TABLE border="0" cellpadding="0" cellspacing="0">
<TR><TD><IMG src="images/sidebar_top.gif"></TD></TR>
<TR><TD><IMG src="images/sidebar.gif"></TD></TR>
<TR><TD> <!-- Home Button -->
<img src="images/btn_home_nm.gif" border="0" name="btn_home">
</TD></TR>
<TR><TD> <!-- Opening Times Button -->
<img src="images/btn_opening_times_nm.gif" border="0" name="btn_opening_times">
</TD></TR>
But then I don't have rollovers Does anyone know why this happens, and why it doesn't happen on opera or safari? Thank you Toshi |
|||||||