 |
|
|
|||||||
Before you post, read our:  |
|
|
Thread Tools | Rate Thread |
|
|
|
|||||||
|
|
|
Thread Tools | Rate Thread |
01-05-2009, 11:03 PM
|
PM User | #1 |
|
New to the CF scene Join Date: Jan 2009
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
 |
Text moving in browser...Dreamweaver
Hi guys, I'm working on a limousine website (www.expresslimo.info), and in IE and Mozilla, the text is moving around when you resize the window.
I used flash for the intro which worked just fine, then used Dreamweaver to lay out my text in layers. My code is listed below. Can someone help me figure out how to get the text to remain in the same place regardless of the size of the browser? Is there a better way to do text than with layers? Thanks in advance. <html> |
|
|
|
01-05-2009, 11:14 PM
|
PM User | #2 |
|
Senior Coder  
Join Date: Oct 2007
Location: Cowboy Nation
Posts: 2,112
Thanks: 158
Thanked 253 Times in 253 Posts
 |
the major problem is this
Code:
#layer1 { height: 342px; width: 650px; left: 320px; top: 300px; position: absolute; visibility: visible; }
Use padding and margins, that way they adjust to the users resolution. You need to drop the tables as well. Place the text inside of a div and use margins. The best bet is to redo this using divs or make a BG fro a big table in the middle where the text goes. The Text will keep moving unless this happens. Hope this helped a little.
__________________
Generic signature comment!
|
|
|
|
|
01-05-2009, 11:39 PM
|
PM User | #4 |
|
Senior Coder
Join Date: Oct 2007
Location: Cowboy Nation
Posts: 2,112
Thanks: 158
Thanked 253 Times in 253 Posts
|
well...
ok, you obviously took an image and sliced in a prgram that created this page for you. What you need to do is in the center... where the text goes, you need to slice a huge chunk of that, maybe the size of the text or a little bigger. Like when you go to slice the image make the size about 660px X 352px. Then place that text inside the <td> with padding, like this. Code:
<style type="text/css" media="screen"><!--
#layer1 { height: 342px; width: 650px; padding-left: 5px; padding-top: 5px; visibility: visible; }
--></style>
Code:
<td colspan="" rowspan="" style="background-image:url('image.gif'); width:560px; height:352px;"> <div id="layer1">TEXT</div> </td>
__________________
Generic signature comment!
|
|
|
|
|
01-05-2009, 11:44 PM
|
PM User | #5 | ||
|
Senior Coder  
Join Date: Dec 2006
Location: Alaska
Posts: 4,371
Thanks: 9
Thanked 607 Times in 601 Posts
|
Hello breatheorange,
Quote:
It's MUCH better/easier and more compatable to use divs positioned with floats/margins. DW does, however, suggest using a DocType. It will put one in automatically for you when you start a new document. You should check the link about DocTypes in my sig below. There is also no need for tables here - see the link about tables in my sig too. One more link, about absolute positioning... Quote:
To position your text, change your CSS to look like this: Code:
#layer1 {
height: 342px;
width: 650px;
float: left;
margin: 300px 0 0 320px;
}
__________________
Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, then hack it for IE
Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad |
||
|
|
|
| Bookmarks |
| Thread Tools | |
| Rate This Thread | |
|
|
