I have this problem. I searched the site and others were having similar problems, but none of the answers seemed to work. Those included setting line-height to 0px; and setting all margins/paddings to 0px. I use Google Chrome's Inspect Element material to check the margins/paddings. I hovered over my "a" element and "li" element to see if they had any unnecessary paddings or margins, but they didn't.
What was weird is that they had a little white space, not occupied by any element in the entire document, between each link.
Right now, as there are no borders between the text, it is unrecognizable, but the space around the "a" in Link4 is smaller than the space around the text in Link1. The width of the first "li" element is strangely 4px wider than the 4th "li" container, and there is a little white space. I want to get rid of the white space, any ideas?
Here is the code:
CSS:
html {
overflow-y: scroll;
}
body {
background-color: #ffdeff;
overflow: hidden;
}
#wrapper {
width: 1000px;
height: 0px;
overflow: hidden;
margin: auto;
background-color: white;
border-left: 1px solid rgb(210, 210, 210);
}
#header {
width: 1000px;
height: 0px;
overflow: hidden;
margin: auto;
}
#header-toolbar {
width: 1000px;
list-style-type: none;
border-radius: 3px;
position: absolute;
}
#nav-position {
position: absolute;
float: left;
padding: 0px;
margin: 0px;
}
.nav-link-container {
background-color: #FF66CC;
display: inline;
padding: 0px;
text-align: center;
}
.nav-link {
padding: 0px;
margin-top: 5px;
margin-bottom: 5px;
text-align: center;
line-height: 0px;
display: table;
display: inline;
margin: 0 auto;
}
HTML document:
<body>
<script src="jquery-1.9.1.js"></script>
<script>
</script>
<div id="wrapper">
<div id="header">
<div id="header-toolbar">
<ul id="nav-position">
<li class="nav-link-container">
<a class="nav-link">Link1</a>
</li>
<li class="nav-link-container">
<a class="nav-link">Link2</a>
</li>
<li class="nav-link-container">
<a class="nav-link">Link3</a>
</li>
<li class="nav-link-container">
<a class="nav-link">Link4</a>
</li>
</ul>
</div>
</div>
<div id="main"></div>
<div id="footer"></div>
</div>
</body>
</html>
Anything helps! Thank you very much!
there are some spaces when you put <li> to new line. so one solution is to add them all in same line like here: http://jsfiddle.net/6tzxj/1/
Related
I have an element (on which I know the width & height, I can't remove the height) with some elements inside. I've simplified it in the snippet so I just have a title (with unknown length) and a list.
I need the list (only the list, not the whole container) to be overflow: auto but I can't figure it out since I don't know its height and I can't use flexbox (IE9+ :/).
I want to avoid using JavaScript for this (I can do it in JavaScript but I really don't want a FOUC).
div {
margin: 20px;
padding: 15px;
border: 1px solid;
width: 200px;
height: 400px;
}
h1 {
margin-top: 0;
border: 1px dashed red;
}
ul {
margin: 0;
padding: 0;
overflow: auto;
}
li {
display: block;
padding: 5px 0;
border-top: 1px solid;
}
<div>
<h1 contenteditable>
My long title that can be on multiple lines
</h1>
<ul>
<li>a list</li>
<li>of element</li>
<li>that can</li>
<li>be long</li>
<li>that should</li>
<li>overflow auto</li>
<li>bla</li>
<li>bla</li>
<li>bla</li>
<li>bla</li>
<li>bla</li>
</ul>
</div>
You cannot make the height of both dynamic, without something like JavaScript.
For one to overflow, it needs a reference. Why would the list overflow but not the header for example?
You can go set the list position to absolute, but then you need coordinates for top and bottom, which you won't have because in CSS you can't get that from other element (the header).
Without something like flex, you other option is JS I think.
You can render the header and list with visibility hidden (not display block, so their dimentions can be calculated), and remove that once you apply your JS for minimal FLOC effect.
just add overflow-y: auto; to your container element
.wrapper {
margin: 20px;
padding: 15px;
border: 1px solid;
width: 200px;
height: auto;
display: inline-block;
}
h1 {
margin-top: 0;
border: 1px dashed red;
float: left;
}
.container {
overflow-y: auto;
height: 300px;
width: 100%;
float: left;
}
ul {
margin: 0;
padding: 0;
overflow: auto;
}
li {
display: block;
padding: 5px 0;
border-top: 1px solid;
word-break: break-word;
}
<div class="wrapper">
<h1 contenteditable>
My long title that can be on multiple lines
</h1>
<div class="container">
<ul>
<li>a list</li>
<li>of element</li>
<li>that can</li>
<li>be long</li>
<li>that should</li>
<li>overflow auto</li>
<li>blaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</li>
<li>bla</li>
<li>bla</li>
<li>bla</li>
<li>bla</li>
</ul>
<div>
</div>
If you can't use flexbox, use CSS tables:
Set the height of the table
Set height: 0 to the title cell to make it be only as tall as required by its contents.
Wrap the ul inside a table-row, which will take the remaining space left by the title.
Take the ul out-of-flow (to avoid circular definitions) and make it have the same sizes as that wrapper.
#container {
display: table;
margin: 20px;
padding: 15px;
border: 1px solid;
width: 200px;
height: 400px;
}
#container > h1 {
display: table-cell;
height: 0;
margin-top: 0;
border: 1px dashed red;
}
#container > div {
display: table-row;
position: relative;
}
#container ul {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 0;
padding: 0;
overflow: auto;
}
li {
display: block;
padding: 5px 0;
border-top: 1px solid;
}
<div id="container">
<h1 contenteditable>
My long title that can be on multiple lines
</h1>
<div>
<ul>
<li>a list</li>
<li>of element</li>
<li>that can</li>
<li>be long</li>
<li>that should</li>
<li>overflow auto</li>
<li>bla</li>
<li>bla</li>
<li>bla</li>
<li>bla</li>
<li>bla</li>
</ul>
</div>
</div>
Here my JS solution for now, I'd like to have it in CSS if possible but it's working in the meantime:
const height = container.clientHeight - list.offsetTop
list.style.height = height + 'px'
There are couple of ways to do it
First would be just remove the height prop on div.
If you don't want to do so.. you can either choose to cut (overflow:hidden) or scroll overflow:scroll the list
ie, you div styling can be:
div {
margin: 20px;
padding: 15px;
border: 1px solid;
width: 200px;
height: 400px;
overflow: scroll; /* or hidden */
}
or just
div {
margin: 20px;
padding: 15px;
border: 1px solid;
width: 200px;
}
EDIT:If you dont want the whole container to overflow (as said in comments) just add max-hight to ul
your ul styling would be something like:
ul {
margin: 0;
padding: 0;
max-height: 100px; /*or anything you think appropriate */
overflow: auto;
}
and rest of the css can be same as in OP.
I have the following markup:
<ul class="info-list">
<li class="info-item">
<div class="name">Name</div>
<img class="preview" src="/Image.png" />
<div class="data-wrapper">
Data
</div>
<div class="description">
Description
</div>
</li>
<li class="info-item">
<div class="name">Name</div>
<img class="preview" src="/Image.png" />
<div class="data-wrapper">
Data
</div>
<div class="description">
Here is a description. More description. Very descriptive.
</div>
</li>
</ul>
And here is the matching style:
.info-list{
text-align: center;
}
.info-item{
margin: 4px;
padding: 10px;
display: inline-block;
cursor: pointer;
background-color: black;
}
.preview{
margin: 4px 4px 4px 0;
float: left;
display: block;
width: 128px;
height: 128px;
}
.data-wrapper{
margin: 4px 0 4px 4px;
float: left;
width: 128px;
height: 128px;
}
.description{
clear: both;
width: 264px;
height: 100px;
}
The problem you will see is that the second element's height is equal with the first, but it is being propped up from the length of the content in the div.description element. This can be fixed by applying white-space: nowrap to either the div.description or the div.list-item elements but this causes the div.description content to overflow to the right. How can I fix this list? I do not want to float the elements because I want them to be centered within the list, but the inline whitespace handling is causing issues for some reason even though the div.description elements are all the same height / width.
Fiddle: http://jsfiddle.net/kap6quf6/2/
The default vertical alignment for inline elements is baseline, so you can set it to middle or top for .info-item so that they align:
.info-item {
margin: 4px;
padding: 10px;
display: inline-block;
cursor: pointer;
background-color: lightgray;
vertical-align:middle;
}
jsFiddle example
I have a menu made up of 5 links. I need each link to be 33% of the available width with spacing between the links. The horizontal and vertical spacing must be the same.
Links must be the same height as the tallest link in there row, even though the length of the link text will vary per link. Ideally all links would be the same height but I doubt this is possible.
The link text is dynamic and will change. This for a responsive website so the page width will vary.
I cant change the HTML at all.
This is for a mobile only website so I dont need to worry about older browsers. I should be fine to use flexbox.
<ul>
<li>
<a href="#">
<span>Link 1</span>
</a>
</li>
<li>
<a href="#">
<span>Link 2 has much longer text than the other links</span>
</a>
</li>
<li>
<a href="#">
<span>Link 3</span>
</a>
</li>
<li>
<a href="#">
<span>Link 4</span>
</a>
</li>
<li>
<a href="#">
<span>Link 5</span>
</a>
</li>
</ul>
My code below works fine in Chrome. The only thing I still need to do is vertically center the link text (see the image below).
The align-items: center property looked promising however If I apply it to the ul then the lis' stop being the same height.
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
ul {
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
width: 50%;
border: 2px solid black;
margin: auto;
}
li {
list-style-type: none;
float: left;
width: 32%;
background: grey;
text-align: center;
overflow: hidden;
margin-bottom: 2%;
vertical-align: middle;
}
li:nth-of-type(2),
li:nth-of-type(5)
{
margin-left: 2%;
margin-right: 2%;
}
a {
display: inline-block;
margin: -10em;
padding: 10em;
}
a {
background: gold;
}
a:hover {
background: green;
}
http://codepen.io/anon/pen/CeiqK
I don't know if this solution that I post here will be valid for you. Anyway, I changed your css a bit to get it:
ul {
margin: 0;
padding: 0;
width: 50%;
border: 2px solid black;
margin: 0 auto;
font-size: 0; /* this fix inline-block margins */
}
li {
font-size: 14px;
list-style-type: none;
display: inline-block;
width: 32%;
min-height: 34px;
background: grey;
text-align: center;
overflow: hidden;
margin-bottom: 2%;
}
a {
display: table-cell;
width: 100em;
height: 34px;
vertical-align: middle;
}
Check it at codepen
Creates this:
I am trying to align a set of images horizontally within a div tag and then display a horizontal scroll bar when the images exceed the length of the div tag. I am relatively new to CSS and have tried everything I can think of. The below code displays my images vertically!!!
Thank you very much for any help.
Inside the body tag:
<div id="TNBox">
<ul class="imagelist">
<li>
<img id="tnimage1" src="images/tn-images/Rio-Street-Art-TN01.jpg">
</li>
<li>
<img id="tnimage2" src="images/tn-images/Rio-Street-Art-TN02.jpg">
</li>
<li>
<img id="tnimage3" src="images/tn-images/Rio-Street-Art-TN03.jpg">
</li>
<li>
<img id="tnimage4" src="images/tn-images/Rio-Street-Art-TN04.jpg">
</li>
<li>
<img id="tnimage5" src="images/tn-images/Rio-Street-Art-TN05.jpg">
</li>
</ul>
</div>
And the CSS:
#TNBox {
width: 500px;
height: 88px;
border: 1px solid black;
position: absolute;
left: 50px;
top: 320px;
overflow-x: auto;
display: inline-block;
text-decoration: none;
}
.imagelist {
list-style: none;
margin: 0px;
padding: 0px;
}
#TNBox{
width: 500px;
height: 88px;
border: 1px solid black;
position: absolute;
left: 50px;
top: 320px;
overflow-x: auto;
display: inline-block;
text-decoration: none;
white-space:nowrap;
}
.imagelist{
list-style: none;
margin: 0px;
padding: 0px;
}
.imagelist li{
display:inline-block;
}
Preview >> jsfiddle (I have styled images too)
Link to fiddle. I also changed the image urls to point to something that exists
http://jsfiddle.net/GVdMz/2/
Here is what I added:
To get the images to display horizontally
.imagelist li{
display: inline;
}
And this will make a horizontal scroll appear if the images extend past the width of #TNBox
#TNBox{
white-space:nowrap;
}
I have a list like this:
<html>
<head>
<link type="text/css" rel="stylesheet" href="testli.css">
</head>
<body>
<ul id='grok'>
<li>
<img src='na' class='cimg' />
<div class='cinner'>
<p>Title, max two lines.</p>
<p>Some longish text, max two lines, causes problems when too long.</p>
</div>
<div style='clear:both'></div>
</li>
<li>
<img src='na' class='cimg' />
<div class='cinner'>
<p>Title</p>
<p>Some longish text here which may wrap some and cause problems..</p>
</div>
<div style='clear:both'></div>
</li>
</ul>
</body>
</html>
// testli.css
* {
margin:0;
padding:0;
}
#grok {
list-style-type: none;
width: 200px;
}
#grok li {
background-color: lightgreen;
margin: 5px;
padding: 5px;
text-align: left;
}
.cimg {
width:70px;
height:44px;
float:left;
}
.cinner {
float: left;
margin: 0px;
padding: 0px;
margin-left: 10px;
font:14px;
}
when the text in the p elements is short, the layout behaves as I want - the thumbnail and the text should appear as if they're in two separate columns. I'm basically looking to recreate the thumbnails youtube has for recommended items - thumbnail on the left, some text in another column to the right of it. Title and text each allowed two lines of text each.
If the text is too long, the cinner div gets placed below the thumbnail. What's the right way to force it to always be to the right?
Thanks
You could do it by setting a min-height on the <li> and then absolutely positioning the image to the left of the title and description:
#grok {
list-style-type: none;
width: 200px;
}
#grok li {
position: relative;
margin: 5px;
padding: 5px;
min-height: 44px;
/* min-height fix for IE6. Ideally this would be in an IE6 only stylesheet */
height: auto !important;
height: 44px;
background-color: lightgreen;
}
.cimg {
position: absolute;
left: 0;
top: 0;
width: 70px;
height: 44px;
}
.cinner {
padding: 0 0 0 80px; /* Makes room for the image so it doesn't overlap text */
font: 14px;
}
Add max-width to .cinner (if I don't mistaken - max-width: 110px).