I have maybe a little bit strange task, but I belive there is no better solution. I need to have <ul> in some container which width is changeable and with inlined <li> elements of fixed width. I should (and already found solution) put spaces between <li> elems of same width. Width of spaces is changes dynamicaly and depends of parental container width. Again, this <li> items have fixed width.
I also should place some links above this described elements. For some reasons links must be in other <ul> element. They also wrapped in inlined <li> elems. And I want them to be positioned right above described <li> items. This can be done by setting fixed width of <li> items as above. Now, the problem is that text in every link is actualy have different width and will break into two lines, but I must place it into one line.
So I want to trick browser: text will be overflowing <li> items.
.liElem {
width: 100px;
height: 20px;
overflow: visible;
}
But, as you may guess, text is breaking into two lines and overflowing actually the bottom of list items, not the right side.
The effect I wanted can be done by inserting insted of spaces in text like this: <li>Add to Favourites</li> .
So, my question is this: how in css-way make usual text NOT to break into several lines ?
.nobr { white-space:nowrap; }
Related
I'm looking for a HTML/CSS solution to a problem we've encountered on a site we're building.
I am happy to implement a JavaScript based solution if I need to, but I'd prefer it was handled natively.
We have content managed text which needs to sit inside a designated area but wrap if it exceeds the available width.
Behind the text is a background colour with opacity.
When the text is short, due to the float, the container collapses to the width of the text.
When the text is long, and a wrap occurs, the container hangs out at the maximum width, even though the text inside has wrapped underneath, so there's a small section of background colour on the right side (which isn't big enough for the wrapped word)
I want the container to collapse to the edge of the previous word so it doesn't "look like" there is space for the wrapped word, when it is very close.
HTML
<div>
<p>Crack the Shutters Open Wide for Parkside Paradise</p>
</div>
CSS
body div {
background-color: #AAFF3B;
max-width:80%;
padding:20px;
display:inline-block;
float:left;
}
body p {
display:inline-block;
background-color: #FFAA3B;
position: relative;
float:left;
white-space:pre-line;
clear:left;
}
Here is a JSFiddle: http://jsfiddle.net/nmuot8bm/3/
If you look at the 3rd example, you can see a small amount of padding on the right hand side of the orange box, where the word porttitor has wrapped underneath to a new line but the orange container still sits at the maximum width, despite the float.
If line breaks are introduced by the content editors (e.g. between vestibulum and porttitor as per example 4) then the container collapses correctly.
What I think is happening is the container grows before the text wraps and the browser doesn't recompute the width after wrapping?
Here's a picture of my test case shown in the JSFiddle:
Here is a picture of the fault on the staging site (before separated out to a JSFiddle):
You can see that the text has wrapped, but the container has not collapsed, leaving a big gap of background colour.
n.b. We can emulate this by doing text-align:justify but then the spacing between the words is not consistent with the rest of the text on the site.
edit: I see that this question may be a duplicate. I swear I did research before I posted!
max-width adjusts to fit text?
CSS Width / Max-Width on Line Wrap?
Wrapping text forces containing element to max-width
Shrink DIV to text that's wrapped to its max-width?
I think that the general consensus/conclusion is that it is not possible without bleeding edge CSS and I should use a JavaScript solution.
I have added a few more examples to my JSFiddle: http://jsfiddle.net/nmuot8bm/6/
including the JavaScript solution from here: https://stackoverflow.com/a/33246364/647728
Not possible with CSS...that's the way the inline box model works
JS example/solution can be found on the JSFiddle
If the problem is floated elements collapsing the parent container, there are many solutions; the easiest among them being adding overflow: hidden or display: table to the parent (the thing collapsing). Also be aware that inline-block and floated elements are essentially redundant.
I know that this questions has been asked several times, but I couldn't find a solution for this specific situation.
So, here's what I have:
DEMO
Basically it's a list of rows:
<ul>
<li>
<label>
<span>element1</span>
<span>element2</span>
<span>element3</span>
<span>element4</span>
</label>
</li>
<li>
<label>
<span>element1</span>
<span>element2</span>
<span>element3</span>
<span>element4</span>
</label>
</li>
</ul>
And the span elements are all inline-blocks and label has text-align: justify.
Everything works as expected, and as I want it to, but the vertical alignment. All the items are attached to the top, kind of. I thought it was the usual inline-block annoyance of the empty line afterward, but I tried setting the font-size to 0, or removing the white space and nothing changed.
This seems to have to do with the line-height – somehow it makes that pseudo element take up additional space. You can mitigate the effects a little bit by setting line-height:0 for the label and the li, and then a line-height:1 for .product-row-price again … but that still doesn’t look that good, it still leaves some space at the bottom. (And a lower line-height will make the text in .product-row-price overlap.)
I think a better solution would be a negative margin-bottom for the label, and overflow set to hidden:
.product-row-label {
margin-bottom: -1.5em;
overflow: hidden;
/* rest of existing styles */
}
http://jsfiddle.net/db0onh6c/7/
FYI: div in span is invalid HTML – so you should replace those divs inside of .product-row-price with spans and make them block.
Still doesn’t look to pretty though, because the different widths of the content in the first and third column makes the whole thing look uneven, so the content in the second column doesn’t align horizontally. (Although with a set width for the first and last column that could be avoided, if you’re ok with a little space at the right of the “shorter” values in the third column – something like this: http://jsfiddle.net/db0onh6c/8/)
Maybe you could try to set property display: table; to <label> elements and display:table-cell; to your <span>elements. This fix element to display as a <table> html element. Just fix padding and margin display properly.
DEMO
I made a website with div's, classes and everything a website needs. But when I resize the window all the inner text moves over the NavArea and Buttons overlap. Like even on StackOverflow the top of the page has the search text box and when I resize the window it just moves overtop. What's the solution to this? Here is the code--
CSS: http://pastebin.com/2rqinFJw
HTML: http://pastebin.com/u7eXUkwC
Please test the code before you post an answer please, I have tried everything and need an indepth answer that I can understand. I have spent way too long but do not plan to give up!
Ok!
So firstly, a main problem with your programming (as I see it) is that you're using absolute positioning way too often - like honestly, they should nearly never be used for creating a website layout.
Also, this part of your code:
<div id="b1">
<ul>
<li>Home</li>
</ul>
</div>
<div id="b2">
<ul>
<li>Downloads</li>
</ul>
</div>
No offense, this isn't the correct layout for a navigation bar. Your <a> tags should go inside your <li> tags, not outside! Also, you split your navigation up into two - this is completely unnecessary, while also using position: absolute; on a navigation bar - no need at all.
Here's what it should (or could) be:
<div id="b1">
<ul>
<li>
Home
</li>
<li>
Downloads
</li>
</ul>
</div>
Note how I've placed the two in the same <ul> tag, and also put the <a> tags inside of the <li> tags. I've also rearranged your CSS to do the same thing.
Not sure what your <div class="imageArea"></div> does, but I just threw it in there - it appears you got no CSS code for it anyways.
What I did to the main layout, was I moved it into a <div class="container">, which I used the following CSS on:
width: 1000px;
margin: 0 auto;
This will create a container of sorts that fits in the middle of your screen. You can adjust this width if you want - I just find that 1000px suits my needs rather well.
Also, I've floated both elements to the left of this - this allows the two <div> tags - your navigation section and your textBody, to go next to each other. I made them with a width of 20% and 80%.
Since I need some spacing in the middle, I added padding-right: 10px; to your navigation. Since this makes a total width of 100% + 10px (which would push the textBody down), I added box-sizing: border;box; in order for the padding to be counted into the width (so that it makes a total width still 100%).
Here's the final HTML and CSS:
http://pastebin.com/ZC2TFir2 (HTML)
http://pastebin.com/wEwzRP66 (CSS)
I don't think many will give you an answer as detailed as this (I know I normally wouldn't) - but in all honesty, I believe this webpage could be designed a lot better (plus I'm bored and work hasn't started yet).
Positioning everything absolutely is not a good practice. Absolute positioning will allow elements to move on top of one another. Absolute positioned elements don't care about the layout of other elements.
If you want a nav bar to float to the left of the text, use the float property, like so:
#nav {
float: left;
}
See this Fiddle: http://jsfiddle.net/bex5b0by/
You could just put in
#nav {
position: relative ;}
And after position:relative put in margin-left: -200px or whatever you want it to be. (You can use margin-left/right/top/whatever you need OR left/top/right/etc. : -number px / number px;
That means you place your div in relation to the other divs. But for this to happen you have to have the divs in one another. (< BIG div>
I've created an horizontal CSS/HTML menu with some jQuery to move elements into a dropdown if the parent is not wide enough to keep everything on one line. When elements move into the #dropdown the resulting <ul> appears to have its width limited and I don't understand what it is doing that?
jsFiddle
On line 7 of your fiddle, you are dynamically creating a <ul> which contains the menu items that do not fit into your menu. It's that <ul>'s width that is too small for the text, which makes the text go to multiple lines. If you give that menu a style of white-space:nowrap, it will make the <ul> take up as much width as it needs. The code below does it inline, but it's just an example. http://jsfiddle.net/wf7h8/1/
var dropDownHTML = "<li id='dropdown'><a href='#'>Menu</a><ul style='white-space:nowrap;'></ul></li>";
I have an unordered list held within a div tag.
I have a tree like structure of list elements containing additional lists e.g.
<ul>
<li>
<ul>
<li>
</li>
</ul>
<li>
</ul>
When i hover over a list element that contains a sublist the sublist displays as a popup within the containing div element. This list can be up to three layers deep which presents a problem. The width i have to display my containing div is limited (170px width/400px height)so i'd like the pop up list elements to extend beyond the containing div however I'm struggling to get this working.
Basically I'd like the vertical scroll bar to be present but the width scroll bar hidden. Overflow on the width should extend outside the containing div. I've tried variations on overflow-y/x but I can't seem to get a balance that does what I need. i also haven't been able to get the pop up elements to extend outside the containing dev.
jsfiddle below to provide an example. And an image of the issue below:
http://jsfiddle.net/sapatos/tvZUX/1/
The scroll effect is due to the following CSS code:
overflow-y: scroll;
If you take it out, the scroll will go away for the width.
The idea of putting a sub menu within a submenu, etc.. can be seen in this example.
You can also try this DEMO
I altered your code to reposition everything using margin-left. But to be honest, your code is extremely vast, I would suggest taking a portion of it and then working on it. My last thing I want to note is to not get too confused when you start going further into the sub menus.. it is definitely a complex thought process.
EDIT Here is the last example I can give you... I do want to caution you that this may not be exact in every browser and there may be some better way to positioning everything. Here it is:
DEMO
This does however become much harder when the contents inside of the li tags are different. An example of this is when you have only one line of text vs two lines of text, which will render the absolute positioning utterly useless. It may be easier to style these vertically than horizontally and there could be a better solution but that could entail using JavaScript or a derivative of that language.