|
HTML - Positioning In Html/css Problem
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 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> 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>
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 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 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 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. When i tried to overlap two images, one of them at foreground(with opacity of zero value) and other one at background using absolute positioning. The image with absolute position works well with Google Chrome while when i try to open with any other browser or resoltion, the image displaces from its position i.e. it changes its required position. Code: <img src="myimage.jpg" width="150" height="113" style="opacity:0.0;filter:alpha(opacity=0);position:relative"><img src="myimg2.jpg" style="position:absolute;top:150px;left:150px" /> Please provide possible solutions... hi, i want to have a search box, and i would like it to be in the same line as my horizontal menu. how can i display a form inline with the rest of my menu? if i use div align right for my form it can be pushed right , but doesnt display properly in ie. I assume its not a right way to do it. could someone please help me out? thanks. <li><a href="" title="Miscellaneous">Misc.</a> <ul> <li><a href="">Miscellaneous</a></li> <li><a href="#">News Feed</a></li> </ul><span></span> </li> <form method="get" id="searchform" action=""> <input type="text" class="search1" style="color: #696565" value="Search " onfocus="if(this.value==this.defaultValue)this.value=''; this.style.backgroundColor='#FFCC99'" onblur="if(this.value=='')this.value=this.defaultValue; this.style.backgroundColor='#FFFFCC'"/> <button class="image" title="Submit Search">Go</button> </form> </ul> I'm trying to have 1 line of copyright at the bottom of each page on a site, but i am having to use loads of breaks to get it to the bottom each time, because when i do
Code: style="position: absolute; bottom: 5px;" in the div for it, it just goes straight to the bottom of the page before scrolling down. By that i mean when you open the page it is at the bottom, but there is more below it which you need to scroll down to, so really it is somewhere in the middle of the page. Hope i explained that well enough :-S If not here's a screenshot :-p http://i56.photobucket.com/albums/g1...wco99/cpss.png Any ideas? Hey all. I am having some trouble positioning some images to the right of a paragraph using css. Can anyone help? HTML: Quote: <!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" /> <link rel="stylesheet" type="text/css" href="../public_html/pages/nature.css"> <!-- TemplateBeginEditable name="doctitle" --> <title>Nature</title> <!-- TemplateEndEditable --> <!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable --> <script type="text/javascript" src="../public_html/pages/nature.js"></script> </head> <body onload="MM_preloadImages('../public_html/content/homerollover.jpg','../public_html/content/aboutrollover.jpg','../public_html/content/clientsrollover.jpg','../public_html/content/contactrollover.jpg')"> <div class="pagecontainer"> <div class="header"><img src="../public_html/content/header.jpg" alt="Header" /></div> <div class="menunav"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','../public_html/content/homerollover.jpg',1)"><img src="../public_html/content/homebutton.jpg" alt="Home" name="Home" width="151" height="40" border="0" id="Home" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('About','','../public_html/content/aboutrollover.jpg',1)"><img src="../public_html/content/aboutbutton.jpg" alt="About" name="About" width="150" height="40" border="0" id="About"/></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Clients','','../public_html/content/clientsrollover.jpg',1)"><img src="../public_html/content/clientsbutton.jpg" alt="Clients" name="Clients" width="150" height="40" border="0" id="Clients" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','../public_html/content/contactrollover.jpg',1)"><img src="../public_html/content/contactbutton.jpg" alt="Contact" name="Contact" width="149" height="40" border="0" id="Contact" /></a> </div> <div class="content"><div class="contentheader">Lorem ipsum</div><div class="contentcontainer"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec lectus. Donec eget tortor id pede vehicula lacinia. Nam vitae risus non neque facilisis consectetuer. Suspendisse bibendum, sem nec rhoncus laoreet, diam tortor malesuada enim, volutpat volutpat sem nisi eget nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris scelerisque. Sed ligula. Mauris neque mi, rutrum nec, luctus a, dictum nec, libero. Duis feugiat erat eget metus. Fusce non orci. Vivamus vestibulum dapibus ipsum. Nunc dictum bibendum nunc. Nam odio augue, tincidunt eget, tristique quis, varius sit amet, justo. Suspendisse sed eros.</p></div></div> <div class="footer">Footer</div> </div> </body> </html> CSS: Quote: @charset "utf-8"; /* CSS Document */ * { margin: 0px; padding: 0px; } body { padding-top: 3%; padding-bottom: 3%; background-color:#bfa494; } .pagecontainer { width: 600px; margin: auto; background:#FF0000; } .menunav { background:#8c8e73; height: 40px; } .header { background:#0000FF; height: 279px; } .content { border-left:#000000 1px solid; border-right:#000000 1px solid; border-bottom:#000000 1px solid; background:#ffffff; height: 300px; z-index:1; } .contentheader { padding:20px; color:#6c482d; font-size:20px; font-weight: bold; font-family:Arial, Helvetica, sans-serif; z-index:2; } .contentcontainer { margin-left:20px; margin-right:300px; font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#333333; text-align:justify; z-index:3; } .images { padding-bottom:200px; padding-left:400px; z-index:4;} .footer { background-color:#0066CC; height:40px; } Image: http://pseudo.samcamfilms.com/temp.JPG Any help would be appreciated. Comparing IE7 to Firefox... the TEXT sitting on the image looks fine in IE 7 but is slightly "bumped up" in Firefox and most other browsers. Does anyone know the explanation for this?... Thank you. HTML Code: <a href="http://live.xbox.com/en-US/MyXbox/Profile?GamerTag=P2W360"> <img stely="position:absolute; TOP:30px; LEFT:30px; WIDTH:75px; HEIGHT:75px" src="http://i43.tinypic.com/35jibzd.pnge" /> </a> Why won't it position properly? I'm using this template on my Tumblr blog: http://blog.tmimgcdn.com/wp-content/...ute.jpg?9d7bd4 I'm wondering how I can get those boxes to the top so that they are not centered? I've been messing about with the HTML for ages. You'll have to excuse me because I'm a noob at HTML. I appreciate any help! Thanks. Hi guys In an effort to have a div with a semi transparent background, I have made two divs - one with the transparency, and another to place over the top for my content. I can't get my overlay div to position correctly - it seems that ie and FF start off placing the div from different positions. The page is at www.popbeatblues.com.au/rw/artist_1.php Also, making the overlay have an absolute position has chnaged the appearance of it's content divs too. Any ideas what I'm doing wrong? Cheers Shaun Hello Folks, I'm currently redesigning my site and am having a problem with the last bit! I know that CSS is the method of choice now for web design but I need to integrate my site with a commercial shopping cart called Actinic. This uses tables and is virtually impossible to rewrite using CSS. It makes for a seamless integration if I stick with tables for my part of the site, and less headaches trying to make the two sites look the same. I want to move some of the links away from the left hand column on the page and put them into a horizontal bar at the bottom. I've created a tile which repeats, but I want it separated a bit from the left hand column. Here's a url so you can see what I'm on about. http://www.magicalwonders.com/NewLook/Index.html You will see that the blue bar created by my tile is stuck to the side of the left hand column. My problem arises in trying to move this bar to the right of the left hand column, so that there is a gap between the two. I was hoping to avoid using a full size graphic as I want to keep the file size to a minimum. I've tried Cell Spacing & Padding which doesn't have any effect, so I've tried putting the background tile in between Div tags and specifying a width using the following code:- <td align="center" ><Div width=300px id="footerbackground">Some links go Here</Div></td> This hasn't worked though and the tile fills up the entire width of the cell that the Div is in. I would be grateful if anybody can offer any advice. Many thanks, Myles Hi all, [LINK REMOVED] Just in the process of changing this website from a black layout with a background to an all white layout... I'm wishing I had started from scratch now but I stupidly tried to work with the existing site. So anyyways you can ignore the crappy looking bits because my question is just about the menu bar at the top... It's made from an inline list. Is there any way that I could spread it out across the screen, so that the menu item on the right is hard up against the right? The other thing is that the site will be in 3 or 4 languages so the menu items will have more characters in Spanish (for example). It needs to be able to adapt, or I need to implement a different solution for each language. The html looks like this: Code: <!-- main navigation --> <ul id="nav"> <li class="home"> <a href="index.htm"><span>Home</span></a> </li> <li> <div> <ul> <li><a href="message-from-director.htm">Message From Director</a></li> <li><a href="what-is-15-15.htm">What is 15/15?</a></li> <li><a href="festival-history.htm">Festival History</a></li> <li><a href="judges-special-guests.htm">Judges & Special Guests</a></li> </ul> </div><a href="#"><span>About 15/15</span></a> </li> <li> <div> <ul> <li><a href="register-now.php">Register Now</a></li> <li><a href="get-ready.htm">Get Ready</a></li> <li><a href="conditions-of-entry.htm">Conditions of Entry</a></li> <li><a href="faq.htm">FAQ</a></li> </ul> </div><a href="#"><span>How To Enter</span></a> </li> <li> <div> <ul> <li><a href="screening-information.htm">Screening Information</a></li> <li><a href="nominations.htm">2009 Nominations</a></li> </ul> </div><a href="#"><span>Programme</span></a> </li> <li> <div> <ul> <li><a href="films.htm">Films</a></li> <li><a href="festival-trailers.htm">Festival Trailers</a></li> </ul> </div><a href="#"><span>Archives</span></a> </li> <li> <div> <ul> <li><a href="festival-sponsors.htm">2009 Festival Sponsors</a></li> </ul> </div><a href="#"><span>Sponsors</span></a> </li> <li> <div> <ul> <li><a href="press-releases.htm">Press Releases</a></li> <li><a href="images.htm">Images</a></li> </ul> </div><a href="#"><span>Newsroom</span></a> </li> <li class="contact"> <div> <ul> <li><a href="contact-us.php">Contact Us</a></li> <li><a href="15-15-committee.htm">15/15 Committee</a></li> </ul> </div><a href="#"><span>Contact</span></a> </li> </ul> ...and the CSS looks like this: Code: #nav {
font-size: 15px;
line-height: 20px;
list-style: none;
padding: 0;
position: absolute;
top: 250px;
left:-5px;
width: 750px;
}
#nav li {
display: inline;
float: left;
margin: 0 0 0 0px;
position: relative;
}
#nav a {
color: #000;
float: left;
text-decoration: none;
}
#nav a span {
cursor: pointer;
float: left;
display: inline;
font-weight: bold;
line-height: 30px;
padding: 0 5px;
}
#nav li.hover a,
#nav li:hover a {
background: url(../img/active-l.gif) no-repeat 0 0;
}
#nav li.hover a span,
#nav li:hover a span {
background: url(../img/active-r.gif) no-repeat 100% 0;
}
#nav .contact div {
background: #D3D2D2 url(../img/bg-bg-t2.gif) no-repeat 0 -1px;
left: auto;
right: 0;
}
* html #nav .contact div {
right: -1px;
}
#nav div {
background: #D3D2D2 url(../img/bg-bg-t.gif) no-repeat 0 -1px;
display: none;
left: 0;
padding: 5px 0 0;
position: absolute;
top: 30px;
width: 168px;
z-index: 100;
}
#nav li.hover div,
#nav li:hover div {
display: block;
}
#nav div ul {
background: url(../img/bg-b.gif) no-repeat 0 100%;
list-style: none;
margin: 0;
overflow: hidden;
padding: 0 0 5px;
text-transform: none;
width: 168px;
}
#nav div ul li {
margin: 0;
padding: 0;
width: 168px;
}
#nav li.hover div ul li a,
#nav li:hover div ul li a {
background: none;
color: #000;
display: block;
line-height: 30px;
padding: 0 0 0 9px;
width: 159px;
}
#nav li.hover div ul li a:hover,
#nav li:hover div ul li a:hover {
background: #D9581F;
}
Any ideas? Thanks so much in advance... Neil The problematic page has this url: http://geosci.uchicago.edu/~moyer/Mo...GroupPage.html It shows up in firefox the way I want it to. The pictures enlarge right on top of their thumbnail accompaniments. The enlarged images are absolutely positioned. However, in chrome, internet explorer and safari, they enlarge several hundred pixels left of where I want them to. Is there a way I can have the enlarged images positioned relative to the thumbnails? Or can I add a margin to the code that only firefox will recognize? I can send you the code if you need it to figure out the problem. It is just long and confusing, because I was modifying somebody else's code and I am a newbie. My html problem keeps failling, with all my image codes.. shown for 10 errors which are all for the images what's wrong? Here is the 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" /> <!-- New Perspectives on HTML and XHTML 5th Edition Tutorial 2 Case 2 Fiddler Home Page Author: Date: 2-16-2011 Filename: home.htm Supporting files: fiddler.jpg --> <title>, ITSE 1411 Lab Project 2, Tutorial 2 Case 2, Due 02/23/2011</title> </head> <body> <div> <img src="fiddler.jpg" alt="Fiddler on the Roof" /> <hr /> <a href="home2.htm"><img src="home.jpg" alt="home" /></a> <a href="slide1txt.htm"<img src="start.jpg" alt="start" /></a> <a href="slide1txt.htm"<img src="back.jpg" alt="back" /></a> <a href="slide2txt.htm"<img src="forward.jpg" alt="forward" /></a> <a href="slide6txt.htm"<img src="end.jpg" alt="end" /></a> <br /> <a href="slide1txt.htm"<img src="thumb1.jpg" alt="slide1" style="border-width: 5" /></a> <a href="slide2txt.htm"<img src="thumb2.jpg" alt="slide2" style="border-width: 0" /></a> <a href="slide3txt.htm"<img src="thumb3.jpg" alt="slide3" style="border-width: 0" /></a> <a href="slide4txt.htm"<img src="thumb4.jpg" alt="slide4" style="border-width: 0" /></a> <a href="slide5txt.htm"<img src="thumb5.jpg" alt="slide5" style="border-width: 0" /></a> <a href="slide6txt.htm"<img src="thumb6.jpg" alt="slide6" style="border-width: 0" /></a> </div> <hr /> <div> <img src="slide1.jpg" alt="slide1" /> </div> <blockquote> <p><i>Do You Love Me?</i> sung by Deb Ingalls and Thomas Gates</p> </blockquote> </body> </html> I can't get the height of the outer box to fit tight around the smaller ones. It does in Safari but not in most browsers. <html> <body> <table border=1 width=634><td valign=top align=left><form><select id=ctAdmin ><option>Administrative Postings</option><option>Flick Two-to come</option><option>Flick Three-to come</td><td valign=top align=right><form><select id=ctFMA><option>Members Postings</option><option>Flick Two-to come</option><option>Flick Three & Four-to come</option></select></form>"); </body> </html> Can some one please take a look at this and help me get the images to line up as they should!!! http://www.ardmoreweatherlive.com/wx3.php code: <!-- ##### Main Copy ##### --> <br> <font face="verdana,arial" size="3"><center>Click on radar image for full size</center></font> <br> <center> <TABLE BORDER> <TR ALIGN=CENTER> <TH>Base Reflectivity<br><a href="/wx16.html"><img src="/resize-radar-image.php"></img></a></TH> <TH>Echo Tops<br><a href="/wx17.html""><img src="/resize-et-image.php"></img></a></TH> </TR> </TABLE> </center> <center> <TABLE BORDER> <TR ALIGN=CENTER> <TH>Base Velocity<br><a href="/wx18.html"><img src="/resize-bv1-image.php"></img></a></TH> <TH>Relative Velocity<br><a href="/wx19.html"><img src="/resize-srv1-image.php"></img></a></TH> </TR> </TABLE> </center> <br> </div> <!-- ##### Footer ##### --> Thanks again for the help,Doug I think this is a CSS issue so I posted in the CSS section. |
|||||||