|
HTML - Can Someone Please Help Me With Positioning In Html/css?
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>
Similar TutorialsI'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> Hi all, Here`s my problem, I hope someone can help me. I export my *.swi project in html/swf movie with width="100%" height="100%, and it`s visible in full screen on every browser- Firefox, Flock, Chrome, Opera, even when I`m changing the screen resolution. Except one- the old bad IE. The things with IE looks different-IE is searching for the "object" string, where I have to put the movie size not in percents (with w / h="100%" looks too small, I have to zoom to 400% to view the SWF file), but in pixels (in my case- width="885", height="705"). And when I change the screen resolution from 1280/1024 to 1024/768, 800/600, etc.- my swf is not fit to the IE browser window- big part of the movie is out of the screen... I tried "swffit" already but I can`t get it to work for me.. Is there way to fix it with some HTML script or any other way? I`ll be very thankful for your advices. Regards, Boyan URL: http://bm-studio.org/movie.html I have a problem... I want the text to stay where it is in the window when the browser is re-sized. Every time I resize the window, the text wraps and covers everything down the page, leaving a vertical sentence with 3 letters each line...ugh I hope you are following me. The absolute positioning works with tables and graphics, but I can't seem to get it to work with text (<p>). I have used CSS to position everything on the page, but when I resize the window, it seems the text goes along with it. Maybe my problem is using CSS for EVERYTHING. Is that ok>? it seems that I have the most luck using an external CSS document for positioning than frames, and such. Maybe if I used a table to outline the entire page? Which is better? How do I get the text to "stick" to where I put it, like the tables and such? Here is the code: <div> <p class="homehead">HEADING</p> <p class="offic"><i>Official website of</i> <b>My Company</b></p> <p class="former"><i>(Formerly My old company)</i><br><br> <hr width="250%" style="margin-left: -150px;"></p> </div> and the embedded CSS: <style> p.homehead { font-family: verdana; font-size: 19pt; font-weight: bold; position: absolute; top: 130px; left: 300px; } p.offic { font-family: verdana; font-size: 14pt; position: absolute; top: 170px; left: 285px; } p.former { font-family: verdana; font-size: 11pt; font-weight: ; position: absolute; top: 200px; left: 380px; } </style> What can I do to remedy this? Thanks matthew Not sure if this can be done in the HTML itself, or if this is something that CSS could resolve (or both? )... I'm wanting to create a navigation "strip" with a couple links and a search box. Here's the HTML I'm using at the moment: Quote: <p class="navigation"><a href="/?p=index" class="internallink">home</a>|<a href="tools/edit.php?p=index" class="internallink">edit</a>|<form action="search.php" method="POST"><input type="text" name="term" maxlength=255 size=10><input type="submit" value="Search"></form></p> When the browser renders it, the form shows on a new line, rather than on the same line as the text! Quote: home|edit| [______] [Search] I'd like for it to appear on the same line like: Quote: home|edit|[______] [Search] I've tried the only thing I could find via Google that seemed even close to what I'm looking for - adding a style='display:inline;', but this didn't correct the issue. Any idea what I could do to make this appear the way I'm wanting? Thanks in advance. Hi guys, just a quick question about positioning objects in HTML. Sorry if the is a noobish question, im new to html and dreamweaver. Basically, for a school assignments we nhave to create a webpage. There is one aspect though that i cant figure out. What is the best way to position pictures, divs etc in HTML? If I use absolute positioning with pixels, it changes where it is on different screen sizes (obviously). The best way i have found so far is by using percentages (eg top 40%) but this is slow and hard. Any better way? Too long didnt read- how to position things so it looks the same on any resolution Thanks in advance 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 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 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? 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? 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 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 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! 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 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 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. 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 Which is the better way to position the div tags? Should I use float or some fixed position? I could get two columns positioned with float left and right, but what about a third column? Thanks |
|||||||