|
HTML - Footer Content Not Aligning To Main Content Correctly On Resize
Hi,
Im trying to make my footer content align correctly to the main content when a window resizes. The apdivs don't seem to want to move at all even with a relative position etc. I have tried everything but just cant get it to work can someone help please? http://pjm.co.uk.uksite4.yourwebserv...splay&PageID=5 Also some one commented before on the amount of css and JS pages. These will al be stripped out as its an Open sources system im using! Thansk alot Joe Similar TutorialsHello, I'm working on a site, but have run into a problem I'm not sure how to deal with. The contents of the footer area of the page are centered within a Div as you can see at the url: http://www.mylessinclair.com/testsite/ However, I think it might be easier on the eye if the links and content were centered underneath the main content panel. I'm trying to avoid the use of tables in achieving this, so I'm thinking that I need two Divs side by side for the footer. One 150px wide as in the side bar above it, marked up as float left - and then just center the footer contents in the other Div ? Am I on the right track here, or is it a bit more complicated? Hope someone can advise. Many thanks, Myles I know I'm probably going to get ridiculed for this being my first post, but I can't seem to find any help elsewhere. I browsed the forum a bit before posting but didn't really know what to look for. OK so this the first website I've ever made and I only have limited html knowledge but so far this is what I have. www.freewebs.com/maurerrj Here is the html: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<!-- Created with the CoffeeCup HTML Editor 2007 -->
<!-- http://www.coffeecup.com/ -->
<!-- Brewed on 1/15/2007 4:28:49 PM -->
<head>
<title></title>
<style type="text/css">
<!--
.{background: #D6D3C0;}.{background-image: url(http://img138.imageshack.us/img138/3373/newbackground4qp5.jpg);background-repeat: repeat-y;background-position: center;}
-->
</style>
</head>
</style><body topmargin="0">
<div align="center">
<table cellspacing="0" cellpadding="0">
<tr><td colspan="0" width="750"><img height="223" src="http://img223.imageshack.us/img223/7681/banner5im9.jpg" width="724"><td></td>
<tr><td colspan="0" width="750"><img height="19" src="http://img407.imageshack.us/img407/7290/fillervh5.jpg" width="724" border="0"><td></td>
<tr height="0"><td colspan="0" width="750"><img height="11" src="http://img101.imageshack.us/img101/3912/spacer1hs9.jpg" width="724"><td></td>
<tr><td valign="top" width="153"><table cellspacing="0" cellpadding="0" width="153">
<tr><td><img height="36" src="http://img260.imageshack.us/img260/1838/filler2qj3.jpg" width="153" border="0"></td></tr>
<tr><td><a href="#"><img height="22" src="http://img156.imageshack.us/img156/9990/home1pp8.jpg" width="153" border="0"></a></td></tr>
<tr><td><a href="#"><img height="22" src="http://img92.imageshack.us/img92/8751/conifersls9.jpg" width="153" border="0"></a></td></tr>
<tr><td><a href="#"><img height="22" src="http://img251.imageshack.us/img251/7016/grassesbf3.jpg" width="153" border="0"></a></td></tr>
<tr><td><a href="#"><img height="22" src="http://img525.imageshack.us/img525/5920/shrubsvf9.jpg" width="153" border="0"></a></td></tr>
<tr><td><a href="#"><img height="22" src="http://img86.imageshack.us/img86/2730/perennialszy4.jpg" width="153" border="0"></a></td></tr>
<tr><td><a href="#"><img height="22" src="http://img137.imageshack.us/img137/4079/troughgardenskr9.jpg" width="153" border="0"></a></td></tr>
<tr><td><a href="#"><img height="22" src="http://img91.imageshack.us/img91/5199/directionsae8.jpg" width="153" border="0"></a></td></tr></table></div>
</body>
</html>
Anyway, onto the point... I want to make an area to put all of my content like text and images and what not in that main area but I don't really have any idea how to do it. Also the background image isn't showing up in firefox, so if you have any idea how to fix that let me know. But for now I guess you have to look at it in IE. Also, I will be having galleries under the evergreen, perennials, etc. tabs, and I think I want to use lightbox, but I don't know much about it. So any tips with that would help. The lightbox website is http://www.huddletogether.com/projects/lightbox2/ Any help you can give me is TRULY appreciated. I had a guy helping me fix my flyout menu and now my content that is under my div content is at the bottom of my page instead of at the bottom. I am not sure what to do to get it back to the top. Any help or ideas, I have been messing with this for hours. http://www.mesquitechristmas.com/index.html If you need me to post some code just let me know what code to post, or you can just view the source code.... -Thanks Hello I'm trying to work out a way of allowing my main content to increase without it stretching my nav and ruining the formatting. I have a table, 2 columns, 10 rows, cell spacing 4 I've set the main content (right) to span all 10 rows. I want to be able to increase the main content without it stretching my rows. Row height set to 40px. My answer so far has been to add an 11th row, turn it white and set the height so that the combined height of the cells in the left had column matches the height of the right hand one. This is fine, but a bit of nuisance if you want numerous pages where the main content takes up a different amount of space. Is there anyway to set the 11th cell on the left hand column to stretch along with my main content, without it messing up the height of the 10 calls above? You'd think you'd be able to set it to height = 100% or something, but apparently not. Many thanks, monki Hello- I'm having a problem with my header. When I first started building this dumb thing, it was in IE7. Everything was looking fine with that, and then I tried to switch to Firefox, and nothing was where it should have been. My doctype wasn't valid, which is now fixed. Anyway, the problem. When I put the header content into the page's html, it displays like it should, but when the header is in a separate file, it leaks down into the main page. HTML: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Title</title> <link rel="stylesheet" type="text/css" href="stylesheet.css"> </head> <body> <div id="Header"> <!--#include virtual="/includes/header.txt" --> <br> </div> <div id="Menu"> <!--#include virtual="/includes/menu.txt" --> </div> <div id="Content"> <h1>Hello!</h1> <p style="text-indent:30px">Welcome </p> <br> <p><b>Jan 14</b></p> <p>The calendar, links, contact us, and 'what to bring' pages are up.</p> <br> </div> <div id=footer> <!--#include virtual="/includes/footer.txt" --> <br> <!--#config timefmt="%B %d, %Y"--> Last Modified: <!--#echo var="LAST_MODIFIED"--> </div> </body> </html> Header: Code: <a href="index.shtml"><img src="cricket_edited.jpg" alt="Home" style="border:none;"></a>    Title CSS: Code: body {
font:15px/20px verdana, arial, helvetica, sans-serif;
color:#336600;
background-color:#FFFFCC;
}
* {
margin:0px;
padding:0px;
}
h1 {
margin:0px 0px 15px 0px;
font-size:28px;
line-height:28px;
font-weight:900;
color:#999966;
}
h2 {
font-size:26px;
line-height:0px;
font-weight:700;
color:#999966;
margin:0px 0px 15px 15px;
}
p {
margin:0px 0px 16px 0px;
}
#Content>p {margin:0px;}
#Content>p+p {text-indent:30px;}
a {
font-size:15px;
text-decoration:none;
font-weight:600;
}
a:link {color:#CC3333;}
a:visited {color:purple;}
a:hover {background-color:white;}
a:active {border:solid 1px #CC3333;}
ul {
list-style-type: circle;
}
#Header {
margin:50px 0px 10px 0px;
padding:17px 0px 6px 20px;
/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
height:30px;
font-size:30px;
font-weight:bold;
border-color:black;
border-style:solid;
border-width:1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
line-height:11px;
background-color:#CC9933;
}
#Content {
margin:0px 230px 50px 10px;
padding:10px;
background: #FFFFCC;
}
#Menu {
float:right;
padding:10px;
background-color:#eee;
border:3px dotted #336600;
width:150px;
}
.hmenu {
font-size:15px;
font-weight:bold;
text-indent:6px;
}
.sub {
font-size:13px;
text-indent:20px;
}
#Footer {
margin:50px 0px 10px 0px;
padding:17px 0px 6px 20px;
/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
height:33px;
border-style:solid;
border-color:black;
border-width:1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
line-height:11px;
background-color:#CC9933;
}
Can anyone help? Thanks, Kate All right. This may be simple for some people so hopefully I can get some help. Please have a little bit of patience because I'm not positive how to explain exactly to where people will actually understand me. I will, however, try my very best to explain the best I can. If you have any questions about what I'm asking, feel free to ask me... I'm making a hatelisting. They're not huge sites so they only require a very simple layout. Okay, easy. I have the layout set up (except the links) and I have the HTML and CSS ready (well, CSS prepared for editting). I know where I want the layout to align and such... Everything like tha is finished. http://www.lume-di-luna.net/test/index.html As you can see, it looks okay. Nothing big and fancy, something simple. ONE LITTLE DETAIL. The content of the website is just suppose to be in the black part, not the white. The white is just a border. But the only way I ever knew how to align the text was it would be the same size as the size of the background image. http://www.lume-di-luna.net/test/bg.jpg This is the background image. You can only see the black, but there is 10px of white on each side. That's the only way I have figured out so far to get the white border to work and the background as well. I want to align the content so it's only in the black, not the white. I searched everywhere and nothing will help me at all. I'm sure HTML and CSS will have to be involved to get it to work. I've searched multiple ways on google and looked around HTML/CSS help sites and nothing will help me at all. Hey guys, I used to know a lot about html, but then just completely stopped doing anything with websites for too long. I was just wondering how I can replace a word or number with a specified word or number. What I want to achieve: I've got a forum with a couple thousand members and it's picking up in activity and I want to make some names stand out for being helpful. I want to replace their names with an image. But to do so, it'd have to be a code made and added into the footer template. Because obviously I can't edit a username for html image code. So I just need the code to find all instances of a certain username and replace it with what I specified. ------------- Man I really wish I remembered how to do this haha. Thanks guys. Hi guys, I'm very new here - literally just searched the web for help on this problem which has been plaguing me for some time... I'll post the code below, but basically, the div_id centre_image, the body text and the right hand side graphics are correctly formatted just in the wrong place! I need them to be to the right hand side of the Left hand menu... I'm hoping I make sense!? There is CSS as well but not sure whether or not this is a CSS issue or html! I would be really greatful if someone could help me out. I'm fairly new to website design but am trying my best using various tutorials on the web and compile something half decent! Thanks in advance, Graham. 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>Double Glazing | Windows | Doors | Conservatories | Rooftrim</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div id="email_header"><a href=" mailto: xxxx@zurichtitanium.com">xxxx@zurichtitanium.com</a></div>
</div>
<div id="blue_banner">
<h1>Double Glazing Worcester</h1>
</div>
<div class="cleaner"></div>
<div id="menu_wrap">
<div id="tabs">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Windows</a></li>
<li><a href="#">Doors</a></li>
<li><a href="#">Conservatories</a></li>
<li><a href="#">Rooftrim</a></li>
<li><a href="#">Get a Quote</a></li>
</ul>
</div>
</div>
<div id="holder">
<div id="lhs_menu_wrap">
<div id="windows_menu">
<ul>
<li><a href="#">Sleek White</a></li>
<li><a href="#">Woodgrain Collection</a></li>
<li><a href="#">Specialist Finishes</a></li>
<li><a href="#">Security</a></li>
<li><a href="#">Energy Saving</a></li>
<li><a href="#">Maintenance Free</a></li>
<li><a href="#">The Logical Choice</a></li>
</ul>
</div></div>
<div id="centre_image">
<div id="centre_LHS_pic"></div>
<div id="centre_RHS_pic"></div>
<div id="getquote_button"><a href="#">Get a Free Quote...</a></div>
</div>
<div id="RHS_Content">
<div id="rhs_window_offer">Double Glazed Windows...<div id="win_text1"><a href="#">Get Quote</a></div></div>
<div id="rhs_cons_offer">Your New Conservatory...<div id="win_text2"><a href="#">Get Quote</a></div></div>
<div id="rhs_trim_offer">Transform Your Roofline...<div id="win_text3"><a href="#">Get Quote</a></div></div>
<div class="guarantee_logo"></div>
</div>
<div id="body_text">
If you are considering enhancing your home, you owe it to yourself to get a professional consultation. At Zurich Titanium we pride ourselves on giving you exactly what you want. Whether it be treating yourself and your home to new <h2>double glazing windows</h2>, <h2>doors</h2>
or a <h2>conservatory</h2>, invite us to show you what we can do. We guarantee you won't be disappointed.
<p>We offer a fully customisable suite of Home Improvement Products, tailor made for your home, to ensure you get what you want and need, and not wasting money on features you'll never use. With our own highly skilled installers, we are able to keep quality control in house, enabling us to give, as standard, the unrivalled <b>Zurich Titanium 10 Year Guarantee</b> on all work undertaken.</p> <p>Our bespoke quotation service, available totally free of charge, will allow you to design the windows or doors, conservatory or roofline, most suited to your home, give you an accurate assessment of the work involved, and of course an exact price.</p>
<div id="body_footer"></div>
</div>
</div>
<div id="footer">Zurich Titanium Home Enhancements Ltd, Registered in England and Wales xxxxxxxx. xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.</div>
</body>
</html>
And CSS to follow... It may be somewhat rough around the edges; different hints and tips put together from across the web! Thanks so far Michael... Hello everyone, I've recently started a website at Angel Fire and went with HTML coding all the way. The problem I have is getting my text in their correct positions! It's been frustrating so, and I've searched everywhere for proper coding. Everytime I try to center certain text in the middle of the webpage, it pushes left aligned text further down. Any advice, coding, that would keep the text in check? Thanks. First I would like to know if there is a better way of doing this. <div></div> is the only way I know of doing it although others have told me they didn't even know it could be done with <div></div>. Second I would like to know if there's some way to control the speed at which the box scrolls. Third If the content is text then I want the scroll function to be vertical. There's other times I need the scroll to be horizontal. Here is the code: HTML Code: <div style="background-color: black; border-bottom-color: rgb(212, 47, 212); border-bottom-style: solid; border-bottom-width: 2px; border-left-color: rgb(212, 47, 212); border-left-style: solid; border-left-width: 2px; border-right-color: rgb(212, 47, 212); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(212, 47, 212); border-top-style: solid; border-top-width: 2px; font-size: 11px; height: 200px; overflow-x: auto; overflow-y: auto; width: 200px;"> <span style="color:#ffffff;">CONTENT HERE</span></div> This is what the code looks like when viewed in Chrome and Firefox. However when used in IE the content can often move through the boarders. Hey i have a drop down menu...when i select a particular name from it...it should hide all the other content on the page other than the header <h3> being selected and the content of h3...which can either be encloded in <br> or <table> tag Hi How do i resize the website that fits in to an iframe? Thanks mrdeleigh Ok, right, so I have some pictures in a table (Question1) and some text (Question2). Question 1 Is there a way of having a loading picture before the original image shows up? Question 2 Is there a way of having a loading picture before the text shows? This is only 'cause i would like some text that 'kinda looks like it's loading first, or a delay. I have an 'Agree' box on my website so that when people enter, they have to agree to certain terms first. Is there a way of having a checkbox underneath saying 'Do not show me this page again.' and when they select that, it stores a cookie or something so that they don't see the page again? The site: http://www.tc-ua.piczo.com/ Give me your comments and ideas. Thanks; ToshNeox Hi, I have a question to all. How can I made 100% header (bg only), normal content area (fixed width) then 100% box and below normal content area (fixed wifth and at last 100% footer. url page: http://www.filtrexoem.com/application.aspx put in frame. header and footer no. how? see screenshot. Hi all, brand new here. I'm working on a simple website for a project I'm doing with a friend, but I'm having a problem with the layout. The site is www.Project217.com. On my Macbook, the content on all of the pages appears centered, which is where I want it. Firefox, Safari and IE all display properly. However, on my Windows computer at work all of the content within the black section of the pages is aligned to the left. Is there an issue with my source code that I'm missing? Thanks for any help, Aaron Please help me with the following. This is not a problem in Firefox; only in IE. I am having trouble centering one DIV with a DIV to the left of the centered DIV. The DIV that is blue I would like centered according to the browser width and the red DIV I would like the same vertically as the blue DIV only left justified. In Firefox this works correctly the way I would expect. In IE the left justified div appears "pushes" the DIV ( in blue ) that I want centered further to the right; making it un-centered. thanks for any assistance. Code: <div width="100%"> <div align = "left" style="width:200px;float:left;background-color:#ff0000;"> <p style="font-size: 8pt;">This needs to be left justified........</p> <p style="font-size: 8pt;">This needs to be left justified........</p> <p style="font-size: 8pt;">This needs to be left justified........</p> </div> <div align="center" style="background-color:#00ff00;"> <div style="width: 500px;background-color:#0000ff;"> <p style="font-size: 8pt;">this needs to be centered.................................................................................. </p> <p style="font-size: 8pt;">this needs to be centered.................................................................................. </p> <p style="font-size: 8pt;">this needs to be centered.................................................................................. </p> <p style="font-size: 8pt;">this needs to be centered </p> </div> </div> This question might be rather basic. I'm not a web-developer, though I have a lot of other coding experience. As part of an internal webpage I'm creating, I want to access a webservice that returns a string and display it on the page. The service is accessed by URL, and requires parameters that are dynamically generated base upon the request parameters, so I can't just use #include. What I want to see is something like this, where the number string is provided by the webservice: Authorization code: 1343-7205-7570-8264 I tried this: Code: Authorization code: <object type=text/plain data="http://blah/service?params"></object> IE doesn't output the resulting string. Firefox does output the string, but it's not cleanly inlined with the rest of the text. It has it's own big block of the screen that the text sits in. Is there a simple way to insert the text from a dynamically generated URL into the current page? This is my first post, and I am new to html so here goes. I am working on a project using google earth. I need to have the screen divided into a quad panel. I was using a table 2x2 to do this, but the project has progressed to needing a little more than just a table. So as of now I have 2 divs and only one will display the plugin. I am not even sure if I am in the right direction, but here is my code. <style type="text/css"> <!-- #pane1 { border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000; height: 50%; width: 50%; left: 0px; top: 0px; } #pane2 { border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000; height: 50%; width: 50%; right: 0px; top: 0px; } </style> <div id="pane1"> <script src="http://www.google.com/jsapi? key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q"></script> <script type="text/javascript"> var ge; google.load("earth", "1"); function init() { google.earth.createInstance('pane1', initCallback, failureCallback); } function initCallback(instance) { ge = instance; ge.getWindow().setVisibility(true); // add a navigation control ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO); // add some layers ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true); ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true); // in this sample we will attempt // to fetch a KML file and show it function finished(object) { if (!object) { // wrap alerts in API callbacks and event handlers // in a setTimeout to prevent deadlock in some browsers setTimeout(function() { alert('Bad or null KML.'); }, 0); return; } ge.getFeatures().appendChild(object); var la = ge.createLookAt(''); la.set(37.77976, -122.418307, 25, ge.ALTITUDE_RELATIVE_TO_GROUND, 0, 0, 500); ge.getView().setAbstractView(la); } // fetch the KML var url = 'http://example.com/' + 'kml/Network_links/RMLS/NL_Sched_rmls_Outages_by_Creator_and_Int.kml'; google.earth.fetchKml(ge, url, finished); document.getElementById('installed-plugin-version').innerHTML = ge.getPluginVersion().toString(); } function failureCallback(errorCode) { } </script> <body onLoad="init()" > </div> <div id="pane2"> <script src="http://www.google.com/jsapi? key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q"></script> <script type="text/javascript"> var ge; google.load("earth", "1"); function init() { google.earth.createInstance('pane2', initCallback, failureCallback); } function initCallback(instance) { ge = instance; ge.getWindow().setVisibility(true); // add a navigation control ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO); // add some layers ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true); ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true); // in this sample we will attempt // to fetch a KML file and show it function finished(object) { if (!object) { // wrap alerts in API callbacks and event handlers // in a setTimeout to prevent deadlock in some browsers setTimeout(function() { alert('Bad or null KML.'); }, 0); return; } ge.getFeatures().appendChild(object); var la = ge.createLookAt(''); la.set(37.77976, -122.418307, 25, ge.ALTITUDE_RELATIVE_TO_GROUND, 0, 0, 500); ge.getView().setAbstractView(la); } // fetch the KML var url = 'http://example.com/' + 'kml/Network_links/RMLS/NL_Sched_rmls_Outages_by_Creator_and_Int.kml'; google.earth.fetchKml(ge, url, finished); document.getElementById('installed-plugin-version').innerHTML = ge.getPluginVersion().toString(); } function failureCallback(errorCode) { } </script> <body onload="init()" > </div> Here is my website for starters: http://divinedragons.tk If you navigate to my Schedules page, you can see there is an embedded calendar. At the bottom of this calendar, there is a line of text saying: "Want to add an event to this schedule? Contact us by clicking on the link above, and we will post it as soon as possible." I view this website on the current computer I'm using on Firefox, and the line of text can be viewed just perfectly. On my other networked computer, however, in MSN Explorer, i view the same page, but the same line of text seems to be too large, and it cuts off half the phrase. I was thinking the screen resolution was different, and that caused the text to be cut off in the browser. Yet i think there is a way for this line of text to be viewable on any computer, regardless of any screen resolution. I put the embedded code in a table format, as it is currently. The embedded code is with between the tags <TABLE><TD> and </TD></TABLE>. I remember looking somewhere that putting code in a table would cause it to appropriately "resize" itself in any monitor/screen resolution/browser size. Apparently it does not. So, I came here to ask an HTML expert if there is any way for my embedded calendar's footer text to be fully viewed, in any screen resolution or browser. Thanks for your time, and thanks so much in advance. |
|||||||