- This topic is empty.
-
AuthorPosts
-
July 17, 2008 at 5:32 pm #22938brianatlargeMember
Here’s the site: http://stuckpixelstudio.com/clients/pay … clips.html
On the last item, the text is going outside the box that is containing it. I have that text in a span so does that have anything to do with it?
HTML:
Code:Mounting Clips
Polypropylene material. Standard white. Also available in black.
PPC-202
Single Super clip. Extra strong clip that provides very firm support for membrane housing. Requires strong hand to mount housing. Fits 2.375″ cylinder.
PPC-204
Single clip. Mounts water saver shut off valve or an inline filter to a flat surface. Fits 1.91″ OD cylinder.
PPC-212
Single clip. Standard clip for mounting membrane housings. Provides firm support as well as easy placement of the membrane housing. Two holes for 1/4″ tubing. Fits 2.375″ cylinder.
© Copyright 2008 Payne Industries
All Rights Reserved
CSS:
Code:body {
margin:0px; padding:0px;
font-family:Helvetica, Arial, sans-serif;
}.header {
background:url(images/header.jpg);
width:1000px;
height:200px;
min-height:200px;
margin: 0px;
padding:0px;
}.navbar {
background:url(images/navbar.jpg) repeat-x;
min-height:21px;
height:21px;
color:#ffffff;
}.waterdrop {
background:url(images/test.jpg);
width:1000px;
min-height:439px;
height:439px;}
.hometext {
position:absolute;
top:350px;
left:400px;
width:586px;
font-size:22px;
}.contactimage {
background:url(images/contact.jpg);
min-height:685px;
height:685px;
width:733px;
color:#ffffff;
}.contactaddress {position:absolute;
top:250px;
left:100px;
}.contact {
color:#ffffff;
margin-left:100px;
padding: 30px 0px 0px 0px;
}h1, h2 {display:inline;}
.column1 { float:left; width:250px; margin-right:30px; margin-left:70px;}
.column2 { float:right; width:282px; color:#000000;}.content {
background:#cccccc;
width:500px;
margin: 0px auto;
padding: 10px;
}.maindescription {
width: 750px;
margin-left:50px;
margin-top:20px;
}.productbox {
background-color:#f8f8f8;
height:150px;
min-height:150px;
width:750px;
border-style:solid;
border-width:1px;
margin-left:50px;
margin-top:10px;
margin-bottom:0px;
padding: 0px 10px 0px 0px;
}img.product {position:relative;
top:6px;
left:7px;
float:left;
}.description {
position:relative;
top:6px;
left:22px;
}.enlarge {
margin-left:105px;
margin-top:-17px;
font-size:12px;
}a {color:#333333;
text-decoration:none;
}#nav, #nav ul{
margin:0px;
padding:4px 0px 0px 0px;
list-style-type:none;
list-style-position:outside;
position:relative;
margin-top:-2px;
margin-right:10px;
font-size:12px;
text-transform:uppercase;
z-index:1;
}#nav a{
display:block;
padding:0px 5px;
color:#fff;
text-decoration:none;
background-color:#b31212;
}#nav a:hover{
background-color:#fff;
color:#333;
}#nav li{
float:left;
position:relative;
}#nav ul {
position:absolute;
display:none;
width:12em;
top:1.1em;
}#nav li ul a{
width:12em;
height:auto;
float:left;
}#nav ul ul{
top:auto;
}#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}/*
Footer
*/
#footer {
border-top:1px solid #c0c0c0;
padding:10px 0px 70px 0px;
color:#c0c0c0;
background-color:#001c84;
font-size:9px;
text-align: left;
line-height:20px;}
#footer img {
float:left;
margin-right:10px;
}
#footer span {
display:block;
float:left;
width:250px;
margin-left:50px;
}
#footer a {
color:#9e8292;
text-decoration:none;
}img {border:none;}
Thanks.
July 18, 2008 at 12:19 pm #48576gheidornMemberRemove "position: relative" from both your img.product and .description classes. Then style your b and span tags with margin or padding to provide spacing between the borders and the text.
You might consider taking a step back and redesign your text area to be more semantic. Instead of:
Code:Use:
Code:Since all your images seem to be the same width (150px), start styling those elements with:
Code:.productbox h5 {
margin-left: 180px;
}
.productbox p {
margin-left: 180px;
}You might also consider using the * { margin: 0px; padding:0; } strategy to reduce confusion when aligning things.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.