Jump to content

Possible To Do Drop Down Text With Only Css?


noah_hayner
 Share

Recommended Posts

Hello, I have assignment for my web design class where we are given a page of HTML, and are tasked with styling it using only CSS. We are not allowed to edit the HTML. Here is the HTML for reference, based on Wikipedia page for "Tesseract."

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head>  <title>Tesseract</title>  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>  <link rel="stylesheet" href="p2.css" type="text/css"/></head><body><!-- THE FOLLOWING <div> TAG SIMPLY JUST WRAPS AROUND ALL OF THE CONTENT WITHIN THE <body> TAG. YOU CAN MAKE USE OF IT, OR LEAVE IT BE. --><div id="container"><h1>Tesseract</h1><div id="disclaimer">The following are excerpts from the <a href="http://en.wikipedia.org/wiki/Tesseract">Wikipedia entry on the tesseract</a>, as of 10.15.10.</div><!--  THE FOLLOWING SECTION IS GENERAL TESSERACT INFORMATION  --><div id="general_info_section"><div id="general1">In geometry, the tesseract, also called an 8-cell or regular octachoron, is the four-dimensional analog of the cube. The tesseract is to the cube as the cube is to the square. Just as the surface of the cube consists of 6 square faces, the hypersurface of the tesseract consists of 8 cubical cells. The tesseract is one of the six convex regular 4-polytopes.</div><div id="general2">A generalization of the cube to dimensions greater than three is called a "hypercube", "<i>n</i>-cube" or "measure polytope". The tesseract is the four-dimensional hypercube, or 4-cube.</div></div><!--  END GENERAL INFO SECTION --><!--  THIS NEXT SECTIONS CONTAINS INFO ABOUT THE GEOMETRY OF A TESSERACT--><div id="geometry_section"><h2 id="geometry_title">Geometry</h2><div id="geometry1">The tesseract can be constructed in a number of ways. As a regular polytope with three cubes folded together around every edge, it has Schläfli symbol {4,3,3}. Constructed as a 4D hyperprism made of two parallel cubes, it can be named as a composite Schläfli symbol {4,3} × { }. As a duoprism, a Cartesian product of two squares, it can be named by a composite Schläfli symbol {4}×{4}.</div><div id="geometry2">Through scientific research anaerobic digestion gained academic recognition in the 1930s. This research led to the discovery of anaerobic bacteria, the microorganisms that facilitate the process. Further research was carried out to investigate the conditions under which methanogenic bacteria were able to grow and reproduce. This work was developed during World War II where in both Germany and France there was an increase in the application of anaerobic digestion for the treatment of manure.</div><div id="geometry3">The standard tesseract in Euclidean 4-space is given as the convex hull of the points (±1, ±1, ±1, ±1). That is, it consists of the points:</div><div id="geometry4">{ (x<sub>1</sub>, x<sub>2</sub>, x<sub>3</sub>, x<sub>4</sub>) ∈ R<sup>4</sup> : -1 ≤ x<sub>i</sub> ≤ 1}</div><div id="geometry5">A tesseract is bounded by eight hyperplanes (x<sub>i</sub> = ±1). Each pair of non-parallel hyperplanes intersects to form 24 square faces in a tesseract. Three cubes and three squares intersect at each edge. There are four cubes, six squares, and four edges meeting at every vertex. All in all, it consists of 8 cubes, 24 squares, 32 edges, and 16 vertices.</div><div id="geometry6">A tesseract is in principle obtained by combining two cubes. The scheme is similar to the construction of a cube from two squares: juxtapose two copies of the lower dimensional cube and connect the corresponding vertices. Each edge of a tesseract is of the same length. The vertices of the tesseract with respect to the distance along the edges, with respect to the bottom point. This view is of interest when using tesseracts as the basis for a network topology to link multiple processors in parallel computing: the distance between two nodes is at most 4 and there are many different paths to allow weight balancing.</div></div><!--  END GEOMETRY SECTION --><!--  THIS NEXT SECTIONS PERTAIN TO LITERATURE AND ART --><div id="lit_art_section"><h2 id="lit_art_title">Literature and Art</h2><div id="lit_art1">Artists and writers have used the geometry of the tesseract to produce surrealistic effects, for instance in Salvador Dalí's <i>Crucifixion</i> (<i>Corpus Hypercubus</i>), and Robert A. Heinlein's classic science fiction short story "—And He Built a Crooked House—" (1940) in which an earthquake causes a house built in the shape of the net of a tesseract to fold into an actual tesseract.</div><div id="lit_art2">In the film <i>Flatland: The Movie</i>  a model of a tesseract at the end is used to imply the existence of a physical fourth dimension to the inhabitants of the third.</div><div id="lit_art3">Greg Bear's short science fiction story "Tangents" involves multidimensional visualization and suggests circumstances in which 4-dimensional objects pass through our 3-space.</div><div id="lit_art4">Madeleine L'Engle in the science fiction-fantasy novel <i>A Wrinkle In Time</i>  uses a tesseract as a way of traveling. The easiest way to understand how a tesseract would help with travel is by analogy. Imagine a two dimensional creature, stuck on the surface of a three dimensional cube. Traveling across the surface of the cube would take more time than cutting through the center of the cube, as a three dimensional creature might. Traveling by "tesser" or "wrinkling" allows the children of the book to be transported to places unreachable by normal means of travel.</div><div id="lit_art5">A tesseract is the basis of the movie <i>Cube 2: Hypercube</i> in which a group of people have to attempt to escape from one.</div><div id="lit_art6">In the movie <i>S. Darko</i>  (2009) a tesseract is shown traveling through a worm hole to earth. Multiple metorites then fall to earth, which the character Jeremy calls tesseracts. The film suggests this causes the end of the world. Different characters time travel in this movie but the film does not explain what a tesseract is or relate it to time travel.</div><div id="lit_art7">Others, however, have used the word as a shorthand for something strange or unknown without any reference to the actual figure, as in Alex Garland's novel <i>The Tesseract</i>.</div></div><!--  END LITERATURE AND ART SECTION --><!--  HERE'S A SECTION FOR LINKS --><div id="links"><h2 id="links_title">See also</h2><ul><li><a href="http://en.wikipedia.org/wiki/Fourth_dimension">Fourth Dimension</a><ul><li><a href="http://en.wikipedia.org/wiki/List_of_regular_polytopes">List of regular polytopes</a></li></ul></li><li><a href="http://en.wikipedia.org/wiki/3-sphere">3-sphere</a></li><li><a href="http://en.wikipedia.org/wiki/Ludwig_Schläfli">Ludwig Schläfli</a> - <a href="http://en.wikipedia.org/wiki/Ludwig_Schläfli#Polytopes">Polytopes</a></li></ul></div><!-- END OF LINKS SECTION --><!--  THIS NEXT TAG CLOSES THE "container" <div> --></div></body></html>

