I am trying to make the last category have no bottom border, is there is any trick to done it without programming?
HTML & CSS:
<style>
#menu {
border:1px red solid;padding:10px
}
#menu a {
display:block;
border-bottom:1px #000 dotted
}
</style>
<div id="menu">
<p>MAIN MENU</p>
<a>Computers</a>
<a>Design</a>
<a>Programming</a>
</div>
EXAMPLE:
http://jsfiddle.net/GLJWp/
You may try this, because last-child doesn't work in IE
HTML
<div id="menu">
<p>MAIN MENU</p>
<a>Computers</a>
<a>Design</a>
<a>Programming</a>
</div>
CSS
#menu{
border:1px red solid;padding:10px
}
#menu a{
display:block;
border-top:1px #000 dotted
}
The following would effect the first a after the p, a:first-child won't work in IE because p is the first child element
#menu p + a{
border-top: none;
}
DEMO.
Have a look at the :last-child pseudo class, which will apply the css rules only to the last item: http://www.quirksmode.org/css/firstchild.html
In this case you'd style the last link by:
#menu a:last-child {border-bottom:none}
For supporting IE <9, have a look at this beautifully horrible conditional stylesheet hack.
Done here: http://jsfiddle.net/GLJWp/2/
Related
i am new to css, i have written code to display some text on hover. But it is not working
HTML:
<div id="onHover"> 5
<span>
<ul>
<li>Ankur</li>
<li>Dhanuka</li>
</ul>
</span>
</div>
CSS:
#onHover span:hover
{
bottom:130px;
left:105px;
padding:8px 8px 10px 8px;
display:block;
border:1px dashed #09f;
background-color:#FFF;
min-width:170px;
position:relative;
z-index:101;
}
#onHover span:hover ul {
font-weight:normal;
list-style:none;
margin:10px 0 0 0;
padding:0;
position:relative;
}
span {
display:none;
}
you can also see this fiddle http://jsfiddle.net/ankurdhanuka/ccFxu/
please help
Thanks in Advance
Your HTML should look like this (the span is useless, so I took it out, it also isn't allowed in HTML4. It is in HTML5 tho...):
<div id="onHover"> 5
<ul>
<li>Ankur</li>
<li>Dhanuka</li>
</ul>
</div>
Then you can add a :hover effect on the div, like this:
#onHover ul {
display: none;
}
#onHover:hover ul {
display:block;
}
As you can see, the :hover is on #onHover, but it triggers the ul within it.
DEMO
Nice Try, friend. Give :hover to #onHover as 5 is enclosed within #onHover.
Use position only if it is required.
check this.
http://jsfiddle.net/ccFxu/3/
You are setting display:none to the span through css.
The elements which are set as display:none will not be visible and are actually take no space in the view. Hence you cant able to hover on span which is actually not available because of display:none.
I have a traditional nav created. between each li I put one div with 1px width and slightly smaller height than nav bar.
Basically I was going for this look:
http://subalee.com/nav.jpg
HTML:
<nav>
<ul>
<div></div>
<li>Domov</li>
<div></div>
<li>Služby</li>
<div></div>
<li>O nás</li>
<div></div>
<li>Kontakt</li>
<div></div>
</ul>
</nav>
CSS:
nav ul div {
height:31px;
width:1px;
background-color:#34b9ff;
display:inline-block;
}
nav ul li {
display:inline;
}
nav ul li a {
display:inline-block;
padding:10px;
When I change div to display:inline; text works properly but those visible spaces somehow dissapear.
Problem 1:
You are not allowed to place ANYTHING else into a ul except li.
I'd consider another approach to skip the syntactically useless styling-divs:
JS-Fiddle Example
nav ul li {
font-size: 16px;
display:inline;
padding: 2px 0px;
border-right: 1px solid blue;
}
You can avoid spaces between inline elements by setting font-size to 0 and resetting it on the li.
I don't think you can have a DIV within UL.
I'm sure you could achieve the same results with LIs only, by adding the appropriate style.
if you do not want any change in the way the elements are declared in your html then
use
border-left:1px solid #34b9ff;
instead of background-color:
and use display:inline;
Full css would look like
nav ul div {
height:31px;
width:1px;
border-left:1px solid #34b9ff;
display:inline;
}
Here's the fiddle
The main problem in these cases is that you can't have ANY whitespace between li's as this will show up.
Following jsFiddle show exactly your code with space removed results in what I think is what you want.
http://jsfiddle.net/jPF2p/
I'm having a problem getting a pseudo class working with my code. The code in question is a horizontal ordered list that's being placed at the top of a slider. The list is stretched out to fill the full horizontal width of the slider. I put a left-border on each of the list elements by assigning a border to the links contained within the list elements (so that the border didn't make the list too wide).
But I wanted to remove the first link's left-border so that borders were only shown between each list element, and not on the first or last list element.
The problem arises though when I add a first-child pseudo class to the link. The pseudo class seems to assign the class to all of the links.
Here's what I have:
CSS
ol.bjqs-markers{
display:inline-block;
list-style:none;
margin:0;
padding:0;
z-index:9999;
width:100%;
position:absolute;
top:0px;
}
ol.bjqs-markers li{
display:inline;
float:left;
height:30px;
width:20%;
background:rgba(0,0,0,0.7);
float:left;
margin:0 0px;
}
ol.bjqs-markers li a{
display:block;
font-size:22px;
color:#FFF;
text-align:center;
text-decoration:none;
height:100%;
display:block;
overflow:hidden;
border-left:1px solid #F00;
}
ol.bjqs-markers li a:first-child{
border-left:none;
}
And HTML:
<ol class="bjqs-markers">
<li class="active-marker">Example</li>
<li class="">Example</li>
<li class="">Example</li>
<li class="">Example</li>
<li class="">Example</li>
</ol>
Can someone point me in the direction of why that a:first-child applies a border of "none" to all the tags?
Thanks guys!
:first-child works just like expected, but every A in your example is a first-child. It is the first child of its parent LI.
What you're looking for is this:
ol.bjqs-markers li:first-child a {}
It is because you apply this pseudo class to first link in li element. Use
ol.bjqs-markers a:first-child {
border-left:none;
}
Or
ol.bjqs-markers li:first-child a {
border-left:none;
}
maybe you want to do
ol.bjqs-markers li:first-child a{
It it because you are applying the border to the first <a> tag in each <li> tag. Try this instead:
ol.bjqs-markers li:first-child a { }
I have a navbar that is like so:
<ul>
<li>Home</li>
<li>Gallery</li>
<li>Testimonials</li>
<li>Services</li>
<li>Contact</li>
</ul>
And it has css like so:
.nav_bar {
margin: 0px 0px 0px 0px;
height:40px;
}
.nav_bar ul {
margin:0px;
padding:0;
list-style:none;
width:940px;
}
.nav_bar li {
margin: 0px 0px 0px 0px;
display:inline;
}
.nav_bar li a {
text-align:center;
border-left: 1px solid #fff;
text-decoration:none;
padding: 20px;
width:147px;
background:#000000;
color:#eee;
float:left;
}
As you can imagine, this puts a white line to the left of the elements, Which I want except for the first one. I tried adding:
Home
to the first li but it doesn't do anything, and in developer tools, it is crossed out with a orange triangle next to it. So, how would I accomplish the task at hand?
Thanks for your help.
You have a slight error in your border-left syntax, it should be:
Home
See this introduction to CSS shorthands for more info on the sort of syntax you should use.
Why not do
.nav_bar li a:first-child {
border-left: 1px solid #000;
}
Or if you don't want it at all
.nav_bar li a:first-child { border:none; }
From http://www.w3.org/TR/CSS2/selector.html#first-child:
The :first-child pseudo-class matches an element that is the first child element of some other element.
In the following example, the selector matches any P element that is the first child of a DIV element. The rule suppresses indentation for the first paragraph of a DIV:
div > p:first-child { text-indent: 0 }
This selector would match the P inside the DIV of the following fragment:
<P> The last P before the note.
<DIV class="note">
<P> The first P inside the note.
</DIV>
but would not match the second P in the following fragment:
<P> The last P before the note.
<DIV class="note">
<H2>Note</H2>
<P> The first P inside the note.
</DIV>
I have a page design with a menu as follows:
Cat1 | Cat2 | Cat 3 | Cat 4
When I hover the word Cat2, The bgcolor of the whole box of Cat2 changes to blue color. Also, whole cell needs to be clickable and linked to other page.
I can do that without having the symbol "|" by changing the bgcolor of the table cell and making width of the "a tag" to 100% and height of "a tag" to 30px. But I can't figure the way to add the delimiter symbol "|" in it.
Does anyone have any ideas about that?
Put a border-left in CSS? Or does it need to be a literal bar character?
You can use adjacent sibling selectors in CSS, by applying styles to elements based on the elements which immediately precede them you can create the menu dividers.
.menu a {
text-decoration: none;
padding: 10px;
}
.menu a + a {
border-left:solid 1px black;
}
By using this approach you can easily apply this styling to any of your menus by assigning class="menu".
<div class="menu">
Questions
Tags
Users
Badges
Unanswered
</div>
This meets all the requirements sans one; That the vertical bar must be shorter than the height of the link.
It may be easiest to achieve this with a background image on the < a > rather than using borders or pipes (|).
I did try something with spans inside the links, which would be shorter than the full height of the A, but I couldnt get it rendering cleanly.
You could also add pipes into the HTML itself, inside a span, and hide them on hover.
I know this wont work properly in all browsers, but hacks and workarounds are extra. :P
EDIT:: I added #Fistandantilus' adjacent selectors to this. makes for cleaner HTML.
<html>
<head>
<title>Menu Test</title>
<style type="text/css" media="screen">
ul.menu {
display:block;
margin:0;
padding:0;
height:30px;
}
ul.menu li {
display:block;
width:100px;
height:30px;
float:left;
}
ul.menu li a{
width:100%;
height:30px;
line-height:30px;
display:block;
text-align:center;
border-left:1px solid transparent;
}
ul.menu li + li a {
border-left:1px solid #000;
}
ul.menu li a:hover {
background-color:#0f0;
border-left:1px solid transparent;
}
ul.menu li:hover + li>a {
border-left:1px solid transparent;
}
</style>
</head>
<body>
<ul class="menu">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</body>
</html>
Navigation menus should be semantically marked up as lists. Using an unordered list is a very common practice for a menu such as this. See this example on Listamatic for a foundation to biuld from. To get the background color to be larger than the text you will simply need to add padding around the <a> tag.
You don't need to use tables, CSS is your friend for this kind of thing!
I am not a web designer and my html/css skills are a little rusty, but is something like this what you want?
<html>
<head>
<style type="text/css">
#menu {
text-align: center;
}
#menu a {
text-decoration: none;
padding: 5px 40px;
}
#menu a:hover {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div id="menu">
Cat 1 |
Cat 2 |
Cat 3 |
Cat 4
</div>
</body>
</html>