I have a very simple vertical bar chart made solely by css:
it is made of list items:
<ul class="graph">
<li style="height:50%; ">25</li>
<li style="height:80%;">40</li>
<li style="height:20%;">10</li>
<li style="height:40%;">20</li>
<li style="height:10%;">5</li>
</ul>
with the help of css:
.graph {
width:100%;
height:250px;
position:relative;
background-color:gray;
}
.graph li{
bottom:0;
width:5%;
text-align:center;
background-color:#9FC;
list-style:none;
position:relative;
border-style:solid;
border-width:1px;
display:inline-block;}
the problem is that the bars are upside-down. How could I make them right way up?
thanks
Your li elements should be positioned absolute. However you need to set margin for each element. I used it by adding left property:
<ul class="graph">
<li style="height:50%; ">25</li>
<li style="height:80%;left:20%">40</li>
<li style="height:20%;left:40%">10</li>
<li style="height:40%;left:60%">20</li>
<li style="height:10%;left:80%">5</li>
</ul>
And in CSS i modified this:
.graph li {
position:absolute;
}
DEMO
Related
i am trying to create a menu bar with list items.i applied css for the list items.i want all of them to lie on a single line i mean when zoom in to 500% and zoom out to 25% all the list items should be in same line.but in my implementation they are going out of the line.i'm a beginner please help me
css:
.menu
{
margin-top:5px;
margin-bottom:5px;
background-color:#4c4c4c;
color:white;
position:relative;
display:inline-block;
text-align:center;
padding:0px 85px 0px 85px;
border:2px solid #4c4c4c;
}
#menuitem1
{
border-top-left-radius:5px;
border-bottom-left-radius:5px;
text-align:center;
margin:auto;
}
#menuitem4
{
border-top-right-radius:5px;
border-bottom-right-radius:5px;
}
<html>
<body >
<div id="page">
<div id="bar">
<ul>
<li class="menu" id="menuitem1" >Home</li>
<li class="menu">contact us</li>
<li class="menu">pay</li>
<li class="menu" id="menuitem4" >plans</li>
</ul>
</div>
</div>
</body>
</html>
jsfiddle
Set the width of the .menu in percentage so the li's are responsive.
JSFIddle
HTML
<body >
<div id="page">
<div id="bar">
<ul>
<li class="menu" id="menuitem1" >
Home
</li>
<li class="menu">
contact us
</li>
<li class="menu">
pay
</li>
<li class="menu" id="menuitem4" >
plans
</li>
</ul>
</div>
</div>
</body>
CSS
.menu
{
margin-top:5px;
margin-bottom:5px;
background-color:#4c4c4c;
color:white;
position:relative;
display:inline-block;
text-align:center;
padding:0px 0px 0px 0px;
border:2px solid #4c4c4c;
width:20%;
}
#menuitem1
{
border-top-left-radius:5px;
border-bottom-left-radius:5px;
text-align:center;
margin:auto;
}
#menuitem4
{
border-top-right-radius:5px;
border-bottom-right-radius:5px;
}
You can try using percentage width values for width of your li elements.
.some-class {
width: 25%
}
I've made some changes on jsfiddle just to show it is possible with this kind of implementation.
If you are concerned about mobile devices. Take a look at meta tags with device-width.
You can add:
ul {
white-space: nowrap;
}
to prevent wrapping -> jsfiddle
I work on list this list appear images the last image in the row look like has top margin in firefox but in Google Chrom look perfect
I am not good in English so this image explain what I mean :)
Image explain What I mean : http://filaty.com/i/alpha/74/74f4cb7180dd52b3d8d670bb31be8156
Html
<ul id="nwp_port_item" class="clearfix">
<li class="mix webdesign"><img src="images/demo/e1.jpg"></li>
<li class="mix graphics"><img src="images/demo/e2.jpg"></li>
<li class="mix wordpress"><img src="images/demo/e3.jpg"></li>
<li class="mix photography"><img src="images/demo/e4.jpg"></li>
<li class="mix wordpress"><img src="images/demo/e5.jpg"></li>
<li class="mix photography"><img src="images/demo/e6.jpg"></li>
<li class="mix webdesign"><img src="images/demo/e1.jpg"></li>
<li class="mix graphics"><img src="images/demo/e2.jpg"></li>
</ul>
CSS :
#nwp_port_item {
margin:20px 0;
padding:0;
list-style:none;
line-height:0;
}
#nwp_port_item li {
display:block;
padding:0;
margin:1px;
float:left;
width:180px;
height:200px;
overflow:hidden;
position:relative;
}
#nwp_port_item li img {
width:100%;
height:auto;
}
I use bootstrap to reset browser
Code on JSFiddle
http://jsfiddle.net/4t6Ch/
It is looks like image have some vertical-align.
Try to add some styles for image:
#nwp_port_item li img {
width:100%;
height:auto;
display: block;
margin:0;
padding:0;
}
This is my simple code of menu
<ul id="admin-ul">
<li id="admin-li" class="no1">Dodaj informacije za sdf dsf dsfdddd</li>
<li id="admin-li" class="no2">Pregledaj</li>
<li id="admin-li" class="no3">Veterinari</li>
<li id="admin-li" class="no4">Logout</li>
</ul>
and CSS
ul#admin-ul
{
list-style-type:none;
margin:0;
padding:0;
}
li#admin-li
{
display:inline-block;
width:24%;
height:270px;
}
ul li a
{
display:block;
height:270px;
line-height:270px;
text-align:center;
}
I would like to know how to wrap my text because it is showing like this
Simply use vertical-align: top on your <li>s. Please note that all ids must be unique so this is invalid HTML:
<li id="admin-li" class="no1"></li>
<li id="admin-li" class="no1"></li>
You can style all <li>s more easily using the child selector like this:
ul#admin-ul > li {
/* other li rules */
vertical-algin: top;
}
You can than update your list to this:
<ul id="admin-ul">
<li class="no1"></li>
<li class="no1"></li>
</ul>
Final demo: http://jsfiddle.net/eXKdG/
Update
As I didn't notice the vertical centering of the text within the block level <a>-tag: tesdki is right in simply using display: table-cell; on the <a>-tags.
Try this out:
ul#admin-ul
{
list-style-type:none;
margin:1em 0 0 0;
padding:0;
}
li#admin-li
{
display:table;
width:24%;
position:relative;
float:left;
overflow:hidden;
height:270px;
margin: 0 3px;
}
ul li a
{
display:table-cell;
vertical-align:middle;
height:270px;
text-align:center;
}
Derived from here: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
This doesn't work in IE7 standard mode, but pretty much everything else is good.
I have a <ul> of items, who get bigger (with animation) on hover. Now i have made them be on the right side of the screen (using the CSS right:0em for the <li> class), and I have set the position of the <li> on hove to fixed so that only it will move left as it grows, and all the over objects in the will stay to the right. The problem is that as a result of that, when I hover over it, the next item gets "under" it. How can I change that? (maybe is there a way to control only the horizontal position property of the <li> on hover?)
Code:
http://jsfiddle.net/KBprd/2/
Without any code to start it is kind of hard to help. But based on what I could gather, you are wanting all the items to stay flush against the right side of the menu; only the "hovered" element is moved away from the right-side of the container. I've slapped together an example of how to do this. If this is not what you are looking for, provide some more code or detail in comments and we can go from there...
Here is the updated Fiddle
CSS:
.navigation{
position:fixed;
z-index:1;
top:3em;
right:0em;
}
.navigation li.slide{
color:#000000;
display:block;
padding: 0 10px;
line-height:30px;
margin-bottom:2px;
font-weight:light;
background:#00C9FF;
-webkit-transition: all .2s ease-in-out;
text-align:right;
width:53px;
float:right;
}
.navigation li:hover,.active{
font-size:25px;
cursor:pointer;
width:100px!important;
background:#5C0CE8;
}
.navigationClear {
clear:both;
height:1px;
margin-bottom:-1px;
}
HTML:
<ul class="navigation">
<li data-slide="1" class="slide">Slide 1</li>
<li class="navigationClear"></li>
<li data-slide="2" class="slide">Slide 2</li>
<li class="navigationClear"></li>
<li data-slide="3" class="slide">Slide 3</li>
<li class="navigationClear"></li>
<li data-slide="4" class="slide">Slide 4</li>
<li class="navigationClear"></li>
</ul>
The reason that your hovered element hides the element below is because you have given "position:fixed" to the hovered element. I fixed your problem by giving the ul element a width so that the li elements wont line up. I also removed the fixed position of the hovered element. and then right floated the li. This way you also dont need to put "clearNavigation" after each element.
Here's your fiddle code.
<ul class="navigation">
<li data-slide="1">Slide 1</li>
<li data-slide="2">Slide 2</li>
<li data-slide="3">Slide 3</li>
<li data-slide="4">Slide 4</li>
.navigation{
position:fixed;
z-index:1;
top:3em;
right:0em;
width:53px;
}
.navigation li{
color:#000000;
display:block;
padding: 0 10px;
line-height:30px;
margin-bottom:2px;
font-weight:light;
background:#00C9FF;
-webkit-transition: all .2s ease-in-out;
text-align:right;
width:53px;
position:relative;
right:0em;
float:right;
}
.navigation li:hover,.active{
font-size:25px;
cursor:pointer;
width:100px!important;
background:#5C0CE8;
right:0em;
}
I am designing a webpage where i have a navigation bar where i am keeping the background for the nav elements as dark blue. However, it keeps on missing the last element in my nav list and does not makes its color as blue.
Here is the html code:
<div id="content_block">
<div id="nav_bar">
<ul style="margin:0px; padding:10px 0px;" >
<li >PATENTS</li>
<li ><span style="position:relative;left:9px;">TRADEMARKS</span></li>
<li ><span style="position:relative;left:18px;">IP LAW & POLICY </span></li>
<li ><span style="position:relative;left:27px;">PRODUCTS & SERVICES</span></li>
<li ><span style="position:relative;left:36px;">INVENTORS</span></li>
<li ><span style="position:relative;left:45px;">NEWS & NOTICES</span></li>
<li ><span style="position:relative;left:54px;">FAQs</span></li>
<li></li>
</ul>
</div>
</div>
Here is my CSS code
#content_block{
background-color:#FFFFFF;
margin:10px 0px
border:2px;
padding:10px 0px;
height:400px;
width:1024px;
}
#text{
max-height:400px;
max-width:900px;
margin:10px;
padding:5px}
#nav_bar{
margin:0px;
border:0px;
position:relative;
width:1024px;
}
ul
{
list-style-type:none;
margin:0;
padding:0;
padding-top:6px;
padding-bottom:6px;
}
li
{display:inline;
float:left;
background-color:#2E40AC;
color:#BAD2FF;
}
It's because you've set background color to li elements but have text itself inside span element that is relatively positioned and being pushed by it's left property out of li element background color scope.
Rather then playing with position:relative and left:value you should achieve same thing using margin or padding property.
Once you have removed span add padding:0px 10px; property to li element.