PDA

View Full Version : CSS Website help.. getting annoyed!



jamessillcock
Sep 9th, 2010, 07:15 PM
Hi,

Over the past few weeks I've put together a CSS based website design which you can see here:

http://store03.prostores.com/servlet/clothingthatrocks/StoreFront?cart_id=2135342

It's almost finished but have become stuck now for ages trying to get the left navigation right.

All I want is for the area where the category links are to have a 14px padding. I keep fiddling but what should be simple - I am getting nowhere.

Can anyone take a look at the code?

The div of the cateory links is "infobox-link"


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
padding:0;
margin:0;
}

body {
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
background: #3c3c3c url("<ss:value source="$storeVersion.images['page-bottom-bg.gif']"/>") 50% 100% no-repeat;


}

.account-link a {
background: url("<ss:value source="$storeVersion.images['arrow2.gif']"/>") 8px 5px no-repeat;
font-size: 13px;
font-weight: ;
padding: 1px 0px 1px 19px;
color:#ffffff;
}
.account-link a:visited {
background: url("<ss:value source="$storeVersion.images['arrow2.gif']"/>") 8px 5px no-repeat;
font-size: 13px;
font-weight: ;
padding: 1px 0px 1px 19px;
color:#ffffff;
}



#content h1 {
background: #7D7D7D url("<ss:value source="$storeVersion.images['cboxhead-bg.gif']"/>") 6px 6px no-repeat;
padding: 4px 35px;
width: 683px;
font-weight: normal;
font-family: impact;
font-size: 20px;
color: #000000;
}


.infobox-link a {
color: #000000;
margin: 0px 15px 15px 15px;
text-align: left;
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
}

.infobox-link a:visited {
color: #000000;
padding: 0px 15px 15px 15px;
text-align: left;
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
}


#page {
background: url("<ss:value source="$storeVersion.images['page-top-bg.gif']"/>") 50% 0 no-repeat;

}

p {
margin:20px 0;
}

#wrapper {
width:952px;
margin:auto;
}

#header {
height:141px;
background:#;
margin:auto;
}

#top-nav {
background:#;
margin-top: 14px;
margin-bottom: 14px;
}



.nav-text-left a {
height:px;
background:#;
font-family: impact;
font-size: 18px;
color: #FFFFFF;
padding: 14px 0px 14px 14px;
text-transform: uppercase;
color: #E7A900;
word-spacing: 14px;
text-decoration: none;


}

.nav-text-left a:visited {
height:px;
background:#;
font-family: impact;
font-size: 18px;
color: #FFFFFF;
padding: 14px 0px 14px 14px;
text-transform: uppercase;
color: #E7A900;
word-spacing: 14px;
text-decoration: none;

}

.nav-text-right {
height:px;
background:#;
}

#container {
overflow:auto;
background:url("<ss:value source="$storeVersion.images['bg.gif']"/>") repeat-y;
}

#left {
float:left;
width:157px;
margin-right: 14px;
background: url("<ss:value source="$storeVersion.images['lcol-bg.gif']"/>") no-repeat;
}

#content {
margin:0 171px;
width: 753px;
padding: 14px;
background: url("<ss:value source="$storeVersion.images['main-bg.gif']"/>") no-repeat;
}

#footer2 {
height: 29px;
background: url("<ss:value source="$storeVersion.images['footer2.gif']"/>") no-repeat;
}


#footer {
text-align: center;
color: #fff;
font-size: 10px;
padding: 35px;

}

.infobox-heading {
background: url("<ss:value source="$storeVersion.images['iboxhead-bg.gif']"/>") 100% 0 no-repeat;
padding: 15px 10px 0;
text-align: center;
color: #E7A900;
height: 40px;
font-family: impact;
font-size: 18px;
}

#content f {
background: #7D7D7D url("<ss:value source="$storeVersion.images['cboxhead-bg.gif']"/>") 6px 6px no-repeat;
margin: 14px;
padding: 8px 35px 8px 35px;
width: 683px;
font-family: impact;
font-size: 20px;
color: #000000;
font-weight: normal;
}



.nav-text-left div {
float:right;
padding: 0px 14px 0px 0px;
font-family: impact;
font-size: 18px;
color: #FFFFFF;
text-transform: uppercase;
}

.navBarRight #keyword, .navBarRight label {
float:left;
}

.account {
float: right;

margin: 28px 14px 14px 14px;
}

.account2 {
float: right;

margin: 28px 0px 14px 14px;
}

.account-heading {

background: url("<ss:value source="$storeVersion.images['cart.gif']"/>") 0px 2px no-repeat;
font-size: 15px;
font-weight: bold;
padding: 0px 0px 0px 17px;
color:#000000;
}

