...

View Full Version : Newb website help.



Nutorious
01-31-2007, 10:26 AM
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

Nutorious
01-31-2007, 11:15 AM
I Think it may be the CSS style sheet thats creating problems, as some of my stuff wont align right etc etc. Look:


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;
}

butlins
01-31-2007, 11:16 AM
Add the following into your CSS file (for neatness, add it at the end of the other .post styles, so they're all together.


.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 (http://www.sitepoint.com/books/html1/?SID=30f3dadb8732fa6bd29e2cdd33fa71b0) and HTML Utopia: Designing Without Tables Using CSS (http://www.sitepoint.com/books/css2/?SID=30f3dadb8732fa6bd29e2cdd33fa71b0) are both excellent, although you can't really go wrong with anything by them, the New Riders series or Friends of Ed.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum