I want to have a simple HTML layout with several <li> elements inline, each of which has a height:100%
I have used the following CSS trick to accomplish this:
position:absolute;
top:0;
bottom:0;
See my JSFiddle for an example.
For reasons outside the scope of this question, I desire to NOT have my <li> elements positioned absolutely. Can someone chime in on how to achieve this same layout with position:relative; or position:static; <li> elements?
Try this jsFiddle example.
The <li> elements are floated left and use the display:inline-block rule to get the proper height and width. Floating also removes the need for the rules; li.one { left:0; }
li.two { left:33%; } li.three { left:66%; }
html, body {
height:100%;
margin:0;
padding:0;
}
ul {
/* width:100%; */
/* height:500px; */
margin:0;
padding:0;
list-style:none;
height:100%;
}
li {
display:inline-block;
height:100%;
background:#333;
color:white;
width:33%;
float:left;
}
li:nth-child(even) {
background:#666;
}
Related
I want to do ul and div in a separate line and also the ul should display in the right corner. When I use the float property on ul and li its goes to right side but the div also comes on the above line, why its happing i also use :after and :before of ul and used clear property too, but dont getting the proper output.
https://jsfiddle.net/rawat/4kd4y2zz/
HTML:
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
<div>
Hello Its a Full Article
</div>
CSS:
ul{
float:right;
margin:0;
padding:0
display:block;
list-style:none;
}
ul:after, ul:before{
content:"";
display:table;
clear:both;
}
ul li{
margin-left:10px;
float:left;
display:inline-block;
}
div{
display:block;
width:100%;
}
Put clear: both (or right) to div.
div {clear: both}
https://jsfiddle.net/4kd4y2zz/1/
Try like this: Demo
CSS:
ul{
float:right;
margin:0;
padding:0
display:block;
list-style:none;
background:grey;
}
ul:after, ul:before{
content:"";
display:table;
clear:both;
}
ul li{
margin-left:10px;
float:left;
display:inline-block;
}
div{
clear:both;
display:block;
width:100%;
background:yellow;
}
Put following attribute in div CSS:
clear:both;
there are several ways using which you can achieve expected result
CSS
div {
clear:both
}
ul:after{
content: '';
display:block '';
clear:both;
}
Or you can add an extra <div></div> into your DOM with style clear:both
I'm making a small website. The background is filled with a picture, say, a map. On the right is an overlay on top of the picture. The overlay has a title, and a list below it.
Now I cannot get to have the list get a scrollbar if it is too large to fit in the screen.
I do not want the page to scroll: the background fills out the screen 100%. I do not want the complete overlay to scroll (comment out the first CSS comment to get this). I also do not know the size of the title beforehand - if I knew that, it would be easy (simply comment out the second comment in the CSS, and hey presto, works). I can go the long way, and have javascript watch the title panel size, but I'd rather have a plain CSS/html solution.
Any ideas?
Code:
<html>
<style>
div {
font-size:1.5em;
padding:10px;
background-color:green;
}
html, body {
height:100%;
margin:0;
}
.panels {
position:fixed;
top:50px;
right:50px;
bottom:50px;
/* overflow:auto; */
}
.list {
/* position:absolute;left:10px;right:10px;top:150px;bottom:20px; */
background-color:white;
overflow:auto;
}
</style>
<div class='panels'>
<div class='header'>Some title or other</div>
<div class='list'>
<ul>
<li>Entry</li>
...lots of entries...
<li>Entry</li>
</ul>
</div>
</div>
</html>
JSFiddle: http://jsfiddle.net/95ajc0us/
Add height:100% for the second div.
.list {
background-color:white;
overflow:auto;
height:100%;
}
DEMO
If you wish the list should scroll down in case of more entries.
Just write down :
ul{
overflow:scroll;
height: 200px;
}
for your UL(Unordered list)
Please feel free to ask again we are not on same page..
Thanks
you have fixed the html and body position.
instead fix the position of header
.header{
position:fixed;
width:100%;
left:0;
top:0;
}
link
You'll need to adjust the top and bottom properties to taste:
div
{
font-size:1.5em;
padding:10px;
background-color:green;
}
html, body
{
height:100%;
margin:0;
}
.panels
{
position:fixed;
top:50px;
right:50px;
bottom:50px;
}
.list
{
position:absolute;
left:10px;
right:10px;
top:150px;
bottom:20px;
background-color:white;
overflow-y:scroll;
}
scroll is missing because you have a fixed panel, which will prevent the div from scrolling
you need to fix header, not list
.header{
position:fixed;
width:100%;
top:0;
}
demo
final edit (updated fiddle on Suresh Ponnukalai answer)
I am trying to lay out a group of images in a table format with using div's. I have an image and then I want to put a Delete link underneath the image. But I can't get it to layout correctly. This is what I have:
<div class="container">
#foreach (var item in Model)
{
<div class="imagetiles">
<img src="#Url.Content(item.ImageURL)" alt="" width="30%" height="30%" />
<a>Delete</a>
</div>
}
</div>
My styles look like this, I copied it from the Fiddler mentioned in the comments below. The Fiddler works, but when I apply it, it doesn't work.
div.container {
width:100%;
}
div.imagetiles {
display:inline-block;
margin:10px;
}
div.imagetiles a {
display:block;
text-align:right;
width: 30%;
}
Below is how this renders. I want this to put the images next to each other with up to 3 per line. Why doesn't the Fiddler work for this here? Why is the imagetile div so big, I can't reduce it to fit the image?
If you want three per row, I would set the image container (not the main one) to be 33% and then make the width of each image to control the spacing around it (kind of like padding). Something like this:
div.container {
width:100%;
margin:0; /* make sure there is no padding or margin on container */
padding:0;
}
div.container div.imagetiles {
float:left;
width:33%;
padding:0;
}
div.container div.imagetiles img {
width: 95%;
margin: 10px;
}
div.imagetiles a {
display:block;
text-align:right;
width: 100%;
}
Demo: http://jsfiddle.net/Gd2V6/
If you are using something like LESS (recommend or SASS):
div.container {
width: 100%;
margin:0; padding:0;
div.imagetiles {
float:left;
width: 100%;
padding:0;
img {
width: 95%;
margin:10px;
}
a {
display:block;
text-align:right;
width: 100%; /* may need to tweak this */
}
}
}
There are small things we need to maintain when display is not defined.
Also we need to analyze the position: property of element that plays big role in this.
After adding the above I have added z-index to the element and that did it!!.
Have a look at this fiddle
CSS:
div.container {
display:block;
width:100%;
position:relative;
}
div.imagetiles {
display:inline-block;
margin:10px 5px;
float:left;
}
div.imagetiles img{
position:relative;
display:inline-block;
z-index:1;
}
div.imagetiles a {
height:25px;
width:50px;
position:relative;
display:inline-block;
float:right;
top:-25px;
left:-50px;
z-index:10;
}
your Implementation is all right. you just need to add width of imagetiles
like:
div.imagetiles {
display:inline-block;
width:30%;
margin:10px;
}
It will work like a charm :)
just a quick question. I have recently dicovered the use for percentages and positioning in css. However I'm having a little trouble with moving elements.
I have two Images one on the left side of the screen and one on the right. both images are set to relevent positioning. The issue im having is getting the image on the right to stay put rather than moving to stay in frame of the window. How would I achieve this using percentages?
Css
.left {
position:relative;
left:0%;
z-index:250;
}
.right {
position:relative;
right:100%;
z-index:250;
}
ADDED ON REQUEST
/* -- page layout */
#wrapper {
position:relative;
width:auto;
height:auto;
margin:0;
padding:0;
z-index: 0;
}
#wrapper #head{
position:relative;
width:100%;
height:50px;
z-index:200;
margin:0;
margin:0;
}
Note
These images are placed within a a div, that spans 100% of the screen. Thanks again!
If I follow you correctly, try
.right {
position:relative;
left: 80%;
z-index:250;
}
I recommend using float instead.
http://jsfiddle.net/beautifulcoder/HCjvK/
/* -- page layout */
#wrapper {
position:relative;
width:auto;
height:auto;
margin:0;
padding:0;
z-index: 0;
min-width: 1280px;
overflow:hidden;
}
This has fixed it for me! Thanks for all your help!
<div id="tagcontainer"><img id="tagimg" src="img/tri.png"/></div>
CSS:
#tagcontainer {
width:100%;
top:0;
position:absolute;
}
#tagimg {
position:relative;
margin:auto;
}
Not sure why I can't figure it out. Why is this image not centering?
Because <img> is an inline element. Use text-align: center on the container instead.
Add one more css property display:block;
#tagimg {
display:block;
position:relative;
margin:auto;
}
Try this:
#tagcontainer {
width:100%;
position:absolute;
}
#tagimg {
width:[imagewidth]px;
top:0;
position:relative;
margin:auto;
}
Either make #tagimg a block level element { display: inline-block; } or use text-align center on the parent...