0

I have been following this guide to create a tab for every product page on my ecommerce site. I need help as to how to get this tab to appear next to the product image. Right now the tab is displayed under the image.

Image CSS:

.product_image {
  float: left;
  width: 200px;
  padding: 20px;
  margin: 0 20px 20px 0;
}

Tab CSS:

    .tabs {
      position: relative;   
      min-height: 200px;
      clear: both;
      margin: 25px 0;
    }
    .tab {
      float: left;
    }
    .tab label {
      background: #eee; 
      padding: 10px; 
      border: 1px solid #ccc; 
      margin-left: -1px; 
      position: relative;
      left: 1px; 
    }
    .tab [type=radio] {
      display: none;   
    }
    .content {
      position: absolute;
      top: 28px;
      left: 0;
      background: white;
      right: 0;
      bottom: 0;
      padding: 20px;
      border: 1px solid #ccc; 
    }
    [type=radio]:checked ~ label {
      background: white;
      border-bottom: 1px solid white;
      z-index: 2;
    }
    [type=radio]:checked ~ label ~ .content {
      z-index: 1;
    }

I'm using a theme called Pronto

Here's the page's width and other details in case it's needed for reference:

.container { margin: 0 auto; padding: 40px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.container-left { position: absolute; left: 40px; top: 40px; width: 200px; }
.container-right { padding-left: 240px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.single .container-right,
.page .container-right { max-width: 1120px; min-width: 500px; }
.boxed { background: #d9d9d9; padding: 30px; box-shadow: 0 1px 1px rgba(0,0,0,0.15); }
/* Body, Main & Commons

Any help is much appreciated.

4

2 回答 2

0

To move the tabs enclosure on your site to be next to the image use this CSS for .tabs:

.tabs {
    position: relative;
    float:left;
    min-height: 200px;
    margin: 25px 0;
    width: 560px;
}

Important here is adding float:left; and removing clear:both;. The rest you can play with to make it fit the best.

于 2013-08-22T15:46:06.507 回答
0

试试插件position:relative;

.product_image {
  float: left;
  position:relative;
  width: 200px;
  padding: 20px;
  margin: 0 20px 20px 0;
}

看看这对你有什么影响

于 2013-08-22T14:22:35.093 回答