5 {{ upvoteCount | shortNum }}
5 {{ upvoteCount | shortNum }}

CSS Question - Separating The Categories in aStore (Amazon Store)

by taskemann
4 replies
  • WEB DESIGN
    • |
Hi,

I want to separate the categories a bit more in my aStore. They do currently look like this:



They are to close together so I want to separate them with a few pixels. And it's only possible to edit the aStore with CSS. So do anyone have any idea about how I can do this with CSS?

This is the elements global CSS:
/* SEARCHBROWSE WIDGET */
div#searchbrowse {
padding:10px;
border:1px solid #4491cd;
color: #e47911;
}
div#searchbrowse div.indent {
padding: 5px 0px 5px 15px;
}
select.searchwidget {
width:173px;
margin-bottom:6px;
}
input#searchwidgetkeywords {
width:134px;
}
span#SearchAtAmazon {
font-size: 8pt;
}
div#browsetitle {
font-weight:bold;
background-color: #ffffff;
padding-bottom:7px;
}
span.selectedcategory {
font-weight:bold;
}
Thanks,

Jimmy
#amazon #astore #categories #separating #store
  • Profile picture of the author ronc0011
    Do you have the code for the Amazon box? I'm thinking all you need to do is add a margin-bottom;3px; to the <li> and possibly increase the line-height; to something bigger. probably have to play around with those values a bit.
    You might also try applying that margin to the <a> tag
    {{ DiscussionBoard.errors[7370417].message }}
    • Profile picture of the author taskemann
      Originally Posted by ronc0011 View Post

      Do you have the code for the Amazon box? I'm thinking all you need to do is add a margin-bottom;3px; to the <li> and possibly increase the line-height; to something bigger. probably have to play around with those values a bit.
      You might also try applying that margin to the <a> tag
      Thanks, I've tried that but I can't find the objects "li" in the aStore editor and in the web browser editor it's a locked element. :confused:
      {{ DiscussionBoard.errors[7372244].message }}
  • Profile picture of the author TheContentAuthority
    Taskemann,

    A little tip. If you look at the site in chrome, right click on the box and select inspect element. If you hover over the different lines of HTML, you will eventually see the ones that make up the box. Click on that one and the corresponding CSS code will show up in the box to the right. You can even change the code right in the browser tool and it will change on the page!

    For the code you posted, it is pretty much impossible to tell what CSS corresponds to the box without knowing the element ID. I would venture a guess that its #sidebar or #listwidget but that would be purely speculation.

    Check out the chrome tool,

    https://developers.google.com/chrome.../docs/overview

    You can also use Firebug in Firefox to do the same thing. The chrome one is much cooler though.

    Hope that helps,

    Shawn
    Signature
    Outsource to the experts...

    We customize your Blog, eBook, Press Release and Sale Copy content with your message.

    {{ DiscussionBoard.errors[7371587].message }}
    • Profile picture of the author taskemann
      Originally Posted by TheContentAuthority View Post

      Taskemann,

      A little tip. If you look at the site in chrome, right click on the box and select inspect element. If you hover over the different lines of HTML, you will eventually see the ones that make up the box. Click on that one and the corresponding CSS code will show up in the box to the right. You can even change the code right in the browser tool and it will change on the page!

      For the code you posted, it is pretty much impossible to tell what CSS corresponds to the box without knowing the element ID. I would venture a guess that its #sidebar or #listwidget but that would be purely speculation.

      Check out the chrome tool,

      https://developers.google.com/chrome.../docs/overview

      You can also use Firebug in Firefox to do the same thing. The chrome one is much cooler though.

      Hope that helps,

      Shawn
      Thanks man! I've found the element ID and it's "searchbrowse". I hope I can fix this now. Thanks!
      {{ DiscussionBoard.errors[7372188].message }}

Trending Topics