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;
}
Related
What should I do to align the first 3 buttons in the center of the bar?
#navbar{
list-style-type: none;
position: relative;
top: -4px;
padding: 0;
margin: 0;
overflow: hidden;
background-color: #212121;
}
In your navigation bar you can put these three in one separate div and then align it to center
Hello friends to center a that your
menu options (nav) you only need
to use the text-aling rule: center;
,why ? Because the menu list are
formed by '' li '' or '' ul '' and we
only apply this rule to list and
ready :), greetings from mexico;)
<html>
<head>
<style>
body{
margin: 0px;
}
.navbar{
height: 60px;
background-color: #bbb;
line-height: 60px; //this will center inline elements in your navbar
}
.container{
margin-left: 5%;
margin-right: 5%;
}
.btn{
background-color: white;
padding: 10px 20px;
width: 100px;
border: none;
border-radius: 2px;
display: inline;
}
.nav{
display: inline;
list-style-type: none;
}
.nav li{
display: inline;
}
</style>
</head>
<body>
<!--Navbar-->
<nav class="navbar">
<div class="container">
<ul class="nav">
<li><button class="btn">Button1</button></li>
<li><button class="btn">Button2</button></li>
<li><a class="btn"><a> Button</a></li>
</ul>
</div>
</nav>
</body>
The above code should work for you. I have shown buttons using anchor tag and also button tag
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 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 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/
http://www.wedevents.com.au/index.asp
No problem in FF but in IE there are some unwanted white margins appearing around the images in the top and bottom menu.
Any ideas on how to remove the unwanted margin?
HTML:
<ul class="topnav">
<li>
<a href="http://www.wedevents.com.au/index.asp">
<img src="/images/menu_home.gif" name="home" onMouseOver="over(0)" onMouseOut="out(0)" alt="Home" /></a>
</li>
<li>
<a href="http://www.wedevents.com.au/about.asp">
<img src="/images/menu_about.gif" name="about" onMouseOver="over(1)" onMouseOut="out(1)" alt="About" /></a>
</li>
CSS:
ul.topnav {
list-style: none;
padding: 0 85px;
margin: 0 auto;
width: 630px;
height: 36px;
background: #b09a27;
font-size: medium;
text-align: left;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0;
position: relative;
}
ul.topnav li a{
padding: 0;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
There is no margin or padding on the image. The user agent style is defaulting to putting a border around the image. Set border: 0; on the image. Also see the other answer for reset.css to prevent this sort of thing in the future.
Try using a reset.css Here's one I like http://meyerweb.com/eric/tools/css/reset/