First let me say I'm not a good programmer, let alone a CSS programmer. I've tried but I don't have it! I've built my site by borrowing ideas and code from friends and free code and used parts from each to get the effect I want. I cheat - it's the only way my brain can cope with CSS.
So, try as I might I haven't been able to solve this problem, even though I've read many solutions. How do I get rid of the gap between the image and the border on my site! Help please.
www.clouddays.co.uk
style sheet starts here.,
html,body{margin:0;padding:0}
body{font: 76% "HelveNueThin", Helvetica, Arial,sans-serif;text-align: center;background-image: url(resources/bg.png);background-repeat: repeat}
p{margin:0 10px 10px}
a{padding:5px; text-decoration:none; color:#000000;}
div#header{background-color:#F3F2ED;}
div#header h1{height:80px;line-height:80px;margin:0;padding-left:10px;}
div#container{text-align:left}
div#container{width:850px;margin:0 auto}
div#container link { color:purple ; font-family:Arial, Helvetica, sans-serif; font-size:10px; text-align:center; padding-top:10px;}
div#container link a{color:#4f5053; text-decoration:none;}
div#content{float: left;width: 500px;height:550px;background-image: url(resources/bg-middle.png);background-repeat: repeat;}
div#content p{line-height:1.4}
div#content-photo{margin: 35px 65px 25px 65px;border: 10px gray solid;}
div#content-photo a{text-decoration:none;}
div#content-link { color:#4f5053 ; font-family:Arial, Helvetica, sans-serif; font-size:10px; text-align:center; padding-top:10px;}
div#content-link a{color:#4f5053; text-decoration:none;}
div#panel{float: right;width: 300px;height: 550px; background-image: url(resources/bg-left-panel.png);background-repeat: repeat;}
div#panel-title{text-align: center;font-size: 35px;color: black;padding-top: 45px;text-transform: lowercase;}
div#panel-title-photo{margin: 15px 25px 15px 25px;border: 10px gray solid;}
div#panel-link { color:#4f5053 ; font-family:Arial, Helvetica, sans-serif; font-size:10px; text-align:center; padding-top:10px;}
div#panel-link a{color:#4f5053; text-decoration:none;}
div#panel p{font-size: 13px;text-align:left;padding: 5px 15px 5px 15px;color:black;}
div#panel .p_center{font-size:13px;text-align:center;padding: 5px 15px 5px 15px; color:black;}
div#panel-gallery{float: right;width: 300px;height: 400px; background-image: url(resources/bg-left-panel.png);background-repeat: repeat;}
div#panel-gallery-title{text-align: center;font-size: 35px;color: black;padding-top: 45px;text-transform: lowercase;}
div#panel-gallery-title-photo{margin: 15px 25px 15px 25px;border: 10px gray solid;}
div#main-gallery{float: left;width: 500px;height:550px;background-image: url(resources/bg-middle.png);background-repeat}
div#main-gallery p{line-height:1.4}
div#main-gallery-view{float: left; width: 450px; height: 450px; position: relative; background-color: teal; margin: 20px; padding: 10px;}
I'd do it like this.
Thank you.
I guess if I asked why it works when the css now looks like this;
div#panel-title-photo img{display:block; .......}
...but the index.html looks like this;
<div id="content-photo"><img src="resources/clouddays.jpg" ......</div>
I doubt I'd understand the answer !!
Nonetheless, I thank you again. My skill has advanced a smidgeon...,
Is div#content-photo inside div#panel-title-photo?
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)