Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts

    Pure CSS hide/display content

    Hi I am trying to figure out why this code wont work. I am trying to create a pure CSS hide and display content method. I know I could do this simply with a little bit of javascript but then this wouldnt be a PURE CSS method now would it.

    Anyways I think I have almost got it but it just not working right.

    Here is my CSS.
    Code:
    <style type="text/css">
    	/*CSS FOR THE WRAPPER OF BOTH LINKS AND CONTENT CELLS*/
    	.content_wrapper{
    	width:512px;
    	height:412px;
    	margin:auto;
    	position:relative;
    	margin-top:100px;
    	padding-top:20px;
    	}
    	
    	/*CSS FOR POSITIONING THE CONTENT DISPLAY AND HIDE LINKS*/
    	#news {left:0px;}
    	#about {left:60px;}
    	#contact {left:120px;}
    	#help {left:190px;}
    	
    	/*CSS STYLES FOR ALL CONTENT DISPLAY AND HIDE LINKS*/
    	.content_wrapper span {
    	display:block;
    	padding:0 5px 0 5px;
    	position:absolute;
    	cursor:pointer;
    	z-index:2;
    	border-left:#000 solid thin;
    	border-right:#000 solid thin;
    	border-top:#000 solid thin;
    	top:0px;
    	background:#FFF;		
    	}
    	
    	/*CSS FOR NEWS CONTENT CELL ONLY*/
    	#news_content{position:relative; width:100%; border:#000 solid thin; top:1px;}
    	
    	
    	/*CSS FOR LINK HOVER CONTENT DISPLAY*/
    	.content_wrapper #news a:hover #news_content {background:#666666;}
    </style>
    Here is my HTML.
    Code:
    <div class="content_wrapper">
    	<!-- content display and hide links -->
         <span id="news"><a href="#">News</a></span>
         <span id="about">About</span>
         <span id="contact">Contact</span>
         <span id="help">Help</span>
    
    		<!-- news content cell -->
            <div id="news_content">
            BLAH BLAH BLAH BLAH
            </div>
    </div>
    Anyone know what I might be doing wrong with the highlighted part in my CSS??

    Thanks.

  • #2
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    A live preview of this may help us.

    Is this what you are trying to do: http://www.stilbuero.de/jquery/tabs_3/ (js version)
    To do this in css just set the current tab's content above the rest, you would have to have a bg color though to cover everything up. http://www.cssplay.co.uk/menu/book
    Last edited by twodayslate; 11-08-2008 at 10:35 PM.
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • Users who have thanked twodayslate for this post:

    ubh (11-16-2008)

  • #3
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    Wow after a little bit of research lol like a weeks worth I finally was able to create as pure css hide and display content method. I thought I would follow up with this open ended thread with a link to the preview of the content hide and display method I came up with.

    Here it is.
    Pure CSS Hide and Display Content Switcher

  • #4
    Regular Coder kosstr12's Avatar
    Join Date
    Apr 2007
    Location
    Woodstock, Georgia
    Posts
    428
    Thanks
    7
    Thanked 5 Times in 5 Posts
    Wow, I'm very impressed with the finished product. I didn't know it was possible to do something like that using only CSS.

    Koss

  • #5
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    I vote "waste of time",
    reason is: far to complex then javascript solution and I don't see any logic reason to have a pure css solution.

    regards

  • #6
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    I do wonder what la madame de temps would have to say about me going for her waist...
    It depends on the situation. Sometimes CSS is entirely appropriate, and I would prefer to use it over JavaScript.
    Last edited by Apostropartheid; 11-17-2008 at 04:24 PM.

  • #7
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    LOL CyanLight... Guess I should reconsider posting at wee hours of the night huh.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •