My following code is not working.Means border and background color is not working
#navigation ul
{
background-color: #85A157;
border:3px solid white;
}
here is my fiddle http://tinkerbin.com/ooJNXsdD
i want like this
please help in correcting my fiddle.
try setting a height on the element like so:
#navigation ul
{
background-color: #85A157;
border:3px solid white;
height: 20px;/*added height*/
}
i hope this helps. i added the change to tinkerbin, not sure if it took :)
Use overflow: hidden on your <ul>, like this : http://tinkerbin.com/AMBfS3MY
After testing this on your Tinkerbin, this worked for me. You need a clearfix. In your CSS:
.clear {
clear: both;
}
Then in your HTML:
<ul>
...
<li class="clear"></li>
</ul>
And if you want the navigation bar to flush against the top image, add the following margin-top in your CSS:
#navigation ul
{
margin-top: 0;
...
}
I have just updated your fiddle, I hope you can see where your problems where.
http://tinkerbin.com/g63CbYYZ
For example:
ul has usually a margin. So you need to reset it.
Better define styles on div not on ul.
And a lot more...
This should do it for you.
#navigation ul
{
background-color: #85A157;
border:3px solid white;
margin:0px;
height:22px;
}
#navigation ul li
{
list-style:none;
float:left;
}
#navigation ul li a
{
color:white;
text-decoration:none;
margin:0px 37px 0px 0px;
}
Related
I've been fighting with this for probably 6 hours now and am completely stumped. I can't get the submenu to appear vertical on mouse hover. Here's the link from cssdesk. What am I messing up? I know it's something really simple.
http://www.cssdesk.com/n8WCm
If the link doesn't work for you, please see this snippet:
.nav8 ul .sub-menu{
position:absolute;
display:none;
}
.nav8 li:hover ul.sub-menu {
display: block;
background:#000;
border: 1px solid #ececec;
}
If there is more that you need, please let me know.
Add To your Css
.nav8 ul li li{
clear:both;
}
.nav8 ul li ul{
width:20% !important;
}
you should make it not floated left like the main menu, so i would suggest to clear it after every submenu li and give it a fixed width
.nav8 li:hover ul.sub-menu li {
clear:both;
width: 200px;
}
I'm trying to achieve the separator effect using border-right on my menu.
Here's my css code
ul.navigation li a {
text-decoration:none;
float:left;
width:252px;
height:50px;
display:block;
background-color:#ccc;
text-align:center;
line-height:45px;
color:#000;
position:relative;
border-right:1px solid #333;
}
ul.navigation li a:last-child {
border:none;
}
What am I doing wrong? I tried border-left and :first-child too.
I am thinking you mean to do this
ul.navigation li:first-child a
Because every a is the first child of its parent li. You mean the a inside the first li item. :)
Your CSS snippet is full of bad practices.
Below is an example of how you should style it and how you can add a separator between each list item.
.navigation { overflow: hidden; } /* Explanation 1 */
.navigation li { float: left; }
.navigation li + li { /* Explanation 2 */
border-left: 1px solid #333;
}
.navigation li a {
display: block;
width: 252px; /* Explanation 3 */
padding: 5px 0; /* Explanation 4 */
background-color:#ccc;
color:#000;
text-align:center;
}
Float containment: read this article.
Here I answer your question: applies a border left from the 2nd li to the last one, using the adiacent sibling selector +.
Are you sure you want to have a fixed width?
No fixed height and line-height to vertically align the text. line-height doen't need a unit by the way. Read this article.
Here is a live example: http://dabblet.com/gist/4968063
I am having trouble with aligning jQuery tags, I've used a bit of a code and changed it and styled it myself, however the align seems to be leaving a space on the left, which I don't want, and I'm not sure how to get rid of it. Here's what I mean...
http://postimage.org/image/8k5rcz941/
This is the CSS code:
.usual {
color:#111;
padding:15px 20px;
margin:8px auto;
}
.usual li { list-style:none; float:left; }
.usual ul a {
display:block;
padding:6px 10px;
text-decoration:none!important;
margin:1px;
margin-left:0;
font:10pt Verdana;
color:#FFF;
background:#444;
}
.usual ul a:hover {
color:#FFF;
background:#111;
}
.usual ul a.selected {
margin-bottom:0;
color:#fff;
background:#003663;
border-bottom:1px solid snow;
cursor:default;
}
.usual div {
padding:10px 10px 8px 10px;
*padding-top:3px;
*margin-top:-15px;
clear:left;
background:snow;
font:8pt Verdana;
border: 1px solid #d0d0d0;
}
.usual div a { color:#000; font-weight:bold; }
Hope you can help me shift this to the left, I've been trying to figure out what it is, and just can't :(
Thanks and regards.
I'm guessing that the ul has a margin or padding applied. Remove it:
.usual > ul {
margin: 0;
padding: 0;
}
.usual has a left padding of 20px. Is that what you're trying to get rid of?
Inspect your elements in either Google Chrome or using the Web Developer add-on for FireFox. Find the element and check all it's inherited styles; chances are likely, like icktoofay says, you probably have inheritance somewhere. If doing like he said, adding margin & padding = 0 for the UL, you can try the hack !important
.usual ul {
margin: 0 !important;
padding: 0 !important;
}
But note that if you have any other margin/padding that is used on the UL element, you will lose those, either using !important or not because margin: 0 sets all 4 sides. To target just the left side:
.usual ul {
margin-left: 0 !important;
padding-left: 0 !important;
}
Sometimes the hack won't work, that's why it's important to check your inheritance by inspecting the elements in the browser first.
I have a menu:
<div class="headerMenu">
<ul>
<li>Home <span>Home Page<span></li>
<li>About <span>About My Website<span></li>
<li>Contact <span>Get in touch<span></a></li>
</ul>
</div>
My current CSS is as follow:
.headerMenu{
width: 100%;
}
.headerMenu ul{
margin: 0;
padding: 0;
float: left;
}
.headerMenu ul li{
display: inline;
}
.headerMenu ul li a{
float: left;
color: white;
padding-top:25px;
padding-left:50px;
font-size:24pt;
}
.headerMenu ul li a:visited{
color: white;
}
.headerMenu ul li a:hover, .menu ul li .current{
color: #fff;
background: url(../../Content/Images/menu-selector.png) repeat-x; /* 25x10 arrow/*
}
And now for the question:
How can i get the content in the span tag to be below the Main text.
When i hover over the anchor, How do i add the hover image as shown in screen shot
The Mockup i created in Photoshop looks like this:
I know this would be easily achievable by making use of images, but my solution requires that menu to be created dynamically.
1) How can i get the content in the span tag to be below the Main text.
You need to use display: block on the span to have it appear on a new line:
.headerMenu ul li a span {
display: block;
}
2) When i hover over the anchor, How do i add the hover image as shown in screen shot
Try to center the arrow to the top. This might work:
.headerMenu ul li a:hover, .menu ul li .current {
color: #fff;
background: url(../../Content/Images/menu-selector.png) no-repeat center top;
display:block;
/* also make sure that you use display block with correct height
so that you can positionate the arrow on the correct place... */
}
Add the following code for problem 1:
.headerMenu ul li a span {
display: block;
}
This sets the <span> to display as a block level element, therefore occupying the full parent container width by default.
For problem 2, there are multiple ways to do this. However, my suggestion would be to add the array to the <li> and use the :hover pseudo class. Note: that this will only work in IE for 7+.
.menu ul li:hover{
background: url(../../Content/Images/menu-selector.png) repeat-x;
}
See it in action - http://jsfiddle.net/kxqx8/1/ (I changed the colors to help display)
I've tried everything from adding line-height, to changing the 'display' property to 'table-cell' to the li, but somehow i cant seem to get the images to be vertically aligned.
the css:
ul.columns { list-style: none; padding:25px }
ul.columns li {width:180px; height:180px; float:left; margin:16px; position:relative; overflow:hidden; border:1px solid gray}
ul.columns li img {margin:auto; display:block;}
http://jsfiddle.net/Sdt8M/3/
appreciate the help guys...
Do those images need block display? If not, you can just give those lis a line-height:180px, and vertical-align:middle those images.
http://jsfiddle.net/Sdt8M/20/
Have a look at this example http://www.brunildo.org/test/img_center.html
hey try this..
Add padding-top:10px to ul.columns li
ul.columns { list-style: none; padding:25px }
ul.columns li {width:180px; height:180px; padding-top:10px; float:left; margin:16px; position:relative; overflow:hidden; border:1px solid gray}
ul.columns li img {margin:auto; display:block;}
Hope it will help you.