Now, as you can see there is big load of text here, and I want to style this so only their headers are visible, and when I hover over the header the text drops down. But every tutorial I see for drop down adds some sort of HTML. How can I make drop down text boxes only with CSS? Here is my CSS page, for now I have put the text into scrolling blocks.

body {background-image:url('Tesseract.jpg');font-size:12px;font-family:Calibri, sans-serif;}#container {color:white;}/* Main title */h1 {display:block;width:200px;margin:10px;border:1px solid white;background-color:black;}/*  I gave each <h2> element its own unique id (they're further down the page), but you can use the rule below if you want to give common properties & values to all of them */h2 {display:block;width:400px;background-color:purple;}/* Disclaimer section */#disclaimer {display:block;width:400px;margin:10px;padding:10px;border:1px solid white;background-color:black;}#disclaimer a:link {}#disclaimer a:visited {}#disclaimer a:hover {}/* General info section */#general_info_section {display:block;width:520px;margin:10px;padding:10px;border:1px solid white;background-color:black;}#general1 {}#general2 {}/* Geometry section */#geometry_section {display:block;width:400px;height:200px;margin:10px;padding:20px;overflow:auto;border:1px solid white;background-color:black;}#geometry_title {}#geometry1 {}#geometry2 {}#geometry3 {}#geometry4 {}#geometry5 {}#geometry6 {}/*Literature and Art section */#lit_art_section {display:block;width:400px;height:200px;margin:10px;padding:20px;overflow:auto;border:1px solid white;background-color:black;}#lit_art_title {}#lit_art1 {}#lit_art2 {}#lit_art3 {}#lit_art4 {}#lit_art5 {}#lit_art6 {}#lit_art7 {}/* Links section */#links {display:block;width:400px;margin:10px;padding:10px;border:1px solid white;background-color:black;}#links_title {}ul {}li {}#links a:link {}#links a:visited {}#links a:hover {}/* If you want to get fancy with just the little inset "List of regular polytopes" list-item, then you can do it right here:  */#links ul li ul li a {}

