I am working this site My Site The primary menu item Post An Ad has a red color background to it.Primary Menu has a dashed border.as the Post an ad item Background is big and is touching the the primary menu border i have changed the css into this
.header_menu_res ul a.rb_btn_postanad {
background: #981817 url(images/rb_btn_addnew.png) no-repeat 23px 23px;
padding-left: 50px;
padding-right: 30px;
font-weight: bold;
font-size: 20px;
line-height: 20px;
margin-left: 20px;
border-right: 1px solid #831617;
border-left: 1px solid #831617;
color: #fff;
height: 10px;
margin-top: 5px;
}
The css was actualy this
.header_menu_res ul a.rb_btn_postanad {
background: #981817 url(images/rb_btn_addnew.png) no-repeat 23px 23px;
padding-left: 50px;
padding-right: 30px;
font-weight: bold;
font-size: 20px;
line-height: 20px;
margin-left: 20px;
border-right: 1px solid #831617;
border-left: 1px solid #831617;
color: #fff;
}
I added
height: 10px;
margin-top: 5px;
which gave me the desired result.But the problem now is the text inside is not inside the middle of the menu item.I have tried adding padding top but it didn't help. Can anyone please help me in making it in the middle of the menu item.Thanks!!
You should add this css to your css
.header_menu_res ul a.rb_btn_postanad {background: #981817 url(images/rb_btn_addnew.png) no-repeat 23px 17px;
line-height: 11px;}
This will work for you.
Also change for hover class similar to above.
Change your class css to followings
.header_menu_res ul a.rb_btn_postanad {background: #981817 url(images/rb_btn_addnew.png) no-repeat 23px 17px;
line-height: 11px;}
I checked this solution and it works.
Hope this will help you.
You simply forgot the top/bottom padding then you need to update the plus icon's position.
.header_menu_res ul a.rb_btn_postanad {
background: #981817 url(images/rb_btn_addnew.png) no-repeat 23px 18px;
padding-left: 50px;
margin: 5px 0 0 20px;
padding-right: 15px 30px 15px 50px;
font-weight: bold;
font-size: 20px;
line-height: 20px;
border-right: 1px solid #831617;
border-left: 1px solid #831617;
color: #fff;
}
Add these:
.header_menu_res ul li {
display: table;
}
a.rb_btn_postanad {
display: table-cell;
vertical-align: middle;
}
That will work.
Hi remove this attribute:
.header_menu_res ul a.rb_btn_postanad
{
margin-top:0px;
height:10px;
}
Related
I have a simple navigation bar with an hover element.
.navip {
float: left;
text-decoration: none;
font-weight: lighter;
}
.navip > a {
display: block;
color: black;
text-decoration: none;
font-size: 20px;
font-weight: lighter;
line-height: 40px;
}
.navip > a:hover {
border-top: 3px solid blue;
}
When i hover on a, the border displays. But its taking down the text a little bit.
How i can fix this?
JsFiddle: http://jsfiddle.net/w0btkceg/
Edit: Solved it! I had to increase the height to 45 and add "border-top: 3px solid transparent" to the "navip a" class.
try to use
.navip > a:hover {
border-top: 3px solid blue;
margin-top: -3px;
}
I use this for menu:
.menu-item {
margin: 5px;
font-size: 1em;
font-weight: bold;
float: left;
border-top-style: solid;
border-top-width: 4px;
border-top-color: transparent;
}
.menu-item a {
padding: 5px 0;
text-decoration: none;
}
.menu-item-selected {
border-top-color: green;
}
.menu-item:hover {
border-top-color: green;
}
<div class="menu-item">
Test 1
</div>
<div class="menu-item menu-item-selected">
Test 2
</div>
<div class="menu-item">
Test 3
</div>
<div class="menu-item">
Test 4
</div>
Just do something like:
.navip > a {
display: block;
color: black;
text-decoration: none;
font-size: 20px;
font-weight: lighter;
line-height: 40px;
border-top: 3px solid transparent;} /* add a transparent border to the a */
.navip > a:hover {
border-top: 3px solid blue; /* Now just change the color value of the border from transparent to a color on over */
}
See working example here
Solution: Add a transparent border to the a , then add a color to it on hover. That way, the text won't move because the border existed before hover.
You could try box-sizing:border-box; this will include the border in the size of the box and is probably the most elegant solution.
Or my previous fix for this was just to have 10 padding for the normal link then padding:8px; for the hover version which had a border. Which would counter the border size.
Ok, you can declare a border-top property for the .navip > a{}, with 0 opacity on it, and then on hover, use your border color, like this one(check here)
.navip > a {
display: block;
color: black;
text-decoration: none;
font-size: 20px;
font-weight: lighter;
line-height: 37px; /*readjust for the border stuff*/
border-top: 3px solid rgba(255,255,255,.0);/*or transparent*/
}
.navip > a:hover {
border-top: 3px solid blue;
}
OR you can use a negative margin-top property on hover, or top property if you can make the .navip > a to position relative, check it here:
.navip > a {
position: relative;
display: block;
color: black;
text-decoration: none;
font-size: 20px;
font-weight: lighter;
line-height: 40px;
}
.navip > a:hover {
margin-top: -3px;/*or top: -3px*/
border-top: 3px solid blue;
}
You could use a box-shadow instead of a border-top, like this:
.navip > a:hover {
box-shadow: inset 0 3px 0 0 blue;
}
More info here: MDN Box Shadow
I have made a nav with a list that gives a list item the class .selected when on the current page. I am trying to add a background colour to this class which works, but I can't get it to fill the whole li item. It's not adding any background colour to the left of the navs selected li item. Not sure if this makes sense?
Here's my html:
<nav>
<ul>
<li class="selected">Home</li>
<li>About</li>
<li>Themes</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
And here's the css:
nav li {
border-right: solid 1px #fbfbfb;
display: inline;
font-family: 'Lato', sans-serif;
font-size: 15px;
list-style: none;
margin-left: 15px;
padding: 22px 15px 22px 0;
text-transform: uppercase;
text-align: center;
}
nav ul {
border-top: solid 1px #fbfbfb;
border-left: solid 1px #fbfbfb;
margin-bottom: 0;
padding: 20px 0;
}
nav a {
color: #6e6e6e;
text-decoration: none;
}
nav a:hover {
border-bottom: 1px solid #2ecc71;
}
.selected {
background-color: #2ecc71;
}
Just give some padding on the left to the li -
padding: 22px 15px 22px 15px;
Here's the jsFiddle
change your padding-left value:
nav li {
padding: 22px 15px 22px 10px;
}
margins and borders dont get background color.
try to cahnge it margin of li to either padding or a border of same size.
nav li {
border-right: solid 1px #fbfbfb;
display: inline;
font-family: 'Lato', sans-serif;
font-size: 15px;
list-style: none;
padding: 22px 15px 22px 15px;
text-transform: uppercase;
text-align: center;
}
The list item with class selected is being completely filled according to the instructions you've given to the browser to display the li element with a margin-left: 15px; and padding: 22px 15px 22px 0;. The padding you have specified says there should be no padding to the left of the content in the list item (the last value of 0).
Try removing margin-left: 15px; and change your padding to padding: 22px 15px 22px 15px; for your nav li element, like so:
nav li {
border-right: solid 1px #fbfbfb;
display: inline;
font-family: 'Lato', sans-serif;
font-size: 15px;
list-style: none;
padding: 22px 15px 22px 15px;
text-transform: uppercase;
text-align: center;
}
Small question on how to achieve some styling on a HTML / CSS UL menu.
I have a standard UL menu, but having some issues getting my head around how to achieve a certain look to the styling. The UL menu as it currently stands is shown here:
http://jsfiddle.net/WMQqt/
(HTML)
<ul id="nav">
<li>CONTACT US
</li>
<li>HOME
</li>
</ul>
(CSS)
#nav {
list-style: none;
margin-bottom: 10px;
*/ margin-top: -6px;
position: relative;
right: 286px;
z-index: 9;
height: 26px;
padding: 4px 4px 4px 4px;
font-weight: bold;
}
#nav li {
float: right;
margin-right: 10px;
}
#nav a {
display: block;
padding: 5px;
color: #444444;
background: #fff;
text-decoration: none;
border: 1px solid grey;
}
#nav a:hover {
color: #fff;
background: #04B431;
}
I'd like the menu buttons to have a small 1px border, but then some white space padding of around 3px before the background color starts.
Similar to how this looks:
http://jsfiddle.net/6PY7z/
Can this be done using the UL menu method?
Thanks for any advice, I'm no expert with HTML / CSS.
Add margin to a tag and move border to li
#nav li
{
float: right;
margin-right: 10px;
border: 1px solid grey;
}
#nav a
{
display: block;
padding: 5px;
color: #444444;
background: #ccc;
text-decoration: none;
margin:3px;
}
DEMO
you can use the following styles to achieve what you want:
#nav li
{
float: right;
margin-right: 10px;
border: 1px solid grey; /*put original border here*/
}
#nav a
{
display: block;
padding: 5px;
color: #444444;
background: #d8d8d8; /*new background-color*/
text-decoration: none;
border: 3px solid white; /*add white padding here*/
}
http://jsfiddle.net/WMQqt/4/
ok
in html go
<dl><div><dt>F</dt><dd>T</dd></div>
<div><dt>F</dt><dd>T</dd></div>
<div><dt>F</dt><dd>T</dd></div>
<div><dt>F</dt><dd>T</dd></div>
</dl>
in css
dl { display: flex;
flex-direction: column;}
some hints...
dt float left AND
dd float right
I have 2 issues I wanted to resolve in a CSS menu I'm coding but I find it out of my reach to handle them. Before I put the code here let me describe my 2 issues:
1) I'd like to have the all li area clickable instead of only the text..
2) I think the image and text is not correctly alingned vertically and wanted to fix that also.
Also: You can see the code I have in action at www.nfrases.com/modelo.php
HTML:
<nav>
<div class="drop-menu">
<span class="plus">+</span><span class="droptexto">Navegação</span>
<ul class="sub-menu">
<li><img src="/images/icon_info.png" alt="rss"> Acerca</li>
<li><img src="/images/icon_email.png" alt="rss"> Contactos</li>
</ul>
</div>
</nav>
CSS:
nav { width: 640px; float: right; }
.drop-menu { font-family: Arial, Helvetica, sans-serif; display: block; position: relative; margin: 0 auto; text-align: left; padding: 10px 10px; font-size: 22px; height: 30px; max-height: 30px; width: 120px; cursor: pointer; border-left: 1px solid #e7e4d4; border-right: 1px solid #e7e4d4; background: url("../images/bg_header.png") repeat scroll right top transparent; float: right; }
.drop-menu a, .drop-menu a:visited { color: #464530; text-decoration: none; }
.drop-menu a:hover { color:#ff5400; }
.drop-menu span.droptexto { padding-left:10px; font-size: 20px; color: #ff5400; font-family: 'Leckerli One', cursive; }
.plus { display: inline-block; -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; color: #ff5400; }
.drop-menu:hover .plus { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); }
.drop-menu:hover { border-left: 1px solid #e7e4d4; border-right: 1px solid #e7e4d4; }
.drop-menu:hover .sub-menu { display: inline-block; }
.sub-menu { display: none; width: 120px; background: #fff; padding: 10px 10px; margin-left: -11px; margin-top: 12px; border: 1px solid #e7e4d4; -webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2); }
.sub-menu li { list-style-type: none; display: block; border: 1px; border-color: #fff; border-style: dotted; border-bottom: 1px dotted #eaeaea; font-size: 19px; height: 24px; padding: 8px 0; font-size: 12px; }
.sub-menu li img { margin-right: .5em; margin-left: .5em; }
.sub-menu li:hover { border: 1px; border-color: #ff5400; border-style: dotted; }
as suggested earlier to make complete link clickable use display:block and define width&height or padding
.sub-menu li a {display:block; padding: 10px;}
to make the image and text aligned to center, the best approach is to put the image in background either li's or 'a' tag's. Dont forget the padding-left shd be greater than the width of the image.
.sub-menu li a.img1 { background-image:url(images/imagename.jpg); }
.sub-menu li a { background-position:center left; background-repeat: no-repeat; height: 20px; line-height: 20px; display: block; padding-left: 20px; }
Even if u dont want to put the image in background then try this. It may work. Set the height as per the height of the image, or use padding.
.sub-menu li a { height: 20px; line-height:20px; display: block;}
Hope this helps !
1)
.drop-menu a {
display:block;
}
2) Add the left image as background image of <li> then you can center the image and text horizontally.
Something like this will do the job: http://jsfiddle.net/YGHNu/
To make a full link set a to "display: block;", then set height and margin. To center image use "vertical-align: middle", and then move it a little higher with margin-top.
I within my li element I have a link and some text contained within a span.
When I hover over the li I want to change the colour of the text and link, this works well, however I am struggling to set a visited colour and keep this functionality.
Here is my code -
HTML -
<ul id="progress" class="tour_1">
<li>
<span class="number">1</span>
<span class="desc">A Link</span>
</li>
</ul>
CSS -
#progress li { float: left; width: 20%; text-align:center; font-size: 12px; color: #CCC; z-index: 10 }
#progress li .number { font-size: 24px; font-weight: 400; border: 2px solid #CCC; border-radius: 40px 40px 40px 40px; -moz-border-radius: 40px 40px 40px 40px; width: 30px; height: 30px; display: block; margin: 0 auto; background-color: #FFF }
#progress li:hover, li:hover a:hover { color: #333; }
You need to set a visited state like:
#progress li:hover a:visited
{
background-color:yellow;
}
http://www.w3schools.com/cssref/sel_visited.asp