Goal:
Move the object of the icon and the text "bbb" to right side, about 10 pixel. The background should be remained in the same position.
Problem:
I tried to do it but I failed. Sorry!
Thanks!
#result-filters {
margin: 20px, 20px, 30px;
}
#result-filters UL {
display: inline;
list-style: outside none none;
margin: 0;
padding: 0;
font-size: 12px;
font-family: arial, helvetica, sans-serif;
}
#result-filters UL LI {
margin: 0 8px 0 0;
float: left;
}
LI.filtered A {
position: relative;
padding: 1px 20px 1px 4px;
background: #F0F0FF url(https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Lollipop-16.png) no-repeat scroll right 0;
background-position: right bottom;
font-weight: 400;
color: #08C;
text-decoration: none;
}
LI.filtered, #result-filters LI.filtered {
padding-left: 0;
background: transparent none repeat scroll 0 0;
}
li.ttt a
{
position: relative;
padding: 1px 40px 1px 20px;
background: #F0F0FF url(https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Lollipop-16.png) no-repeat scroll left 0;
background-position: left;
font-weight: 400;
color: #08C;
text-decoration: none;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background-color: #F4F4F4;
font-size: 18px;
}
<div id="result-filters">
<ul>
<li class="filtered"><a href="">
aaa
</a>
</li>
<li class="ttt">bbb
</li>
</ul>
</div>
https://jsfiddle.net/5f7qjLgf/7/
just change this css:
li.ttt a {
padding: 1px 30px 1px 30px;
background-position: 10px ;
}
so, 10px less to the right of the a tag, 10px more to the left (moving the "bbb" and background-position:10pxso you move the icon 10pc to the right.
FIDDLE
Related
Goal:
Make the text "bbb" to have the same font height as "aaa" but the height of the li.ttt should have the same height as the font-size: xx-large;
Problem:
Don't know how to do it. I tried using "height" but it doesn't work.
https://jsfiddle.net/qc89dwz7/
LI.filtered A {
position: relative;
padding: 1px 20px 1px 4px;
background: #F0F0FF url(https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Lollipop-16.png) no-repeat scroll right 0;
background-position: right bottom;
font-weight: 400;
color: #08C;
text-decoration: none;
}
LI.filtered .testt {
background: #F0F0FF;
padding: 1px 4px 1px 4px;
font-weight: 400;
color: #08C;
text-decoration: none;
}
#result-filters {
margin: 0, 0, -30px;
}
#result-filters UL {
display: inline;
list-style: outside none none;
margin: 0;
padding: 0;
font-size: 12px;
font-family: arial, helvetica, sans-serif;
}
LI.filtered,
#result-filters LI.filtered {
padding-left: 0;
background: transparent none repeat scroll 0 0;
}
#result-filters UL LI {
margin: 0 8px 0 0;
float: left;
}
LI.ttt A {
position: relative;
padding: 1px 4px 1px 20px;
background: #F0F0FF url(https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Lollipop-16.png) no-repeat scroll left 0;
background-position: left;
font-weight: 400;
color: #08C;
text-decoration: none;
font-size: xx-large;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #F4F4F4;
min-height: 61px;
border: 0;
line-height: 1.2;
letter-spacing: 1px;
width: 137px;
text-align: center;
font-family: Tahoma;
}
<div id="result-filters">
<ul>
<li class="filtered">
<a href="">
aaa
</a>
</li>
<li class="ttt">
bbb
</li>
</ul>
</div>
xx-large translates to 32px
Knowing this, you can establish the height and line-height of the two list-items separately:
li.filtered {
height: 12px;
line-height: 12px;
}
li.ttt {
height: 32px;
line-height: 32px;
}
You can then establish the font-size of aaa and bbb as 12px:
li.filtered a,
li.ttt a {
font-size: 12px;
}
Putting it all together:
LI.filtered A {
position: relative;
padding: 1px 20px 1px 4px;
background: #F0F0FF url(https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Lollipop-16.png) no-repeat scroll right 0;
background-position: right bottom;
font-weight: 400;
color: #08C;
text-decoration: none;
}
LI.filtered .testt {
background: #F0F0FF;
padding: 1px 4px 1px 4px;
font-weight: 400;
color: #08C;
text-decoration: none;
}
#result-filters {
margin: 0, 0, -30px;
}
#result-filters UL {
display: inline;
list-style: outside none none;
margin: 0;
padding: 0;
font-size: 12px;
font-family: arial, helvetica, sans-serif;
}
LI.filtered,
#result-filters LI.filtered {
padding-left: 0;
background: transparent none repeat scroll 0 0;
}
#result-filters UL LI {
margin: 0 8px 0 0;
float: left;
}
LI.ttt A {
position: relative;
padding: 1px 4px 1px 20px;
background: #F0F0FF url(https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Lollipop-16.png) no-repeat scroll left 0;
background-position: left;
font-weight: 400;
color: #08C;
text-decoration: none;
font-size: xx-large;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #F4F4F4;
min-height: 61px;
border: 0;
line-height: 1.2;
letter-spacing: 1px;
width: 137px;
text-align: center;
font-family: Tahoma;
}
li.filtered,
li.ttt {
display:block;
background-color: rgba(244,244,244,1);
}
li.filtered {
height: 12px;
line-height: 12px;
margin: 10px;
}
#result-filters li.filtered {
margin-top: 10px;
}
li.ttt {
height: 32px;
line-height: 32px;
}
li.filtered a,
li.ttt a {
font-size: 12px;
}
<div id="result-filters">
<ul>
<li class="filtered">
<a href="">
aaa
</a>
</li>
<li class="ttt">
bbb
</li>
</ul>
</div>
=====
A Simpler Alternative for Plain Colour Backgrounds
If you wish to middle-align the two same-font-size list-items over a plain colour background, simply colour in the background of li.ttt and leave the background of li.filtered transparent:
li.filtered,
li.ttt {
display:block;
height: 32px;
line-height: 32px;
}
li.ttt {
background-color: rgba(244,244,244,1);
}
li.filtered a,
li.ttt a {
font-size: 12px;
}
Putting it all together (simpler version):
LI.filtered A {
position: relative;
padding: 1px 20px 1px 4px;
background: #F0F0FF url(https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Lollipop-16.png) no-repeat scroll right 0;
background-position: right bottom;
font-weight: 400;
color: #08C;
text-decoration: none;
}
LI.filtered .testt {
background: #F0F0FF;
padding: 1px 4px 1px 4px;
font-weight: 400;
color: #08C;
text-decoration: none;
}
#result-filters {
margin: 0, 0, -30px;
}
#result-filters UL {
display: inline;
list-style: outside none none;
margin: 0;
padding: 0;
font-size: 12px;
font-family: arial, helvetica, sans-serif;
}
LI.filtered,
#result-filters LI.filtered {
padding-left: 0;
background: transparent none repeat scroll 0 0;
}
#result-filters UL LI {
margin: 0 8px 0 0;
float: left;
}
LI.ttt A {
position: relative;
padding: 1px 4px 1px 20px;
background: #F0F0FF url(https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Lollipop-16.png) no-repeat scroll left 0;
background-position: left;
font-weight: 400;
color: #08C;
text-decoration: none;
font-size: xx-large;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #F4F4F4;
min-height: 61px;
border: 0;
line-height: 1.2;
letter-spacing: 1px;
width: 137px;
text-align: center;
font-family: Tahoma;
}
li.filtered,
li.ttt {
display:block;
height: 32px;
line-height: 32px;
}
li.ttt {
background-color: rgba(244,244,244,1);
}
li.filtered a,
li.ttt a {
font-size: 12px;
}
<div id="result-filters">
<ul>
<li class="filtered">
<a href="">
aaa
</a>
</li>
<li class="ttt">
bbb
</li>
</ul>
</div>
I tried to round the corners on this div box that I created and it doesn't work. Tested this out on Chrome, IE, Firefox and no go. I am not too fluent in CSS and DIV. So if you can see my problem, please help me.
Code CSS:
.side-nav-menu{
width: 100%;
border-radius: 10px;
}
.side-nav-menu h1{
font-size: 1.1em;
font-weight:bold;
color: white;
background: #3F5671;
margin-bottom: 0;
padding: 7px 0 7px 7px;
}
.side-nav-menu ul{
list-style-type: none;
margin: 0;
padding: 0;
border-left: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
margin-bottom: 0;
}
.side-nav-menu ul li{
padding-bottom: 0px;
border-bottom: 1px solid #c0c0c0;/
}
.side-nav-menu ul li a{
font-size: normal 1.1em;
font-weight:bold;
color: #777777;
background: #ffffff;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 7px;
text-decoration: none;
}
.side-nav-menu ul li a:hover{
color: #777777;
background: #F7F7F7;
}
HTML
<div class="side-nav-menu">
<h1>Sub-Categories</h1>
<ul>
<li>Air Sampling Pumps</li>
<li>Dust Monitors</li>
<li>Flame Ionization Detectors</li>
<li>Photoionization Detectors</li>
<li>Ventilation Blower</li>
</ul>
</div>
https://jsfiddle.net/pssz0xv0/
Child elements wont inherit round corners from their parents. You will have to apply a border radius to the top element 'h1' and bottom element, the last 'a'.
https://jsfiddle.net/pssz0xv0/5/
.side-nav-menu h1{
border-radius:10px 10px 0 0;
}
.side-nav-menu ul li:last-child a{
border-radius: 0 0 10px 10px;
}
border-radius: 10px
On .side-nav-menu ?
.side-nav-menu{
width: 100%;
border-radius: 10px;
overflow: hidden;
}
.side-nav-menu h1{
font-size: 1.1em;
font-weight:bold;
color: white;
background: #3F5671;
//margin-bottom: 0;
margin: 0;
padding: 7px 0 7px 7px;
}
https://jsfiddle.net/alireza_safian/pssz0xv0/9/
I made a fixed menu bar for my homepage in css using a list. It looks fine, but when I minimize the browser, the menu items move to the left, which I don't want them to do.
How can I prevent that and make the browser keep the position of the menu the way it is, if necessary the browser could add a horizontal scroll bar, but the menu shouldn't move around.
Can anyone help, please?
Here is the HTML coode:
<div id="menu">
<li style="list-style: none;"> <img src="images/head.png"/><br></li>
<div id='cssmenu'>
<ul>
<li><a href='index.html'><span>xxx</span></a></li>
<li><a href='index.html'><span>xxx</span></a></li>
<li><a href='index.html'><span>xxx</span></a></li>
<li><a href='index.html'><span>xxx</span></a></li>
<li><a href='index.html'><span>xxx</span></a></li>
<li><a href='index.html'><span>xxx</span></a></li>
</ul>
</div>
</div>
Here is the CSS code - Menu Navigation Bar:
#cssmenu
{
position: relative;
margin: 0 auto;
clear: both;
}
#cssmenu a
{
list-style: none;
margin: 0;
padding: 0;
border: 0;
line-height: 1.5;
}
#cssmenu li
{
border: 1px solid transparent;
padding-top: 7px;
display: block;
width: 160px;
float: right;
margin: 0 10px;
}
#cssmenu ul
{
margin: 0 auto;
padding: 0;
text-align: center;
padding-right: 20px;
margin-bottom: -70px;
max-height: 80px;
}
#cssmenu li a
{
padding-top: 8px;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 10px;
border: 1px solid #dfdfdf;
text-decoration: none;
display: block;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-khtml-border-radius: 2px;
font-size: 17px;
font-family: Verdana, Tahoma;
color: #292F33;
}
#cssmenu li:hover a
{
border-bottom: 3px solid #30B0FF;
display: block;
color: #30B0FF;
clear: both;
font-size: 17px;
font-family: Verdana, Tahoma;
transition-duration: 0.1s;
transition-delay: 0.03s;
}
#menu
{
height: 86px;
width: 100%;
float: center;
padding-top: 10px;
padding-right: 20px;
padding-left: 20px;
margin-left: -20px;
margin-top: -106px;
font-family: Verdana, Tahoma;
font-size: 15px;
position: fixed;
border: 5px solid #292F33;
box-shadow: 0px 0px 125px rgba(255, 255, 255, 0.35);
background-color: #fff;
color: #292F33;
}
The below code works. I have tested this myself in Chormium CSS editor. All you need to do is add min-width: 1200px or something suitable to your need, then change position: fixed to position: absolute
#menu {
height: 86px;
width: 100%;
min-width: 1200px;
float: center;
padding-top: 10px;
padding-right: 20px;
padding-left: 20px;
margin-left: -20px;
margin-top: -106px;
font-family: Verdana, Tahoma;
font-size: 15px;
position: absolute;
border: 5px solid #292F33;
box-shadow: 0px 0px 125px rgba(255, 255, 255, 0.35);
background-color: #fff;
color: #292F33;
}
You need to change the width of the #menu div. Now it is width:100%, so when de body is minimized, the #menu div too. If you set a size of, for example, 1200px, this size will not change when the body is minimized.
I tested it with Chrome CSS editor on your page and it works.
So,
#menu {
height: 86px;
width: 1200px;
float: center;
padding-top: 10px;
padding-right: 20px;
padding-left: 20px;
margin-left: -20px;
margin-top: -106px;
font-family: Verdana, Tahoma;
font-size: 15px;
position: fixed;
border: 5px solid #292F33;
box-shadow: 0px 0px 125px rgba(255, 255, 255, 0.35);
background-color: #fff;
color: #292F33;
}
EDITED:
Also set:
body{
min-width:1200px;
}
Replace this style Done :-
#cssmenu li{
width: 12%;
}
Try positioning it to "absolute" rather than "relative".
For making it more good try applying bootstrap.
I have created a site for a Hebrew client. Here is the live demo link:
live link
The top row with links "About Us", "Contact", "Register", "Log In" is not showing properly in any ie browser. The icons should show on right of the text. I have tried different floats and margins, paddings, but it only messes things up.
How do I correct this code, please?
<div class="logobar">
<div class="logobar_content">
<ul class="toplinks">
<li>About Us</li>
<li>Contact</li>
<li>Register</li>
<li>Log In</li>
</ul>
<div class="left">
<p class="scart">
<span>0</span>itemsCheckout
</p>
<form action="post" class="search_form">
<input type="text" id="search" class="search" />
<input type="submit" id="submit" class="submit" value="" />
</form>
</div>
</div>
</div>
/*=========== LOGO BAR =========*/
.logobar {
height: 95px;
overflow: hidden;
position: relative;
margin: 0 auto;
width: 100%;
background: #f0f0f0 url(../images/logobar_repeat.png) 0 0 repeat-x;
}
.logobar_content {
width: 960px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.logo {
background: url(../images/logo.png) 0 0 no-repeat;
position: relative;
float: right;
width: 312px;
height: 71px;
margin-top: 13px;
}
ul.toplinks {
float: left;
width: 500px;
margin-top: 15px;
}
.toplinks li {
float: right;
list-style: none;
border-left: 1px solid #888;
padding: 0 13px 0 20px;
}
.toplinks li a {
padding: 0 0 0 35px;
font-family: Trebuchet MS, Arial, sans-serif;
font-size: 12px;
text-transform: uppercase;
color: #444;
text-decoration: none;
text-align: right;
}
.toplinks li a.info_icon, .toplinks li a.envelope_icon, .toplinks li a.pen_icon, .toplinks li a.lock_icon {
background: url(../images/info_icon.png) 0px 0 no-repeat;
width: 18px;
height: 15px;
}
.toplinks li a.envelope_icon {
background: url(../images/envelope_icon.png) 0 0 no-repeat;
}
.toplinks li a.pen_icon {
background: url(../images/pen_icon.png) 0 0 no-repeat;
}
.toplinks li a.lock_icon {
background: url(../images/lock_icon.png) 0 0 no-repeat;
}
.scart {
background: #eee url(../images/basket2.png) 95% 2px no-repeat;
float: right;
height: 25px;
margin: 17px 0px 0 25px;
padding: 3px 40px 0px 10px;
border: 1px solid #ccc;
}
.scart a {
float: right;
color: #ff720c;
font-weight: bold;
font-size: 14px;
margin-left: 5px;
}
.scart span {
margin-left: 4px;
}
.search_form {
float: left;
clear: left;
height: 26px;
margin-top: 20px;
background: url(../images/search_left2.png) 100% 0 no-repeat;
}
.search {
background: url(../images/search_repeat.jpg) 0 0 repeat-x;
border: none;
margin: 0 11px 0 0px;
float: right;
width: 170px;
height: 26px;
}
.submit {
background: url(../images/search_right2.png) 0 0 no-repeat;
width: 35px;
height: 26px;
float: left;
border: none;
}
Thanks.
It is so simple to accomplish that see the css rules below and rest you change as per your need.
.toplinks li a.lock_icon {
background: url("../images/lock_icon.png") no-repeat scroll 95% 0 transparent;
}
.toplinks li a {
color: #444444;
font-family: Trebuchet MS,Arial,sans-serif;
font-size: 12px;
padding: 0 35px 0 0; // See the css padding i changed to right
text-align: right;
text-decoration: none;
text-transform: uppercase;
}
I have created a simple UL/LI navigation bar. It looks perfectly fine in both IE and Chrome, however in firefox any element after the first element is shifted down by about 35 pixels. I have tried just about everything I could think of to fix this and just cant seem to get it right.
Here is my current code:
HTML
<div class="navigation">
<ul>
<li><span>Home</span></li>
<li><span>My Calendar</span></li>
<li><span>Catalog</span></li>
<li><span>My Learning</span></li>
<li><span>Shopping Cart</span></li>
<li><span>My Account</span></li>
<li><span>Support</span></li>
<li><span>Sign Out</span></li>
<li><span>Admin View</span></li>
</ul>
<div class="clear_float">
</div>
</div>
CSS:
.navigation {
left: 1px;
position: absolute;
text-align: right;
top: 7px;
white-space: nowrap;
}
.navigation ul {
list-style: none;
margin: 0px;
padding: 0px;
}
.navigation ul li {
display: inline;
margin-right: 2px;
}
.navigation ul li a {
display: inline-block;
line-height: 17px;
/*
padding: 1px 11px 0px
*/;
text-decoration: none;
}
a.button_selected_tab {
background: transparent url('images/orange_button_right.png') no-repeat scroll top right;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 28px;
margin-right: 6px;
padding-right: 7px; /* sliding doors padding */
text-decoration: none;
color: #FFFFFF;
}
a.button_selected_tab span {
background: transparent url('images/orange_button_left.png') no-repeat;
display: block;
line-height: 28px;
padding: 0px 10px 10px 15px;
}
a.button_inactive_tab {
background: transparent url('images/grey_button_right.png') no-repeat scroll top right;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 28px;
margin-right: 6px;
padding-right: 7px; /* sliding doors padding */
text-decoration: none;
color: #FFFFFF;
}
a.button_inactive_tab span {
background: transparent url('images/grey_button_left.png') no-repeat;
display: block;
line-height: 28px;
padding: 0px 10px 10px 15px;
}
I made an example with your code, and removing margin-right:2px; from .navigation ul li set all the elements in the same line. Is this what you need?
Example: http://jsbin.com/uhace3