Hi I am struggling to align my numbers under my images they don't want to be aligned. this is a list and in the each line there an image and a number.
.category_icon { height:100px; width:300px; position:absolute; left:350px; top:150px;
ul { list-style:none; height:70px; width:220px;
li { display: inline; margin-right: 4px; width:65px; height:90px;
img { width:65px; height:64px;}
span { font-family:Tahoma; font-weight:bold; font-size:12px; position:absolute; bottom:7px; width:64px; }
}
}
}
<div class="category_icon">
<ul>
<li><img src="<%=atm.buttonPath%>/family_category_btn.png" alt="" /><span>346</span></li>
<li><img src="<%=atm.buttonPath%>/camping_category_btn.png" alt="" /><span>12</span></li>
<li><img src="<%=atm.buttonPath%>/cooking_category_btn.png" alt="" /><span>546</span></li>
</ul>
Thanks you if someone can help me thanks.
solution with text below
solution with centralised text below
for images, you always have to change their diplay properties before you start playing around with them....add the same here and li to display: inline-block; that would help
To do :
li {
display: inline-block; /*changed */
margin-right: 4px;
width:65px;
height:90px;
text-align:center;
}
img {
display:block; /*added */
width:65px;
height:64px;
}
PS : I am not aware of LESS...so gave you a generalized solution
http://jsfiddle.net/Qm6Bm/
.category_icon {
height: 100px;
width: 300px;
position: absolute;
left: 350px;
top: 150px;
ul {
list-style: none;
height: 70px;
width: 220px;
li {
display: inline-block; /* CHANGED */
margin-right: 4px;
width: 65px;
height: 90px;
text-align: center; /* ADDED */
img {
display: block; /* ADDED */
width: 65px;
height: 64px;
margin-bottom: 8px; /* ADDED */
}
span {
font-family: Tahoma;
font-weight: bold;
font-size: 12px;
/* Removed positioning and width */
}
}
}
}
I made the li an inline-block and the img a block. This means the image will push the text (from the span) under it. Then, by putting text-align: center in the li, that text (from the span) is centred nicely.
I put margin-bottom: 8px on your img just like how you had the span's bottom: 8px :P
Related
Got a problem, where if an "a" inside of "li" has 2 lines of text, that "li" sits higher than "li" with one line.
html is a standard div>ul>li
here is the css
ul#menu-main-menu {
/*this is to make li's go beyond the container width*/
position:absolute;
left:16%;
right:-100%;
}
ul#menu-main-menu li {
display: inline-block;
width: 148px;
}
ul#menu-main-menu li a {
position: relative;
height: 70px;
margin: 0 5px;
display: block;
padding: 0 10px;
}
jsfiddle added
https://jsfiddle.net/dLmwp5kp/
when the property is set to display:inline-block the element which has biggest height is aligned to the middle of other element
more detailed explanation can be found here
http://www.w3.org/TR/CSS2/visuren.html#inline-formatting
add vertical-align: middle; for ul#menu-main-menu li it will align them vertically
demo - https://jsfiddle.net/dLmwp5kp/2/
Try to use like this: Demo
CSS:
ul#menu-main-menu li {
display: block;
width: 60px;
float:left;
}
ul#menu-main-menu li a {
height: 35px;
line-height:16px;
margin: 0 5px;
display: block;
padding: 0 2px;
background-color:red;
color:#fff;
}
.container {
position:relative;
width:400px;
margin:0 auto;
}
ul#menu-main-menu {
/*this is to make li's go beyond the container width*/
position:absolute;
left:16%;
right:-100%;
list-style:none;
}
ul#menu-main-menu li {
float: left;
width: 60px;
}
ul#menu-main-menu li a {
position: relative;
height: 35px;
margin: 0 5px;
display: block;
padding: 0 2px;
background-color:red;
color:#fff;
}
<div class="container">
<ul id="menu-main-menu">
<li><a>Test 1</a></li>
<li><a>Test 1</a></li>
<li><a>Test 2lines</a></li>
<li><a>Test 2lines</a></li>
<li><a>Test 1</a></li>
</ul>
</div>
Please check snippet for your answer.
Just put up display:inline-block and vertical-align:top; in both "li" and "a".
ul#menu-main-menu li {
display: inline-block;
width: 60px;
}
ul#menu-main-menu li a {
display: inline-block;
vertical-align:top;
position: relative;
height: 35px;
margin: 0 5px;
padding: 0 2px;
background-color:red;
color:#fff;
}
I have found lots of ways to center a nav using tricks. Either by setting the line height and the height equal to each other or using vertical-align with display:table. It worked but my border always came at the bottom of the container rather than text.
*{
margin:0px;
padding:0px;
}
header{
display:block;
height:100px;
background-color:blue;
}
nav{
height:auto;
width:100%;
display:block;
}
nav a{
height:100%;
text-align:center;
display:inline-block;
text-decoration:none;
color:black;
margin-left:25px;
font-size: 25px;
}
nav a:hover{
border-bottom: 3px solid #F3008A;
}
}
<header>
<nav>
Link
Link
Link
Link
</nav>
</header>
To clarify the problem, I want to vertically center the text or the "a" tags within the header block. I would like to do this and also be able to put borders on the "a" tag where the border is close to the text.
You could use the table-cell display vertical-align approach.
* {
margin:0px;
padding:0px;
}
header {
display:table;
width: 100%;
height: 100px;
background-color:blue;
}
nav {
height:auto;
width:100%;
display:table-cell;
vertical-align: middle
}
nav a {
text-align:center;
display:inline-block;
text-decoration:none;
color:black;
margin-left:25px;
font-size: 25px;
position: relative;
border-bottom: 3px solid blue;
}
nav a:hover {
border-bottom: 3px solid #F3008A;
}
<header>
<nav> Link
Link
Link
Link
</nav>
</header>
http://jsfiddle.net/wdabedbv/
You need to remove display:inline-block; and give line-height. It will solved your issue.
Check below your updated code:
*{
margin:0px;
padding:0px;
}
header{
display:block;
height:100px;
background-color:blue;
}
nav{
height:auto;
width:100%;
}
nav a{
height:100%;
text-align:center;
line-height:100px;
text-decoration:none;
color:black;
margin-left:25px;
font-size: 25px;
}
nav a:hover{
border-bottom: 3px solid #F3008A;
}
}
<header>
<nav>
Link
Link
Link
Link
</nav>
</header>
Try to use :Before as i did since your Height of the nav is fixed it wont be a problem.
Fiddle Link Demo
* {
margin: 0px;
padding: 0px;
}
header {
display: block;
height: 100px;
background-color: blue;
}
nav {
height: 100%;
width: 100%;
display: table;
}
nav a {
height: 100%;
text-align: center;
display: inline-block;
text-decoration: none;
color: black;
margin-left: 25px;
font-size: 25px;
display: table-cell;
vertical-align: middle;
}
nav a:hover:before {
background-color: #F3008A;
postion: absolute;
width: 50px;
content: "";
height: 3px;
position: absolute;
z-index: 4;
top: 64px;
}
<header>
<nav>
Link
Link
Link
Link
</nav>
</header>
I would assert that it is best to use flexbox since it is modern and responsive. The following will work nicely in all relatively modern browsers.
nav {
display: -webkit-flex;
display: flex;
}
nav > div {
background-color: pink;
height: 40px;
-webkit-flex: 1;
flex: 1;
display: -webkit-flex;
display: flex;
-webkit-justify-contents: center;
justify-contents: center;
-webkit-align-items: center;
align-items: center;
}
nav > div:nth-child(odd) {
background-color: red;
}
nav > div > a {
text-align: center;
-webkit-flex: 1;
flex: 1;
}
<nav>
<div>hi</div>
<div>hi2</div>
<div>hi3</div>
</nav>
See this JSFiddle.
Here is a helpful guide with pictures.
How can I position span text so that it is positioned in the middle (vertically and horizontally). I have made a jsfiddle example and this is my code:
<ul>
<li class="one"><span>One</span></li>
<li class="two"><span>Two</span></li>
</ul>
css:
ul {
height: 200px;
border: 1px solid #000;
width: 200px;
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
li {
height: 30px;
width: 100%;
position: absolute;
background-color: blue;
}
.one {
top: 30px;
height: 50px;
}
.two {
top: 150px;
}
li span {
color: #fff;
vertical-align: middle;
height: 100%;
display: block;
}
The height of the li's can vary. The above is just a reference using fixed heights.
You need to set line-height at the same height as your li:
li span {
color: #fff;
vertical-align: middle;
height: 100%;
display: block;
line-height:30px;
}
li.one span{
line-height:50px;
}
Here's your demo: http://jsfiddle.net/r4Dr9/2/
You don't need to do tricks with margin or padding.
Give the <li> a display:table;, and the <span> a display:table-cell;.
DEMO
CSS to add
li {
text-align:center;
display:table;
}
li span {
display:table-cell;
vertical-align:middle;
}
Try using text-align: center; on the li span, and you'll have to set the top margin accordingly for each to get it down from the top.
A couple things. First, height:100%;, vertical-align:middle; does nothing. Also, with width:100%; and not specifying text-align, it'll always default to left. I'd personally use padding:
li span {
display:inline-block;
color: #fff;
text-align:center;
height: 100%;
}
.one span {
padding-top:10px;
}
.two span {
padding-top:3px;
}
I updated your jsFiddle as well.
Added style - 'text-align: center' on li element and it worked for me
I wish to display a ul that has a maximum of three li on each row. Each li contains a vertically centered image with an equal width, so I thought this would be easy. However, I can't stop it from overflowing:
Instead, I'd like the fourth image to clear to a new line. Here's my code:
<ul>
<li><img src="1.jpg"></li>
<li><img src="2.jpg"></li>
<li><img src="3.jpg"></li>
<li><img src="4.jpg"></li>
</ul>
ul {
border-spacing: 2px;
width: 150px;
background: red;
}
li {
height: 48px;
background: #000;
display:table-cell;
vertical-align:middle;
}
img {
width: 48px;
display:block;
vertical-align:middle;
}
How can I resolve this?
UPDATE: Here's a jsfiddle with a clearer example.
Did you try setting overflow?
ul {
border-spacing: 2px;
width: 150px;
background: red;
overflow-x:hidden
}
To have the "overflow" move to the next row, make your UL as wide as the three images, use float:left on your li and set the width of your li.
ul {
width:400px;
margin-top:50px;
margin-left:auto;
margin-right:auto;
}
ul li {
width:200px;
height:200px;
display:block;
float:left;
}
Tell the lis to float http://jsfiddle.net/8Pvtb/1/
li {
height: 48px;
background: #000;
display:table-cell;
float: left;
vertical-align:middle;
border-spacing: 12px;
}
But I don't understand why you want display:table-cell, it's not. I would use inline-block
http://jsfiddle.net/8Pvtb/5/
ul {
border-spacing: 2px;
width: 155px;
background: red;
}
li {
height: 48px;
background: #000;
display: inline-block;
vertical-align:middle;
border-spacing: 12px;
}
img {
width: 48px;
vertical-align:middle;
}
I need to make a css navigation according to the following style:
DESIRED LOOK
Below are the designs that I have done:-
1)Exhibit A - made using sprites
Note: Ignore the arrangement of the menu items
Pros: works well and has the desired look
Cons: if there is a need to add another menu item, another image must be manually made for that particular menu item. ie. not extensible
2)Exhibit B
Pros: very extensible. If another menu item must be added, new extra images need not be made. Only the menu name need to be typed in the html code.
Cons: the hover effect is not the same as the desired look.
My Requirement
Is to use Exhibit B, along with the hover effect from Exhibit A, but without having to add extra images when a menu item is created(this is what happens in Exhibit A, although it has the desired hover effect).
My approach:
Start working with Exhibit B
For the hover effect in the case of a single menu item use 3 images
a)left most edge
b)repeating slice of the middle area
c)right most edge
Is this correct ?
Is this possible ?
Is there a better way? A link to a tute would be fine.
Thanks
1] css code for Exhibit A
#charset "UTF-8";
* {
margin:0;
padding:0;
list-style: none;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
img {
border: none;
}
.clear {
clear:both;
}
.nav-container {
width: 960px;
}
#navMenu{
display: inline;
margin: 0;
padding: 0px;
position: relative;
z-index: 5;
}
#navMenu li{
float: left;
display: inline;
}
#navMenu li.navRepeat{
float: left;
display: inline;
background-image:url("../images/navigation_repeat.gif");
width:425px;
height:40px;
}
#navMenu li.navRepeatEnd{
float: right;
display: inline;
background-image:url("../images/navigation_repeat_end.gif");
width:1px;
height:40px;
}
a.navReservations{
display:block;
float:left;
width:89px;
height:40px;
background-repeat:no-repeat;
background: url("../images/reservations.gif")
}
a.navReservations:hover{
background: url("../images/reservations.gif") 0 40px;
}
a.navRentals{
display:block;
float:left;
width:62px;
height:40px;
background-repeat:no-repeat;
background: url("../images/rentals.gif")
}
a .navReservations {
float: left;
display: inline;
height: 100px;
width: 400px;
}
a.navRentals:hover{
background: url("../images/rentals.gif") 0 40px;
}
a.navTariffs{
display:block;
float:left;
width:59px;
height:40px;
background-repeat:no-repeat;
background: url("../images/tariffs.gif")
}
a.navTariffs:hover{
background: url("../images/tariffs.gif") 0 40px;
}
a.navFleet{
display:block;
float:left;
width:64px;
height:40px;
background-repeat:no-repeat;
background: url("../images/fleet.gif")
}
a.navFleet:hover{
background: url("../images/fleet.gif") 0 40px;
}
a.navTools{
display:block;
float:left;
width:56px;
height:40px;
background-repeat:no-repeat;
background: url("../images/tools.gif")
}
a.navTools:hover{
background: url("../images/tools.gif") 0 40px;
}
a.navReports{
display:block;
float:left;
width:71px;
height:40px;
background-repeat:no-repeat;
background: url("../images/reports.gif")
}
a.navReports:hover{
background: url("../images/reports.gif") 0 40px;
}
a.navSystem-Management{
display:block;
float:left;
width:133px;
height:40px;
background-repeat:no-repeat;
background: url("../images/system_management.gif")
}
a.navSystem-Management:hover{
background: url("../images/system_management.gif") 0 40px;
}
2] css code for Exhibit B
#navigation {
width: 959px;
height: 36px;
margin: 0;
padding: 0;
background-image: url(images/navigation-bg.gif);
background-repeat: no-repeat;
background-position: left top;
border: 1px solid #CCC;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation ul li {
display: inline;
margin: 0px;
}
#navigation ul li a {
height:27px;
display: block;
float: left;
color: #000;
text-decoration: none;
font-family: Arial;
font-size: 12px;
font-weight: bold;
background-image: url(images/navigation-separator.gif);
background-repeat: no-repeat;
background-position: right center;
padding-top: 6px;
padding-right: 15px;
padding-left: 15px;
vertical-align: 10%;
padding-bottom: 4px;
}
#navigation ul li a:hover {
color:#FFF;
background-image: url(images/navigation-hover.gif);
background-repeat: repeat-x;
background-position: left top;
}
#navigation ul li#active a {
color:#363636;
background: url(images/navigation-hover.png) repeat-x left top;
}
Well you technically only need two sprites, a wide left + body of the tab and a right side. By wide, I mean, 400px or some arbitrarily wide size that you don't anticipate hitting. You're trading a kb for easy of use. You can accomplish this by having markup like:
<ul class="list">
<li>Text</li>
</ul>
with css like:
ul.list
{
list-style-type: none;
margin: 0;
}
ul.list li
{
float: left;
background: url(leftpluswide.png) top left no-repeat;
}
ul.list li a
{
background: url(right.png) top right no-repeat;
}
The only caveat is that since the right.png will be overlapping the background on the li, you'll need to make sure that it doesn't have any transparency.
Also for completeness sake, you might need to apply a height to the li and the a (which will potentially require a display:inline-block or a line-height to take it) to make everything line up well.