I have the following code:
<div style="height:500px">
<ul style="height: 1000px">
....
</ul>
</div>
I am using the UL as Jquery carousel.
My problem is that the div won't act as a 500px window above that UL carousel,
and it seems like its streching the DIV so it will also fit the 1000px.
How can this be solved?
thanks
try <div style="height:500px; overflow: hidden">
Its hard to tell whats happening aside those two code lines but you would also need to set in the css that the div should have overflow hidden so that no content will flow over the height
Related
I’m having trouble getting one div not to lie on top of another div. I have the following
<div id="navbar">
<div id="leftNavSection"></div>
<div id="rightNavSection">Logged in as Dave <a rel="nofollow" data-method="delete" href="/logout">Log Out</a></div>
</div>
with the accompanying CSS …
#rightNavSection {
float: right;
}
However, when I add this div underneath, it lines up on the same vertical plane as the nav div.
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
</div>
Here is the JSFiddle that illustrates the problem — https://jsfiddle.net/z4rw9qj1/ . If I add a fixed height to the nav div (e.g. “height: 10px;”), then the overlay doesn’t happen, but I don’t want to add a fixed height because if someone adjusts their browser font size, or I add other elements, then the look is broken. Is there a way I can get the lower div not to trample the upper div?
That's because of float: right and you can fix that if you add overflow: hidden on header DEMO
header {
overflow: hidden;
}
Have you tried the z-index property ? It is a property that decides what order are the elements aligned in the "front-back" axis.
http://www.w3schools.com/cssref/pr_pos_z-index.asp
I have a div element that wraps items in it
<div id="#wrapper" style="overflow: scroll; max-height: 100%;">
<ul>
<!--lots of li's go here.
When an li is clicked, "#details" pop from below.
-->
</ul>
</div>
<div id="#detils" style="display:none; height:30%;">item details</div>
Since there might be lots of items, the div has:
max-height: 100%;
When an item is clicked, details section should pop from below.
Its height is 30%.
How can I make the div wrapper scrollbar height automatically adapt to the new situation in CSS only. In other words: its height should now change to 100%-70%=30%
You can add a class which has height:30; when the item is clicked.
I hope this can help you.
I've this dropdown, to make it work, i see only one solution is taking off the overflow, but if i take it it stays like this:
but if i apply an overflow: hidden it stays like this:
How can i make this work. I've tried to apply overflow: hidden; in other div but dosen't work.
Link to website: http://store01.titus.biz/
<div class="span12 horizontal-category" style="overflow: hidden">
<span class="carousel-prev disabled" id="carousel-category-prev"></span>
<ul class="nav myCustomNav">
<li class="dropdown"></li>
... </ul>
</div>
You could try to use clipping. First remove the overflow on div.span12.horizontal-category. Then add a clip rect on the div that is between the 2 control buttons #carousel-category-prev, #carousel-category-next. The position of absolute is required to use clipping however. But this should be fine.
<div class="span12 horizontal-category">
<span id="carousel-category-prev" class="carousel-prev disabled"></span>
<div style="position: absolute; clip: rect(auto, auto, 500px, auto);"></div>
<span id="carousel-category-next" class="carousel-next"></span>
</div>
This should clip the overflow on the left and right. Then increase the bottom (500px) to whatever value you need it to be. Clipping is a way to control how the overflow works.
I have a try, first make the ul have enough height to display the dropdown menu, then apply margin-top: -xxxpx to the element below the ul.
I test the follow code in my Chrome:
edit margin-bottom: 200px; to .horizontal-category ul
add margin-top: -180px; to .ei-slider
This way don't need CSS3 , so it's more compatibility. Test it!
This will maybe help you:
Remove overflow:hidden from class="span12 horizontal-category".
Add overflow:hidden to class="main-container".
And you could give control buttons, like ../img/button-prev-disabled.png a white background, so you can't see the corners of the menu when it slides to left and right.
I am working on a site that uses the 960 grid system. It has an issue with the navigation. Rather then try to explain, I'll show you a picture of what I'm going for
I figured the best way to do this would be to have a DIV called navHolder that stretches the whole way across the screen. Inside navHolder is a div with a class of container the hold it in the 960 system. I would give navHolder a top and bottom border to achieve the effect.
Here is the HTML
<div id="navHolder">
<div class="container_12">
<div class="grid_4" id="leftNav">
<ul class="leftNav">
<li>About Us</li>
<li>ABG Way</li>
</ul>
</div>
<div class="grid_4" id="logo">
<img src="images/abg_website_logo_2014.jpg" alt="abgLogo" id="mainLogo"/>
</div>
<div class="grid_4" id="rightNav">
<ul class="rightNav">
<li>Portfolio</li>
<li>Media</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
The issue is that the image forces navHolder to become large, so the top and bottom border lose the desired effect.
Here is a screenshot of the image making it too large
Screenshot
I attempted to give the image an
position:absolute
to stop it from resizing the div. This works, however, this causes the navigation options to collapse behind it.
Here is a screenshot
I attempted to create a fiddle to recreate this scenario
Fiddle
But its not quite the same.
My question is then, is there a way to set this image so that it doesnt resize its containing DIV AND still holds its place with the navigation so its on both sides of the image? Is there a better way to go about this then what I am currently doing?
I'd give the container <div> desired size and set the image as it's background without repeat instead of using an <img>, and apply background-size: 100%;
Look into more CSS Background Properties # MDN
I would go about this by overriding the gird (only for nav).
so it would be
#navHolder .grid_4
{
float:none;
display:inline-block;
vertical-align:middle;
}
You would also need to offset the random white space display:inline-block gives so set the font size of the parent wrapper in this case #navHolder font-size:0;
#navHolder
{
font-size:0px;
}
here is your fiddle with my changes
http://jsfiddle.net/bCzK5/4/
I have the following list in html:
<style>
.right { display: inline-block; }
</style>
<ul class="no-bullets-list">
<li>
<div class="list-item">
<h1>Some Text</h1>
<img src="image-URL"/>
<div class="right">
<input type="text"/>
<textarea></textarea>
</div>
</div>
</li>
</ul>
I want to show this elements like the image (sorry for the image by the way :))
The problem I'm having is that the div with the class="right" do not expand to the size of the parent and in consequence the textarea do not grow accordingly.
I need to be able to resize responsively so the div and the textarea have to response in consecuence.
Any ideas? I'm able to use bootstrap so if someone have a solution using it.
Thanks
A textarea's height and width are determined by their 'row' and 'column' values. These are static values so they don't change based on the device viewing them. You could look into javascript solutions but its probably more effort than its worth. Just my two cents. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea