PDA

View Full Version : Newb website help.



Nutorious
01-31-2007, 09: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, 10: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, 10: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.