|
HTML - Positioning Layout
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 Similar TutorialsHi all, Help on this would clear up this headache. I am using relative position to put this flash component flush with the right side of the layout. However, in different screen resolutions it still moves. Why is this? for ref: www.burnthisforyourfriends.com Here's the code: <html> <head> <title>Burn This for Your Friends, show dates, music, media, downloads and store</title> </head> <body bgcolor="#000000"> <center><img src="http://img704.imageshack.us/img704/3791/burnthisheader.jpg" /> <br /><a href="http://www.burnthisforyourfriends.com/index.html"><img src="http://img704.imageshack.us/img704/686/mainnavigationplacehold.jpg" alt="Home" border="0" /></a><a href="http://www.burnthisforyourfriends.com/releases.html"><img src="http://img704.imageshack.us/img704/686/mainnavigationplacehold.jpg" alt="releases" border="0" /></a><a href="http://www.burnthisforyourfriends.com/artists.html"><img src="http://img704.imageshack.us/img704/686/mainnavigationplacehold.jpg" alt="artists" border="0" /></a><a href="http://www.burnthisforyourfriends.com/studio.html"><img src="http://img704.imageshack.us/img704/686/mainnavigationplacehold.jpg" alt="studio" border="0" /></a><a href="http://www.burnthisforyourfriends.com/gallery.html"><img src="http://img704.imageshack.us/img704/686/mainnavigationplacehold.jpg" alt="gallery" border="0" /></a><a href="http://www.burnthisforyourfriends.com/bookinginfo.html"><img src="http://img704.imageshack.us/img704/686/mainnavigationplacehold.jpg" alt="bookinginfo" border="0" /></a><a href="http://www.burnthisforyourfriends.com/press.html"><img src="http://img704.imageshack.us/img704/686/mainnavigationplacehold.jpg" alt="press" border="0" /></a><a href="http://www.burnthisforyourfriends.com/store.html"><img src="http://img704.imageshack.us/img704/686/mainnavigationplacehold.jpg" alt="store" border="0" /></a><a href="http://www.burnthisforyourfriends.com/contactus.html"><img src="http://img704.imageshack.us/img704/686/mainnavigationplacehold.jpg" alt="contactus" border="0" /></a> <br /><img src="http://img514.imageshack.us/img514/9773/flashplaceholderred.png" /><img src="http://img163.imageshack.us/img163/8006/flashplaceholdergreen.png" /><img src="http://img340.imageshack.us/img340/4820/flashplaceholderyellow.png" /> </center> <div style="position: relative; top: 20px; left: 659px;"> <p> <script type="text/javascript" src="js/swfobject.js"></script> <script type="text/javascript"><!-- 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 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 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> 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 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! Hello, I have a bunch of navigational buttons (tables) on the left of my website. I use CSS to control the positioning and formatting of it. What if I wanted another table to contain some text as my main paragraph and I wanted to control the positioning in that table too using CSS, but I want it to have a different position then the navigational buttons, is this possible? Code: <html>
<head>
<style type="text/css">
body
{
background-image:url("http://www.designswan.com/wp-content/uploads/2009/Vector/3DSpaceTexture/space4.jpg");
}
h1
{
color:white;
}
p
{
color:white;
font-size:12px;
text-align:center;
position:absolute;
left:260px;
top:70px;
z-index:-1;
}
img
{
position:absolute;
left:500;
top:170;
}
</style>
</head>
<body>
<center><h1><u>Philosphical Ideas</u><h1></center>
<table border="1" width="70%" cellpadding="1">
<td bgcolor="#ffffff" style="text-align:center">
<center><p><b>This website was created as a sample. In this website you will find philosophical ideas, thoughts, funny stories, quotes, recommended websites, artwork, and much more!</b><br /></p>
</center>
</td>
</table>
<table border="1" width="12%" cellpadding="0">
<td bgcolor="#006600" style="text-align:center">
<a href="http://www.zahnlogics.com/movies" style="color:yellow;font-size:18px;"> <b>Philosophical Ideas</b></font></a> <br />
</td>
</table>
<table border=1" width="12%" cellpadding="0">
<td bgcolor="#006600" style="text-align:center">
<a href="http://www.zahnlogics.com/movie_reviews" style="color:yellow;font-size:18px"> <b>Movie Reviews</b></a> <br />
</td>
</table>
<table border="1" width="12%" cellpadding="0">
<td bgcolor="#006600" style="text-align:center">
<a href="http://www.zahnlogics.com/music_reviews" style="color:yellow;font-size:18px"><b> Music Reviews</b></a> <br />
</td>
</table>
<table border="1" width="12%" cellpadding="0">
<td bgcolor="#006600" style="text-align:center">
<a href="http://www.zahnlogics.com/quotes" style="color:yellow; font-size:18px"><b> Stories</b></a> <br />
</td>
</table>
<table border="1" width="12%" cellpadding="0">
<td bgcolor="#006600" style="text-align:center">
<a href="http://www.facebook.com/matthazan" style="color:yellow;font-size:18px"><b> Facebook Page</b></a> <br />
</td>
</table>
<table border="1" width="12%" cellpadding="0">
<td bgcolor="#006600" style="text-align:center">
<a href="http://www.zahnlogics.com/websites" style="color:yellow;font-size:18px"><b>Websites</b></a> <br />
</td>
</table>
<table border="1" width="12%" cellpadding="0">
<td bgcolor="#006600" style="text-align:center">
<a href="http://www.zahnlogics.com/music_reviews" style="color:yellow;font-size:18px"><b>Artwork</b></a> <br />
</td>
</table>
</body>
</html>
Look at: http://test6.waltonstreetwebdesign.com/ If you look at it in firefox, it works fine. In IE 7, the positioning for div "logo" is not working properly and you can't see the logo. What is my problem? Thank you. I'm positioning an image within a divison that also has a paragraph of text. I've got the image floating right. It has these settings: display: inline; clear:both; float: right; I've added padding on the right side to move the image to the left or to control it's right margin so that it's not tight to the right edge of the page. When I apply a border to the image it also goes around the padding which is goes out away from the image. What is recommend as another way to control the right margin or to move image left without the padding? Think I might have it, making positioning relative and then changing right position. 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> I inserted an swf using the object tag. I used hspace and vspace to position it. Some browsers (opera/firefox) don't seem to be reading the vspace. Can I use CSS to position an object tag? I tried giving it a class name but it still doens't seem to work. Any suggestion? 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! 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 --> How can I make a small pop up window show the middle of a webpage? |
|||||||