Any help is appreciated, thank you.

Link to comment
Share on other sites

I actually just searched for this today, let me give you the link. It works really well, atleast for me. High amount of customization as long as you know csshttp://www.projectse...tion/auto_hide/. Note: It isn't "PURE" css. However they give you the JS you need. Follow the instructions it gives you to make its test page for the drop down menus so you kinda learn what parts do what. Then apply it to your site.

Edited by Krewe
Link to comment
Share on other sites

Wait what? To the best of my knowledge to set the links in the drop down menu you will need to edit the html... Am I wrong?
No you are right, but remember I am doing this as class assignment. We can style the page however we want to, but we may not edit the HTML. So I wanted to make drop down boxes, but if that's not possible without editing HTML I guess this is a no-go.
Link to comment
Share on other sites

If you are talking about the h2 headers you could use
  h2 ~ div, h2 ~ ul {display:none;}  h2:hover ~ div, h2:hover ~ ul {display:block;}

but I don't think it will work for older browsers

I never see "~" syntax before. Am I supposed to replace the h2 styling with this? This is what I have now...
h2 {display:block;width:400px;background-color:purple;}

Do I complete replace with this?

  h2 ~ div, h2 ~ ul {display:none;}  h2:hover ~ div, h2:hover ~ ul {display:block;}

Or do I just add it below what I already have? Oh and older browser is not a problem, I have updated Chrome.

Edited by noah_hayner
Link to comment
Share on other sites

Google "CSS drop down menus" or "CSS tooltips". There are techniques out there for doing drop down navigation menus with pure CSS, no HTML or JavaScript involved. These techniques make use of the :hover class and child sibling selectors, as dsonesuk suggested. EDIT: Just realized you're not using lists. But the techniques used for menus and tooltips will still apply, you just need to target siblings not children. However, like dsonesuk mentioned, this won't work in older browsers or IE 8 and under. (Maybe IE 8 is considered an "older browser" by now, though...:P)

Edited by ShadowMage
Link to comment
Share on other sites

Looking at it again it can only be usable if you use the outer containers as the parent element for hiding the content within it, that way you would be able to use the scroll bar, and click the links found in the final section.

#geometry_section div, #lit_art_section div, #links ul {display:none;}#geometry_section:hover div, #lit_art_section:hover div, #links:hover ul {display:block;}

Link to comment
Share on other sites

EDIT: Just realized you're not using lists. But the techniques used for menus and tooltips will still apply, you just need to target siblings not children. However, like dsonesuk mentioned, this won't work in older browsers or IE 8 and under. (Maybe IE 8 is considered an "older browser" by now, though... :P)
works fine it ie7, and ie8, I was talking about IE6 and below, I'm sure won't work in these ancient Stonehenge browsers .
Link to comment
Share on other sites

works fine it ie7, and ie8...
Really? The '~' (general sibling selector) is CSS3. I didn't think IE would support it... EDIT: After doing a quick test, I can confirm that this does indeed work in IE 8. Who'd a thunk? :P Edited by ShadowMage
Link to comment
Share on other sites

Looking at it again it can only be usable if you use the outer containers as the parent element for hiding the content within it, that way you would be able to use the scroll bar, and click the links found in the final section.
#geometry_section div, #lit_art_section div, #links ul {display:none;}#geometry_section:hover div, #lit_art_section:hover div, #links:hover ul {display:block;}

I simply inserted this code without editing the rest, and this has made some progress. But the block is still there, so it doesn't look like drop-down. It look like a block sits there empty, and hovering over the empty block fills it with text. What I am aiming for is for the h2 to only be present, and when I hover over h2 then the block drops down displaying the text. I tried specifying the dimensions of the dropped down block in the code I ^quoted^, but that did not fix it. What do you think I should do?
Link to comment
Share on other sites

Remove the height for the containers. I'm referring to these:

#geometry_section {display:block;width:400px;height:200px; /* Remove this */margin:10px;padding:20px;overflow:auto;border:1px solid white;background-color:black;}

Do that for all the sections.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...