I have a DIV which is 900% wide, I'm trying to display 5 images in a line but the 5th one always wraps around and I can't work out why?
I'm well under 900px with my 5 images.
ul{
margin:0px;
padding:0px;
}
li{
margin:0px;
padding:0px;
list-style:none;
}
.photo-preview{
width:178px;
margin:0px;
display:inline-block;
text-align:center;
}
.bottom-row{
width:900px;
}
<div class="bottom-row">
<ul>
<li class="photo-preview"><img src="photo/2.JPG"></li>
<li class="photo-preview"><img src="photo/2.JPG"></li>
<li class="photo-preview"><img src="photo/2.JPG"></li>
<li class="photo-preview"><img src="photo/2.JPG"></li>
<li class="photo-preview"><img src="photo/2.JPG"></li>
</ul>
</div>
Most browsers add a little bit of space between inline list items. YOu can use this funky formatting hack to stop that happening. Or you could just float them left if that suits your needs.
<div class="bottom-row">
<ul>
<li class="photo-preview"><img src="photo/2.JPG"></li><li class="photo-preview">
<img src="photo/2.JPG"></li><li class="photo-preview">
<img src="photo/2.JPG"></li><li class="photo-preview">
<img src="photo/2.JPG"></li><li class="photo-preview">
<img src="photo/2.JPG"></li>
</ul>
</div>
Here you go!
Like #WizardCoder said, there will always be a tiny bit of spacing between images but a -1px will fix it for you!
EDIT: I have tailored the question to be exactly the code you posted on JSFiddle. Anyways,
You need to have your display: inline on the li item.
You need the class photo-preview on the img and not on the li item.
ul {
margin: 0px;
padding: 0px;
}
li {
margin: 0px;
padding: 0px;
list-style: none;
display: inline;
}
.photo-preview {
width: 178px;
margin: -1px;
text-align: center;
}
.bottom-row {
width: 900px;
}
<div class="bottom-row">
<ul>
<li><img class="photo-preview" src="https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg"></li>
<li><img class="photo-preview" src="https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg"></li>
<li><img class="photo-preview" src="https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg"></li>
<li><img class="photo-preview" src="https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg"></li>
<li><img class="photo-preview" src="https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg"></li>
</ul>
</div>
Related
I have been seriously messing with this one thing for over an hour now. Basically I have a navigation bar, there is an icon on the far left, and the links are aligning to the bottom of the image.
I have tried messing with padding, margins, line height, vertical-align and everything else I could think of. I also tried having the image inside and before the ul. I need the ul items (will be links) to be vertically aligned to the center of the icon.
I have put all the code into one file that I will copy here. Also, when you post please explain why a solution will work, not just post code. The other posts I searched for about this before I posted here didn't explain anything, just included code that didn't help when I tried it. Unfortunately, because I have no idea what the solution is or what it relates to I am including all of the code.
body {
margin: 0;
/*background-color: #10f009;*/
font-size: 62.5%;
font-family: sans-serif;
}
img {
margin: 0 0 0 0;
max-width: 100%;
height: 50%;
}
.smallSection {
margin: 100px;
}
.paragraph {
font-size: 2em;
max-width: 500px;
}
.title {
font-size: 2.4em;
}
.list {
list-style: solid inside url("");
font-size: 2em;
}
.nav-link {
list-style-type: none;
display: inline-block;
text-align: center;
font-size: 2em;
width: 200px;
border: 1px solid red;
}
.nav-icon {
display: inline-block;
border: 1px solid red;
}
.largeSection {} #section1 {
background-image: url("../img/placeholder.jpg")
}
#nav {
border: 1px solid red;
margin: 0;
padding: 0;
align: top;
height: 100px;
line-height: 1;
}
/*temporary*/
div {
border: 1px solid red;
}
<!-- Dawn Little -->
<div id="section1" class="largeSection">
<!-- Navigation -->
<div>
<ul id="nav">
<div style="width:70px;height:70px;border: 1px solid red;display: inline-block;">
<!-- The img link is obviously broken so this is here instead. -->
</div>
<!-- <img src="img/herbfalife-icon.png" width="70px" height="70px" class="nav-icon"> -->
<li class="nav-link">Who am I</li>
<li class="nav-link">What I do</li>
<li class="nav-link">3-Day Trial</li>
<li class="nav-link">Challenges</li>
<li class="nav-link">Become a Coach</li>
</ul>
</div>
<div class="smallSection">
<p class="paragraph">
<span class="title">Client Name<br /></span> Hi, I'm a wife, mother, and Personal Wellness Coach with Herbalife Nutrition. My super power - I change lives.
</p>
</div>
</div>
<!-- What I do -->
<div id="section2" class="largeSection">
<div class="smallSection">
<p class="paragraph">
<span class="title">What I do</span>
<ul class="list">
<li>Wellness Evaluations</li>
<li>Nutrition Coaching</li>
<li>Impact Lifestyle</li>
<li>Get Results</li>
<li>Coach Coaches</li>
</ul>
</p>
</div>
</div>
<!-- 3-day trial -->
<div id="section3" class="largeSection">
<div class="smallSection">
<p class="title">
Try Our 3-Day Trial
</p>
<p class="title">
What you get:
</p>
<ul class="list">
<li>Personal Wellness Coach</li>
<li>Wellness Evaluation</li>
<li>Meal Plan</li>
<li>Daily Support</li>
<li>Plan of Action</li>
<li>6 Meals</li>
<li>Metabolism Booster</li>
</ul>
</div>
</div>
<!-- Challenges -->
<div id="section4" class="largeSection">
<div class="smallSection">
<p class="title">
Join a Weight Loss Challenge
</p>
<p class="title">What you get:</p>
<ul class="list">
<li>Personal Wellness Evaluation</li>
<li>Personalized Program</li>
<li>Nutrition Classes</li>
<li>ommunity of Support</li>
<li>Accountability</li>
<li>Opportunity to Win Cash & Prizes</li>
</ul>
</div>
</div>
<!-- Become a coach -->
<div id="section5" class="largeSection">
<div class="smallSection">
<p class="title">
Become a Coach
</p>
<p class="title">
What you get:
</p>
<ul class="list">
<li>Opportunity to Change Lives</li>
<li>Opportunity for Personal & Financial Growth</li>
<li>Training</li>
<li>Potential to Change Lives in Over 90 Countries</li>
<li>Be Part of a Team</li>
<li>Get in the Best Shape You've Ever Been</li>
</ul>
</div>
</div>
This way that you are coding is a bit tricky to align.I will rewrite your code. However, I recommend you to use a CSS framework like bootstrap or zurb.
Firstly, you need to rewrite HTML part like
<!-- Navigation -->
<div class="header clearfix">
<div class="logo">
<!-- The img link is obviously broken so this is here instead. -->
</div>
<div class="nagivation">
<ul id="nav">
<li class="nav-link">Who am I</li>
<li class="nav-link">What I do </li>
<li class="nav-link">3-Day Trial</li>
<li class="nav-link">Challenges</li>
<li class="nav-link">Become a Coach</li>
</ul>
</div>
</div>
I have added header and nagivation
then add these lines to your css to
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
.header{
min-height:70px;
clear:both
}
.logo{
width:20%;
float:left;
}
.nagivation{
width:80%;
float:right;
}
you need to remove #nav also in your CSS code.
based on your needs, you can change this class
.nagivation #nav{
// add needed adjustment
}
you can have an access to all codes here https://jsfiddle.net/mhadaily/7f152z3r/
The easiest way to accomplish what you want is to simply float the icon as seen in the css below and in this pen.
#nav {
border: 1px solid red;
height:100px;
line-height:1;
display:inline-block;
}
.nav-icon {
display: inline-block;
border: 1px solid red;
float:left;
}
Floats force other elements to flow around the floated element. You just want to be wary of floats because they wreak havoc on your layout if you're not vigilant (they collapse their parent containers). You can read all about it here.
I am not a UI expert. But By looking at the following tag I can asked you few question to understand? Because You are writing non-li tags within ul. Try ti wrap your code with li tag.
Just go to w3cshool link.
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_menu
http://www.w3schools.com/html/html_lists.asp
<ul id="nav">
<div style="width:70px;height:70px;border: 1px solid red;display: inline-block;">
<!-- The img link is obviously broken so this is here instead. -->
</div>
<!-- <img src="img/herbfalife-icon.png" width="70px" height="70px" class="nav-icon"> -->
<li class="nav-link">Who am I</li>
<li class="nav-link">What I do </li>
What about simply moving the li elements up a little bit?
.nav-link {
position: relative;
bottom: 20px;
}
First off, the only elements that should be inside a <ul> are <li>. That <div> (or link or whatever it is in reality) may cause you grief.
The real problem, however, is that you're using the wrong CSS property on the wrong element. You want vertical-align (not "align"), and it should be applied to the list-items (not the container).
Try this:
<ul>
<li class="nav-link"><!-- img here --></li>
<li class="nav-link">Who am I</li>
<li class="nav-link">What I do</li>
<li class="nav-link">3-Day Trial</li>
<li class="nav-link">Challenges</li>
<li class="nav-link">Become a Coach</li>
</ul>
with
.nav-link { vertical-align: middle; }
I'm trying to make a slider in a webpage, but overflow:hidden is hidding' everything instead just hide what comes out of the screen.
i need the images to be aligned and everything that comes out of the screen to be hidden.
My fiddle here:
HTML
<div>
<ul>
<li><img src="http://b-i.forbesimg.com/geristengel/files/2013/05/i-ella-fashion-closet.jpg" class="imgs"/></li>
<li><img src="http://cdn.playbuzz.com/cdn/2bff0e00-cbe8-49e5-85d4-7e4c052df449/f097abfe-d3d6-42c5-9768-11616bc985e2.jpg" class="imgs"/></li>
<li><img src="http://www.lakecityphotography.com/design/images/fashion.jpg" class="imgs"/></li>
<li><img src="http://www.thefashionhall.com.br/wp-content/uploads/2012/12/hnjh.jpg" class="imgs"/></li>
</ul>
</div>
CSS:
ul{
list-style:none;
}
li{
position:absolute;
}
.imgs{
height:130px;
width:180px;
float:left;
}
div{
overflow:hidden;
position:relative;
}
Fiddle:
https://jsfiddle.net/mkv9x2fg/2/
Try removing the position absolute from the li
ul {
list-style: none;
white-space:nowrap;
}
li {
display:inline-block;
}
.imgs {
height: 130px;
width: 180px;
}
div {
overflow: hidden;
position: relative;
}
<div>
<ul>
<li>
<img src="http://b-i.forbesimg.com/geristengel/files/2013/05/i-ella-fashion-closet.jpg" class="imgs" />
</li>
<li>
<img src="http://cdn.playbuzz.com/cdn/2bff0e00-cbe8-49e5-85d4-7e4c052df449/f097abfe-d3d6-42c5-9768-11616bc985e2.jpg" class="imgs" />
</li>
<li>
<img src="http://www.lakecityphotography.com/design/images/fashion.jpg" class="imgs" />
</li>
<li>
<img src="http://www.thefashionhall.com.br/wp-content/uploads/2012/12/hnjh.jpg" class="imgs" />
</li>
</ul>
</div>
EDIT: made the li inline-block and set the div to hide the overflow.
It's a little unclear what the OP is trying to do.
Try setting a div width like width: 200px; heigth: auto: max-height: 500px;
How do I to align the last line in left, keeping the first line alignment?
this code:
<ul style="position:inline-block; text-align:center; width:120px; background-color:green; margin:0; padding:0;">
<img src="http://img2.timeinc.net/instyle/images/2011/GalxMonth/2012-Charlize-Theron-400.jpg" width="33px">
<img src="http://img2.timeinc.net/instyle/images/2011/GalxMonth/2012-Charlize-Theron-400.jpg" width="33px">
<img src="http://img2.timeinc.net/instyle/images/2011/GalxMonth/2012-Charlize-Theron-400.jpg" width="33px">
<img src="http://img2.timeinc.net/instyle/images/2011/GalxMonth/2012-Charlize-Theron-400.jpg" width="33px">
<img src="http://img2.timeinc.net/instyle/images/2011/GalxMonth/2012-Charlize-Theron-400.jpg" width="33px">
</ul>
http://jsfiddle.net/vinoli/59cLmvxo/
You can target the last item of the list, exemple :
html:
<ul class="myList">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
css:
ul.myList li { background-color: #ff0000; }
ul.myList li:last-child { background-color: #00ff00; }
Just put the css you want for each case.
fiddle
Add an id to your tag such as to reference it directly in your styles.css then use the align left as you would normally.
Alternatively, you could just put in an inline style for just that item specifically instead of just your ul. Like this:
<il style="position:inline-block; text-align:left; width:120px; background-color:green; padding:5px;">
<img src="http://img2.timeinc.net/instyle/images/2011/GalxMonth/2012-Charlize-Theron-400.jpg" width="33px">
</il>
It's li tag and not il and please don't use inline style instead of css file. You can dispose a line with centered images and a line with images align to the left like:
ul {
position:inline-block;
width:120px;
background-color:green;
padding:5px;
list-style: none;
}
.align-left: {
text-align: left;
}
.align-center {
text-align: center;
}
img {
width: 33px;
display: inline-block;
}
<ul>
<li class="align-center">
<img src="http://img2.timeinc.net/instyle/images/2011/GalxMonth/2012-Charlize-Theron-400.jpg">
<img src="http://img2.timeinc.net/instyle/images/2011/GalxMonth/2012-Charlize-Theron-400.jpg">
<img src="http://img2.timeinc.net/instyle/images/2011/GalxMonth/2012-Charlize-Theron-400.jpg">
</li>
<li class="align-left">
<img src="http://img2.timeinc.net/instyle/images/2011/GalxMonth/2012-Charlize-Theron-400.jpg">
<img src="http://img2.timeinc.net/instyle/images/2011/GalxMonth/2012-Charlize-Theron-400.jpg">
</li>
</ul>
I use this method here in the below example.
<!-- vim: set nowrap:-->
<html>
<style type="text/css">
#titleImg{ <!--No use in the code but it makes -->
<!--things to work for some odd reason?!-->
position:absolute; <!--If I remove this, FAILURE --not 2x2.-->
<!--It becomes one-after-another after rem.-->
<!--Why?-->
}
li{
width:190px;
height:190px;
display: block;
float: left;
margin: 5px;
}
</style>
<body>
<center>
<ul style="width:400px; height:400px; text-align:center;">
<li>
<img id="titleImg"
src="../Pictures/Logos/logo.png"
style="width:100%;height:100%">
</li>
<li> </li>
<li> </li>
</ul>
</center>
</body>
You don't I think. Here's an updated jsFiddle example of what I believe you are trying to accomplish. Note: never use <center></center> tags - they are not good practice. Instead set the parent to display: block and its margin to 0 auto.
Here is the new live example
And the code:
HTML
<ul>
<li> <img src="http://www.woodlands-junior.kent.sch.uk/customs/images/uk.jpg"></li>
<li> <img src="http://www.crwflags.com/fotw/images/u/us.gif"> </li>
<li> <img src="http://www.enchantedlearning.com/school/Canada/flagbig.GIF"> </li>
</ul>
CSS
ul {
display: block;
margin: 0 auto;
}
li {
width:190px;
height:190px;
display: block;
float: left;
margin: 5px;
overflow: hidden;
}
I have an outer div, and inside of that, I have an inner div which contains a list of images. When the images are wider than the outer div, I want to have it scroll horizontally, but instead, it just puts the image on the next line instead of expanding. If I add many rows, the div does scroll vertically, but horizontally, it doesn't do it. This happens on every browser I've tried - Firefox, Chrome, IE, and Safari.
Here is the css:
#grid-container { left:33px; position:relative; width:300px; }
#grid { width:310px; height:400px; overflow:auto; margin-bottom: 15px; }
#grid-container ul { width:305px; }
#grid-container li { float:left; list-style-type:none; padding:5px 15px 5px 15px; height:88px; text-align:center; }
.image-row { float:left; margin-left: 10px; }
.grid-image { height:50px; margin-left:-20px; }
Here is the html:
<div id="grid-container">
<div id="grid">
<div id="row1" class="image-row">
<ul>
<li>
<img id="img1" class="grid-image" src="images/img1.jpg">
</li>
<li>
<img id="img2" class="grid-image" src="images/img2.jpg">
</li>
<li>
<img id="img3" class="grid-image" src="images/img3.jpg">
</li>
<li>
<img id="img4" class="grid-image" src="images/img4.jpg">
</li>
</ul>
</div>
<div id="row2" class="image-row">
<ul>
<li>
<img id="img5" class="grid-image" src="images/img5.jpg">
</li>
<li>
<img id="img6" class="grid-image" src="images/img6.jpg">
</li>
</ul>
</div>
</div>
</div>
The problem is img4 is showing on the second row (with img5 and img5 on the third row), even though it should on the first row and the grid div should scroll horizontally. It does scroll vertically. Can I force the div to expand? If I remove the width from the grid div, I do get the horizontal scroll bar, but the image is still on the second row.
Will this do? I simplified it somewhat.
CSS (you can remove the borders, they are just so you can see what is happening):
#grid-container {position: relative; width: 300px; height: 400px; overflow: auto; border: 1px red solid;}
#grid {border: 1px blue solid;}
#grid ul {height: 40px; list-style-type: none; white-space: nowrap; padding: 0; margin: 0; border: 1px green solid;}
#grid ul li {display: inline; padding: 0; margin: 0;}
#grid ul li img {height: 50px;}
HTML:
<div id="grid-container">
<div id="grid">
<ul>
<li><img src="testimage.jpg"></li>
<li><img src="testimage.jpg"></li>
<li><img src="testimage.jpg"></li>
<li><img src="testimage.jpg"></li>
<li><img src="testimage.jpg"></li>
<li><img src="testimage.jpg"></li>
</ul>
<ul>
<li><img src="testimage.jpg"></li>
<li><img src="testimage.jpg"></li>
<li><img src="testimage.jpg"></li>
</ul>
</div>
</div>
You need to put a white-space:nowrap; on the UL and LI tags. You also need the LI elements to be display inline rather than floating them.
CSS:
#grid-container { left:33px; position:relative; width:300px; }
#grid { width:310px; height:400px; overflow:auto; margin-bottom: 15px; }
#grid-container ul { width:305px; }
#grid-container li {
display:inline;
list-style-type:none;
padding:5px 15px 5px 15px;
height:88px;
margin:0;
text-align:center;
}
ul, li{
white-space:nowrap;
}
HTML:
<div id="grid-container">
<div id="grid">
<div class="image-row">
<ul>
<li>
<img id="img1" class="grid-image" src="test.jpg" />
</li>
<li>
<img id="img2" class="grid-image" src="test.jpg" />
</li>
<li>
<img id="img3" class="grid-image" src="test.jpg" />
</li>
<li>
<img id="img4" class="grid-image" src="test.jpg" />
</li>
</ul>
</div>
<div class="image-row">
<ul>
<li>
<img id="img5" class="grid-image" src="test.jpg" />
</li>
<li>
<img id="img6" class="grid-image" src="test.jpg" />
</li>
</ul>
</div>
This works in latest versions of IE, FF, Safari and Chrome.
try this:
#grid-container li {
display: inline;
list-style-type:none;
padding:5px 15px 5px 15px;
height:88px;
text-align:center;
white-space: nowrap;
}
You're already on the right path: Your approach to set "float: left;" on the <li>s, in combination with setting "width: 305px" on the <ul>s should basically work to avoid float dropping.
However, a few things to check:
Are 305px really enough? (It must be at least as large as the combined width of the elements in row 1, including margins, paddings and borders) Try setting it to a much larger value. overflow: auto won't help, since the floats will always wrap instead of causing an overflow. Setting a large enough width works perfectly for me (at least in my own example).
Other things to try:
Try it without floating ".image-row".
Try setting a width on the images.
You have the id "row1" twice in your HTML - that's invalid.