Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Newb website help.

    OK basicaly, i downloaded a template and have just edited that because i have no idea on how to build a website what so ever. I am using dreamwaver to edit the webpages but i can figure out how to do this:

    http://www.shop-com.co.uk/

    See at the bottom where it says best sellers and all the images next to each other, that. I mean i can put aload of images next to each other no problem, but its the spacing between the images and the text above or below the images. this is my website:

    www.adult.frih.net/index11.html

  • #2
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I Think it may be the CSS style sheet thats creating problems, as some of my stuff wont align right etc etc. Look:

    Code:
    body {
    	margin: 0;
    	padding: 0;
    	background: #252D37 url(images/img1.gif) repeat-x;
    	font: normal 11px "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #A4AFBD;
    }
    
    form {
    	margin: 0;
    	padding: 0;
    }
    
    h1, h2, h3, h4, h5, h6 {
    	margin: 0;
    	padding: 0;
    	color: #FFFFFF;
    }
    
    h1 { font-size: 31px; }
    h2 { font-size: 26px; }
    h3 { font-size: 18px; }
    
    p, ul, ol, blockquote {
    	margin-top: 0;
    	padding-top: 0;
    	text-align: justify;
    	line-height: 18px;
    }
    
    a {
    	color: #95BA2E;
    }
    
    a:hover {
    	text-decoration: none;
    }
    
    /* Boxed */
    
    .boxed {
    	margin: 0 0 20px 0;
    	padding: 0 20px 20px 20px;
    	background: url(images/img4.gif) repeat-x left bottom;
    }
    
    /* Post */
    
    .post {
    	margin: 0 0 20px 0;
    	padding: 10px 20px 30px 20px;
    	background: url(images/img4.gif) repeat-x left bottom;
    }
    
    .post h4 {
    	margin-bottom: 20px;
    	font-size: 11px;
    	font-weight: normal;
    }
    
    .post h4 strong {
    	font-weight: bold;
    	color: #5B6F88;
    }
    
    /* Header */
    
    #header {
    	width: 904px;
    	height: 140px;
    	margin: 0 auto;
    }
    
    /* Menu */
    
    #menu {
    	float: left;
    }
    
    #menu ul {
    	margin: 0;
    	padding: 53px 0 0 0;
    	list-style: none;
    }
    
    #menu li {
    	display: inline;
    }
    
    #menu a {
    	display: block;
    	float: left;
    	height: 25px;
    	padding: 10px 15px 0 15px;
    	text-transform: lowercase;
    	text-decoration: none;
    	font-size: 12px;
    	font-weight: bold;
    	color: #FFFFFF;
    }
    
    #menu a:hover {
    	background: #0C7AC7 url(images/img2.gif) repeat-x;
    }
    
    /* Search */
    
    #search {
    	float: right;
    	padding: 63px 0 0 0;
    }
    
    #textfield1 {
    	width: 175px;
    	background: #FFFFFF;
    	border: none;
    }
    
    #submit1 {
    	height: 19px;
    	background: #6F9303;
    	border: none;
    	text-transform: lowercase;
    	font-size: 10px;
    	font-weight: bold;
    	color: #FFFFFF;
    }
    
    /* Content */
    
    #content {
    	width: 904px;
    	margin: 0 auto;
    }
    
    #colOne {
    	float: left;
    	width: 238px;
    }
    
    #colTwo {
    	float: right;
    	width: 646px;
    }
    
    /* ColOne Content */
    
    #colOne ul {
    	margin-left: 0;
    	padding-left: 0;
    	list-style: none;
    }
    
    #colOne li {
    	padding: 5px 0 7px 0;
    	border-top: 1px solid #3B495A;
    }
    
    #colOne li.first {
    	border: none;
    }
    
    #colOne h3 {
    	font-size: 15px;
    }
    
    /* ColTwo Content */
    
    /* Logo */
    
    #logo {
    	margin: 0 0 20px 0;
    	padding: 0 0 40px 20px;
    	background: url(images/img3.gif) repeat-x left bottom;
    }
    
    #logo h1 {
    	text-transform: lowercase;
    }
    
    #logo h2 {
    	text-transform: lowercase;
    	font-size: 12px;
    }
    
    #logo a {
    	text-decoration: none;
    	color: #FFFFFF;
    }
    
    /* Welcome */
    
    #welcome {
    	padding: 5px 20px 20px 20px;
    }
    
    #welcome h2 {
    	margin-bottom: 25px;
    }
    
    #welcome .image {
    	float: left;
    	padding: 0 17px 0 0;
    }
    
    #welcome p {
    	margin-left: 126px;
    }
    
    /* Footer */
    
    #footer {
    	clear: both;
    	width: 904px;
    	margin: 0 auto;
    	background: url(images/img6.gif) repeat-x left top;
    }
    
    #footer p {
    	margin: 0;
    	padding: 30px;
    	text-align: center;
    }

  • #3
    Regular Coder
    Join Date
    Aug 2006
    Location
    Cardiff, UK
    Posts
    141
    Thanks
    15
    Thanked 2 Times in 2 Posts
    Add the following into your CSS file (for neatness, add it at the end of the other .post styles, so they're all together.

    Code:
    .post img {
    margin:0 10px 0 0;
    }
    This applies a margin of 0 to the top, 10px to the right, 0 to the bottom and 0 to the left of each image element (things with an img tag) in divs with the class 'post' only.

    You might like a little background reading to get a better understanding of how CSS works. Sitepoint has a number of really good books: Build Your Own Web Site The Right Way Using HTML & CSS and HTML Utopia: Designing Without Tables Using CSS are both excellent, although you can't really go wrong with anything by them, the New Riders series or Friends of Ed.
    Last edited by butlins; 01-31-2007 at 11:44 AM.
    If anyone asks my boss, this counts as work, okay?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •