need a lil help with my css. can any one help me out please.

  • I have made kinda container where a table is contain inside it with the help of CSS. The table can be inserted within that designed container ive made. The table can be made from a WP plugin so thats not an issue and my container in responsive according to the table size.

    Well the issue i have is with my container and css.. I have done almost so much but have a bit of a prob with the edges… can any one please help me out to correct this. The code is blow..

    .post-tabs,.post-tabs-ver{	margin-bottom:20px;}

.post-tabs ul.tabs-nav{height:33px;margin:0;padding-left:1px;}

.post-tabs ul.tabs-nav li{	border:1px solid 

#E1E1E1;border-radius: 4px 4px 0 0;font-weight: bold;	

line-height: 32px;cursor: pointer;display: block;	float: 

left;margin: 0 5px 0 0;	padding: 0 

16px;background:#ddd;border-bottom: 0 none;-webkit-

transition: background .5s ease;-moz-transition: background .5s 

ease;-o-transition: background .5s ease;transition: background 

.5s ease;}

.post-tabs ul.tabs-nav li.current{	background:#ffffff;	

z-index:1;	height:33px;}

.post-tabs .pane{background: #f88c00;margin-bottom: 

15px;border: 1px solid #E1E1E1;border-bottom: 1px solid 

#979797;	padding: 4px;border-radius: 5px;-moz-border-radius: 

5px;-webkit-border-radius: 5px;box-shadow: 0 2px 2px 0 rgba

(0, 0, 0, 0.1);-moz-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);-

webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);}

.post-tabs-ver ul.tabs-nav{float:left;width:152px;margin:0;padding-top:10px;}

.post-tabs-ver ul.tabs-nav li{color:white;border:1px solid 

#E1E1E1;border-radius: 4px 0 0 4px;font-weight: bold;line-

height: 32px;cursor: pointer;display: block;	margin: 0 0 

10px 0;padding: 0 10px;	background:white;border-

right-width: 0;-webkit-transition: background .5s ease;-moz-

transition: background .5s ease;-o-transition: background .5s 

ease;transition: background .5s ease;}

.post-tabs-ver ul.tabs-nav li.current{color:#f88c00;border-

color:#f88c00; background:white;z-index:1;width:130px;}

.post-tabs-ver .pane{color:#f88c00;margin-

left:150px;background: white;margin-bottom: 15px;border: 

1px solid #f88c00;border-bottom: 1px solid
#f88c00;padding: 10px;	border-radius: 5px;-moz-border-

radius: 5px;-webkit-border-radius: 5px;box-shadow: 0 2px 2px 

0 rgba(0, 0, 0, 0.1);-moz-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 

0.1);	-webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);	

min-height:180px;}

.post-tabs-ver ul.tabs-nav{float:left;width:152px;margin:30;padding-top:10px;  }

.post-tabs-ver ul.tabs-nav li{color:white;border:1px solid #f88c00;border-radius: 4px 0 0 4px;font-weight: bold;line-height: 32px;cursor: pointer;display: block;	margin: 0 0 10px 0;padding: 0 10px;	background:white;border-right-width: 0;-webkit-transition: background .5s ease;-moz-transition: background .5s ease;-o-transition: background .5s ease;transition: background .5s ease;}

.post-tabs-ver ul.tabs-nav li.current{color:#f88c00;border-color:#f88c00; background:white;z-index:1;width:150px;}

    i want to completely join the orange line with the rest of the borders where is says premium accounts on the left side.. n secondly want to get rid of that gray area around outside the premium account border..

    Please help me out with this ill highly appreciate it.. thanks

    here is the pic >> https://imgur.com/00SVjkC The one in blue is how i want guys please help

    Thanks

Viewing 7 replies - 1 through 7 (of 7 total)

  • Can you please post a link to your site instead of a picture? It’s pretty much impossible to offer a suggestion otherwise.

    Thread Starter mmino1

    (@mmino1)

    Thank you for your reply Bruin.

    Well here is the link
    https://www.givemeaccounts.com/wwe-network-account-for-free/
    At the bottom of the post u can observe the container sir.
    Hope u can help me out with this.

    Thank you sir..

    Try adding this to the end of your custom CSS:

    .post-tabs-ver ul.tabs-nav li.current {
   left: 1px;
   position: absolute;
   width: 100%;
}
.post-tabs-ver ul.tabs-nav {
   position: relative;
   left: 0;
}

    I don’t know how you are planning on handling mobile screen widths, though; it doesn’t look quite right on a cell phone.

    Thread Starter mmino1

    (@mmino1)

    Thank you soo much sir for ur contribution..

    ive applied this code but u can still observe a lil gray area above the box where it says premium account.. ive tried getting rid of it playing with the css. but i just cant…

    Hope u can eradicate the gray area above. though the gray area is been removed from the bottom by ur given code.

    Thank u so much sir, much appreciated ??

    Thread Starter mmino1

    (@mmino1)

    ive seen the container on the cell phone. yes agree it sucks.
    can u make it mobile friendly as well. try taking that premium account box some where else if u cant make it the current look mobile friendly.. im so sorry if its too much. i can ignore this sir… though ill be thankful to u

    Add this to the bottom of the custom CSS:

    .post-tabs-ver ul.tabs-nav {
	background-color: transparent;
	border: 0;
}
@media screen and (max-width: 730px)
{
   .post-tabs-ver ul.tabs-nav li.current {
      border: 0;
      position: relative;
      margin-bottom: 0;
   }
   .post-tabs-ver ul.tabs-nav {
      height: 40px;
   }
   .post-tabs-ver .pane {
      border: 0;
      clear: both;
   }
   .post-tabs-ver {
      border: 1px solid #f88c00;
      border-radius: 5px;
      -webkit-border-radius: 5px;
      }
}

    Thread Starter mmino1

    (@mmino1)

    Thank you so so much sir.. I really appreciate your effort.
    One more thing i would like to ask. I want to show this container in every single post of mine by default. So therefore, where should i place its HTML code so that it appears in every post.
    Now how i do is, copy the HTML code for the container in place it on the TEXT area. I cant do that every time..

    Hope u understand. BTW thank u so so much sir.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘need a lil help with my css. can any one help me out please.’ is closed to new replies.

Tags