I need to build a HTML/CSS layout with the following layout
|Static Div|Content Div0|Content Div1|...|Content DivN|Static Div|
a scaled down version of my code is like follows:
<div id="container">
<div id="static_div_1"></div>
<div id="content">
<div id="item1"></div>
<div id="item2"></div>
....
<div id="itemN"></div>
</div>
<div id="static_div_2"></div>
</div>
Requirements:
All DIVs need to be stacked next to
each other.
I will need to add DIV's in the content DIV dynamically using javascript
The static DIV's need to maintain their position at the beginning and end of the content.
Content DIV should scroll horizontaly
I am struggling with the following issues:
After a point the content div starts wrapping the inserted DIV and another row of DIVs start to be rendered.
Edit: Its not something tabular in nature like plain data. Assume each div is like a form in itself. Something looking like a W2. I just need scrolling in the content DIV. To make the matters worse I am not really a GUI guy.. :(
Any help will be greatly appreciated.
The CSS code you need is this:
#static_div_1, #static_div_2 {
float: left;
width: 200px;
}
#content {
float: left;
overflow-x: scroll;
white-space: nowrap;
width: 600px;
}
#content .item {
display: inline-block;
*display: inline; /* Target IE6/7 only */
width: 150px;
zoom: 1;
}
Note I have added a class "item" to each of the items inside the #content div to style them. The keys in this layout are:
Make "float: left" the three parts, #static_div_1, #static_div_2 and the #content divs (and optionally set a fixed width to them).
The "overflow-x: scroll" style on the #content div.
The "white-space: nowrap" to the #content div.
Set "display: inline-block" to each item inside the #content div.
You'll notice there is a space between each of the items. This is the newline space, so to avoid it, there must be no newline or space between those item divs.
I hope this results helpful to you.
Best regards.
UPDATE: It now works on IE6/7. For correct setting of "display: inline-block" on these browsers notice the addition of the lines:
...
#content .item {
...
*display: inline; /* Target IE6/7 only */
...
zoom: 1;
}
Related
I'm creating an HTML/CSS application, and I'm a bit stuck.
Let's say that I have 2 elements positioned next to eachother display: inline-block
Every element has again a couple of elements which are placed next to eachother.
See the following illustration that tries to explain it:
So, the image below describes 3 different levels of elements:
Level 1: Red - Outer element
Level 2: Yellow - Wrapper element
Level 3: Green - Content
In HTML, this could be constructed writting like the following:
<ul id="holder">
<li>
<div>
<div class="col">Col 1</div>
<div class="col">Col 2</div>
</div>
</li>
<li>
<div class="col">Col 1</div>
<div class="col">Col 2</div>
</li>
</ul>
The UL represents the red element, the LI represents the yellow elements and the DIV elements represents the green elements.
Now, let's say that our red element has a fixed width and I place the overflow on hidden. This means that when I resize the page, the elements on the right dissapear when they don't fit the page.
But here the problem arizes, when I do resize the window, and the window becomes too small to render everything, immediately, the latest LI element is not visible on the screen anymore.
Is there any CSS way to make sure that no the LI element are hidden but the DIV elements inside the LI? When both DIV elements are hidden, off course the LI element can be hidden aswell since it's empty?
If there's no CSS way to do this, anyone minds putting me in the right direction by using JavaScript or something else?
Here's a jsFiddle to explain it a bit more.
Kind regards
The li disappears from view because it's in display: inline-block.
As soon as the window isn't wide enough, it moves below the first li.
You can see this happen if you release the #holder's height (height:auto).
The solution is to add white-space : nowrap to force the li to stay in one line.
Updated fiddle :
https://jsfiddle.net/zLqfe4z8/4/
It's not a problem of your elements hiding because there's not enough width, it's because they're wrapping because there's not enough width (and then being hidden by the overflow: hidden).
You can see this happening if you remove the height constraint on your wrapper:
#holder { overflow: hidden; border: 1px solid red; }
The fix is simple, stop it from wrapping using white-space: nowrap:
#holder { white-space:nowrap; overflow: hidden; border: 1px solid red; height: 52px; }
On the demo link below, I am using jQuery slideUp and you will notice after it slides up, there is a quick jump of the content.
Do you know why this is? My html is valid (with the exception of the select option not having a label attribute..which I am still figuring out...). Do I have something positioned incorrectly?
http://demo.phppointofsalestaging.com/index.php
(Click login --> Sales -->Show Item Grid THEN Hide Item Grid to see the bug)
this inline style
<div style="margin-top: 39px;" id="content">
and line 724 of unicorn.css
#content {
...
margin-top: -39px;
...
}
... are conflicting with each other.
If you remove both, the page doesn't jump.
You have set a margin-top on the content div of 39px. This is only visible when you slide down the item grid. It seems to 'jump' when sliding back up because of this margin. Try setting the margin to 0px;
<div id="content" style="margin-top:0px;">
I played around a little bit and this is being caused by the margin-top:39px on your #content div, if you remove that and use top:39px instead of margin-top:39px on the #content element instead it doesn't jerk either - but it also causes the button to jump a bit on slideUp and slideDown so you will need to tweak the css of the button wrapper area like so:
To fix the button jumping issue:
#show_hide_grid_wrapper {
position: relative;
text-align: right;
padding: 10px;
}
As prev. answers mention, you have margin-top 39px on #content. Setting it to 0 will solve the problem, but it will also remove your beautiful dark gray section above the content. To get it back, add this to your CSS:
#content:before {
content: '';
display: block;
width: 100%;
height: 39px;
background: YOUR GRAY COLOR;
}
I have a page that has no vertical scroll, rather, everything is displayed horizontally.
if you scroll all the way to the end of my page (all the way to the right) you will see my contact info.
For example:
<div1></div1>
<div2></div2>
<div3></div3>
<divN></divN>
In this case, div1 is the most left item, with div2 in the center div3 to the right of it... and all the way at the end, divN is displayed.
every div is 500 px wide.
I can set my page width to 20000px ( for 4 divs ) and that works great.
However, I wanna make my page dynamic and each div, other than divN is loaded from a database. This means, each time I add content, I have to manually increase my page width.
Is there a way to automate this process.
As per i understand may be that's you want this:
.parent{
overflow:hidden;
white-space:nowrap;
}
.parent > div{
width:500px;
height:300px;
border:1px solid red;
display:inline-block;
*display:inline;/*For IE7*/
*zoom:1;
white-space:normal;
}
Check this http://jsfiddle.net/HJsrJ/
Why don't you use width:100% for an external div and make other divs width:33% with every content floated in the right way?
See example
You could save the CSS into a table, inserting placeholders where you want to dynamically change values. Heck, this could even just be a template file somewhere. Then, whenever you publish a new section on the base, pull the template, string-replace the placeholders, and then write the new CSS out to file.
Make sense?
Another option would be to give each of these div a class then use javasript to count the number of classes present multiply this by the required width of each div then use javascript to set the page width with the on document ready event.
I'm not 100% sure what OP wants here, but here's a 'solution':
HTML:
<div class="parent">
<div id="div1">1 has content</div>
<div id="div2" class="nocontent"><!-- no content --></div>
<div id="div3">3 has content</div>
<div id="div4">4 has content</div>
<div id="div5" class="nocontent"><!-- no content --></div>
<div id="div6" class="nocontent"><!-- no content --></div>
</div>
CSS:
.parent {
white-space: nowrap;
}
.parent > div {
display: inline-block;
width: 200px;
margin-left: 1px;
background: #eee;
}
.parent > .nocontent {
display: none;
}
JavaScript (jQuery):
$(function() {
// Simulate loading content
setTimeout(function() {
$('#div2').text('2 has content now').removeClass('nocontent');
}, 3000);
});
Demo:
http://jsfiddle.net/foxbunny/EY9sc/
I have a simple blog page - a list of posts that each consist of a title and contents. When the page loads I want all posts' contents hidden until their titles are clicked. The following code accomplishes this but with an unwanted side effect - the on-page-load hide() function that hides each post's content also hides the background of the containing (id="content") div:
Relevant JavaScripts:
$(document).ready(function() {
$(".blog_post p").hide();
//BLOG CONTENT ANIMATION
$('.blog_post').click(function() {
$(this).find('p').slideToggle(130);
});
});
Summary of blog page:
<section class="grid_7">
<div id="content">
<div class="blog_post">
<div class="blog_head">
<h2>Title</h2>
</div>
<p>Contents</p>
</div>
</div>
</section>
Relevant CSS:
section {
border: 1px solid white;
}
#content {
margin: 20px;
background-image:url('../images/content_background.jpg');
}
When the page loads the list of titles displays without the #content parent div's background. However when I click on a post's title the #content div's background shows up behind all posts up to and including that one.
Any idea what's going on?
It sound like you have some CSS that applies to the blog_head elements, that makes them float, for example:
.blog_post { float: left; }
In that case, the reason that the background doesn't show up is that the height of the content div is zero. A floating element doesn't affect the size of its parent, and when the content div only contains the headers, the height becomes zero. The background is still there, but there is no area where it's visible.
Add an overflow to the content div, that will make it contain its children:
#content { overflow: hidden; }
Note that this will not hide anything as long as you don't specify a size for the content element, it will just change how it's rendered so that it will become a container for its children.
A bit of a stab in the dark: Your #content div will, of course, be a lot shorter as the blog posts aren't there, basically consisting just of the divs with the titles. Perhaps that's the problem.
Does the image have a blank (or subtle) bit at the top or something, so that it's only apparent that it's there when there's more content in the #content div (e.g., when it's taller)? Or is there some other reason you can see that when #content is really short, you wouldn't see the background on the part of it that's there? (You can use the debugging tools in most modern browsers to see what the dimensions of the #content div are when the paragraphs are hidden; or slap a border on it temporarily, but tools these days are pretty good.)
Basically, since the jQuery doesn't, of course, actually hide the background, it must be a side-effect of the paragraphs being hidden — because of the effect that has on the dimensions of the #content div.
This is working fine for me:
HTML:
<div class="blog_post">
<div class="blog_head">
<h2>Title</h2>
</div>
<p>Contents</p>
</div>
</div>
CSS:
section {
border: 1px solid white;
}
#content {
margin: 20px;
background-image:url('http://bluebackground.com/__oneclick_uploads/2008/04/blue_background_03.jpg');
}
JS
$(document).ready(function() {
$(".blog_post p").hide();
//BLOG CONTENT ANIMATION
$('.blog_post').click(function() {
$(this).find('p').slideToggle(130);
});
});
Check it live here: Jsfiddle example
I have a container div element that has overflow:hidden on it. Unfortunately this property is required on it because of the way the site is made.
Inside this div it's all the site content, including some tooltips. These tooltips are displayed with jQuery when you mouse over a link or something.
The problem is that some of these tooltips will display partially hidden because of the overflow thing above, because they are positioned outside the container div...
Is there any way to be able to show a specific element from inside this container, even if it's out of its boundaries? Maybe a javascript solution?
the html looks like this:
<div style="overflow:hidden; position:relative;">
the main content
<div style="position:absolute;left:-100px;top:-50px;"> the tooltip thing </div>
</div>
try this:
<div style="position:relative;">
<div style="overflow:hidden; position: relative; width: {any}; height: {any};">the main content<div>
<div style="position:absolute;left:-100px;top:-50px;"> the tooltip thing </div>
</div>
just place your main content to another div inside the main div and give provided css to hide the content if overflowing...
CSS works like a box, and sometimes, you have elements "flowing out". Setting overflow: hidden on the main element hides contents that flow out of this box.
Consider the following:
HTML
<div class="box">This box has a height and a width. This means that if there is too much content to be displayed within the assigned height, there will be an overflow situation. If overflow is set to hidden then any overflow will not be visible.</div>
<p>This content is outside of the box.</p>
CSS
.box {
border: 1px solid #333333;
width: 200px;
height: 100px;
overflow: hidden;
}`
This outputs the following:
Note that the rest of the texts that overflow are hidden.
if overflow:hidden is to contain floats, then there are other ways that would allow tooltips to not be cut off. look foe clearfix:after