Here's a live demo for your convenience: http://jsfiddle.net/Lr6NQ/2/
On ul#navigation ul, if there is an explicit width, the links appear on their own "line" as intended. However, as the links have varying widths, I'd rather leave it as "auto" so the <ul> isn't really wide for lists with short content.
How can I prevent the link from line breaking, without setting an explicit width. If the link is one word, I get the desired effect, but with multiple words, the <ul> is only as wide as the longest word.
ul#navigation li {
white-space:nowrap; /* <-- ADDED */
float:left;
width:auto;
padding:10px;
margin-right:10px;
position:relative;
}
If you want to shorten long lines add a <br /> in the anchor.
You can use non-breaking spaces. Instead of spaces in the link, use .
Related
I have a CSS problem I need help solving.
I have an ul for showing a column. I've hardcoded the width of this ul to 220px. Inside it, I have li's. Each li has a text link.
Problem is, because I have hardcoded the ul width to 220px, the li are inheriting this, even though they don't need so much width. If I see the space each li text is taking, this is what I see:
How can I make each li text ONLY take as much space as it needs for the text itself ?
I want to do this because I have a picture in the background which has a map on it .. The extra space taken by li's means that the map isn't working in areas where it should work (because li's are on top of the map) ..
Use display:inline-block; Or display:inline;.
Or:
Use float:left; on each li then have a clear:both; element after each li.
You can use display:inline-block;
add float:left to your <li>s.
& put a <div style="clear:both;"></div> after each.
How to reduce the gap between two video tag, I have tried with margin and padding its not worked any help are appreciated
DEMO
My HTML
<div class="videoTest">
<video controls="controls"></video>
<video controls="controls"></video>
<video controls="controls"></video>
<video controls="controls"></video>
</div>
My CSS
.videoTest > video{
border:1px solid red;
margin:0;
padding:0;
}
The <video> element is an inline element by default. That's why there are gaps between them representing the whitespaces and/or line-breaks in your markup.
.videoTest > video {
display: inline-block;
border:1px solid red;
margin:0;
padding:0;
}
.videoTest {
font-size: 0;
}
By using font-size: 0, the line-breaks and whitespaces are being kind of ignored and you get rid of the gaps. Their size is set to 0.
Updated Fiddle
This is a common workaround when working with inline-blocks and is in some situations superior to floats when it comes to centering for example.
try this
http://jsfiddle.net/Ng6XU/5/
.videoTest > video{
border:1px solid red;
margin:0px;
padding:0;
float:left;
}
TRY THIS CSS :
.videoTest > video{
border:1px solid red;
margin:0;
padding:0;
float:left;
}
I have found the link which gives various method to solve this issue, may be helpful to some one Reference : http://css-tricks.com
Published April 21, 2012 by Chris Coyier
Here's the deal: a series of inline-block elements formatted like you normally format HTML will have spaces in between them.
In other words:
<nav>
One
Two
Three
</nav>
nav a {
display: inline-block;
padding: 5px;
background: red;
}
Will result in:
Often highly undesirable (check the link for the output)
We often want the elements to butt up against each other. In the case of navigation, that means it avoids the awkward little unclickable gaps.
This isn't a "bug" (I don't think). It's just the way setting elements on a line works. You want spaces between words that you type to be spaces right? The spaces between these blocks are just like spaces between words. That's not to say the spec couldn't be updated to say that spaces between inline-block elements should be nothing, but I'm fairly certain that is a huge can of worms that is unlikely to ever happen.
Here's some ways to fight the gap and get inline-block elements sitting directly next to each other.
Remove the spaces
The reason you get the spaces is because, well, you have spaces between the elements (a line break and a few tabs counts as a space, just to be clear). Minimized HTML will solve this problem, or one of these tricks:
<ul>
<li>
one</li><li>
two</li><li>
three</li>
</ul>
or
<ul>
<li>one</li
><li>two</li
><li>three</li>
</ul>
or with comments...
<ul>
<li>one</li><!--
--><li>two</li><!--
--><li>three</li>
</ul>
They're all pretty funky, but it does the trick.
Negative margin
You can scoot the elements back into place with negative 4px of margin (may need to be adjusted based on font size of parent). Apparently this is problematic in older IE (6 & 7), but if you don't care about those browsers at least you can keep the code formatting clean.
nav a {
display: inline-block;
margin-right: -4px;
}
Skip the closing tag
HTML5 doesn't care anyway. Although you gotta admit, it feels weird.
<ul>
<li>one
<li>two
<li>three
</ul>
Set the font size to zero
A space that has zero font-size is... zero width.
nav {
font-size: 0;
}
nav a {
font-size: 16px;
}
Matt Stow reports that the font-size: 0; technique has some problems on Android. Quote: "Pre-Jellybean does not remove the space at all, and Jellybean has a bug whereby the last element randomly has a tiny bit of space." See research.
Also note, if you're sizing fonts in ems, this zero font size thing can be an issue, since ems cascade the children would also have zero font size. Rems would be of help here, otherwise any other non-cascading font-size to bump it back up.
Another weirdness! Doug Stewart showed me that if you use #font-face with this technique, the fonts will lose anti-aliasing in Safari 5.0.x. (test case) (screenshot).
Just float them instead
Maybe they don't need to be inline-block at all, maybe they can just be floated one way or another. That allows you to set their width and height and padding and stuff. You just can't center them like you can by text-align: center; the parent of inline-block elements. Well... you kinda can but it's weird.
Just use flexbox instead
If the browser support is acceptable to you and what you need out of inline-block is centering, you could use flexbox. They aren't exactly interchangeable layout models or anything, but you might get what you need out of it.
Since the video tag defaults as an inline-block element, simply make the video tag a block element in CSS. Bob's your uncle.
video {display: block;}
In my case, I was using 640x480 for the video size. I changed it to 640x360 and that removed the white space above the video.
I would say that in my case setting this css helped:
height:auto;
I have a menu, based on nested, unordered lists. All styling and display is done via css.
The menu is wrapped in a fixed-width div. For some top-level items, the submenu contains too many items for one line and these wrap onto a second or even third line, expanding the div height. This works fine.
What I am trying to do is to add a horizontal line/divider/border between the rows of submenu items, irrespective of the number of rows, and equal in width to either the row below or above (preferably below). Obviously, no line will be present if there is only one row of items.
I tried to add a background along the top of the entire <ul id="submenu"> and then remove it from just the first line using ul#submenu:first-line{}, then realised that this cannot be done (headslap).
I then altered the structure of the menu to use <p> elements nested in divs, again using div#submenu:first-line{}, but testing this gives me strange results. For example, a background colour will show in the first line, but only half the height of the submenu items; background images appear halfway up the submenu items. Sometimes nothing shows until I click on the current top level menu item.
I even tried replacing the list structure with a single <p> element, containing a series of <a> elements, and got the same results.
The evidence suggests that I am not using the :first-line pseudo-element properly, but reading around the web suggests that this should work.
Any suggestions as to what I am doing wrong and how to get these horizontal lines, preferably with CSS and without JS?
Here's my code:
#subMenuContainer {
width:100%;
margin-top:20px;
}
#subMenu {
width:600px;
margin:0 auto;
text-align:center;
background:#ddd;
}
#sub {
border-top:2px solid green;
padding:0px;
line-height:30px;
}
#sub::first-line {
border-top:2px solid red; /* doesn't work */
background-color:pink; /* works */
color:yellow; /* doesn't work */
}
#sub p {
display:inline-block;
padding:0px;
}
#sub p a {
padding:0px 0px;
line-height:1em;
}
<div id="subMenuContainer">
<div id="subMenu">
<div id="sub" >
<p>MenuItem1</p>
<p>MenuItem2</p>
<p>MenuItem3</p>
<p>MenuItem4</p>
<p>MenuItem5</p>
<p>MenuItem6</p>
<p>MenuItem7</p>
<p>MenuItem8</p>
<p>MenuItem9</p>
<p>MenuItem10</p>
</div>
</div>
</div>
And the same in jsfiddle.
I think you should be using the :first-child rather than the :first-line pseudo class.
:first-line refers to the first line of a text element
:first-child refers to the first child element of a parent. e.g. the first li in your ul.
See http://www.w3schools.com/css/css_pseudo_classes.asp for more details.
If that doesn't sort you out, can you post your markup?
V.
I have a series of elements that have a picture with a block underneath it containing text. Occasionally, the text becomes too long and breaks onto a second line. It looks like this:
I need to vertically align the text so it is always centered. I created a jsfiddle here to help provide an answer: http://jsfiddle.net/WDChT/
Any ideas how I can do this given my html/css?
You can use display:table-cell with vertical-align:middle:
http://jsfiddle.net/WDChT/3/
What I added:
span.redStrip {
padding:0 11px;
height:36px;
}
span.redStrip p {
vertical-align:middle;
display:table-cell;
height:36px;
padding:0;
margin:0;
}
Few things to note:
Support is lacking in older versions of IE (what else is new?)
You have <p> inside <span> which is invalid. You should wrap them in reverse: <span> inside <p>. I used your original markup for the demo.
I moved your padding to the inner element (the <p> with the vertical alignment set) and removed it from the outer element (the wrapper <span>). Once again, these elements should be reversed.
in the container box:
line-height:60px;
height:60px;
inner box:
display:inline-block;
vertical-align:middle;
http://jsfiddle.net/8QMGf/
note that inline-block doesn't work with older IEs, but the result will not be so bad
HTH
OK, I have a list (<ul>) then inside each <li> element I have an <a...>
Here are all the applicable CSS items to the <a> tag
.search_area li a {
font-size:11px;
}
sResCntr li {
list-style-type:none;
}
body {
font-family:Arial;
}
Everything looked great, until I put that font-size:11px in there. The problem is that the hyperlinks wrap to multiple lines within the list (which is fine). But when I decrease the font-size, the last line of the hyperlink always has a larger gap between it and the line above it than the other lines. All the other lines look good, but the last line looks like it is 1.5 spaced or something. I have adjusted the line-height property, but always the last line is larger than the rest.
If you need a demo to look at to see what I mean, I can arrange it when I get home.
here is some HTML:
<ul class="sResCntr">
<li>
<a id="blah" value="6048" href="blah blah"> This is some text that is really long. In fact so long it goes to multiple lines.
</a>
</li>
<li class="alt">
<a id="blah 2" value="5946" href="blah blah"> some more super long text which will wrap to multiple lines. In fact, hopefully, so long that it wraps to at least 3 lines in whatever container you put it
</a>
</li>
</ul
Of course, that has to be in a container which is fairly narrow (mine is 150px if I remember)
That's because of the line height. The line height is normally calculated based on all the characters on the line. The 1st line has the larger line height and the 2nd line has the smaller line height where it wraps. You might have to specify a fixed line height your link:
.search_area li a {
font-size:11px;
line-height:14px; /* matching the other lines */
}
Alternatively you could put a character after your hyperlink so when it wraps the 2nd line will get the line height of the characters outside the hyperlink. Something like this:
<li>Some Text <a href='#'>Your Link</a> </li>
Edit from OP:
This answer led me to try the following which worked perfectly:
I added the following to my CSS:
.search_area li
{
line-height:0px;
padding:5px;
background-color:#F3F3F3;
}
While there is no text in the li, outside of the hyperlink, the line-height of the li, was still messing me up. By getting rid of it, the hyperlink is allowed to determine the spacing.
The font-size / line-height of the parent (<li>) is being applied to the last line (of <a>, because <a>'s default display style is inline.)
Setting the display style of <a> to block works for me.
.search_area li a {
font-size: 11px;
display: block;
}