Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

CSS extra div with open/close

Posted on 2012-09-03
22
Medium Priority
?
527 Views
Last Modified: 2012-09-05
We have a design that is all CSS - wrapper div with a header and body.    The whole thing floats center on the page.   The client now wants to have an image on the right side of the wrapper div that says "Click here" (with a graphic) that when clicked would open a new/hidden div that would show "help" for the page.    Is it even possible to do that?   I am open to pure CSS/Javascript or something jquery.    I have tried the position absolute and a z-value with a hide/show div but if I resize the window, then it ends up in the middle of the page since the rest is floating.    If I do it relative, we run into issues with it pushing the page over to the left to accommodate the new div but we don't want to do that.   We just want it to take up space on the empty right side.     Suggestions?
0
Comment
Question by:digitalwise
  • 11
  • 10
22 Comments
 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 38362078
It would be helpful if we could see the specific page you are talking about, but offhand I would say that you could do it using a relatively positioned div within the wrapper div (just set positioning so it ends up outside of the wrapper div.)
0
 
LVL 18

Expert Comment

by:Matthew Kelly
ID: 38362153
Can you get what you want to do with float:right?

http://www.w3schools.com/css/css_float.asp
0
 

Author Comment

by:digitalwise
ID: 38362255
@matthewstevenkelly - the float right then pushes it over when it opens - the main body doesn't stay in the center - at least in my version!    I inherited this code - I am doing the programming but the original designer is off the project.  

<div id="homepage">

<a href="index.cfm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','images/home_on.jpg',1)"><img src="images/home_off.jpg" alt="Reserve Adequacy Tool for Affordable Rental Housing" border="0"  id="Home" style="margin-top:25px; margin-left:-11px;" /></a>

<div id="homeicon"><a href="main.cfm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Main','','images/homeicon_on.jpg',1)"><img src="images/homeicon_off.jpg" alt="Main Menu" id="Main" border="0" /></a> <a href="logout.cfm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Logout','','images/logout_on.jpg',1)"><img src="images/logout_off.jpg" alt="Logout" border="0"  id="Logout" /></a>
</div>

<div id="inner" style="margin-top:-45px; margin-bottom:55px;">
Text
</div>
</div>

</body>
</html>

Open in new window


The css
html {
background-color: #dedfd5;
font-family: 'Arvo', serif;
font-size:16px;	
}

body {
    margin: 0;
    padding: 0;
    text-align: center; /* !!! */
}


#homepage {
	margin: 0 auto;

width: 715px;
/*height: 446px;*/	
background-color: #ffffff;	
font-family: 'Arvo', serif;
font-size:16px;	
text-align: left;

}
#homeicon {
	position:relative;
	top: -100px;
	left: 650px;	
}
#inner {
margin-left: 25px;	
margin-right: 35px;
font-size:12px;
padding-top: 15px;
height:100%;
}

Open in new window

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 38362272
OK, so what happens if you do the following?

<div id="homepage">
<div id="containing_div">
<div id="upper_cont">
Click here with image <-- obviously replace with image and Click here text with link to jquery animation -->
</div>
<div id="lower_cont">
Page help
</div>
</div>
<a href="index.cfm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','images/home_on.jpg',1)"><img src="images/home_off.jpg" alt="Reserve Adequacy Tool for Affordable Rental Housing" border="0"  id="Home" style="margin-top:25px; margin-left:-11px;" /></a>

<div id="homeicon"><a href="main.cfm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Main','','images/homeicon_on.jpg',1)"><img src="images/homeicon_off.jpg" alt="Main Menu" id="Main" border="0" /></a> <a href="logout.cfm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Logout','','images/logout_on.jpg',1)"><img src="images/logout_off.jpg" alt="Logout" border="0"  id="Logout" /></a>
</div>

<div id="inner" style="margin-top:-45px; margin-bottom:55px;">
Text
</div>
</div>

</body>
</html> 

Open in new window


And use the following CSS?

#containing_div
{
     position: relative;
     left: 800px;
     border: 1px solid #333;
     width: 150px;
}

#upper_cont
{
     width: 150px;
}

#lower_cont
{
     width: 150px;
    display: none;  /* this you will control through jquery */
}

Open in new window

0
 

Author Comment

by:digitalwise
ID: 38363512
That just sticks it at the top of the page - not to the right of the main div.   That's what I had happening.
0
 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 38363611
