Weird image behaviour in CSS design (Full Version)

All Forums >> [Web Development] >> Expression Web Help



Message

GolfMad -> 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 -> 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.



GolfMad -> 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



jaybee -> 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.



GolfMad -> 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



jaybee -> 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.



GolfMad -> RE: Weird image behaviour in CSS design (3/8/2008 13:38:23)

Thanks you very much Jaybee for all your help.

Regards
Phil



jaybee -> RE: Weird image behaviour in CSS design (3/8/2008 14:37:17)

No problem [:D]



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625