PDA

View Full Version : Resolved Consistent css needed for this project.



effpeetee
Jul 16th, 2009, 04:37 PM
If you look at this page, (http://exitfegs.co.uk/Bluebell1.html) you will find that I have the css in the head. This is because I have not yet found how to accommodate varying text lengths, to be centred under the image. Hence the need to adjust each page seperately. (Black mark Taylor!)


<!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>
<style type="text/css">
*{margin:0;
padding:0;
}
#picture {padding-left -9%;
padding-top:10%;
width:500px;
margin:0 auto;

}

#caption{
margin:0 auto;
padding-left:8%;
text-align:center;
}

</style>

</head>

<body>
<div id="picture">
<a href="index.html"><img src="Bluebell1.jpg" alt="Bluebell1" /></a></div>
<div id="caption">
<img src="hsbluebell.png"></div>

</body>
</html>


Can someone tell me how to do this. It isn't a big deal but it seems inelegant and definitely not the thing to do.:o:(

Any help gladly received.:thumbsup:

Frank

(I blame it all on living at Clapham Junction. I never can make up my mind which way to go and from which platform.)

effpeetee
Jul 16th, 2009, 05:07 PM
I should point out that the text is actually another graphic. Done in this fashion to make it largely browser proof. (says he hopefully,)

Frank.

ckeyrouz
Jul 16th, 2009, 05:33 PM
I suggest that you visit this page:

http://www.w3schools.com/css/default.asp


It contains all you need about the css and besides you can change code online and test it and see what fits you most.

effpeetee
Jul 16th, 2009, 05:39 PM
I found that this css
*{margin:0;
padding:0;
}

#picture {
padding-top:10%;
text-align:center;
}

#caption{
margin:0 auto;
min-width:50%;
text-align:center;
}


Works OK.

I shall now put it into a style sheet.

Frank