Register FAQ / Rules Forum Spy Search Today's Posts Mark Forums Read
Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Oct 12, 2013, 10:36 PM   #1
jonpeter
macrumors newbie
 
Join Date: Sep 2013
Location: MI
on hover of a div, have 3 smaller divs appear.

So i have a rectangle, 100% width of the page, and a height of 115 or so.
On hovering, the box expands to a height to 225.

How, through CSS code, can i get 3 smaller divs to appear in the hover box of 225 height and 100% width?

Thanks!
jonpeter is offline   0 Reply With Quote
Old Oct 13, 2013, 06:29 PM   #2
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
see vendor information in user profile
Quote:
Originally Posted by jonpeter View Post
So i have a rectangle, 100% width of the page, and a height of 115 or so. On hovering, the box expands to a height to 225. How, through CSS code, can i get 3 smaller divs to appear in the hover box of 225 height and 100% width? Thanks!
That was kind of vague so below is tested example code in simple CSS (well supported across browsers) that does what you want but does not deal with how to handle the content in the container div once the hover is in effect nor does it deal with placement for the smaller divs. I set simple widths and floated them so they render sensibly.

Code:
<html>
<head>
<title>Testing</title>

<style>

div {border: 1px inset red}
div#a, div#b, div#c {display: none; height: 100px; float: left}
div#container {height: 100px}
div#container:hover {height: 125px;}
div#container:hover div {display: inline}

</style>

</head>
<body>

<div id="container">

  Content for div container

  <div id="a">Content for div a</div>
  <div id="b">Content for div b</div>
  <div id="c">Content for div c</div>

</div>

</body>
</html>
Important:

This method assumes, of course, the HTML includes all 4 div's, I just hide the 3 until the hover event. Javascript should be used to manipulate the DOM if you need to dynamically add the 3 div's inside the container on hover. Also, and if anyone followup is considering using :before, :after or + or ~ in selectors with "content:" please be reminded that older browsers lack support for some, or HTML is not for content insertion using only CSS. My way is certainly not the only way, but be cautious posting CSS that is not reliably supported or considered a CSS hack.
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote
Old Oct 13, 2013, 06:31 PM   #3
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
see vendor information in user profile
I've included screenshots in this followup reply to demonstrate the before and after (hover) affects using the code I posted above.
Attached Thumbnails
Click image for larger version

Name:	before.jpg
Views:	5
Size:	13.3 KB
ID:	440759   Click image for larger version

Name:	after.jpg
Views:	9
Size:	21.2 KB
ID:	440760  
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote
Old Oct 13, 2013, 08:19 PM   #4
jonpeter
Thread Starter
macrumors newbie
 
Join Date: Sep 2013
Location: MI
sorry. nevermind. thank you for the insight.
jonpeter is offline   0 Reply With Quote
Old Oct 14, 2013, 07:54 AM   #5
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
see vendor information in user profile
Quote:
Originally Posted by jonpeter View Post
sorry. nevermind. thank you for the insight.


(sigh)
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote
Old Oct 15, 2013, 07:42 PM   #6
jonpeter
Thread Starter
macrumors newbie
 
Join Date: Sep 2013
Location: MI
http://jsfiddle.net/6wd7s/1/


so here is the code section i am working on. why is it that when i hover over my box, i dont have 3 white divs appear within it?

I'm missing code, but i dont know where.

and if you dont mind, could you explain the "hover div" section of the code. I have never seen that before. Does the simply mean to display any div mentioned in code inside the parent div, on a hover?

Last edited by jonpeter; Oct 15, 2013 at 08:51 PM.
jonpeter is offline   0 Reply With Quote
Old Oct 16, 2013, 09:32 AM   #7
matpb
macrumors newbie
 
Join Date: Jul 2012
http://jsfiddle.net/6wd7s/8/

first: no space between #two and :hover in your CSS declaration.

second: this "#two:hover div" targets all divs on the page when you hover over #two.

third: you want to display those a, b, c divs as inline-block, not just inline (they don't have any content and you want to control their height too).
matpb is offline   0 Reply With Quote
Old Oct 16, 2013, 11:00 AM   #8
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
see vendor information in user profile
Fantastic advice, thanks for joining in to help.

Learning CSS selector syntax can be tricky to newbies -- dots, hyphens, spaces, etc. and the sequence matters, i.e.

"#two:hover div.a" vs. "#two:hover div a"

The first targets a div with the class named "a" which is contained by a parent element with ID named "two" when hovered. The second targets a div that contains an anchor tag which is contained by a parent element with ID named "two" when hovered. Fun, huh?



http://www.w3schools.com/cssref/css_selectors.asp <--- Learn, absorb
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote
Old Oct 18, 2013, 10:07 PM   #9
jonpeter
Thread Starter
macrumors newbie
 
Join Date: Sep 2013
Location: MI
Quote:
Originally Posted by matpb View Post
http://jsfiddle.net/6wd7s/8/

first: no space between #two and :hover in your CSS declaration.

second: this "#two:hover div" targets all divs on the page when you hover over #two.

third: you want to display those a, b, c divs as inline-block, not just inline (they don't have any content and you want to control their height too).
exactly what i was looking for! the example was perfect just as well.

Follow up question... how would i evenly split up the 3 div across the width of the page? Also, how would i center a header?
jonpeter is offline   0 Reply With Quote
Old Oct 19, 2013, 02:12 AM   #10
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
see vendor information in user profile
Quote:
Originally Posted by jonpeter View Post
Follow up question... how would i evenly split up the 3 div across the width of the page? Also, how would i center a header?
Both, tested/working:

Code:
<html>
<head>
<title>Centered header and 3 div equal width in dynamic container</title>

<style>

body {margin: 0}

#header-container {
border: 1px inset red;
width: 100%;
}
#header-inner {
margin: 0px auto;
text-align: center;
font: bold 24px arial;
background-color: yellow;
}

.xouter3{
width:100%;
border:1px inset #000;
float:left;
}
.xleftcol3{
float: left;
width: 33%;
background:#809900;
}
.xmiddlecol3 {
overflow:hidden;
background:#eff2df;
}
* html .xmiddlecol3{float:left}
* html .xmiddlecol3 .xinner3{width:100%;}

.xrightcol3 {
float:right;
width: 33%;
background:#d2da9c;
position:relative;
}

</style>

</head>
<body>

<section id="header-container">
 <div id="header-inner">This is a Header</div>
</section>

<div class="xouter3">
	<div class="xleftcol3"><p>This is the left col </p></div>
	<div class="xrightcol3"><p>This is the rightcol : </p></div>
	<div class="xmiddlecol3">
		<div class="xinner3"><p>This is the middlecol: </p></div>
	</div>
</div>

</body>
</html>
Notes on 3 col width:

Some people advocate using "display: table-cell" but "inline-table", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group", and "inherit" are not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports the values.

There is no single or perfect method for CSS equal column widths for all browsers. BTW, many good responsive themes have 3 col layouts using the 960grid system or adjustable -- look into that if you need mobile support.

Notes on centering header:

In a nutshell, "margin: 0 left" combined with "text-align: center" is a cross-browser compatible solution. I prefer to use section tags for naming regions and using containers to ensure proper alignment and flow.

I have attached a screenshot for ya.

Attached Thumbnails
Click image for larger version

Name:	Center header and 3 equal div full width.jpg
Views:	12
Size:	61.7 KB
ID:	441833  
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT -5. The time now is 12:15 AM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC