So I'm inspecting this site: http://www.grittirollo.it/ and it appears that the content that slides out has a fixed height. Is there no way to set this dynamically?
It appears as though the developer measured out how tall each portion of the sliders' box model would be when rendered, and then multiplied it by how many rows there were. From there, he/she set it manually in the CSS.
Elements on a webpage can typically be measured with their scrollHeight JavaScript property (element.scrollHeight) however some browsers don't have this and some browsers do it differently from others. (I believe Firefox's has to be done recursively down the tree of elements and Safari just uses the outermost element.) This should be possible without manually setting the height using JavaScript, you just may have to conditionally code it to work with all the browsers you want to support.
I don't see why it's necessary to set it dynamically. If the stuff is float:left; and they put a <div class="clear"> at the bottom of a hide-able section, you would be able to see the contents of that section when it was un-hidden with JavaScript. You could then adjust the layout with padding and margin to make it look pretty.
Or, they could have also used position:relative; and position:absolute; to layout the hide-able sections. It comes down to preference.
Related
The HTML below specifies a button and a div that have identical class and contents.
<div class="root"><!--
--><button class="outer"><div class="middle"><div class="inner">label</div></div></button><!--
--><div class="outer"><div class="middle"><div class="inner">label</div></div></div ><!--
--></div>
In this example, I have explicitly set every CSS property1 for the classes outer, middle, and inner2.
This means that both the button.outer and div.outer sub-trees of the DOM should have completely identical CSS settings. Presumably, as well, no CSS properties for these elements are getting their values from anywhere else besides the provided stylesheet.
As the example shows, the side-by-side button and div look quite different. Specifically, in the button, the label appears at the bottom of the element, whereas in the div it is vertically centered. (The label is centered horizontally in both cases. Also, note that all the classes have the setting vertical-align: middle.)
I have observed this difference with all the browsers I've tested so far (Chrome and Firefox).
Since there is no difference in the stylesheet settings for the button.outer and div.outer elements, and their descendants, I figure that the difference in their appearance is due to some CSS property with a value (such as auto or normal) that gets interpreted differently by the browser depending on the whether the context is a button or a div element.
My immediate goal here is to understand sufficiently well why the button and the div are being rendered differently so that I can adjust the CSS intelligently.
My longer term goal is to make CSS coding more predictable. Currently I find that my CSS is completely unstable due to gross inconsistencies like the one shown in the example.
My question is:
how can the difference in appearance between the button and the div be explained?
1 As reported by Chrome's devtool.
2 I took the vast majority of the values for these settings from Chrome's devtool's listings. The point was to ensure that both the button and the div elements had the same setting (whatever it may be) for each CSS property.
This is likely due to different meanings for the value of auto for the position of elements inside of a button. If you expand the size of a div, the content by default will be in the top-left corner. If you do the same for a button, the content will be centered horizontally and vertically.
Since the button's top and left values for auto is to be centered and not in the top left corner, you can reset top and left to always act like a typical div would. These are the properties to change on .middle:
.middle {
top: 0;
left: 0;
}
Here's the forked JSFiddle with those changes to .middle.
Different elements have different default settings. There is an enormous amount of CSS in your demos, and it's largely overkill and very hard to determine where exactly the differences in rendering are coming from.
Have you tried a CSS reset instead? These will resolve most of the discrepancies between elements and browsers, giving you a blank slate to add your own styles.
how can I determine the property (or properties) that account for the difference in appearance between the button and the div?
By clicking through them one by one and toggling them on and off in Dev Tools. If you turn off position:absolute on the middle class, you'll see what you're probably expecting in layout. I found this by clicking through all the properties in the Elements > Styles panel. See:
https://jsfiddle.net/vfdd9p8L/
This is probably a bug that you're encountering. Browsers have lots of them! By layering on so many styles at once, you're probably backing into a weird corner case with respect to the layout algorithms. To isolate the bug for help and/or reporting, try to create a reduced test case, which creates an unexpected discrepancy, but using the minimal number of elements and declarations.
(Also note that your fiddle is including jQuery CSS, which includes Normalize, which is a whole other layer of styling.)
I have an HTML source code content which comes from a WYSIWYG editor.
I need to display that content, but spiting the result on multiple div elements (pages).
For example:
One A4 page (a div tag) has aprox width: 798px and height: 1128.6px
If the html content inside that page is bigger in height than 1128.6px, the "overflow" should be displayed on another page.
I am sure is possible to do this programmatically, but i am hoping for a css property, similar to columns property
This is coming with CSS Regions-
With Regions, you can use CSS properties to flow content into existing
styled containers, specifying any container order you choose,
regardless of their position on the page. Create visually stunning
responsive layouts for mobile and desktop content today.
See http://html.adobe.com/webplatform/layout/regions/
Support remains limited though, and this probably doesn't solve your requirements given dynamic content lengths.
This is almost certainly going to require either a server side or client side scripted (JavaScript) solution.
I'm trying to make a HTML "showcase". I am thinking of using elements like this:
<div id="index-showcase-tabs">
<div id="index-showcase-tabslide">
<div class="index-showcase-tab" id="showcase-tab-1">Item1</div>
<div class="index-showcase-tab" id="showcase-tab-2">Item2</div>
...
<div class="index-showcase-tab" id="showcase-tab-N">ItemN</div>
</div>
</div>
The showcase items are floated left, and I don't know their precise width, nor the number of them.
Problem is: if the combined width of the items is bigger than the container (index-showcase-tabs), I don't want them to break line (which they do by default). I want them in one line, and I want to hide the overflow and then let the user scroll them with javascript (not by scrollbar...).
How would I do that?
PS: There's not much css for the items yet. I only gave the slider a specific heigth:
#index-showcase-tabslide
{
height: 34px;
}
Edit: Here you can see my problem.
Edit2: explaining more with a fiddle: http://jsfiddle.net/TbSfj/19/
For this, you cannot use float: left. Instead use display: inline - this will have the same effect for what you want to accomplish, and it will not be constrained to the parent div in the DOM model.
check out this sexy control:
http://jsfiddle.net/SoonDead/U6QdQ/20/
this way made for my project, but I think it does what you want.
The tricks are:
Because you use a lot of characters that can "linebreak" and even forcefully disable linebreaks have different results in 1-2 browsers, I would recommend against it.
Instead make the overflowing width wide enough to hold all the elements easily, so if javascript is disabled it will not look ugly.
(I know that you are fine with jquery, so I use it within the example, also the outerWidth property in simple js has bugs in webkit (tends to be 0 in some cases).)
So you need to sum up the elements' outerWidth() and set the content holder's width, so you can use scrollLeft, and not overscroll.
There is no other trick, just a scrollTo function because calculating positions are not that trivial if you are new to jquery and you might want to use that.
The input text ("ooooooo's") you can see is continuing across the complete page and under the images. I would like it to stop inside the the area shaded red. How would I resolve this?
You can give any element a fixed width using the CSS width attribute. This will work whether you're allowing input text or just displaying text.
Examples:
div{
width:400px;
background-image:url("yourimage.png");
}
textarea{
width:400px;
background-image:url("yourimage.png");
}
Your text should be inside that element. If you're having problems with long words (like your example with the ooooooooo) you can set word-wrap: break-word
Try setting overflow: hidden in your CSS. Take a look here for more info.
Use a textarea for this element. It's built-in behavior is what you are looking for. You can style it with CSS to fit your layout.
I also suggest you get the Firebug plug-in for Firefox. When you see something you like on the web, it will allow you to right-click and see the html, JavaScript, css, etc., (anything client-side) in a box at the bottom of your browser. You can even edit the code and see the results of your experiments in real time. It is invaluable for those "just like so-and-so does it" situations.
http://forums.animefushigi.com/showthread.php?161-Poll-Test
I want to switch the position of "Vote Now" and "View Poll" Results buttons
I'm having trouble figuring how what css to change to do this
edit oh sorry, you can Login with Test / test
you can use css
float:left; / float:right;
I think it's a mild misconception than CSS can switch positions of elements arbitrarily. It all depends on the design of the layout and its accompanying HTML.
Seeing your HTML will help!
If you knew the widths of side-by-side elements, you can position them but that's not very robust if the layout is fluid or different browser vendors or settings influence the elements widths. Positioning can lead to nasty overlapping elements.
Floating your buttons within their container may be an option, e.g. if the buttons are float:left, they will be in their original order. If they are float:right, their order will be reversed. Their container will need to be floated too probably. I'd need to see the HTML to explain it with confidence.