|
HTML - Absolute Position And Height Problems
hello,
i'm having problems with a website. If you look at the following url you can see the problem. http://www.r-media.nl/vaassen problem When you look at the footer it stays at his absolute position but the holder stops filling in the background color. I would like to have the footer at the bottom and when you resize the screen the holder has to grow with it. Can someone tell me how to do this? Here's my current script: Code: <BODY> <!--Menu--> <div id="menu"> <ul id="menu_list"> <li>Hoofdpagina</li> <li>Informatie</li> <li>Nieuws</li> <li>Agenda</li> <li>Contact</li> <li>Adverteren</li> </ul> </div> <!--End Menu--> <!--Center--> <div align="center"> <!--Holder--> <div id="holder"> <!--Logo--> <div id="logo" align="left"><img src="images/logo.png" width="250" height="150" alt="Vaassen.nu"></div> <!--End Logo--> <!--Content--> <div id="content"><img src="images/cannenburgh.jpg" width="600" height="400"></div> <!--End Content--> </div> <!--Holder--> </div> <!--End Center--> <!--Footer--> <div id="footer"></div> <!--End Footer--> </BODY> And here's my CSS Code: /*CSS Document*/
html,body
{
margin: 0px;
padding: 0px;
height: 100%;
background-image: url("images/bg.gif");
}
/*Holder*/
#holder
{
width: 990px;
height: 100%;
background-color: #EDEDED;
}
/*End Holder*/
/*Logo*/
#logo
{
width: 100%
}
/*End Logo*/
/*Menu*/
#menu
{
width: 1020px;
height: 50px;
position: absolute;
top: 125px;
right: 50%;
margin-right: -510px;
background-image: url("images/menu_bg.png");
background-repeat: no-repeat;
}
#menu_list
{
width: 95%;
margin: 0px;
padding: 0px;
z-index: 999;
}
#menu_list li
{
width: 100px;
height: 35px;
margin: 0px;
padding: 0px;
list-style: none;
line-height: 35px;
float: left;
text-align: center;
font-family: Arial, Verdana, Sans-serif;
font-weight: bold;
font-size: 10pt;
color: #f7f7f7;
cursor: default;
cursor: pointer;
}
/*End Menu*/
/*Content*/
#content
{
margin: 10px auto;
width: 100%;
background-color: #EDEDED;
}
/*End Content*/
/*Footer*/
#footer
{
width: 1020px;
height: 50px;
position: absolute;
bottom: 5px;
right: 50%;
margin-right: -510px;
background-image: url("images/footer_bg.png");
background-repeat: no-repeat;
text-align: left;
text-indent: 1.5em;
font-family: Arial, Verdana, Sans-serif;
font-weight: bold;
font-size: 10pt;
color: #f7f7f7;
line-height: 35px;
}
/*End Footer*/
Thanks in advance! Similar Tutorialsi have a web page that so far tested well in every browser except IE 7 - see: www.finlayprints.com/Imprintables_Wedding3.html does anyone have an idea why: 1) red wedding gif image does not align in IE 7 the way it does in every other browser? it's absolute positioned. 2) the text "5x7 imprintables..." is actually overlapping the previous floated box in IE 7?? scratching my head trying to figure out, spewing expletives at the screen here... thanks Howdy all, I have three scrolling divs that i want to be the height of the page, so i'm guessing position:absolute and height:100% will do that just fine. But i want these three scolling divs to be inside a position:fixed element so that they stay put when scrolling down the page. Is this possible? I dont think a pos:absolute will work nested inside a pos:fixed. How could i work around it? thanks! Hello everyone, I've go this code here for positioning the "comments and frieands" together in in a scroll box at the bottom of the page. But I'd like to put it in a sertante position. Could anyone plaese help me find out were and what to put in this code. And for more information this is a code I want to put within a "div" image and place it in relation to were the image is (0,0) not were the page starts (0,0). -------------------------------------------------------------------------------------------------------- <i class=i> <a href="http://xiii.us/ms/center-friends-and-comments"</a>scroll center friends and comments</a></i> </td></tr></table> </td></tr></table> </td></tr></table> <div class="myDClassFC"> <table><tr><td> <table class="off"><tr><td> <table><tr><td> <style> .i {display:none;} div.myDClassFC {height:400px; overflow:scroll; overflow-x:hidden} </style> <i class="i">!-END Block to put Friends and Comments in a Scroll Box-! </i> ----------------------------------------------------------------------------------------------------- Well I appreciate everyones thought. Hi, I am looking for the easiest and reliable solution to make the "View on Google Maps" image to look like here http://www.dublinbynumbers.com/troubleshooter.html instead of here http://www.dublinbynumbers.com/categories/cinemas The solution should work in both IE/FF and any screen resolution. Thanks in advance for your help, Sorin Hey everyone, got a problem with an element that is relatively, or absolutely, positioned (I've tried both methods and both produce the same results). Take a look here with anything but Internet Explorer: http://zachi.teamtreetops.com *Screenshots of whats wrong in IE* The "bottom" div element is off in both cases. ie5 ie7 Code: div#bottom{
height:11px;
width:411px;
background-image: url(images/bottom.png);
position:absolute;
}
Complete style sheet Any insight on the issue would be much appreciated! This is the code I'm using to put flash in, Code: <object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="200" width="200" data="http://www.amarasoftware.com/slideshow.swf"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://www.amarasoftware.com/slideshow.swf" /> <param name="quality" value="high" /> </object> .. I want to put this flash in an absolute postition Code: position:absolute; top:730px; left:30px; That is an exsample of how I did it with an image. How would I make my flash be absolute postition.... were should I put it. Thanks, Hi, I need to embed some HTML content in a container, so that the content's elements anchored at absolute position 0 will actually follow the container's position. What should I use as container? Frame, DIV, IFrame? Thanks! Hi there, Im kinda stuck. I would like these following areas: <span class="text">xx</span> <span class="icon">xx</span> .. to ALL be positioned at the same place when being hovered.Problem now is that they keep appearing besides their "button": Have a look here to see what I mean. Have a look here for the source, hope im making sense, thanks. Hi, Ive spent hours upon hours painfully sculpting this website and i can't for the love of gaaawd get the positioning of my element standard throughout the website. The home page and the watercolour-classes page have the bottom graphics bar in the same position But different from all the other pages. All i want it to do is be the same throughout and its only out by about 10px. why oh why Ive been struggling for days and weeks with this problem and cant work it out. Im sure its something simple but as a self taught web designer i dont know it all.... far from it. Any ideas or suggestions Please. The website is http://www.miriartist.co.uk Any help or light on the matter would be great THANKS Cheeeers Ben Hi, We have a large (over)complicated business website - I'm only testing it, so don't have any input to the code (I do have some html experience as I design my own websites, but nothing as complicated as the business one). The live site works OK, but as soon as we work on the test or the live-contingency site, when we click on a link we are taken to the live site, so I think the problem is that the site is using absolute URLs rather than relative ones - I can't see all of them as they are off in the javascript somewhere, and the pages are so complicated I don't fully understand them anyway. As far as I can see the options are - keep it as it is and put up with the fact that we can't test a lot of the functionality (not very good) - build a host file so that we are sent to the correct url (not very good because we're not properly testing the links) - replace all the absolute URLS with relative ones - sounds good, although how we get the developers to rebuild the whole site (3000 pages!) I cannot imagine! Does anyone have any other suggestions? Thanks all John On my website I have a left and a right menu, both columns have 3 cells with height set to 100% or just default no value. It all works fine in firefox and opera. However in Internet Explorer the bottom cell in both columns don't extend to meet the bottom of material in the cell above. It helps if you turn borders on in the code, but the betfred banner and mailing list items are valigned top, so should meet the bottom of the menu above in the cell above. Can anyone offer any help thanks I am getting ready to create an external css, but want to get the styling issues resolved first with on-page styles. Problem: hr vertical spacing looks OK in Firefox, Opera and Safari, but it is far too much in IE. I am using the following to style a 1 px hr with a specified color: hr.red {border: none 0; border-top: 1px solid #ffffff; border-bottom: 1px solid #990000; width: 100%; height: 2px; margin: 0; margin-top:4pt; margin-bottom:4pt; text-align: center; } Q. Is this the proper way to specify an hr? (The color, thickness and position are fine.) Q. This works with background of ffffff. How do I get this hr to work with any color background? Q. What can I do to keep the spacing the same in Firefox, Opera and Safari, but reduce it in IE? (Do I substitute padding for margin?) Here is the page I where I use the code: http://www.iaps.com/test/standard-te...-hr-test2.html Many thanks in advance. Hi guys, I've been frustrated for awhile trying to fix three of my problems. I just started making a site for myself today, the specific one is http://www.bcsticketsnow.com/rosebowl.html Anyway, I've got three problems, and appreciate any help anyone can offer on any of them: 1. I'm new to frames, and am told to stay clear of it. But I don't know php, so this is the only way I know to make a header, middle and footer on all 20 pages that I'm going to have where I only need to edit one to change all. So I have 3 frames in the frameset, header, mainrosebowl, and footer. I understand that cols="220,*,100" will make the header 220 pixels, the footer 100 px, and the middle part the rest of the window. But I'm trying to figure out a way to have it go deeper than the window. As you can tell, I've got a scroll bar on that middle frame. I want that frame to extend to more than 100% and push the footer below the visible window. So I'm really looking for a big scroll bar for the entire window to scroll down, not a mini scroll bar just for the middle frame. Is this possible? Having the cols add up to only the size of the window isn't what I'm looking for. 2. In the header frame, I've got that drop down menu (says "Bowl Events"). When I put the form in for the drop down menu, it kind of expanded the height of the table. It had less space before in that row of the table with the blue background. When I put the form in there, it kinda messed up the spacing. I essentially want to delete that space below bowl events to make the height of the row of that table like half the size. Any ideas? 3. For that same drop down menu, I'm trying to target each link in that menu to open up a new window (like target="_top"). But putting it after <option value="URL" target=..."> does nothing. Am I supposed to put it in the javascript? Here's what I have now: <script type="text/javascript"> function goToPage(dd) { var ind = dd.selectedIndex; if (ind == 0) { return; } var url = dd.options[ind].value document.location=url; } </script> <form> <select name="eventlist" onChange="goToPage(this); return false;" size="1" style="border: 0; BACKGROUND: navy; COLOR: white; FONT-FAMILY: arial; FONT-SIZE: 15px; font-weight: bold;"> <option value="">Bowl Events</option> <option value="http://www.bcsticketsnow.com/bcschampionship.html" onclick="header.location.href='_top'">BCS Championship</option> <option value="http://www.bcsticketsnow.com/rosebowl.html">2009 Rose Bowl</option> <option value="http://www.bcsticketsnow.com/orangebowl.html">2009 Orange Bowl</option> <option value="http://www.bcsticketsnow.com/fiestabowl.html">2009 Fiesta Bowl</option> <option value="http://www.bcsticketsnow.com/sugarbowl.html">2009 Sugar Bowl</option> <option value="http://www.bcsticketsnow.com/chickfilabowl.html">2009 Chick-Fil-A Bowl</option> <option value="http://www.bcsticketsnow.com/capitalonebowl.html">2009 Capital One Bowl</option> <option value="http://www.bcsticketsnow.com/cottonbowl.html">2009 Cotton Bowl</option> <option value="http://www.bcsticketsnow.com/holidaybowl.html">2009 Holiday Bowl</option> </select></form> Hi Everyone, I'm slightly confused by this one. But i'm sure theres a hack out there to fix it. Basically, in firefox and konqueror, running on kubuntu, the top navigation bar at http://www.tendervendors.com/dev/payroll.html displays correctly, and when you hover over it, it fills the li with a semi-opaque background. This is correct. Its done, by filling the a element, with a background-color and then applying opaque: 0.5; The a element also has padding, which makes it fill out to the size of the li element, so the a element fills its portion of the ul, and looks like the li has the affect applied to it. However, in opera, the right and left padding is correct, but the height padding doesn't work. Does anyone know of a bug in opera that would be causing this problem, and possibly a code fix for it? TIA Matthew Millar this is my page http://web.vtc.edu/users/cjb06271/CI...nal/order.html there are several things I would like to happen. 1. the right collumn background to be where the right collumn should be(so other links in navbar) 2.The test between the roach pictures to be alligned with the top rather than bottom of pictures (so smaller windows can see) 3. When you size the window smaller than the text, a scroll bar appears, and when you scroll the background no longer exists. If I put it on auto the background will only go as far as the text does. 4. (nice but not required)The cocroachs to be alligned to the left and right of the top bar respectively, and the text in the middle. 5. (nice but not required) the right column background image is being cut in half (as does the top one if you size small enough). any way to make the images ignore the collumns? don't worry about the colors I will be changing them soon First off, hello, this is my first post. Here is the code im using, which works great until i minimize the page. Seems like the shoutbox doesnt minimize with the rest of the page and it actually stays at position,I know i know thats why its called absolute. But how can i get my html code boxes to minimize and configure properly with the rest of the page? Thx for any help Code: <!-- Begin ShoutMix - http://www.shoutmix.com --> <iframe title="devilleather" src="http://www5.shoutmix.com/?devilleather" width="960" height="400" style="position:absolute; top:285px; left:350px"> frameborder="0" scrolling="auto"> <a href="http://www5.shoutmix.com/?devilleather">View shoutbox</a> </iframe> <!-- End ShoutMix --> could someone please help me out! I just need this flash code <embed allowScriptAccess="never" src="http://www.amarasoftware.com/slideshow.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="200" height="200"> </embed> to have an absoulte postion on it... thank you. I would greatlly appreciate your help Dear Forum Readers, I do not know how this whole forum thing works, and I probably will not be using it much. But I have a very important question to ask you all. If anyone knows, please help me. I searched high and low for a code to place a picture anywhere (out side of the tables) and I finally decided to just use one of the codes that MySpace help pages uses to post banners on your page when you have used their site for codes; and it worked beautifully, the only thing is it will only work on the left side. Here is a link to my page so you can see what I am talking about. MySpace.com/chippycheekschik. The roses on the left, I also want on the right. Will someone kindly help me...I would really appreciate it...:-) My E-Mail is Steph_A_Rios@yahoo.com or AIM SN is ChippyCheeksChik. You may also leave me a message on my MySpace, comment or personal, either will do. PLEASE contact me if anyone has a solution. Thank you so much. Sincerely, Steph R. Hi guys, I'm a newb here, and I'm trying to create a table with a fixed position like this one http://www.adachiu.me/ I have made one, but if I resize the window it will move into the table and look all wrong. This website that I have provided does not do that; it will go up and down with the page when you scroll, and if you resize than it will not move into the table. Does anybody know how to fix this? Thanks Sean |
|||||||