|
HTML - Positioning
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 Similar TutorialsYou 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, 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> 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 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 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 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! Alright so basically what I want to do is take this site: http://insightahoy.com/innuendo/plug...rogress.php?s= and iFrame JUST the center part were it has the bosses and the progress, I just want that part of the site. How would I create an iFrame to suck up just that part of the side and nothing else, what would the code be, I am very new to the whole HTML iframe thing. So any help would be much appreciated. I'm having trouble positioning a music file... it works with Firefox but not with any version of IE. Problem: Music file ends up at the top left corner of the page in IE, but works fine in Firefox. What's wrong with the code, or is there another way to position the file? <div style="Z-INDEX: 10; POSITION: absolute; LEFT: 335px; TOP: 640px"> <EMBED src="http://womeninboxes.com/He_Sawed_Mary_Sue_II.mp3" width="203" height="16" autoplay="false" controller="true" loop="false" pluginspage='http://www.apple.com/quicktime/download/'></div> This may be to big of an ask, but I am trying to make it so my website layout is positioned in the middle of the browser no matter how big the screen resolution is. For example, this is the page on my computer, here And my friends, here. So as you can see, on my pc it looks fine, yet on my friends the layout is all pushed up to the top, and this looks rather silly. If you could throw some tutorials or something my way id appreciate it. website: http://www.breakdowninc.987mb.com 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> 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? 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 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> Hello Kindly help me ..... as shown in the picture i want to move the text from the right side of the images to the bottom of it how? 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. I'm new to HTML but I think I'm slowly catching on. I have this block of code (I didn't write it) that I want to position on my webpage. The code creates a box with a menu on top containing five tabs (see attached pic). The tabs allow the user to switch between 5 embedded video streams inside the box. I want to take the whole thing and position it. Is there a way to position everything in the entire block of code? Or will I have to go into each piece and position it? How should I go about getting this box/menu/videos where I want them? I'm using a site builder that basically does the positioning for you, you just paste the code into a HTML box. But I can't get everything where I want it using that method so I'm now attempting to use absolute positioning. I'm thinking there must be a way to position everything at once because I assume that's how the site builder does it. HTML Code: <table>
<tbody>
<tr>
<td><br />
<style type="text/css">
div.TabTampil div.TTs {height: 24px; overflow: hidden; }
div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active { background-color: #15317E; }
div.TabTampil div.Halamans { clear: both; border: 2px solid #FFFFFF; overflow: hidden; background-color: #222;}
div.TabTampil div.Halamans div.Halaman { height: 100%; padding: 0px; overflow: hidden; }
div.TabTampil div.Halamans div.Halaman div.Alas { padding: 3px 5px; }
div.TabTampil div.TTs a { border-left:1px solid #FFFFFF; border-right:1px solid #FFFFFF; border-top:1px solid #FFFFFF; border-bottom:0px solid #FFFFFF; float: left; display: block; width: 100px; text-align: center; height: 24px; padding-top: 3px; vertical-align: middle; text-decoration: none; font-family: "Arial", Serif; font-size: 12px; font-weight: 900; color: #FFFFFF}
</style>
<br />
<form action="tabtampil.html" method="get">
<div id="TabTampil" class="TabTampil">
<div style="width: 650px;" class="TTs">
<a> Main Stream </a> <a> Stream 2 </a> <a> Stream 3 </a> <a> Stream 4 </a> <a> Radio </a></div>
<div style="width: 650px; height: 450px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
<script type="text/javascript"> channel="CHANNELHERE"; vwidth="600"; vheight="450";</script>
<script type="text/javascript" src="http://www.castamp.com/embed.jsBACKSPACETHIS"></script>
</div></div>
<div class="Halaman">
<div class="Alas">
<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/_woqNuDRPuA?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div></div>
<div class="Halaman">
<div class="Alas">
<iframe title="YouTube video player" width="640" height="390" src="https://www.youtube.com/embed/rQ9vqVpNqWU" frameborder="0" allowfullscreen></iframe>
</div></div>
<div class="Halaman">
<div class="Alas">
<iframe title="YouTube video player" width="640" height="390" src="https://www.youtube.com/embed/j3a1NwhsLVg" frameborder="0" allowfullscreen></iframe>
</div></div>
<div class="Halaman">
<div class="Alas">
<iframe title="AM 640 Radio Leafs Game" width="640" height="442" src="http://mapleleafs.nhl.com/club/RadioPlayer.htm?id=2010021217" frameborder="0" allowfullscreen></iframe>
</div></div>
</div></div>
</form>
<script style="text/javascript" src="http://www.mdn.fm/files/291528_3hhea/newscriptab.js"></script><br />
<script type="text/javascript">tabtampil_inisial('TabTampil');</script>
<br /> </td> <td><br />
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. Can someone please help me position my text entitled "Latest News..." not all the way left but not center, I would like it aligned with the main picture on the site. I have uploaded two pictures, one showing the way I would like it to appear and the other showing how it is incorrectly displayed. From my site http://www.trillionaireme.com 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. |
|||||||