.cart-heading {

background: url("<ss:value source="$storeVersion.images['account.gif']"/>") 0px 2px no-repeat;
font-size: 15px;
font-weight: bold;
padding: 0px 0px 0px 19px;
color:#000000;
}

.account-text {

background: url("<ss:value source="$storeVersion.images['arrow2.gif']"/>") 8px 5px no-repeat;
font-size: 13px;
font-weight: ;
padding: 1px 0px 1px 19px;
color:#ffffff;
}

.ctr {
background-color: #000000;
color: #bbbbbb;
font-family: arial, verdana, ms sans serif;
font-weight: bold;
font-size: 8pt;
height: 18px;
border: 0px;
padding-left: 5px;
margin-left: 14px;

width: 150px;
padding-top:4px;
}

.ctr2 {
margin-left: 14px;
}



</style>
</head>
<body>
<div id="page">
<div id="wrapper">
<div id="header">

<div class="account">
<div class="account-heading">Shopping Cart</div>
<div class="account-link"> <ss:link source="$storeVersion.cart">View Cart</ss:link> </div>
<div class="account-link"> <ss:link source="$storeVersion.checkout">Checkout</ss:link> </div>

<ss:set name="math" value="$system.getMath('0')"/>
<ss:foreach item="detail" within="$cart.details">
<ss:eval source="$math.set($math.add($detail.quantity))"/>
</ss:foreach>

<div class="account-text"># of Item(s): <ss:value source="$math.get()"/> </div>
<div class="account-text">Total: <ss:value source="$cart.subTotal"/> </div>
</div>

<div class="account2">
<div class="cart-heading">My Account</div>

<!-- test whether the user is logged in or not -->
<ss:if test="$customer.isLoggedIn()">

<div class="account-link"> <ss:link source="$storeVersion.logoff">Sign Out</ss:link> </div>
<ss:else />
<div class="account-link"> <ss:link source="$storeVersion.customerHistory">Sign In</ss:link> </div>
</ss:if>
<div class="account-link"> <ss:link source="$storeVersion.customerRegistration">Register</ss:link> </div>
<div class="account-link"> <ss:link source="$storeVersion.customerHistory">Account History</ss:link> </div>
<div class="account-link"> <ss:link source="$storeVersion.lostPassword">Lost Password</ss:link> </div>
</div>


</div>

<div id="top-nav">
<div class="nav-text-left">

<div>

<form method="POST" action="$storeVersion.searchResults" name="msearch" class="navBarRight">
<label for="keyword">Search:&nbsp; </label>
<input type="text" name="keyword" value="Enter search text here" class="ctr" id="keyword"><input width="24" type="image" height="22" name="submit" src="price-bg.gif" class="ctr2">
</form>

</div>

<ss:if test="$storeVersion.templateExists('Home Page')"><ss:link source="$storeVersion.homePage">Home</ss:link></ss:if>
<ss:if test="$storeVersion.templateExists('About Us')"><ss:link source="$storeVersion.aboutUs">About</ss:link></ss:if>
<ss:if test="$storeVersion.templateExists('Customer Service')"><ss:link source="$storeVersion.customerService">Service</ss:link></ss:if>
<ss:if test="$storeVersion.templateExists('Store Policy')"><ss:link source="$storeVersion.storePolicies">Policies</ss:link></ss:if>

</div>

</div>
<div id="container">
<div id="left">
<div class="infobox-heading">Categories</div>
<div class="infobox-link">



<!-- beginning of categories -->


<!-- get the display depth from store admin setting -->
<ss:set name="displayDepth" value="$store.Categories.DisplayDepth"/>
<ss:set name="topCounter" value="25"/>
<ss:set name="rootsearchcategory" value="$catalog.category"/>
<ss:if test="$string.indexof($rootsearchcategory, ':') >= 0">
<ss:set name="rootsearchcategory"
value="$string.substringleft($catalog.category, $string.indexof($catalog.category, ':'))"/>
</ss:if>
<ss:foreach item="category" within="$catalog.categoriesToDepth(1)">
<ss:sortby item="categorypriority" direction="asc"/>

<ss:if test="$category.treelevel == 1">
<ss:set name="topCounter" value="$math.sum($topCounter,-1)"/>
<ss:if test="$topCounter < 0">
<ss:link source="$storeVersion.Browse">Browse More Categories <ss:image source="$storeVersion.images['double_arrow.gif']" alt="more" border="0"/>
</ss:link>
<ss:break/>
</ss:if>
</ss:if>

