Jump to content

Css Help, Photo Positioning.

mrkidd85

By mrkidd85
in CSS

Recommended Posts

mrkidd85 Newbie

mrkidd85

Posted
Posted

Hi there, I am almost finished on a site I have made for a local dental technician, just need some help quickly.I have 2 questions.1. I cant seem to get the photo on the right to look symmetrical to the other side, ie. to have just the same amount of spacing as the opposite side so it doesn't look off. I've tried to alter a few things but can't seem to crack it.2. on the services and contact page, I would like to put more photos on each side, I want them to be exactly the same size as the ones already on the sides, but instead of them being really close together, I would like a little gap between them. I have tried to do <P IMG SRC="images/....gif> but it just makes them extremely close to the picture above, and I want a little space. I will paste in the code and give you a link to the site.CSS 

/*Design by Free CSS Templateshttp://www.freecsstemplates.orgReleased for free under a Creative Commons Attribution 2.5 License*/body {	margin: 20px 0;	padding: 0;	background: #000000;	font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif;}h1, h2, h3 {	color: #B13413;}h2 {	font-size: 1.6em;}h3 {	margin: 0;	font-size: 1em;}p, ul, ol, blockquote {	margin-top: 0;}a:link {	border-bottom: 1px dotted #CCCCCC;	text-decoration: none;	color: #3284B5;}a:hover {	border: none;}img {	border: none;}/* Header */#header {	width: 700px;	height: 200px;	margin: 0 auto;	background: url(images/img1.jpg) no-repeat;}#header * {	margin: 0;	border: none;	text-decoration: none;		font-weight: normal;	color: #FFFFFF;}#header h1 {		padding: 20px 20px 20px;	font-size: 2em;}#header h2 {	float: left;	padding: 165px 0 0 3px;	font-size: 1em;}/* Menu */#menu {	width: 700px;	height: 41px;	margin: 0 auto;	background: #37AEF2 url(images/img2.gif)}#menu ul {	margin: 0;	padding: 0;	list-style: none;}#menu li {	display: inline;}#menu a {	display: block;	float: left;	height: 32px;	padding: 9px 20px 0 20px;	text-decoration: none;	color: #000000;}#menu a:hover, #menu .active a {	background: url(images/img3.gif);	color: #FFFFFF;}/* Content */#content {	width: 700px;	margin: 0 auto;	background: url(images/img4.gif);}#colOne {	float: right;	width: 120px;	padding:  10px 10px 10px 10px;}#colTwo {	float: right;	width: 360px;	padding: 10px 10px 0 10px;}#colThree {	float: left;	width: 120px;	padding: 10px;}/* Footer */#footer {	width: 700px;	margin: 0 auto;	padding: 10px 0;	background: url(images/img6.gif) repeat-x;	font-size: smaller;}#footer * {	color: #666666;}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><!--Design by Free CSS Templateshttp://www.freecsstemplates.orgReleased for free under a Creative Commons Attribution 2.5 LicenseTitle	  : SparkleVersion	: 1.0Released   : 20070419Description: A three-column fixed-width template suitable for blogs and small websites. Space is provided for ad placements.--><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>WestCountry Dental Crafts (Laboratory) Ltd. - Services</title><meta name="keywords" content="" /><meta name="description" content="" /><link href="default.css" rel="stylesheet" type="text/css" /></head><body><div id="header">	<h1><a href="#">WestCountry Dental Crafts (Laboratory) Ltd.</a></h1>	</div><div id="menu">	<ul>		<li><a href="index.html" accesskey="1" title="">Homepage</a></li>		<li class="active"><a href="Services.html" accesskey="2" title="">Services</a></li>		<li><a href="#" accesskey="3" title="">Gallery</a></li>		<li><a href="Contact.html" accesskey="4" title="">Contact us</a></li>			</ul></div><div id="content">	<div id="colOne">		<P>		<p><a href="#"><img src="images/img5.jpg" alt="" width="120" height="120" /></a></p>	</div>	<div id="colTwo">		<h2>Products and Services</H2><P>>ZIRCONIA CROWNS AND BRIDGES<P>>INCERAM CROWNS AND BRIDGES<P>>PORCELAIN VENEERS<P>>PORCELAIN JACKET CROWNS<P>>PORCELAIN BONDED TO PRECIOUS METAL CROWNS AND BRIDGES<P>>PORCELAIN BONDED TO NON PRECIOUS METAL CROWNS AND BRIDGES<P>			 (ektom cad/cam scanning facility available)<P>>GRADIA COMPOSITE INLAYS AND RESIN RETAINED BRIDGES<P>(stick tech/net systems available)<P>>FULL GOLD CROWNS AND INLAYS<P>>NON PRECIOUS POSTS AND CORES<P>>TEMPORARY CROWNS AND BRIDGES<P>>BLEACHING TRAYS<P>>SPORTS GUARDS<P>>VARIOUS SPLINTS AND BITE RAISING APPLIANCES<P>>DIAGNOSTIC WAX UPS<P>>STUDY MODELS	</div>	<div id="colThree"> <a href="#"><img src="images/ad_120x600.jpg" alt="" width="120" height="120" /></a> </div>	<div style="clear: both;"> </div></div><div id="footer">	</div></body></html>

WESTCOUNTRY DENTAL CRAFTSI'd be grateful if somebody could help me out.Kind RegardsDaniel Kidd

Link to comment
Share on other sites
mrkidd85 Newbie

mrkidd85

Posted
  • Author
Posted

Also, I would like to add a border to the main site, but when I paste thisborder:2px solid #000066; position:relative; onto the CSS of the page, it only appears on the top and bottom and doesn't wrap around the sides, it just carries on out of the screen.Help??Dan

Link to comment
Share on other sites
chibineku Dedicated Member

chibineku

Posted
Posted

Try changing your img { border:none; } style to img {border: 2px 0px;} which will give you 2px top and bottom of each picture, so a total of 4 between each picture. You can adjust these to suit, or have a more full declaration: img {border: top right bottom left} and just put in the numbers you want.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...