I have a html list which consists of multiple items, each of which is composed of some text and an image.
I want the following:
all items must fit in one page (no scrollbar)
each item must have the same height (resize the image to fit the item height)
The image must use the remaining space in the item list, which is not taken by the text
Edit: so just to be clear, assuming the browser height is X, and there are n list items (li), each li should have a height of X/n pixels, so that they all fit within the browser height without any scrollbar. And from there, inside each li, the text should take whatever space it needs, and the image should fill the remaining space
I have tried playing with height & max-height but it doesn't seem to work. Should I change the html layout ?
Here is the html code:
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<div>
<ul>
<li>
<div>title1</div>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
</li>
<li>
<div>title2</div>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
</li>
<li>
<div>title3</div>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
</li>
<li>
<div>title4</div>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
</li>
<li>
<div>title5</div>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
</li>
<li>
<div>title6</div>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
</li>
<li>
<div>title7</div>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
</li>
<li>
<div>title8</div>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
</li>
</ul>
</div>
</body>
<html>
I don't reckon this is possible with CSS only. A JS solution would be like below:
document.addEventListener("DOMContentLoaded", setLiHeight);
window.addEventListener("resize", setLiHeight);
function setLiHeight() {
let ul = document.querySelector("ul");
let lis = ul.querySelectorAll("li");
let title = ul.querySelector("div");
let images = ul.querySelectorAll("img");
// Set height for lis
Array.from(lis, function(li) {
li.style.height = ul.offsetHeight / lis.length - 1 + "px";
});
// Set height for images according to height title
Array.from(images, function(img) {
img.style.height = ul.offsetHeight / lis.length - title.offsetHeight + "px";
});
}
html,
body {
margin: 0;
}
ul {
height: 100vh;
margin: 0;
}
li img {
width: auto;
}
<ul>
<li>
<div>title1</div>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
</li>
<li>
<div>title2</div>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
</li>
<li>
<div>title3</div>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
</li>
<li>
<div>title4</div>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
</li>
<li>
<div>title5</div>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
</li>
<li>
<div>title6</div>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
</li>
<li>
<div>title7</div>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
</li>
<li>
<div>title8</div>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
</li>
</ul>
The only assumption made here is that list's height is fixed.
Related
I am trying to make my list horizontally and I saw that I need to type: display:inline; inside style argument but when I tried it, it didn't work. I will attach my code here maybe I did something wrong. thanks for the helpers!
<body style="font-family:Calibri; font-size:20px">
<center>
<img src="Images/Logo.jpg" style ="margin-top:100px; border:5px solid black;" alt="GameReview" title="Game Review"/>
<br />
<br />
<ul style="list-style-type:none; display:inline;">
<li>
Details
</li>
<li>
On me
</li>
<li>
Gallery
</li>
<li>
Links
</li>
<li>
Conatact me
</li>
</ul>
</center>
</body>
this is for a school project.
The inline style needs to be on the li element.
<style>
ul li {
display: inline;
}
</style>
So I'm creating a website and have run into a little problem in relation to lists. I'm aiming to make a specific image within the list slightly bigger as it appears smaller in relation to the others.
Here's an image for reference: https://imgur.com/9cyt4Gz
In order to stack the 3 images on top and below, I have created two separate lists for the three at the top and the three at the bottom. This is where I believe the issue lies.
I have tried to use the following css code to solve the issue (note I have used 2px to make the outcome obvious)
.white-container ul li:nth-child(3) img {
width: 2px;
}
This gives the following result: https://imgur.com/C0jC6uY
The HTML code is here:
<div class="white-container">
<div class="container">
<div>
<ul class="firstthree">
<li>
<img src="images/brush.svg" class="brush" alt="brush">
<p class="brush">Graphic Design</p>
</li>
<li>
<img src="images/wand.svg" class="wand" alt="wand">
<p class="wand">UI Design</p>
</li>
<li>
<img src="images/code.svg" class="code" alt="code">
<p class="code">Front-end Dev</p>
</li>
</ul>
</div>
<div>
<ul class="secondthree">
<li>
<img src="images/settings.svg" class="settings" alt="settings">
<p class="settings">Back-end Dev</p>
</li>
<li>
<img src="images/database.svg" class="database" alt="databases">
<p class = "database">Databases</p>
</li>
<li>
<img src="images/mobile.svg" class="mobile" alt="mobile">
<p class="mobile">Mobile Devices</p>
</li>
</ul>
</div>
</div>
</div>
Obviously I do not want the bottom right image to change. I am at a loss of what else to try. I have tried using
.white-container ul firstthree li:nth-child(3) img {
which i thought would work but to no avail. Any help would be appreciated. Thanks!
The first step will be to merge your two lists into one, because semantically they should be.
<ul>
<li>
<img src="images/brush.svg" alt="brush">
<p>Graphic Design</p>
</li>
<li>
<img src="images/wand.svg" alt="wand">
<p>UI Design</p>
</li>
<li>
<img src="images/code.svg" alt="code">
<p>Front-end Dev</p>
</li>
<li>
<img src="images/settings.svg" alt="settings">
<p>Back-end Dev</p>
</li>
<li>
<img src="images/database.svg" alt="databases">
<p>Databases</p>
</li>
<li>
<img src="images/mobile.svg" alt="mobile">
<p>Mobile Devices</p>
</li>
</ul>
And then tell the browser to display the list as a grid.
ul {
display: grid;
list-style: none;
grid-template-columns: repeat(3, 1fr);
}
Then you can use flex inside each cell to arrange the items vertically (ul > li { display: flex; flex-direction: column; }). I'll leave the rest to you.
So I got this header, I want the logo in the middle, and then 2 links on the left and 2 links on the right. I guess I know how to do this but not what the best way is. Got what I think that works below. Edit: Obviously no css applied yet, gotta get the html straight first.
So here's the header
<header>
<div id="head-wrap">
<nav>
<ul>
<li>Smartphones</li>
<li>Tablets</li>
<li>Laptops</li>
<li>Desktops</li>
</ul>
</nav>
</div>
</header>
What might work
<header>
<div id="head-wrap">
<nav>
<div id="nav-left>
<ul>
<li>Smartphones</li>
<li>Tablets</li>
</ul>
</div>
<img src="logo.png" alt="Logo" height="42" width="42">
<div id="nav-right">
<ul>
<li>Laptops</li>
<li>Desktops</li>
</ul>
</div>
</nav>
</div>
</header>
Is this the best way or should I do it differently?
Regards
Your example has a lot of superfluous HTML elements in it. Instead of multiple div containers, try something like this:
<nav>
<ul>
<li>
Smartphones
</li>
<li>
Tablets
</li>
<li>
<img src="logo.png" alt="Logo" height="42" width="42" />
</li>
<li>
Laptops
</li>
<li>
Desktops
</li>
</ul>
</nav>
Then display the li elements inline:
li{
display:inline;
}
Example
Obviously you'll need to edit this more to fit your own needs, but a simple structure is the start of a good design.
This question already has answers here:
Unwanted margin in inline-block list items [duplicate]
(10 answers)
Closed 9 years ago.
So I'm a little stumped. I'm trying to make a page to display images. I want there to be 5 images per row spaced with maximum amount when the window is at max width (~950 px), but I want them to get closer as you make it smaller and then, when there's 0 px between them, there will only be 4 images per row, and that will continue until a specific width. Kind of like Instagram, but I don't want the pictures to get smaller. Here's what I have:
HTML
<ul>
<li>
<img src="0.png">
</li>
</ul>
<ul>
<li>
<img src="1.png">
</li>
</ul>
<ul>
<li>
<img src="2.png">
</li>
</ul>
CSS
ul
{
padding: 0;
margin: 0;
list-style-type: none;
}
ul li
{
display: inline;
}
//the images are also float left, so they are horizontal
Basically, as you can see, I have nothing and I don't really know what to do. I'd appreciate any help. Thanks!
Can you do me a favor and try this fix (I know there is an obnoxious invisible-spacing bug related to lis written on newlines in the HTML, not sure if it applies to UL's in order too but it's worth a shot) --
<ul><li><img src="0.png"></li></ul><ul><li><img src="1.png"></li></ul><ul><li><img src="2.png"></li></ul>
this may get you closer to where you want to go:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
ul {
padding: 0;
margin: 0;
list-style-type: none;
min-width:450px;
}
ul li {
display: inline;
float:left;
width:20%;
}
</style>
</head>
<body>
<ul>
<li> <img src="0.png" width="150" height="50"> </li>
<li> <img src="1.png" width="150" height="50"> </li>
<li> <img src="2.png" width="150" height="50"> </li>
<li> <img src="0.png" width="150" height="50"> </li>
<li> <img src="1.png" width="150" height="50"> </li>
<li> <img src="2.png" width="150" height="50"> </li>
</ul>
</body>
</html>
It is more "proper" markup to put all the images into one list, and opens the door for setting a hard minimum width on the ul but a % on the li... which is what makes the whitespace vary with the window sizing. I am not sure if this gets you all the way there, but hopefully it will help!
Your unordered list should look like this:
<ul><li><img src="0.png"></li><li><img src="1.png"></li><li><img src="2.png"></li></ul>
Super unconventional, but it works.
Fiddle here: http://jsfiddle.net/QMs93/
http://jsfiddle.net/AgLMp/1
CSS
ul {
padding: 0;
margin: 0;
list-style-type: none;
max-width: 950px;
min-width: 600px;
}
ul li {
float: left;
width: 33%;
min-width: 200px;
}
HTML
<ul>
<li>
<img src="http://placehold.it/200x200/ff0000/00ffff&text=Image+1" />
</li>
<li>
<img src="http://placehold.it/200x200/00ff00/ff00ff&text=Image+2" />
</li>
<li>
<img src="http://placehold.it/200x200/0000ff/ffff00&text=Image+3" />
</li>
</ul>
like this? http://jsfiddle.net/fqTsN/
remove the float:left from your pictures by the way! I fixed that too (it's horizontal without float:left;
your best and fastest bet for more control is to use media queries, or you could also use Bootstrap.
As everyone else has said:
<ul>
<li>Stuff</li>
<li> Other Stuff</li>
</ul>
This is my first "phonegap" application project, so done with the listview in html based on the requirement but listview is not properly formatted (ie one below the other), how to make the items to display one below the other. please help me.
here's my code for listview
<div>
<ul data-role="listview" data-inset="true">
<li><a href="#">
<img src="images/c3.jpeg" align="left">
<h3>CONGRATULATIONS</h3>
</a>
</li>
<li><a href="#">
<img src="images/c2.jpeg" align="left">
<h3>HOLYDAY</h3>
</a>
</li>
<li><a href="#">
<img src="images/card1.jpeg" align="left">
<h3> I'M SORRY </h3>
</a>
</li>
<li><a href="#">
<img src="images/c4.jpg" align="left">
<h3> HAPPY BIRTHDAY </h3>
</a>
</li>
<li><a href="#">
<img src="images/c5.jpg" align="left">
<h3> MISSING U</h3>
</a>
</li>
<li><a href="#">
<img src="images/images.jpg" align="left">
<h3> ENGAGEMENT</h3>
</a>
</li>
![device output][1]
First of all you cannot use <br /> as direct ul child and secondly am sure you are using float: left; for the images which are inside li tag and thus it is spoiling the layout. Inorder to fix it, use the CSS property block below
ul.class_name li {
overflow: hidden;
/* Other styles goes here */
}
Just assign a class to ul element, replace the .class_name in CSS with the class you assigned to the ul element in your HTML.
Also, you can use the below declaration to self clear the parent element like
.clear:after {
display: table;
content: "";
clear: both;
}
This will self clear the parent element just like overflow: hidden; does, but in a better way.