...

View Full Version : Pure CSS hide/display content



ubh
11-08-2008, 08:45 PM
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.

<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.

<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.

twodayslate
11-08-2008, 10:31 PM
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

ubh
11-16-2008, 02:09 AM
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 (http://www.devinrolsen.com/tutorials/css/css_display_hide_content/index.html)

kosstr12
11-17-2008, 12:37 PM
Wow, I'm very impressed with the finished product. I didn't know it was possible to do something like that using only CSS.:thumbsup:

Koss

oesxyl
11-17-2008, 12:52 PM
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

Apostropartheid
11-17-2008, 04:21 PM
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.

ubh
11-17-2008, 04:54 PM
LOL CyanLight... Guess I should reconsider posting at wee hours of the night huh.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum