I have some problem. I tried to position the title over the image
first title (cat1) can be small or long
second title (cat 2) juste after the first title
third title (after the 2nd title to right)
these title must be on inline
see my demo jsfiddle http://jsfiddle.net/cyphos/jntea/]
thank you for your response
As I understand it, how you accomplish this depends on what you are OK with creating. If you can specify the width of each element, then it isn't a problem to accomplish. You could then simply specify widths for both the left and right elements, then position the center one directly in between. See this fiddle as an example:
CSS only Fiddle
This uses the box-sizing border-box model to simplify things. Read this for clarification
basically:
.cta1 {left:0;width:150px;}
.cta2 {left:150px;right:150px;}
.cta3 {right:0;width:150px;}
OR
if you want these items to be dynamic, you will need to use Javascript/jQuery to get the width of the elements and then set the left and right properties of the center one accordingly. An example in jQuery
jQuery based fiddle
var cat1Width = $('.cat1').width();
cat1Width = cat1Width + 26; //26 being a pixel measure of the padding of the element
$('.cat2').css('left', cat1Width);
With this, you will have to then add the padding values to the cta1Width variable, as jQuery does not return a width value that includes the padding. Either do this manually (by adding the pixel value yourself), or you can also extract the padding width with the jQuery see this thread for info
Related
In particular I have a GWT project with a
TextArea element which I want to conform to a set width and expand as much as needed to the bottom.
ListBox element which I want to conform to a set width and expand vertically to show the entirety of the displayed list item.
Those are two widgets using replaced elements: <textarea> and <select> respectively.
for the TextArea, there's no way to make it really "resize automatically" other than listening to events and computing the new size (there's actually no need to compute the new size, you can just let the browser do it; see http://phaistonian.pblogs.gr/expanding-textareas-the-easy-and-clean-way.html)
for the ListBox, it's impossible to have the items' text wrap. See Word wrap options in a select list for a similar question in pure JS.
Set the width to whatever number and set height to auto.
In the following example (from Mozilla's site):
<div style="color:darkred"> The color of this text is the same as the one of the line: <div style="background:currentcolor; height:1px"></div> Some more text. </div>
Please take a look at this corresponding jsfiddle link.
If I remove "background:currentColor" from the style, the line it draws disappears. How does a style like this result in the addition of a line?
Thanks.
Because the div has a height of one pixel (1px), which means it is presented as a line - namely because there is no content of x-pixels height within it, it sizes itself appropriately (if no height was specified then it would collapse to 0). Therefore, because the div has a background colour (which doesn't match the colour on which it is rendered (which, if the colours did match, would give the illusion of invisibility)) you see one pixel height line of that colour.
Think of crushing a box down, or folding paper: you couldn't make it entirely disappear (out of existence, or current form, at least not easily) and, upon bringing yourself horizontal to the plane on which it sat, would still see it (or its colour/shade of, etc.)
Of course, concentrating on only that one not a solution wouldn't be too helpful, although others have come to your aid: use a span element to 'group' text within text, these are inline by default and by rights should only be output if there is text to go in one - this forgets for a moment that you explicitly specify a height value at all, which is what makes me wonder about the whole scenario.
because Div is a block element.
<div style="color:darkred"> The color of this text is the same as the one of the line: <span style="background:currentcolor; height:1px"></span> Some more text. </div>
I'm trying to figure out how to have a DIV column snapping to some fixed-size grid, via CSS.
Here's the test page I'm working on: http://mapofemergence.com/test/MoEv2/
What I'm trying to get, is the right div (the green one) someway snapping to the background grid quads: when resizing the browser window, the red quads should distribute in the middle area, while the green column should "fill" the remaining area on the right side of the page, and yet remaining always aligned (on the left) with the grid.
Basically, being a the grid's quad size, the right green div should have a variable width, equal to or greater than a, and anyway minor than 2a (in which case it should set back to a width of a, while having one more red quad moving from the lower row to the upper one).
here's an image to get a better idea:
(sorry, my reputation doesn't allow to hyperlink)
I'm not really sure this can be done via CSS, but I'm sure that some of you can help finding some solution or workaround. I wouldn't use javascript, if possible.
Thanks for your help,
s
Unfortunately HTML/CSS don't have features necessary to do what you want. You can only achieve it by using JavaScript.
You should bind a function to window resize event which will set green's div width to desirable value. In jQuery it should look something like that:
$(window).resize(function() {
$("#rx").width(
parseInt($("#rx").css("min-width").slice(0, -2)) + (
($(window).width() - $("#lx").width() - $("#rx").css("min-width").slice(0, -2)) % $(".module:first").outerWidth(true)
)
);
});
Note that this code can be easily optimised but I wanted to make it as simple as possible.
The coding is done using VS2008
There are two divs in my page namely "dvLeftContent" and "dvRightContent".
I cannot statically set the height of the pages since "dvRightContent" have variable heights on various pages (Master Pages are used here)
Is there a client side function(javascript or jquery) that takes the height of the right div and assigns it to left div?
Using jQuery:
$("#dvRightContent").bind("resize", function(){
$("#dvLeftContent").css('height', $("#dvRightContent").css('height'));
});
There is also a jQuery plugin which does the job for you: Equalize
It handles both the scenario where rightcol is larger then leftcol or where leftcol is larger than rightcol. It also allows you to specify which element inside either leftcol or rightcol should get the space added.
Thanks micahwittman. Some minor changes
$("#dvRightContent").resize(function(){
$("#dvLeftContent").css("height", ($("#dvRightContent").attr("offsetHeight") - 250 ) +"px");
});
Its because height will give only "auto" in this case as its set like that
I am designing a page to Add/Edit users - I used a repeater control and a table to display users. In users view the individual columns of the table row have labels to display a record values and when users click on edit button, the labels are hidden and text boxes are displayed for users to edit values - The problem is - as soon as the text boxes are visible, the table size increases - the row height and cells size becomes large. Is there a way to display the text boxes so that they take the same size as the labels
Dealing with tables, the question is: can your labels span on multiple text rows (ie: can you have long texts)? If yes, you may encounter layout problems any way. If no, a simple approach can be creating a CSS Class:
.CellContent { display:block; width: ...; height: ...; }
with your preferred cell width/height. Just stay a bit "large" with your height.
Assign the class to both your label and textbox, and you should not get width/height changes when switching control (thanks to the display:block property).
Again, if you have long texts, you will still encounter issues, and may want to use multilines. In that case, I would suggest ignoring height problems: just set the width to be consistent, and always show a 3-4 lines textbox for editing. Users will not be bothered to see a row height change, if they are ready to type long texts.
I'd use JS+CSS... You'll have to get your hands dirty for this one though. Visual Studio isn't going to help you much.
Here's how I'd do it:
Get the <td> clientWidth and clientHeight.
Set the <td>'s width and height to those px values (so they're no longer relative)
Swap the text for the input
In your CSS, make sure the input has no padding/margin/border and set width:100%, line-height:1em, and height:1em
When you switch back, make sure you un-set the <td> width and height so they return to automatic values.
You'll need to tweak this all slightly. I'm sure you'll have to play around with the padding on the <td> and perhaps set overflow:hidden but you should be able to do what you want.