I have a wordpress theme that i'm building but i've hit a snag with some code and can't seem to get my div to expand correctly. I've tried clearing the floats at different positions, i've tried overflow: hidden, but nothing seems to work.
What i'm trying to do is have the content slide in from either side based on what header you click. The content is based on a wordpress post for each link. So the client can easilly edit it to any size.
Because of this it isn't viable to use pixels in the sizing of it. And i know that absolute positioning means that pixels are very nearly the only option.
I've messed with everything i can think of in firebug and just cannot get it to expand.
You'll find the site here: http://tinyurl.com/okd5wnf
However i couldn't get this to work either. Maybe that'll give you a clue as to what might be wrong.
I know it's a long winded post, and i apologise. If i have time later, i should be able to make a jsfiddle. However time is short at the moment.
Any help would be appreciated. Thank you very much.
Your problems stems from setting the <div class="box"></div>'s position property to absolute. Give the parent element(<div id="body-wrapper"></div>) overflow-x:hidden; to hide children that are not being displayed, and then use negative margins to position child elements within the viewport (the parent element). This is basically how most sliders work.
Remove position absolute from box class. please also mention what desired layout you need for content. we will suggest you classes for that.
Romove position:absolute from div.box
I guess that's all.
Related
I have no idea what to do with this button anymore (the "donate" one here).
I have used a plug-in in parallel for the mobile version which works just fine with a defined position of fixed.
This is also fixed position but the "donate" button keeps going behind pretty much all the elements which looks very bad since I want it on top :( any help is appreciated.
U should remove that button from there! Copy this element with id donate_widget, and paste it before container with class at-content.
I think this should work!
I had some similar issues with z-index as well. Here you can find some information about it https://www.smashingmagazine.com/2009/09/the-z-index-css-property-a-comprehensive-look/
As for your solution, considering the button is fixed position for the whole web page (not just one section) you could maybe move it up in the HTML tree. In other words, make it a direct descendant of the body element - or row, or something which is above your other elements.
I found it. So I went to the parent element and the div with the id fws_577e3c5a64f62 that contains the button should have the high z-index. This seems to fix the problem for me.
I'm helping out a friend with an issue with their blog, and can't for the life of me figure out the error.
http://theglamshack.blogspot.com/
Somewhere within the code, between the body it is managing to place 50000 or so pixels. I can't manage to locate WHERE it is coming from, aside from the fact that body min-height is 100% (which I cant find anywhere in the code at all.. ) I can't find any error.
If I could get some help tha'td be great!
Under #sidebar-wrapper-left, the div that has classes "widget-content list-label-widget-content" is the one causing the issue.
Every for every list item contained in the unordered list is adding a few hundred pixels to the height. All of them added up is how you get a height of 50K.
The strange part is, the left-sidebar isn't really visible. If you don't need the left sidebar you could just set #sidebar-wrapper-left to display:none to see how it looks until you figure out how to remove it from the layout altogether.
Update:
It's easy to diagnose this using Chrome. Right click on the blank section below the body and hit 'Inspect Element' then mouseover the HTML elements in the code and their width/height values will popup.
Keep moving down the list until you find the lowest element that has a width > 50K and that shows you the section causing the problem (ie the one I outlined above).
Check the DIV sidebar-wrapper-left and the other divs/content inside CSS inside it. Use FireBug a debugging tool to find out more info on what's wrong.
You have "Label Widget" that is causing that problem. Remove it from your layout and you should be fine.
this question is related to my before question:
position relative elements after absolute elements
I updated the JsFiddle provided there to reflect my current html (for which I've no URL right now) more exact. See here: http://jsfiddle.net/dkxUX/22/
I realised that this layout is problematic for me.
In the comments to o.v.'s answer he pointed out that I could create additional wrappers,
like for example a #header div. This is not a bad idea indeed, since this way I would still be able to position my elements absolute within it, however - as long it is positioned anything else than static.
And here comes my problem:
I was curious if the height of an absolute positioned element will affect the height of its parent.
Actually, it seems not: http://jsfiddle.net/qFh6s/1/
Beeing frustrated I tried it with jQuery:
http://jsfiddle.net/WD6LF/1/
Result: Beeing even more frustrated, running out of ideas.
I just cannot give the elements fixed heights, because their content will vary.
Actually, I'm already annoyed by my html, for example the additional wrappers for the sticky footer make it seeming less semantic to me. Furthermore, I begin to understand that putting everything into divs and giving it an absolute position is NOT the answer to all CSS hurdles.
So I'm open to any useful suggestion, whilst making myself ready to scratch everything and start over.
You should really look into floats. Floats will help you position elements even if there height is not known. And you will stop swearing...:)
Good designers do not use tables or positioning, they use floats. You can use clear:both on any div if you don't want it to follow any other div. I didn't quite completely read your question but I am pretty much sure its floats you are looking for. Here is a quick tutorial on floats. Go through it and you yourself will be able to solve your problem. I hope your problem gets solved. Happy designing!!
I'm a GWT refugee, trying to figure out how to do various Ajax-ish things in Wicket.
I have two divs. I'd like to make the first div's max-height dependent on the height of the second div, with a "more/less" link so that the user can expand the first div.
Example:
The content of both divs is variable, and since div2 has wrapped text in a proportional font, I can't really predict its height until rendered in the browser.
In GWT I accomplished this by adding content to the div1 a line at a time, and if it exceeded the height of div2 (which already had its content rendered), I simply removed the line. Since GWT runs on the client, this is fairly straightforward.
What's the best way to do this in Wicket? I'm expecting to need a little Javascript, but if there is a component that already does this (or makes it easier) I'd be very happy to use it.
With help of pure Wicket I do not think, that there's a way to do this. But maybe the Wicket + JQuery approach will help you achieve your idea...
There seems to be a rather simple JavaScript-solution (except that it doesn't solve the showing-half-a-line-problem but I think that can be solved by toying around with this:
document.getElementById("div1").style.height = document.getElementById("div2").offsetHeight;
Can't this be solved almost completely by CSS? Like adding both DIVs to a third DIV with an overflow:hidden attribute, cutting of the second DIVs contents and expanding the height of the wrapping DIV by JavaScript?
Maybe you'll have to change DIV1 to inline processing so it wouldn't 'push' the lower border of the container or something like this...
Just as a pointer, didn't try it, can't try it right now and not sure if it works but I think, it should. Anyway you or me, someone would have to play around with this to find out...
Hope this helps a little bit.
You could render both fully open (to improve accessibility to non-js users), then restrict the height of Div 1 to the height of Div 2.
So (with jQuery)...
CSS
#div1 { overflow: hidden; }
Javascript
$(document).ready(function() {
var div2_height = $('#div2').height();
$('#div1').height(div2_height);
});
To account for chopping on a line, test the line-height and set the height as a multiple.
Here's an example: http://la.truxmap.com/marker?id=thesweetstruck&t=1267058348000
The widget on the right usually overflows unless i set the height of the container to some fixed size like 1800px. What I want to do is have the div with the white background (container) always span AT LEAST until the bottom of the widget. I don't want to use overflow because I dont want anything hidden and i certainly dont want scroll bars.
Is there a css solution to this? I feel like ive tried most everything except writing a javascript solution, which i would like to avoid because im still very much an amateur with javascript. Thanks so much!
Edit:
I don't have any requirements as to how this can be done, id just like a solution. ive been trying to figure out this problem for over a week and its now driving me crazy.
Looks like you just need to clear your floats. After this div
<div id="truckLogo">...bunch of stuff...</div>
Add
<div style="clear:both;"></div>