DIV help!
- Started
- Last post
- 13 Responses
- CygnusZero4
I have this simple show/hide code and id like the option 1 description text to be aligned to top, rather than aligned to the bottom of the image how it is now. Cannot use external CSS so it has to be inline scripted. Is this possible?
<script type="text/javascript">
function hideshow(which){
document.getElementById('adiv1... = "none";
which.style.display="block"
}
</script><a href="javascript:hideshow(document.getElementById('adiv1'))"><font size="2" face="Arial" color="#194798">Option 1</font></a>
<div id="adiv1" style="display: none;"><font size="2" face="Arial" color="#000000" style="text-align:left">Option 1 description<img src="" width="215" height="100" /></font></div>
- BabySnakes0
You should really try and use google search more: http://phrogz.net/css/vertical-a…
- CygnusZero40
^ I did. vertical align isnt working.
- BabySnakes0
even with "display:table-cell;" on a div? they have it working on that page.
- fadein110
No offense but your code is quite outdated and why the inline styles? Is this an HTML email?
- No it has to go in a CMS and I have no access to the CSS.CygnusZero4
- Thats why this code looks like that. Try working in the corporate world. Shits on lockdown I cant do much.CygnusZero4
- i have but "face="Arial"'? purlease....fadein11
- Im in sharepoint 2007. Trust its a piece of shit and it only works with the font face code.CygnusZero4
- okay - see below.fadein11
- CygnusZero40
Yes snakes. Put table cell and valign top on that div in the code I posted. It doesnt work.
- CygnusZero40
Fade, as you can see in my code Im not using their CSS at all. If i try to use display table cell instead of none, it breaks the show/hide code.
If i leave it as display none which it needs to be and put vertical-align:top !important; it doesnt work. I just need that description copy to valign with the image. Its a pain bc I have to keep the code very simple due to the p.o.s. CMS im in.
- you should keep display none, but use display table in your javascript function.BabySnakes
- CygnusZero40
Well I tried this and its not working.
<script type="text/javascript">
function hideshow(which){
document.getElementById('adiv1... = "table-cell";
which.style.display="block"
}
</script>
<a href="javascript:hideshow(document.getElementById('adiv1'))"><font size="2" face="Arial" color="#194798"><strong>Option 1</strong></font></a>
<div id="adiv1" style="display: none; vertical-align:top;"><font size="2" face="Arial" color="#000000" style="text-align:left">Option 1 description<img src="" width="215" height="100" /></font></div>
- BabySnakes0
which.style.display="block" -> which.style.display="table-cell"
I can't see what the line above it is trying to do or why you need it when you are setting style with "which.sytle"- The line above it is for the show/hide. Wont work without that.CygnusZero4
- ESKEMA0
put up a jsfiddle or codepen please
- CygnusZero40
Never used this. Is this working?
- IRNlun60
<img src="" width="215" height="100" style="display:block" />
- CygnusZero40
^ That worked!
- I feel your pain on CMS... they encourage shit code.IRNlun6
- It fucking sucks.CygnusZero4
- monospaced0
Yeah graphic design!