alien_ship Posted February 24, 2011 Share Posted February 24, 2011 hello,I am trying to style this tabbed content-http://practicewriter.com/?6983Clike the tabs here-http://practicewriter.com/?6983DAlthough I can get the alignment, border and background for the tabs nicely. I am not able to make a border around the content to mix with that and the margin or padding also kind of looks messed up.I am still going through css lessons and improving like a tortoise. I have provided clean code for both tabs. can any one just make the first tab style as the second one. I will understand it from the code then what I was doing wrong. Link to comment Share on other sites More sharing options...
cousineaug Posted February 24, 2011 Share Posted February 24, 2011 hello,I am trying to style this tabbed content-http://practicewriter.com/?6983Clike the tabs here-http://practicewriter.com/?6983DAlthough I can get the alignment, border and background for the tabs nicely. I am not able to make a border around the content to mix with that and the margin or padding also kind of looks messed up.I am still going through css lessons and improving like a tortoise. I have provided clean code for both tabs. can any one just make the first tab style as the second one. I will understand it from the code then what I was doing wrong.You are trying to have a box around "features" and"checkboxes"?and you copied the style for tabfocus from the sample and it does not apply all the style you need?note that you have a div class='tab' that also applies a style to the element...you included that style but did not apply a border or background to it. Link to comment Share on other sites More sharing options...
alien_ship Posted February 24, 2011 Author Share Posted February 24, 2011 yes, that is exactly what I am trying to do.I tried to apply the border to the tabcontent class, but then the border appears twice. all I am trying to achieve is to have a box around "features" and"checkboxes"? with margin between each and border around content area. I have little knowledge as of now so I take lessons through this site. But I am stuck on this. Link to comment Share on other sites More sharing options...
cousineaug Posted February 24, 2011 Share Posted February 24, 2011 yes, that is exactly what I am trying to do.I tried to apply the border to the tabcontent class, but then the border appears twice. all I am trying to achieve is to have a box around "features" and"checkboxes"? with margin between each and border around content area. I have little knowledge as of now so I take lessons through this site. But I am stuck on this.ok so try thisfind the outermost container that holds the three elementsFeatures | Tech Specs | Checkboxesgive that container a border and no other borders on any other elementsOnce this looks ok you can try to style the individual links. Remember that you have a border around the whole thing so you only need to put a border to the left and right of "tech specs" sort of like what you see above. If you are unsure how to do this, look at border-left and border-right on this siteAs for styling the buttons themselves (background colour etc) you will have to check if applying the colour to the container or to the buttons achieves the effect you want. If there is whitespace between the buttons, you will need to play with padding and margins for the button elements.try some stuff and come back if you get stuck again...............Guy . . . if you learn by making mistakes I must be very smart by now. Link to comment Share on other sites More sharing options...
alien_ship Posted February 24, 2011 Author Share Posted February 24, 2011 I went ahead and made some changes. a couple of problems. the space between the current tab and the next is more. And in the checkboxes tab the margin-top for content area is not respected. I am not talking about the border being double in that sense. I mean it shows up like one box inside another.http://practicewriter.com/?69847 Link to comment Share on other sites More sharing options...
cousineaug Posted February 24, 2011 Share Posted February 24, 2011 I went ahead and made some changes. a couple of problems. the space between the current tab and the next is more. And in the checkboxes tab the margin-top for content area is not respected. I am not talking about the border being double in that sense. I mean it shows up like one box inside another.http://practicewriter.com/?69847 sometimes learning is slow...you have to experiment until it becomes second natureHere the the code that precedes FEATURES:<div class="displaytabs"><div id="tab1focus" class="tab tabfocus" style="display:inline;">Features</div> what styles are associated with displaytabs, tab1focus, tab, and tabfocus?are there margins or paddign associated with any of these?Remember also that there are default margins and padding associated with some elements. Therefore you may have to explicitely set "margin-left:0px;" or "margin-right:0px;" on some or all of these styles to get rid of the space. Link to comment Share on other sites More sharing options...
alien_ship Posted February 25, 2011 Author Share Posted February 25, 2011 thank you for your help this far. everything seems perfect except when I added border to .tabcontent class, the border appears many times. I only want it in the outer div. but why is it showing up so many times in all the 3 tabs.Where am I wrong?here is eh code- http://practicewriter.com/?6986F Link to comment Share on other sites More sharing options...
dsonesuk Posted February 25, 2011 Share Posted February 25, 2011 Its because you are using div containers with the class 'tabcontent' which has a 1px border assigned to it, within a parent/outer container that also has this class. This class should be used on the parent/outer containing element only. it should be <div class="tabcontent"><div style="display: inline;" id="content1"><div style="text-align: center;">CONTENT1 HERE</div></div><div style="display: none;" id="content2"><div style="text-align: center;">CONTENT2 HERE</div></div><div style="display: none;" id="content3"><div style="text-align: center;">CONTENT3 HERE</div></div> </div><!--END class tabcontent container--> Link to comment Share on other sites More sharing options...
alien_ship Posted March 5, 2011 Author Share Posted March 5, 2011 yes, that was scrambling all my output. thx! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.