|
HTML - Help With Absolute Positions
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 Similar TutorialsOk, this page looked all screwed up with firefox and IE so I made tables. However, as you can see, I need those bottome pics/tables, underneath the top banner and to the right of the left banner. Any ideas how I do that? http://www.bringbackwendell.com/new2.html Ok so I have a html list with images on the left of each list item, but I want to have the imagine in-line with each link. Here is what it looks like at the moment: And here is the code: Code: <li> <img src="http://www.aidtheboss.com/images/paper&pencil_48.png" class="left_float" height="20px;" width="20px;" style="padding-right:5px; padding-bottom:7px;"/> <a href="http://www.truefootballmanager.com/2010/03/football-manager-2011.html">Wonderkids List</a> </li> <li> <img src="http://www.aidtheboss.com/images/users_two_48.png" class="left_float" height="20px;" width="20px;" style="padding-right:5px; padding-bottom:7px;" /> <a href="http://www.truefootballmanager.com/2009/11/football-manager-2010-free-players.html">Best Players</a> </li> <li> <img src="http://www.aidtheboss.com/images/folder_add_48.png" class="left_float" height="30px;" width="20px;" style="padding-right:5px; padding-bottom:7px;" /> <a href="http://www.truefootballmanager.com/2009/01/you-play-football-manager-2009-too-much.html">Ultimate FM2011 Downloads</a> </li> <li> <img src="http://www.aidtheboss.com/images/questionmark_48.png" class="left_float" height="20px;" width="20px;" style="padding-right:5px; padding-bottom:7px;" /> <a href="http://www.truefootballmanager.com/2008/10/football-manager-2009-interview-with.html">How to Play FM Online</a> </li> <li> <img src="http://www.aidtheboss.com/images/globe_48.png" class="left_float" height="23px;" width="23px;" style="padding-right:5px; padding-bottom:7px;" /> <a href="http://www.truefootballmanager.com/2009/11/football-manager-2010-kits.html">Football Manager Live</a> </li> Any help on what needs to be added in would be appreciated! Hello, I have a website constructed with tables since I haven't had the time to learn CSS. When the browser window gets resized, the table disappears and moves below my ad (aligned left). I want my table to NOT move even if the browser window is resized. I am able to achieve this by "converting tables to layers" but I don't like how it makes my site look and it messes up the format of some of my content. The code is: <table width="800" border="1" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"><div align="center"><a href="index.htm"><img src="images/banner.png"width="800" height="120" border="0"></a> </div></td> </tr> <tr> <td colspan="5"> </td> </tr> <tr> <td colspan="5"><div align="center"> </div></td> </tr> <tr> <td colspan="5"> </td> </tr> <tr> <td><div align="center"><a href="index.htm"><img src="buttons/home.png" alt="Home Page" width="67" height="15" border="0"></a></div></td> <td><div align="center"><a href="videos.htm"><img src="buttons/videos.png" alt="Videos" width="85" height="15" border="0"></a></div></td> <td><div align="center"><a href="gallery.htm"><img src="buttons/gallery.png" alt="Gallery" width="107" height="15" border="0"></a></div></td> <td><div align="center"><a href="about.htm"><img src="buttons/about.png" alt="About" width="80" height="15" border="0"></a></div></td> <td><div align="center"><a href="contact.htm"><img src="buttons/contact.png" alt="Contact" width="108" height="15" border="0"></a></div></td> </tr> <tr> <td width="160"><div align="center"></div></td> <td width="160"><div align="center"></div></td> <td width="160"><div align="center"></div></td> <td width="160"><div align="center"></div></td> <td width="160"><div align="center"></div></td> </tr> <tr bgcolor="#FFFFFF"> <td height="223" colspan="5"><p class="style2"> </p> <p class="style3"> </p> <p></p></td> </tr> </table> Thank you! 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. 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 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 --> Hi ! I was wondering if anybody know how i make a table at the absolute top of a site. In dreamweaver it creates a space between the browser and table. A example is the top menu of this page http://www.nettkatalogen.no I need to create something similar to the top menu in yellow at this page. thx Hi there, I want my images to have specific positions within my website but so far I seem to get it wrong. this is the html: <body> <div class="top"> </div> <div class="logo"><img src="img/logo.jpg" /></div> <div class="wrapper"> <div class="1"><img src="img/1.jpg" width="450" height="450" /></div> <div class="2"><img src="img/2.jpg" width="215" height="220" /></div> <div class="3"><img src="img/3.jpg" width="215" height="220" /></div> <div class="4"><img src="img/4.jpg" width="215" height="450" /></div> </div> </body> this is the css body { background-color:#FFFFFF; color:#000; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } .top { width:100%; height: 33px; background-color:#0D0D0D; } .logo { position:relative; margin: 0 auto; border: none; padding:0; width: 400px; height: 130px; margin-top:25px; } .wrapper { position:relative; margin: 0 auto; border: none; padding:0; width: 900px; height: 700px; margin-top: 25px; } .1 { position:absolute; width: 450px; height: 450px; left: 0; top: 0; } .2 { position:absolute; left:460px; width: 215px; height: 220px; top: 0; } .3 { position:absolute; left:460px; top:230px; width: 215px; height: 220px; } .4 { position:absolute; left: 685px; width: 215px; height: 450px; } Basically I want something like this site http://www.aardvarkbrigade.com/ where the images seem to be placed in specific positions. Would be great and I would be thankful if someone could help me I have made the usual searches but none of the information I found about Chrome positioning bugs seems to apply to this problem. I am using an absolutely defined div within a relatively defined div to position a marker box over sequential navigation bar graphics. The divs are defined in the CSS file, and then a single style line defines the box top margin in each page file. This works perfectly in FF and IE, but under Chrome the box position slowly creeps downward, by about 2 percent of the top distance, until the lowest instance is well off center. Can I fix this without going to browser-specific code? The page is temporarily he http://www.nitropress.com/CLIENT_TES...Pono/index.php And the relevant code is: Code: #navbar {
float: left;
width: 200px;
max-width: 200px;
position: relative;
padding: 9px 0 0 0;
}
#navbar img {
margin: 0 0 20px 0;
padding: 0;
}
#navbar .markbox {
position: absolute;
min-width: 200px;
max-width: 200px;
height: 30px;
border-top: 2px solid #c99;
border-bottom: 2px solid #c99;
z-index: -5;
}
...with lines like this in each page file to position the marker box vertically: Code: <style>.markbox {top: 3px;}</style>
Good afternoon, I am trying to design my own template for Constant Contact, so I can get away from paying a design fee andstill have a good looking template. Anyways, when I view the template I made using Serif PagePlus it looks good, however when I email it to myself from constant Contact all the images are viewed in one row, one by one. I believe the problem is with the code: <div style="position:absolute; left:2px; top:2px; width:797px; height:151px;"> Can you please help solve my hair pulling issues with the absolute postioning. Good afternoon, I am trying to design my own template for Constant Contact, so I can get away from paying a design fee andstill have a good looking template. Anyways, when I view the template I made using Serif PagePlus it looks good, however when I email it to myself from constant Contact all the images are viewed in one row, one by one. I believe the problem is with the code: <div style="position:absolute; left:2px; top:2px; width:797px; height:151px;"> Can you please help solve my hair pulling issues with the absolute postioning. What is the best method to center a single (hover over) image link in the absolute center of a browser page? I know there must be something very easy that's going over my head. Is it easiest via CSS, or html? or neither, or both??? here's my code so far 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>keep your eyes open</title>
<style type="text/css">
<!--
#centerDIV {
width: 100%;
height: 100%;
vertical-align: middle;
text-align: center;
}
body {
background-color: #333333;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('Images/eyesopen.png')">
<div id="centerDIV">
<a href="mailto:info@kyeonyc.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('eyes_closed','','Images/eyesopen.png',1)"><img src="Images/eyesclosed.png" alt="eyes open" name="eyes_closed" width="249" height="247" border="0" class="imageCenter" id="eyes_closed" /></a></div>
</body>
</html>
I have some expanding sections (spans) in my page that expand when clicked with a little javascript changing display to block form hidden. However one section when expanded doesn't move the next section down at all. The next section is not set to absolute or anything so I cannot think why that section isn't moving down when the previous section is expanded. Have tried everything and previous sections seem to have exact same code and they push down the next section when expanded. Confused. It's the section HTML Code: <h3>Silver Jews Band Website</h3>
<p class="cntr"><a href="images/sampleWebsite1.png" title="website example"><img src="images/website_thumnail.gif" alt="Example Website Design"/></a></p>
<p class="fl">
<span class="plusArrowPF" onclick ="moreInfo('webSite1') ">click here to expand this section...</span>
<span id="webSite1">
text text
</span>
</p>
<h3> <br /><br /> Rocky Horror Festival Website</h3>
<p class="cntr"><a href="images/sampleWebsite3.png" title="website example"><img src="images/website3Thumbnail.JPG" alt="Example Website Design"/></a></p>
<p class="fl">
<span class="plusArrowPF" onclick ="moreInfo('webSite2')">click here to expand this section...</span>
<span id="webSite2">
text text </span>
</p><br /><br />
<h2 class="pfH2" id="programs"><br/><br/>Programs</h2>
<hr />
etc etc
if you want to view the page to see what I mean it's www.absolute-websites\portfolio.html and it's the section at Rocky Horror Festival. Thank you. Good afternoon, I am trying to design my own template for Constant Contact, so I can get away from paying a design fee andstill have a good looking template. Anyways, when I view the template I made using Serif PagePlus it looks good, however when I email it to myself from constant Contact all the images are viewed in one row, one by one. I believe the problem is with the code: <div style="position:absolute; left:2px; top:2px; width:797px; height:151px;"> Can you please help solve my hair pulling issues with the absolute postioning. Hi all, Im working with HTML and JSP and trying to select a file using the file chooser. <input type="file" name="fileChooser"/> . When it selects the file it only gives my the final filename of the image and assumes the image is held on the server. How do i ensure that the filename it gets is the absolute path to the image in my filespace? Thanks for reading my problem! Stuart Hi to all, I am creating an event planner which means that I have a calendar like in html generated by server side script, with users created events stored in a database that are displayed with floating divs that can span across many days. Events can be added/edited at any time by many users, and I can not modify the way they add or modify it. Therefore I can have many events on any day and an event can last an indefinite number of days. The problem is that some of the event will overlap, is there any way in html /css to prevent the <div> with absolute position to overlap without any javascript ? Thanks a Million, Alex Hi! I have a problem here which really really annoys me. http://members.dodo.com.au/~rouslan/...ite/index.html when you look at the page it looks great with Firefox and when you look at it with Internet Explore 7 it also looks fine except the main content is not absolutely centered. In Internet Explore 7 you can see that by comparing margins, the left one is shorter than the right one. How can I fix that? p.s. I am a lot out-of-dated with HTML, because the last time I was constructing web pages 8 years ago, so you might notice in source I use a lot of tables, etc. If you can suggest I should change all the code, please do or simply paste it here as solution. Thank you! 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, |
|||||||