|
HTML - Need Help With <div> Positioning, Involving Css Too.
Hi!
I'm having trouble positioning the footer <div> on my webpage, containing links to my counter and guestbook. I want it to go at the bottom center of the page without overlapping on any of the other <div>s, meaning that if it doesn't fit on the webpage (which it doesn't), you have to scroll down to see it. Here's my webpage: http://www.geocities.com/serenamonster/map.html The footer div displays fine in IE, but displays incorrectly in Firefox: it's smack in the center of the page, instead of the bottom, and I don't know how to fix it. Here's the relevant coding (I think...I'm really n00by so I can't be sure.) I had to use CSS because that's the only way I could stretch the background image to 100% without tiling. Here goes: -------------------------------------------------- <style type="text/css"> html, body { height: 100%; margin: 0; padding: 0; } img#bg { position:fixed; top:0; left:0; width:100%; height:100%; } #footer { position:relative; } #menu { position:relative; z-index:2 } #box { position:relative z-index:4 } #intro { position:relative; z-index:1 } </style> <!--[if IE 6]> <!--[if IE 6]> <style type="text/css"> html { overflow-y: hidden; } body { overflow-y: auto; } #bg { position:absolute; z-index:-1; } #menu { position:static; } #box { position:relative; } #intro { position:static; } #footer { position:static; } </style> <![endif]--> ...... <div id=footer style:"position:relative"; align="center";> blah blah content </align> </div> --------------------------------------- Can someone please tell me what I'm doing wrong? Thanks a bunch! Similar Tutorialshttp://validator.w3.org/check?uri=ht...idator%2F1.767 http://www.ilustrationbeast.com/bio.html on every page the same thing pops up as incorrect, and i'm not really sure what it's asking me to do? without that line the image map doesn't work, but apparently it's incorrect to have it there as is? i tried to mess with it, and i'm gonna go ahead and say i failed I believe this is a HTML problem: Old site: http://www.ardmoreweatherlive.com/ . Old site CSS: http://www.ardmoreweatherlive.com/weather-screen.css New site: http://www.ardmoreweatherlive.com/test3.php New CSS: http://www.ardmoreweatherlive.com/weather-screen2.css I am trying to get rid of the old left side menu and maybe get the page to float in the center with, I think padding(?) around the edges. I really thank everyone for the help, Doug You can view my site at www.palermostaging.com. It appears fine in IE but in firefox, the alignment is thrown off a little, I think the orange column is too tall. How can I fix this without changing the text size or placement? Any suggestions are appreciated, source is viewable on the page. Thanks, Anders Hi, Would some be able to help me with the layout of my page? I want it to look like this and this is what it looks like now. I don't want to do it using borders but I can't seem to figure it out using positioning. Anyone able to help? CSS Page Regards, Darren Thanks for all your help I am making great progress thanks to you all. Here I've posted a picture of my current dilemma. Hopefully it makes sense. http://www.trillionaireme.com Hi, I can't seem to get these images to center after using position:fixed on them. Here's the code I have: Code: <html> <head> </head> <body> <div style="position: fixed; top: 0px;"> <img src="top.jpg"> </div> <div align="center"> <table width="1025" bgcolor="gray"> <tr> <td> <middle text> </td> </tr> </table> </div> <div style="position: fixed; bottom: 0px;"> <center><img src="bottom.jpg"></center> </div> </body> </html> On this page: http://obama-net.org/bluelayout/index.html my absolute positioning is just not working. I've tried virtually everything to see what the problem could be, but I don't seem to find it? On my computer, the website looks fine when the window is maximized, but when it's minimized, the divs go all over the place. However, in other computers the divs are just never in place. Is there something wrong with my coding? I used dreamweaver. Thank you so much for your time! How can I make a small pop up window show the middle of a webpage? Hello Everyone, I 'm trying to place a total of sixteen rectangles along the edges of my webpage. I was able to do it in firefox but not IE. In IE the last rectangle does not line up with the other rectangles to its left and right. Please take a look at my code below to see where the problem lies. Thank you in advance for your help. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Welcome</title> <style> body{text-align:center; } #container{ width:800px; margin: 0 auto; height:900px; background-image:url(""); background-repeat:no-repeat; } table{border-style:dashed;border-color:black} </style> </head> <body> <div id="container"> <!Left> <div style="float:left;"> <table width="200" height="150" style="border-width:3px 3px 0px 3px" > <tr> <td> </td> </tr> </table> <table width="200" height="150" style="border-width:3px 3px 0px 3px"> <tr> <td> </td> </tr> </table> <table width="200" height="150" style="border-width:3px 3px 0px 3px"> <tr> <td> </td> </tr> </table> <table width="200" height="150" style="border-width:3px 3px 0px 3px"> <tr> <td> </td> </tr> </table> <table width="200" height="150" style="border-width:3px 3px 0px 3px"> <tr> <td> </td> </tr> </table> <table width="200" height="150" style="border-width:3px"> <tr> <td> </td> </tr> </table> </div> <!Top1> <div style="float:left;width:200px;height: 150px;"> <table width="200" height=" 150" style="border-width:3px 3px 3px 0px"> <tr> <td> </td> </tr> </table> </div> <!Top2> <div style="float:left;width:200px;height: 150px;"> <table width="200" height="150" style="border-width:3px 0px 3px 0px"> <tr> <td> </td> </tr> </table> </div> <!Right> <div style="position:relative;float:right;top:0px;width:200px"> <table width="200" height="150" style="border-width:3px 3px 0px 3px" > <tr> <td> </td> </tr> </table> <table width="200" height="150" style="border-width:3px 3px 0px 3px"> <tr> <td> </td> </tr> </table> <table width="200" height="150" style="border-width:3px 3px 0px 3px"> <tr> <td> </td> </tr> </table> <table width="200" height="150" style="border-width:3px 3px 0px 3px"> <tr> <td> </td> </tr> </table> <table width="200" height="150" style="border-width:3px 3px 0px 3px"> <tr> <td> </td> </tr> </table> <table width="200" height="150" style="border-width:3px"> <tr> <td> </td> </tr> </table> </div> <!Bottom1> <div style="position:relative;float:left;width:200px;height:150px;top:600px;"> <table width="200" height=" 150" style="border-width:3px 3px 3px 0px"> <tr> <td> </td> </tr> </table> </div> <!Bottom2> <div style="position:relative;float:right;width:200px;height:150px;top:600px;"> <table width="200" height="150" style="border-width:3px 0px 3px 0px"> <tr> <td> </td> </tr> </table> </div> </div> </body> </html> Hello all, i am new to html coding and i am working on an assignment for university. I have come across one problem that i don't know how to fix. I want to make a web page that when the user maximizes the screen size or is using a different sized screen the web pages components would stay consistently in one spot. We did a basic page when i was in high school and all we used were "div" 's in css sheets and they use a fixed position on a screen. i tried using percentage and not pixels when positioning the "div"'s but im not getting anywhere......could anyone give me advise or a link to a page that explains thanks in advance Hello again, Guys! I have a tiny HTML / CSS problem, which i'm not being able to solve. I have the following webpage set up; http://www.myhrensolutions.net/workpappa/index.html With the following CSS file; http://www.myhrensolutions.net/workpappa/index.css What i'd like to accomplish, is to make another Div, that would emplace in the middle, like shown on this pictu http://i56.tinypic.com/2cf62bn.png How i did try to solve this, was to create a new div right after the opening of the mainbody div, and then add the margin values to it, but it just made the whole page flip out of alignment (some elements were skewed further down the site etc.) Could you guys please help me? Thank you! Hello All- I'm trying to create a website and I am using Dreamweaver. While I'm fairly versed with Dreamweaver's nuances, there's one thing that I've never been able to do. I've created a white rectangle box in photoshop that I want to use as the main part of my site where all the text and pictures go. I want the rectangle positioned vertically and to go "off-screen." I have a blue background behind it. My problem is, the rectangle doesn't go to the furthest point of the top and bottom of the browser. Here is an example of what I want done: http://www.logoworks.com/ If you check out that website, you'll notice the rectangle shape in the middle behind the text and graphics. It goes to the furthest part of the top "off-screen." The picture I've attached is what happens to me what I try to play around with the padding and positioning (i've tried both html and css). Any help would be great. Thanks! I am having trouble positioning a table on my site. I have managed to align it in the vertical position but using any form of centering only aligns the left edge to the center. I need the centre of the table in the centre if you know what i mean...! Many Thanks for any help Here is the code I am a complete beginner so have faith... <style type="text/css"> TABLE.red {position:absolute; top:310px} </style> <TABLE class="red" WIDTH="200" SPAN style="COLOR: #0000ff" CELLPADDING="0" CELLSPACING="0" BORDER="0" STYLE="background-color: #660033" position:absoloute; left:"20px"></SPAN> <TR> <TD WIDTH="32"> <IMG SRC="rounded_corner1.jpg" BORDER="0" ALT="..." width="32" height="32"></TD> <SPAN style="COLOR: #0000ff"><TD WIDTH="172"></TD></SPAN> <TD WIDTH="32"><IMG SRC="rounded_corner2.jpg" BORDER="0" ALT="..." width="32" height="32"></TD> </TR> <TR> <SPAN style="COLOR: #0000ff"><TD></TD></SPAN> <TD ALIGN="CENTER"><STRONG>ACTUAL CONTENT</STRONG></TD> <SPAN style="COLOR: #0000ff"><TD></TD></SPAN> </TR> <TR> <TD><IMG SRC="rounded_corner3.jpg" BORDER="0" ALT="..." width="32" height="32"></TD> <SPAN style="COLOR: #0000ff"><TD></TD></SPAN> <TD><IMG SRC="rounded_corner4.jpg" BORDER="0" ALT="..." width="32" height="32"></TD> </TR> </TABLE> </CENTER> Hi there. I am working on a website for a friend who created it using Word and then found that this doesn't work in FF (the files were .mht). I only know basic HTML, and no CSS. I can do most of what I need to but am having two problems. Firstly, some of the positioning is out in FF, but if I change it so it's ok in FF it's then out in IE. Word appears to have positioned everything using  s: HTML Code: <span style='mso-spacerun:yes'> </span> <span style='mso-tab-count:3'> &nbs p; </span> <span style='mso-spacerun:yes'> </span> <!--[if gte vml 1]> <v:shape id="_x0000_i1030" type="#_x0000_t75" style='width:141pt;height:141.75pt'> <!-- sixth image file --> <v:imagedata src="TA6.jpg" o:title="TA6"/> </v:shape> <![endif]--> <![if !vml]> <img border=0 width=188 height=189 src ="TA6.jpg" v:shapes="_x0000_i1030"> <![endif]> <span style='mso-spacerun:yes'> </span><!--[if gte vml 1]> <v:shape id="_x0000_i1031" type="#_x0000_t75" style='width:141pt;height:2in'> I know this is horrible code. Is there any simple way to ensure that the image ends up in the same place in IE and FF? Do I need to use absolute positioning, and if so, can anyone direct me to good resources on this? Secondly, I'm having problems with an horizontal line which appears in IE but not in FF. The code is HTML Code: <h2 style='margin-left:36.0pt;text-indent:36.0pt'> <!--[if gte vml 1]> <v:line id="_x0000_s1031" style='position:absolute;left:0;text-align:left;z-index:1' from="1in,33pt" to="647.15pt,33pt" strokecolor="#396" strokeweight="3.5pt"/> <![endif]--> <![if !vml]> <span style='mso-igno vglayout;position:absolute;z-index:1;left:0px;margin-left: 93px;margin-top:41px;width:773px;height:6px'> This displays correctly as a shaded green line in IE, but as a white line with a thin black border in FF. From searching I think this is VML and not supported by FF - is this correct? In that case, I think I need to use the <hr> command, but how do I add an attribute to <hr> to ensure it's placed in the right place? Is the only solution a table? Sorry for the stupid questions, I know Word code is a terrible place to start from, I'm just trying to avoid redoing it all. sorry for the nooby question but - i wanna position a table in the center of page but right at the top with no gap. ive tried: <table style="position:absolute;top:0px;left:auto;right:auto;"> but that doesn't work. can someone pls help me. thanks. Hi guys. Sorry if I'm inconveniencing you, but I have a really big problem that I can't work out. http://automata.firephoenixnet.com/design/ Could you take a look at that in Firefox and then in IE? Did I miss a margin or something? And, is there a way I can get my footer div always at the bottom of the page without setting a margin-bottom for the sidebar div? Many thanks guys. Ok, this is the start of a website I'm doing for a class I have... http://alphabravo.dajoob.com/thunderbirds/Index.html I'm having trouble getting that flag table alongside of the main white one. I know it's a dumb question, but I just can't figure it out... Any suggestions? Edit: Also, in Firefox, the banner on top is skrewed up.... Know how to fix that? Thanks I've run into a few problems that don't appear in firefox but do in Internet explorer..The first problem I have is that in IE the content box on the right is bumped down, it looks exactly the way I want in FF, but not in internet explorer. The next problem I'm having is the banner in IE..It seems as if theres a pixel or two underneath of the banner I can't get rid of... Also, any ideas on how I can center the navbar? I can't seem to get it to go in any browsers... page: http://www.ssvfd.com/newsite/history.html css file: http://www.ssvfd.com/newsite/style.css 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. 1st i would like to say thank you to all those who have helped me over the last 10 days or so, i know ive really been annoying considering some posts were i suppose unnecessary, so i apologize... 2nd this will be my last annoying post for a while once i get this done im pretty much getting ready to go public after a few updates as far as text material... so heres the issue... im using this code below... now what im trying to do is overlay my image so it appears in the center of the other image but using top: 70px; left 275: px; its not going to be the same depending on how big your screen is and how big your explorer window is set to... so im wondering does any1 know anyway i can get that image to appear dead center regardless of user screen size? <center> <img src = "Best-1.gif" style="position: absolute; top: 70px; left: 275px; "> <img src="banner-top.JPG" width="100%" height="150" /> </center> you can see the results on http://www.freewebs.com/fallingrain11/22.html |
|||||||