|
HTML - Alligning/positioning
Here is the website in question:
http://www.canadianpoliticsrpg.com/ I want the add, that you see on the left, just in the middle of knowhere..i want it bottom left corner. I have no idea how to get it there. Thanks Similar TutorialsHi, 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 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> 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 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 What i would like is for a frame to show a website and then the user scowl around the frame and resizing it, the user then clicks on a button which displays the frame in the same position and it is the same size, but without the resize and scowling position options. How can i do this? Thanks I own a website at, www.Catwiskers.co.nr If you look, there are two characters on both sides of the main page. In order to position them there, I used a div position:absolute; script. Also if you notice, there is movement behind them. That's a flash movie I made, but then the movie disappears. But I also used div position:absolute; to place that there as well. How do I get the flash movie to be ONTOP of everything else on the page? Is there some sort of alpha:true or something? Hey, I was just wondering how I could have the navigation bar centred despite what resolution you view it in rather than fine in one and messed up in others. This is where it's for.. www.aweentertainment.com/tempindex.html 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>
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 --> 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? Ok im starting a new website and have a little problem this is my html for the table
HTML Code: <?php include("file:///Users/isaacrector/Documents/Website/navCss.css"); ?>
<div id= "main">
<table class="one" border="0" width="100%">
<tr>
<td width="176px" bgcolor="#4b6e2d"><div id = "nav">
<center><h4 class = "nav"> Navigation </h4></center>
<?php include("file:///Users/isaacrector/Documents/Website/nav.shtml"); ?>
</td>
</div>
<td width="5%"></td>
<td width="75%">sadf<br>asdf<br>asdf<br>asdf<br>asdf<br>sadf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf</td>
</tr>
</table>
</div>
this is the html [inserted with php] for the menu PHP Code: <div id="menuv-container"> <div id="menuv"> <ul> <li><a href="#" class="parent"><b>Home</b></a> </li> </ul> <ul> <li><a href="#" class="parent"><b>Projects</b></a> <ul> <div id = "maps"> <li><a href="projects.php"><b>Metric Converter</b></a></li> <li><a href="#"><b>1.2</b></a></li> <li><a href="#"><b>1.3</b></a></li> <li><a href="#"><b>1.4</b></a></li> <li><a href="#"><b>1.5</b></a></li> </div> </ul> </li> </ul> <ul> <li><a href="#" class="parent"><b>Examples</b></a> </li> </ul> <ul> <li><a href="#" class="parent"><b>About Me</b></a> </li> </ul> <ul> <li><a href="#" class="parent"><b>Contact</b></a> <ul> <div id = "monsters"> <li><a href="#"><b>2.01</b></a></li> <li><a href="#"><b>2.02</b></a></li> <li><a href="#"><b>2.03</b></a></li> <li><a href="#"><b>2.04</b></a></li> <li><a href="#"><b>2.05</b></a></li> <li><a href="#"><b>2.06</b></a></li> <li><a href="#"><b>2.07</b></a></li> <li><a href="#"><b>2.08</b></a></li> <li><a href="#"><b>2.09</b></a></li> <li><a href="#"><b>2.10</b></a></li> </div> </ul> </li> </ul> <ul> <li><a href="#" class="parent"><b>Helpful Links</b></a> </li> </ul> </div> <!-- end the menuv-container div --> </div> <!-- end the menuv div --> this is the css for both [also inserted with php] PHP Code: <style> body { background: url('http://nuvakaita.wiredhub.net/TDH/images/bg.jpg'); color: #4b6e2d; font-family: Segoe UI, Arial, sans-serif; font: small; } h4.nav { padding-top: 0px; } table.one { table-layout: fixed; padding: 0px; } #nav { width: 146px; text-align: left; padding: 15px; color: #ffffff; background-color: #4b6e2d; } #main { margin-left: 5%; margin-right: 5%; border: 1px solid #CCCCCC; text-align: left; padding: 15px; background-color: #a0cb7b; } /*#menu { margin-left: 5%; margin-right: 5%; border: 1px solid #CCCCCC; text-align: left; padding: 15px; background-color: #a0cb7b; } */ #menuv /* position, size, and font of menu */ { z-index: 0; width: 10em; /* [1] width of menu item (i.e., box) */ text-align: center; font-size: 0.9em; font-weight: italic; font-family: helvetica, arial, geneva, sans-serif; border:1px solid black; } #menuv a { width: 100%; display:block; padding-top: 0.2em; /* expands menu box vertically*/ padding-bottom: 0.2em; /* adds bottom border */ white-space:nowrap; } #menuv a, #menuv a:visited, #menuv a.parent, #menuv a.parent:hover /* all menus at rest */ { color: white; background-image: url("parent_link_gray.bmp"); background-repeat: repeat; text-decoration:none; /* removes underlines from links */ } /* #menuv a.parent, #menuv a.parent:hover attaches parent-arrow on all parents { position: absolute; right: 2px background: transparent url(http://www.sperling.com/examples/menuv/nav_white.gif) no-repeat center right; } */ #menuv a:hover /* all menus on mouse-over */ { color: white; background-image: url(http://www.freewebs.com/goxinfo/hover_link.bmp); background-repeat: repeat; } #menuv li { list-style-type:none; /* removes bullets */ } #menuv ul li { position:relative; } #menuv li ul { position: absolute; top: 10px; left: 9em; /* distance from left menu (this should be the same as width value in #menuv [1]) above */ display: none; } #menuv ul, #menuv ul ul, #menuv ul ul ul { margin:0; padding:0; width: 10em; /* width of sub menus (this should be the same as width value in #menuv [1]) above */ z-index: 1 } #menuv ul ul, #menuv ul ul ul, #menuv ul li:hover ul ul, #menuv ul li:hover ul ul ul { display: none; } #menuv ul li:hover ul, #menuv ul ul li:hover ul, #menuv ul ul ul li:hover ul { display: block; } #maps { border:1px solid black; } #monsters { border:1px solid black; } </style> and if you dont want to put all that together here is a pic of what it looks like (im on safari) There are 2 things i want to do: 1. i want to nav to be at the top left with 15px padding of the top and left instead of centered vertically. and then have the color continue going down with the height of the other cells. So it would look something like this: Thanks in advance! 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 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> 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! Hey guys. I have been racking my brain for days now and I cannot find a solution. What I need to do is the following: The position of the entire bar (navigation, title, title background, and flash) needs to be about 200px down in the document or about 30%. In that 200px above the bar, I want to run a <td> that runs a pattern. I need both of those things done so that the alignment of the bar items stay the same. Here is the test link: http://www.diversionguild.com/test/ Here is the link to the CSS: http://www.diversionguild.com/test/style.css That should give you everything you that you would need documentation wise. Thanks for your help and guidance. 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? |
|||||||