I'm a newbie into Wordpress and CSS+HTML styling,
by the way I own a Wordpress Theme (Sportexx) and I'd like to make my own menu with plain HTML and CSS.
Thanks to the visual composer, I added this code to the page:
<div id = "menutop">
<ul>
<li><a href="#">Home</li>
<li><a href="#">Home</li>
<li><a href="#">Home</li>
<li><a href="#">Home</li>
<li><a href="#">Home</li>
</ul>
</div>
I've also added this code to the style.css in my child theme (should remove bullets):
#menutop ul {list-style-type: none;}
but I still see the bullets in the list.
What did I do wrong?
This seems to be working for me:
<html>
<head>
<title>Test</title>
</head>
<style>
#menutop ul {list-style-type: none;}
</style>
<body>
<div id = "menutop">
<ul>
<li><a href="#">Home</li>
<li><a href="#">Home</li>
<li><a href="#">Home</li>
<li><a href="#">Home</li>
<li><a href="#">Home</li>
</ul>
</div>
</body>
I agree with #GOB in the comment above. Try installing FireBug in FireFox where you can see if your CSS is being overridden.
I just put it into the parent's style.css, so for now I'll stick to this solution.
Related
I'm trying to have links to different websites in my nav bar but I'm stuck here.
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Beer Yoga</li>
<li>A Day in My Life</li>
</ul>
here's my css stylesheet also
ul {list-style-type: none; margin: 0; padding: 0; overflow: hidden;background-color:lightslategray;}
li {float:left;}
li a {display:block;color:white;text-align:center;padding: 14px 16px;text-decoration:none;}
li a:hover {background-color: #111;}
Change the href to a link. For example:
<ul>
<li><a class="active" href="https://stackoverflow.com/">Stack Overflow</a></li>
<li>Beer Yoga</li>
<li>A Day in My Life</li>
</ul>
If you change the href to https://stackoverflow.com/ instead of #home, the link will take you to https://stackoverflow.com/
If you are referring to different links to different pages internally, make sure that you have matching id selectors for where you are linking to. For example:
These anchor tags will link to an href value of the id you have set on another page:
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Beer Yoga</li>
<li>A Day in My Life</li>
</ul>
Say this is beeryoga.html:
<body>
<div id="beeryoga">
<p>We are linking here!</p>
</div>
</body>
Say this is dayinmylife.html:
<body>
<div id="dayinmylife">
<p>We are also linking here!</p>
</div>
</body>
I don't know anything about HTML codes and I'm using a template I used online for my blog, www.lemontierres.com. I have some links to pages at the top of my blog but I want to have them in the center instead of on the left side of my blog, and I don't know how to fix this? I Googled and found some answers but I don't know how to apply them to my situation. Any help would be appreciated!
<div class='nav'>
<ul class='menu' id='menu'>
<li><a expr:href='data:blog.homepageUrl'>home</a></li>
<li>about me</li>
<li>contact/business inquiries</li>
<li><a class='drop-ctg' href='#'/>
<ul>
<li><a href='#'> 1</a></li>
<li><a href='#'> 2</a></li>
<li><a href='#'> 3</a></li>
<li><a href='#'> 4</a></li>
</ul>
</ul>
Simple CSS would solve this
ul {
text-align: center;
}
I think this is what you are looking for. The first CSS puts all of the <li> elements inline rather than stacked and the second centers all of the text.
ul.menu li {
display: inline;
}
ul {
text-align: center;
}
JSFIDDLE DEMO
put <center>
<ul>
<li>link</li>
<li>Link2</li>
</ul>
</center>
That is how I would do it.
Basically you just need to put the center tags around the code for the links.
If that doesnt work do what JRULLE and Vector said.
I am having difficulties restoring the bullet points in a Bootstrap navigation list. My markup is generated by WordPress but the general idea is:
<nav>
<ul class='nav navbar-nav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Home</a></li>
<li><a href='#'>Home</a></li>
<li><a href='#'>Home</a></li>
</ul>
</nav>
I've looked through the styles Bootstrap has applied to what is basically a list, and I can't figure out what is removing the list-style which was originally there.
I tried to set things back to the default by using the below, but this hasn't worked.
footer nav ul.nav > li {
list-style-type:disc;
}
I am hoping there are any Bootstrap wizards out there who can help me resolve this issue.
If you can't change the markup as skelly suggested, you'll have to also override the display property back to list-item, so you're CSS should look like this:
footer nav ul.nav > li {
margin-left: 40px;
list-style-type: disc;
display: list-item
}
Demo in Stack Snippets
footer nav ul.nav > li {
margin-left: 40px;
list-style-type: disc;
display: list-item
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<footer>
<nav>
<ul class='nav navbar-nav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Home</a></li>
<li><a href='#'>Home</a></li>
<li><a href='#'>Home</a></li>
</ul>
</nav>
</footer>
There's still a lot of other CSS styles that would be affecting the list type. If you want to remove them all, and if you can run javascript on the page, you can just remove the classes with jQuery like this:
$("footer nav ul.nav.navbar-nav").removeClass("nav navbar-nav");
Demo in Stack Snippets
$("footer nav ul.nav.navbar-nav").removeClass("nav navbar-nav");
footer nav ul.nav > li {
margin-left: 40px;
list-style-type: disc;
display: list-item
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<footer>
<nav>
<ul class='nav navbar-nav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Home</a></li>
<li><a href='#'>Home</a></li>
<li><a href='#'>Home</a></li>
</ul>
</nav>
</footer>
Getting some off behaviour with my Bootstrap horizontal navigation, for some reason it seems to be adding an extra anchor link into the first <li><!-- here --></li> element.
Code:
<li class='submenu'>
<a href='#'>
<img src='{{ URL::asset('img/menu/performance.png') }}' /> Performance
<ul class='nav'>
<li><a href='#'>abc</a></li>
<li><a href='#'>abc</a></li>
<li><a href='#'>abc</a></li>
<li><a href='#'>abc</a></li>
</ul>
</a>
</li>
What Chromes Inspector says:
<li class="submenu">
<a href="#">
<img src="https://xxxxxx/img/menu/performance.png"> Performance
</a>
<ul class="nav" style="display: block;"><a href="#">
</a><li><a ref="#">abc</a></li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
</li>
Any one got an idea's of why this is happening? I hacky fixed it with the following CSS:
.left-nav .submenu li:nth-child(2) > a:first-child {
display:none;
}
You should not have any links inside another link.
This is not valid HTML.
If the browser encounters a link tag while already inside a link tag it will add
the closing tag for the first link.
I was using links within links, causing this to happen. I have moved the secondary <ul> outside of the anchor tab and its now working.
I have the following code and I want to highlight the currently selected tab using css.
<div id="Maintabs">
<ul class"tablist">
<li><a href="AshukuWeb.jsp?VIEW=Summary" target=_top>Summary</a></li>
<li><a href="AshukuWeb.jsp?VIEW=Advanced" target=_top>Advanced</a></li>
<li><a href="AshukuWeb.jsp?VIEW=Expert" target=_top>Expert</a></li>
</ul>
</div>
is there any way I can do this? I know css hover gives the element on which mouse is hovere, is there something similar for selected
thanks guys,
yes I do need dynamic handling, so I did the way you told. I capture the click event on that tab and the class. in css I apply the required styles to that class but it doesn't work.
here is my code:
in javaScript:
$('#summary').click(function(){
$(this).addClass("selected");
alert(" summary");
});
HTML code:
<div id="Maintabs">
<ul>
<li style="width: 100px;"><a id="summary" href="AshukuWeb.jsp?VIEW=Summary" target=_top>Summary</a></li>
<li style="width: 100px;"><a id="advanced" href="AshukuWeb.jsp?VIEW=Advanced" target=_top>Advanced</a></li>
<li style="width: 100px;"><a id="expert" href="AshukuWeb.jsp?VIEW=Expert" target=_top>Expert</a></li>
</ul>
</div>
CSS code:
.selected{
background-color:#FEE0C6;
}
what do you think I am doing wrong??
I'm not sure how you are using pure CSS to produce a tab effect. You would normally need Javascript or jQuery to dynamically change what the current tab is.
However, if you are using Javascript or jQuery for the tab effect, you could simply add a class to highlight the selected tab.
For example, this could be your jQuery:
$("#tab1").addClass("selected-tab");
And this your CSS:
.selected-tab
{
/*Some style to highlight it and show it's the selected tab*/
}
You're going to want to make an active class. By giving your li the defined class active. Then you can use css to make the .active a different color, size, shape, etc
Here's an example (first li):
HTML
<div id="Maintabs">
<ul class"tablist">
<li class="active"><a href="AshukuWeb.jsp?VIEW=Summary" target=_top>Summary</a></li>
<li><a href="AshukuWeb.jsp?VIEW=Advanced" target=_top>Advanced</a></li>
<li><a href="AshukuWeb.jsp?VIEW=Expert" target=_top>Expert</a></li>
</ul>
</div>
Here's an example (second li):
HTML
<div id="Maintabs">
<ul class"tablist">
<li><a href="AshukuWeb.jsp?VIEW=Summary" target=_top>Summary</a></li>
<li class="active"><a href="AshukuWeb.jsp?VIEW=Advanced" target=_top>Advanced</a></li>
<li><a href="AshukuWeb.jsp?VIEW=Expert" target=_top>Expert</a></li>
</ul>
</div>
Here's an example (third li):
HTML
<div id="Maintabs"> <ul class"tablist">
<li><a href="AshukuWeb.jsp?VIEW=Summary" target=_top>Summary</a></li>
<li><a href="AshukuWeb.jsp?VIEW=Advanced" target=_top>Advanced</a></li>
<li class="active"><a href="AshukuWeb.jsp?VIEW=Expert" target=_top>Expert</a></li>
</ul>
</div>
CSS
#maintabs.active {background-color: #000;}
#maintabs {background-color: #ccc;}
The result will be the active tab being black (#000), and the inactive tabs being light grey (#ccc)