Imagine I have the following code (simplified regarding my real context of course):
<div id="box" style="width: 120px;" onmouseover="this.style.width='200px'" onmouseout="this.style.width='120px'">
<div>A label</div>
<div>Another label</div>
<div>Another label, but a longer label</div>
</div>
What I want to achieve is the following:
My div box has a fixed width (120px by default).
In this configuration, every label nested in the box must be written in a single line.
If the text is too long, then the overflow must be hidden.
In my example, the third item will be displayed Another label, but a or Another label, but a ....
When the cursor is entering the div box, the width of the box is modified (for example to 200px).
In this configuration, the labels that were shorten in the first configuration are now displayed in the whole space.
With my code snippet, the third label is displayed in two lines when the box has a 120px, and I do not want that...
How can I achieve that?
Note that I would be great if the solution works also for IE6!
Even if I prefer a pure CSS/HTML solution, (simple) Javascript (and jQuery) is allowed!
Try putting the following as class on your divs:
white-space:nowrap;
I don't have IE6 here, so I can't this this.
style="white-space:nowrap; overflow:hidden;"
Related
So, I'm attempting to make my own website (Yeah, I finally sucked it up and started doing markup, sigh) - problem I'm having is I'm trying to center a button, and it's offset a little. Without the <center> it's all the way to the left.
Also tried :
style="align-items:center"
<div id="form-container" style="align-items:center;">
<div>
<fieldset>
<center><input class="button0" value="Install Redux" type="button" /></center>
</fieldset>
</div>
</div>
You just have to put <center> before your <div> and close it after </div>.
Like this:
<center>
<div id="form-container" style="align-items:center;">
<div>
<fieldset>
<input class="button0" value="Install Redux" type="button" />
</fieldset>
</div>
</div>
</center>
I've also made a CodePen and a JSFiddle for you.
Try text-align:center on the parent, or use left:0;top:0;position:relative;webkitTransform:translate3d(-50%,0%,0%); where parent doesn't have position:static (the default)
I would also recommend checking out Bootstrap because it has a nice grid layout that lets you define which 12ths of the page you want columns to lay in, simply by defining classes like .btn-default or .nav or in your case class="col-xs-12" inside that other column
They also have really nice styles for forms and input buttons etc. (see video on my example site below)
Try resizing your browser while looking at their examples. Pretty much, you define class="col-xs-12" if you want it to appear as 12/12 width of the row on extra small (mobile) and LARGER devices, and you can mix them class="col-xs-12 col-md-6" so it will split the row on larger (tablet) size devices. It's the number 1 repository on GitHub, and only takes about 30 minutes to read through the Grid Layout and search around for "Nav" and "Button" elements.
I recently made a quick site http://neaumusic.github.io, feel free to check it out, and good luck
Two ways:
1) Set margin-left: auto; AND margin-right: auto; to the containing div OR
2) Set display:flex; AND justify-content:center;to the parent container.
Google flex box for a little more information, its very useful for layout once you get the hang of it.
As stated in the comments, the center tag is no longer supported.
What about if you try #form-container { text-align: center; } ? It will center all children, including button.
I would definitely recommend using flexbox, the only issue being ie8/9 support.
It really makes layout so much easier and you don't have to create very specific, often arbitrary margins to get your stuff to align nicely, particularly vertical alignment.
Your alignment options are split between the container and the items. It does row and column layout too.
Here is a link I used to get me started.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I love the way slack did their highlight of keywords and values in their search I wanted to do something similar.
For those who don't know how it looks a screenshot :
when you inspect slack dom and css, it's something like this
<div style="position: relative;">
<input id="search-query">
<div class="highlighter_underlay">
regurlar text that doesn't match keyword:value goes here
<span class="modifier">key:</span>
<span class="keyword">value</span>
or here
<span class="ghost_text">hint</span>
</div>
</div>
So i'm positioning div over input using absolute positioning, setting .highlighter_underlay text to equal contents of value, tokenize input, adding nice styling to .modifier and .keyword - all easy and works and looks great.
But there is one thing i don't know how to deal with.
Notice that input has a fixed width, but you can enter more text into input and it will overflow and be hidden.
Question is how do you move your overlay div in sync with text input text as it has to align? Please notice that div overlay had to be moved.
It seems it's some css positioning trick, as i don't see any css properties changing when i type more text into input so i don't think it's javascript, neither i could find anything specific in their css that would do that ...
Any ideas?
Here's a link to a prototype:
http://codepen.io/anon/pen/dYZzeB
One method to move an element relative to its parent is to use the CSS combination of:
Parent element using: position: relative
Child element using: position: absolute
CODEPEN Example: This simple example illustrates the relative relationship.
In the live Slack code you referenced, the actual styling box is coming from the pseudo element ::before. When this is set absolute to its relative-set parent, it will follow the relativity of that parent -- thus enabling it to track left and right relative to the parent.
A simple question but large impact on appearance.
I want text indented from cell border and have tried style=text-indent: 4px (not formatted so it displays properly here) but while the first line is indented, the lines after the <br> tags are not indenting. Please help. I need to use div because of some Javascript. Here is flawed code:
<td>
<div id="navbar" style="text-indent:4px"><b>View by:</b><br>
Popular<br>
Trending<br>
</div>
</td>
text-indent is only supposed to touch the first line. Use margin (or margin-left or padding or etc) if you want to adjust the entire block.
Try adding paddding to element, that holds your text you want to indent.
<td style="padding:5px;">text</td>
I've got some text and I need it to overflow off the left side of its container (I hide the overflow). Basically, I want it to look like this:
Apparently, you have to you direction: rtl; to do this. Fiddle here.
The problem is that this changes some of the order of the text: hello, world? is displayed as ?hello, world, and 1+2=3 is displayed as 3=1+2.
I've tried playing with the unicode-bidi property, but I can only get that to put things completely right to left.
So, here's the actual question: How can I get text to overflow off the left side of its container without reordering the text?
Try:
text-align:right;
white-space:nowrap;
overflow:visible;
If you have a specific block of text you need to manipulate try the text-indent property with a negative value like so:
text-indent: -20px
This probably won't work for dynamic text though.
You will need to wrap the English text into a span which has direction LTR, and the overflowed text has "inline-flex" like the following:
<div style="direction:rtl;width:150px;overflow:hidden;text-align:right;white-space:nowrap;">
<div style="display:inline-flex">
<span style="direction:ltr;">Hello people, I'm asking: 1+1=2, or what???</span>
</div>
</div>
You will get: http://codepen.io/anon/pen/xKfGa
It is some how complicated, but I think this is the only right way, although it won't display perfectly on IE.
I'm having a little CSS problem with a list of thumbnails. Here's an example:
http://jsfiddle.net/22hs8/
The problem is that when the link is too long to fit in the 150px block it will push the image down. By using inline-block on the list elements instead of a float I could get the images to line up properly, but now I want to have the links at the same height as well.
One thing I tried is making the links itself a block (or surrounding it by a div) and giving that a height, but that would mean they are always the same height even if none of the links uses two rules. Also, if a link is so long it uses three lines the same problem would occur.
In short: how do I align the links to the top of the list items, without breaking the image alignment?
To address one issue, you can add vertical-align:top; to the <li> tag in order to align the content to the top of the element, but unfortunately, I don't believe there's a way to resolve the issue entirely without also implementing one of the following methods:
Placing all of the tags in a separate
Specifying a height on the tags
Using javascript to equalize heights
Options
1. Separate Div
By moving the anchor tags into a separate div, they could be given the same width as the images and floated or displayed inline accordingly, but your markup becomes less semantic when you separate the anchor from the content (and may also be programmatically more complex if these are being dynamically generated).
2. Specifying a Height
This option can be thrown out almost immediately because, as you've stated, the anchor lengths can fluctuate to multiple lines. You could specify the height the the largest know line length, but then you'll ultimately end up with unnecessary white space with groups of short links.
3. JavaScript (jQuery)
While It would be ideal to resolve this issue without the requirement of JavaScript, I think it may be the only option that would allow you to preserve the semantics of your markup, and also apply an equal height to each of the anchor tags.
Recommended Solution
I would recommend setting a default height on the anchors of the largest known line length, then applying a bit of jQuery to normalize the heights of the anchors. This way, if the JavaScript parsing fails or JavaScript is disabled, the user still sees a uniform layout (albeit with potentially more whitespace), and with JavaScript active the heights are normalized.
Apply vertical-align:top; to the <li>
Define default height for non-js users
Equalize heights using jQuery:
(function(){
$.fn.equalizeHeights = function(){
return this.height( Math.max.apply(this, $(this).map(function(i,e){ return $(e).height() }).get() ))
}
$(function(){ $('li a').equalizeHeights(); });
})();
Example: http://jsfiddle.net/Eg7hy/
How is this:
http://jsfiddle.net/22hs8/3/
So you're saying that you want the links to not push the content down? I don't see that as being possible unless you don't allow your content to stretch at all. It's natural flow of a page for something above content to force the content down after it if it needs more space.
Have you thought about chopping off the text after a certain number of characters, with a '...' and providing the full text through a title, and providing the full text through a popup (since I assume you're creating some kind of photo gallery)?
The first answer that came to mind was:
"just use a table, it makes this really easy, and works everywhere"
Live Demo
However, I would probably get down voted into oblivion if I posted an answer only containing a <table> tag version, so here's a version using CSS display: table and friends:
Live Demo
Of course, that won't work in IE7 because that browser doesn't support display: table.
I can't think of a way to do this using code closer to your original and display: inline-block, which would also support an arbitrary number of lines. I'd love to see a better way to do this.
HTML:
<div id="container">
<div class="row">
<div class="cell">Some text</div>
<div class="cell">Some more text (too long)</div>
<div class="cell">Some text</div>
<div class="cell">Some text (seriously too long) text text text text text text text text text text text text text</div>
</div>
<div class="row">
<div class="cell"><div class="image">image</div></div>
<div class="cell"><div class="image">image</div></div>
<div class="cell"><div class="image">image</div></div>
<div class="cell"><div class="image">image</div></div>
</div>
</div>
(you could change some of those div tags into ul and li if you wanted to)
CSS:
#container {
display: table
}
.row {
display: table-row;
text-align: center
}
.cell {
display: table-cell;
width: 150px
}
.image {
width: 150px;
height: 150px;
background: grey
}
Add vertical-align:top; to the images.