<ss:if test="$displayDepth == 1">
<!-- Store Admin is set to display top level categories only -->
<div class="viewmorecats">
<ss:link source="$category">
<ss:value source="$category"/></ss:link>
</div>
<ss:else/>
<!-- Display parent category with greater than symbol to indicate more -->
<div class="viewmorecats">
<ss:link source="$category">
<ss:value source="$category"/><ss:if test="$category.hasChildCategoriesInUse()"> <ss:image source="$storeVersion.images['single_arrow.gif']" alt="more" border="0"/></ss:if></ss:link>
</div>
<ss:if test="$category.name == $rootsearchcategory">
<!-- Sub Category Display -->
<ss:comment>
To increase indent structure for display depth > 5 subcategories,
add additional when conditions and increase the left margin.
</ss:comment>
<ss:foreach item="sub" within="$category.childCategoriesInUse()">
<ss:sortby item="categorypriority" direction="asc"/>
<!-- Store Admin is set to display all subcategories deep, or a specific number deep -->
<ss:if test="$sub.treeLevel <= $displayDepth || $displayDepth == -1">
<ss:choose>
<ss:when test="$sub.treeLevel == 2">
<div class="viewmorecats leftSubCats" style="margin-left:0px;">
<ss:link source="$sub"><ss:image source="$storeVersion.images['single_arrow.gif']" border="0" /><ss:value source="$sub"/></ss:link></div>
</ss:when>
<ss:when test="$sub.treeLevel == 3">
<div class="viewmorecats leftSubCats" style="margin-left:10px;">
<ss:link source="$sub"><ss:image source="$storeVersion.images['single_arrow.gif']" border="0" /><ss:value source="$sub"/></ss:link></div>
</ss:when>
<ss:when test="$sub.treeLevel == 4">
<div class="viewmorecats leftSubCats" style="margin-left:20px;">
<ss:link source="$sub"><ss:image source="$storeVersion.images['single_arrow.gif']" border="0" /><ss:value source="$sub"/></ss:link></div>
</ss:when>
<ss:otherwise>
<div class="viewmorecats leftSubCats" style="margin-left:30px;">
<ss:link source="$sub"><ss:image source="$storeVersion.images['single_arrow.gif']" border="0" /><ss:value source="$sub"/></ss:link></div>
</ss:otherwise>
</ss:choose>
</ss:if>
</ss:foreach>
</ss:if>
</ss:if>
</ss:foreach>

<!-- end of categories -->

</div>
</div>

<div id="content">





</div>
</div>
<div id="footer2"></div>
<div id="footer">
Home Advanced Search View Cart Checkout About Us Service Policies
<br />
<br />
Copyright &copy; 2010 clothingthatrocks. All Rights Reserved.</div>
</div>
</div>

</body>
</html>

SB65
Sep 9th, 2010, 07:21 PM
Hard to know exactly what you want, but something like:


#left {
background:url("/clothingthatrocks/images/store_version1/lcol-bg.gif") no-repeat scroll 0 0 transparent;
float:left;
margin-right:14px;
padding:14px;
width:129px;
}

The width reduced by (2x14px)=28px to accommodate the additional padding.

Or is that not what you meant?

Doctor_Varney
Sep 9th, 2010, 07:47 PM
Your navigation column contains far too many divs. Divs are for making page divisions, not menus. Instead, use a list.

Set your navigation up as one unordered list. Give it a width if you want, use top & bottom padding to vertically seperate the list-items and a margin on the list itself, to give you that distance you want from the edge. I gaurantee you will gain more control, only with much less fuss.

Dr. V

jamessillcock
Sep 9th, 2010, 07:52 PM
Thanks for the quick responce.

Almost but not quite. It's badly damaged the layout. But forgetting that, it had padded the left column links like i wanted, but it's now got a padding around the Categories heading style, which I didn't want. I just want 14px padding around the links (eg. t-shirt- small, t-shirt - m,edium etc...).

Thats why i'm sure only the div "Infobox-link" is what needs the syling added rather then the left div that you altered.

Doctor_Varney
Sep 9th, 2010, 07:54 PM
Upload the result and let's have another look...

Dr. V

Doctor_Varney
Sep 9th, 2010, 07:59 PM
You must be doing something else wrong. Remember that any padding you have in the empty column to begin with, will be added to the content width and the margins and padding therein - adding to the overall width of all the stuff crammed into the containing column, causing all hell.


it's now got a padding around the Categories heading style

That's probably because you've included the category heading in your list. You can use <h1> or <h2> for that. Or if you made a definition list, you could then specify seperate padding for the terms (categories) and definitions (products).

If you upload the result, we can take another look. Be sure to back up your original.

Edit: Oh and one more thing... you don't necessarily need left & right padding on these items. You can just as easily set a left margin and use the padding to give extra line height within your list.

Does that help at all?

Dr. V

SB65
Sep 9th, 2010, 08:08 PM
Upload the result and let's have another look...

Dr. V

Agreed....doesn't break the design in FF3 but I obviously haven't understood what the OP wants.

teedoff
Sep 9th, 2010, 08:15 PM
Not sure I'm seeing whats wrong either. Looks fine in IE8 except for the search Icon is a broken link. The sidebar links look fine as well as the main content.

