|
| |
|
|
paul1912005
Posts: 32
Joined: 7/18/2007
Status: offline
 |
New problem - 11/6/2007 13:41:17
Started a new-page and this time instead of using tables for the layout of my page I am using css because I am more use to it now.
The problem I am having is that, when I add a paragraph or an image and load it up in a web-browser such as FF or IE they both display perfectly but when I shrink the page down the pictures or paragraphs move to fit the page and they look horrid.
When I made the layout in tables before they don't move and stay the same.
any suggestions?
|
|
|
|
Tailslide
Posts: 6003
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: New problem - 11/6/2007 17:06:28
Can you give us a link as it depends on the particular method you've used to place items. If you've used absolute positioning then that can often make a page very fragile and is generally best avoided.
It may be that the page is behaving exactly as it should - i.e. expanding or contracting according to text size. If that's the case then you shouldn't try to prevent it, rather plan the layout to allow for expansion or reduction of text size.
Anyrate - difficult to tell what's happening without a link.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
paul1912005
Posts: 32
Joined: 7/18/2007
Status: offline
|
RE: New problem - 11/6/2007 17:37:56
thanks for the reply.
Thing is it hasn't done this before and I don't think it should be doing this. I've now tried on a blank page new web-site and its doing the same thing. Even if I just add a sentence it still shrinks up my text or pictures if you resize any browser.
It dosen't do it on my other web-site which I don't understand why?
| |
|
|
|
d a v e
Posts: 4071
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
RE: New problem - 11/7/2007 2:47:32
link??
_____________________________
David Prescott
Gekko web design
| |
|
|
|
paul1912005
Posts: 32
Joined: 7/18/2007
Status: offline
|
RE: New problem - 11/11/2007 11:27:59
Afriad theres no site. Still I am having the same problem on a blank page.
Here is the html code so you can see.
<!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-Language" content="en-gb" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Untitled 1</title>
<style type="text/css">
.newStyle1 {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
font-weight: bold;
font-style: normal;
font-variant: normal;
text-transform: none;
color: #000000;
line-height: normal;
vertical-align: text-top;
text-align: center;
text-indent: inherit;
white-space: nowrap;
word-spacing: normal;
letter-spacing: normal;
}
</style>
</head>
<body>
<p style="width: 594px; margin-bottom: 8px;">
<img src="testpics/Office-05.jpg" width="250" height="187" style="border-style: solid; border-width: 1px" /><img src="testpics/Office-05.jpg" width="250" height="187" style="border-style: solid; border-width: 1px; margin-left: 89px" /></p>
<p style="width: 250px; font-weight: 700; margin-top: 0px; margin-bottom: 0px; float: left; text-decoration: underline;" class="newStyle1">Office-01</p>
<p style="width: 247px; float: left; height: 3px; text-decoration: underline; margin-left: 94px; margin-top: 0px" class="newStyle1">
Office-02</p>
<br />
ddddddddddddddddddddddddddddddddddddddddddddddd
</body>
</html>
like I said its a test-page so don't worry about it. Trying to figure out why the text moves when you shrink the web-browser
ps thanks Tail for trying to help
| |
|
|
|
Tailslide
Posts: 6003
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: New problem - 11/11/2007 12:02:57
I've had a look at it here and it seems to be behaving as you'd expect. When the window becomes too small to take the horizontal width - the paragraph wraps.
You do seem to have a lot of inline styles there though - you've got styles in the document head (which might just be for us to see what you're up to) but then you've got a ton of inline styles like this:
<p style="width: 250px; font-weight: 700; margin-top: 0px; margin-bottom: 0px; float: left; text-decoration: underline;" class="newStyle1">
That defeats the whole advantage of using CSS - all the styles should be in the stylesheet itself - that way you can make a single edit and the whole site changes accordingly rather than having to edit all pages.
What is the end result you want to achieve? If you wanted the text under each image then personally I'd do this:
CSS:
div.box {float:left; width:250px; border:1px solid black;text-align:center;margin-right:20px;}
HTML:
<div class="box">
<img src="testpics/Office-05.jpg" width="250" height="187" alt="your image" />
<p>Your text goes here</p>
</div>
<div class="box">
<img src="testpics/Office-05.jpg" width="250" height="187" alt="your image" />
<p>Your second lot of text goes here</p>
</div>
You might want to take a look at the tutorials over at HTML Dog for an excellent intro to CSS.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
