Weird image behaviour in CSS design

	Home Register Search Help Login

Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums

Recent Posts

Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

Weird image behaviour in CSS design

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Expression Web Help >> Weird image behaviour in CSS design

Page: [1]


GolfMad Posts: 181 Joined: 3/20/2002 From: UK Status: offline	Weird image behaviour in CSS design - 3/7/2008 18:48:59 I am working on template to set up our local golf club site. http://tgc.sitesoon.co.uk/ Trying again to design in CSS with divs rather than tables is proving difficult. I am going to hand the main content area over to the clubs admin but at present am using EWD SP1 and am renaming pages php as the content management will be php based. If I press enter on my keyboard, sometimes a <p> tag is created, sometimes a <b />. Worse, the images shoot off left or right sometimes when pressing enter and extend over the sites area, left or right dependant on which related text I alter. Is it someting to do with my bad css coding for the images, or is it EWD when I name the page php? Thanks to anyone willing to have a look. Regards Phil


jaybee Posts: 14157 Joined: 10/7/2003 From: Berkshire, UK Status: offline	RE: Weird image behaviour in CSS design - 3/7/2008 19:41:09 <p><span lang="en-gb"> </span> </p> <p> 18 holes situated on the beautiful Dartmoor National Park.</p> <p> </p> <p><span lang="en-gb"> </span> </p> <p> </p> <p> <img alt="" src="images/line-400.gif" width="400" height="2" class="centeredImage" /><p> <p> <p/> <a href="images/tgc2.jpg" rel="lightbox" title="Tavistock Golf Course - from 2nd tee"> <img alt="Tavistock Golf Course - from 2nd tee" src="images/tgc2-th.jpg" width="300" height="200" class="imageleft2" /></a> <p> </p> A large part of the problem is that you're using paragraphs to establish your spacing. You need to use divs and then apply spacing to them using css margins, borders or padding. Then you can float your images within each div and the text will take care of itself. _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to GolfMad)


GolfMad Posts: 181 Joined: 3/20/2002 From: UK Status: offline	RE: Weird image behaviour in CSS design - 3/8/2008 3:48:14 Thanks for having a look Jaybee. I thought I had attended to the css as you suggested but must have something wrong. I only changed to <p> spacing as it seemed to stop the lower image shooting left when I just tried to break the lower block of text up with a <br /> tag. EWD won't leave the text alone either it keeps adding <span> tags to it. For the whole of the centre content div I used the following: #center1 { margin: 0px; width: 740px; padding: 10px 20px 10px 30px; for say the lower image it has this class to float it: .imageleft2 { margin: 0px; float: left; padding: 0px 10px 0px 0px; vertical-align: text-top; So I thought I had taken care of the divs for margin and padding and floated the images left or right as applicable. If you are able to expand on the corrections necessary I would be very grateful thanks Jaybee. Regards Phil (in reply to jaybee)


jaybee Posts: 14157 Joined: 10/7/2003 From: Berkshire, UK Status: offline	RE: Weird image behaviour in CSS design - 3/8/2008 10:13:37 Can't look at it in detail at the moment. Basically the way I'd do it is, for each block of text and picture use a div. Float the image left or right. The text will take care of itself. Forget about text top. If you specify a paragraph put the image as the first thing in the para then it will float to the top of the text anyway. For example <div> <p> <img class="left" src="xxxxxxxxxx" alt="" /> Text text text text text text text text text text</p> <p>Text text text text text text text text text text</p> </div> <div> <p> <img class="right" src="xxxxxxxxxx" alt="" /> Text text text text text text text text text text</p> </div> If both of those divs are full width of their container they'll stack on top of each other. Have a good look at your settings in EW and make sure they do what you want. Native install allows EW to do all sorts of stuff automatically that you may not want it to. _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to GolfMad)


GolfMad Posts: 181 Joined: 3/20/2002 From: UK Status: offline	RE: Weird image behaviour in CSS design - 3/8/2008 12:24:45 Thanks very much Jaybee, that simple explanation enabled me to clean the code up and it works fine now. I did notice that yours had the first <p> before the image, then some text followed before the closing </p> tag. With mine now there is no <p> before the first image, it starts after the closing img tag - does that matter and will it lead me to problems? <div> <img class="left" src="xxxxxxxxxx" alt="" /> <p> Text text text text text text text text text text</p> <p>Text text text text text text text text text text</p> </div> Regards Phil (in reply to jaybee)


jaybee Posts: 14157 Joined: 10/7/2003 From: Berkshire, UK Status: offline	RE: Weird image behaviour in CSS design - 3/8/2008 12:49:51 I do that so I don't have to align the image to the top of the text. Because it's inside the para, it does it automatically. _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to GolfMad)


GolfMad Posts: 181 Joined: 3/20/2002 From: UK Status: offline	RE: Weird image behaviour in CSS design - 3/8/2008 13:38:23 Thanks you very much Jaybee for all your help. Regards Phil (in reply to jaybee)


jaybee Posts: 14157 Joined: 10/7/2003 From: Berkshire, UK Status: offline	RE: Weird image behaviour in CSS design - 3/8/2008 14:37:17 No problem _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to GolfMad)