Doctor_Varney
Sep 9th, 2010, 08:19 PM
I know what he wants. The same as we all want. A nice list for his links, which is easy to maintain. :D

Dr. V

jamessillcock
Sep 9th, 2010, 08:36 PM
Ok, I've uploaded the change to what SB65 did so you should now see the design broken.

II'm not sure how seeing this is going to help. This pads the above category heading which sin't what i want, i just want the links to be padded/margined by 14 px. One other thing that is wrong with SB's code is there seems a lot more then 14px padding on the right side. I know some of the words are long which is why they go on the line underneath, but there is no reason the "8" from "Size 8" in the categories should not fit on the same line.

SB65
Sep 9th, 2010, 08:42 PM
OK, when you said broken the design I assumed you meant the whole page was messed up.

Now, the 14px padding - is this on each link or surrounding all the links? And is it all around padding - or top/bottom, left/right or what? Obviously you've tried something and it hasn't worked - think we're still not clear exactly what it is you're trying to do.

jamessillcock
Sep 9th, 2010, 09:31 PM
I've changed it back to how it was. The design, at least in IE on my computer, broke the design with the code change you gave me SB65.

This is what i want the nav to look like, so there is padding left and right wither side of the categoires (14 pixels)

http://www.firstmerch.com/prostoress.jpg

yannibmbr
Sep 9th, 2010, 10:48 PM
Not sure if this is what you're looking for, seems to work in firefox.

.infobox-link a {
color:#000000;
font-size:14px;
font-weight:bold;
left:10px;
position:relative;
text-align:left;
text-transform:uppercase;
}

Doctor_Varney
Sep 10th, 2010, 01:17 AM
James, why are you still fiddling about with padding and all these links in seperate divs? I told you to render your menu as a simple list, which would by now have solved your issue.

One of the main advantages of CSS is that it gives us a powerful and concise set of elements, each with it's own purpose and reasonably easy to edit - yet you are still using the div as a catch-all tag. You're code is cluttered enough to make it hard to spot a simple padding issue, which should be telling you something here. Also, to make things easier when editing across the whole site, your stylesheet really ought to be in a seperate .css document.

You really need to look at the page as a whole before doing any more. Your page is invalid and shows 64 Errors & 70 warnings (http://validator.w3.org/check?uri=http%3A%2F%2Fstore03.prostores.com%2Fservlet%2Fclothingthatrocks%2FStoreFront%3Fcart_id%3D 2135342&charset=%28detect+automatically%29&doctype=Inline&group=0). Now I don't have time to check each and every one but you might find there is something in there causing conflict with the element you're trying to adjust. I recommend you correct those mistakes and check your stylesheet(s) for any conflicts.

And, whenever you get into a spot, use the validator to check for mistakes first. It will make life easier.

Dr. V

jamessillcock
Sep 10th, 2010, 05:54 PM
Thanks for everyones replies. It's now how I want it :)

Varney - I will have to lok at those errors... Yes - what I've done isn't going to be the best code, i'm sure i have used far too many divs. I'm just in a hurry to get my web store working. I had a descision before I started, to either code in all HTML using tables for the whole thing which i am experienced in, or try the newer thing and try a tableless layout with just CSS which i knew nothing about. I went for CSS and obviously i still have a lot to learn. The list thing I did try and find out info for in CSS but got confused.. i didn't know to have a custom image go alongside the list heading and a custom image for the actual list, how to give a specific gap between each list line, padding etc. etc. Hopefully this will do for now and I'll slowly make the coding cleaner once the shop is in working order.

Doctor_Varney
Sep 10th, 2010, 08:48 PM
Thanks for everyones replies. It's now how I want it :)

Varney - I will have to lok at those errors... Yes - what I've done isn't going to be the best code, i'm sure i have used far too many divs. I'm just in a hurry to get my web store working. I had a descision before I started, to either code in all HTML using tables for the whole thing which i am experienced in, or try the newer thing and try a tableless layout with just CSS which i knew nothing about. I went for CSS and obviously i still have a lot to learn. The list thing I did try and find out info for in CSS but got confused.. i didn't know to have a custom image go alongside the list heading and a custom image for the actual list, how to give a specific gap between each list line, padding etc. etc. Hopefully this will do for now and I'll slowly make the coding cleaner once the shop is in working order.

James, I completely agree with giving hauling stock, for the time being, priority over web standards. As the lesser of two evils, I personally think it is much better to have a solidly coded table layout than a badly drawn CSS P set up, until such time your hot rod's ready to hit the road.

All I'm suggesting is, you might as well use a simpler formula for creating your menus, rather than making the changeover more complicated than it need be. Other than that, you've done a very good job so far.

Dr. V