Yeah, the problem is that without seeing the page, I was sort of guessing.

Try moving the div to the #inner div like this:

<div id="homepage">
<a href="index.cfm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','images/home_on.jpg',1)"><img src="images/home_off.jpg" alt="Reserve Adequacy Tool for Affordable Rental Housing" border="0"  id="Home" style="margin-top:25px; margin-left:-11px;" /></a>

<div id="homeicon"><a href="main.cfm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Main','','images/homeicon_on.jpg',1)"><img src="images/homeicon_off.jpg" alt="Main Menu" id="Main" border="0" /></a> <a href="logout.cfm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Logout','','images/logout_on.jpg',1)"><img src="images/logout_off.jpg" alt="Logout" border="0"  id="Logout" /></a>
</div>

<div id="inner" style="margin-top:-45px; margin-bottom:55px;">
<div id="containing_div">
<div id="upper_cont">
Click here with image <-- obviously replace with image and Click here text with link to jquery animation -->
</div>
<div id="lower_cont">
Page help
</div>
</div>
Text
</div>
</div>

</body>
</html>  

Open in new window

0
 

Author Comment

by:digitalwise
ID: 38363926
Same sort of mess - just interior:  Test Page

I have linked to a test page so you can see what it looks like.
0
 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 38365556
Um, I just checked the test page and the CSS for #containing_div is not there?
0
 

Author Comment

by:digitalwise
ID: 38365627
Ah - sorry!   Missing the # in the style sheet when I copied it.  I added it - it put it in the right place on the right but it has still pushed it all down.
0
 
LVL 17

Accepted Solution

by:
OmniUnlimited earned 2000 total points
ID: 38365782
What do you mean?  Do you mean that you want the section entitled "Your Properties" to move up into the space of the help div?  That's easy, just set a negative "margin-bottom" the height of the space you are trying to fill (in this case, I think it is 99px) such that the CSS looks similar to the following:

#containing_div
{
     position: relative;
     left: 800px;
     border: 1px solid #333;
     width: 150px;
    margin-bottom: -99px;
}

Open in new window

0
 

Author Closing Comment

by:digitalwise
ID: 38365819
Thank you! I was moving the wrong margins around.
0
 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 38365825
You are welcome!  I'm glad you got your solution.
0
 

Author Comment

by:digitalwise
ID: 38368738
Hey - OmniUnlimited - can you look at this once more (If you want I can open a new ticket an reward new points -  it's back up online but when it opens, the open pushes the content and I can't figure out how to fix it.
0
 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 38370695
Try setting your margin-bottom on #containing_div to -601px.
0
 

Author Comment

by:digitalwise
ID: 38370716
Sigh - two pixels!    The only issue that I have now is that the text in the blue box ends up with a weird right margin.
0
 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 38370727
LOL!  Yeah, there's good reason programmers make good money.

Um, as far as the wierd right margin, I don't see it?  What type of browser are using?
0
 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 38370748
Oh wait, there it is!  I found it on Firefox.

Hey, it looks like you have some additional issues too.  There shouldn't be a margin-bottom nor a margin-left setting on #upper_cont and #lower_cont.  Take those out and see if that makes any difference.
0
 

Author Comment

by:digitalwise
ID: 38370768
I removed those margins (that was me fussing with it - sorry).   That doesn't change it.    And if I am not in compatibility mode, it's all off in IE.     Sigh.   This CSS stuff is for the birds - I like my programming MUCH better.    It works the same no matter what the browser.
0
 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 38370812
LOL!  Yeah, CSS can be fun.  It looks like you still have a margin-left on the #lower_cont.  Try taking that out.
0
 

Author Comment

by:digitalwise
ID: 38370848
It needs it or it overlaps by the 15px in both IE and Firefox.  That's not what is causing the weirdness.    I HATE the browser differences.   Should be a law or something!!    If you have an epiphany - I will be forever grateful!    Thanks so much for your help thus far.
0
 

Author Comment

by:digitalwise
ID: 38370854
OK - I moved the container to the bottom of the div and made a few tweaks to the stupid margins and it works fine in all of them!   Thanks and have a good night!!
0
 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 38370882
LOL!  You bet.  You too.  Best of luck on your project! :)
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
The viewer will learn how to dynamically set the form action using jQuery.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month12 days, 4 hours left to enroll

564 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question