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.
Related
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.
I have an <ul> to do a menu bar. The bar is vertical on the left of my screen. When an option is selected out of the first visible section, I will use JS to hide the first block and set the remaining blocks to .show()
on the next chunk based on the option selected. Now, I have no problem with the JS portion of this. My problem is - when I .hide() and .show() the <li> groups, they stay as if the others were present (large gaps in between options vs top aligned).
Here is a sample of my list:
<ul class="menu">
<li><a id="mainSuit" href="javascript: void(0)">Suit</a></li>
<li><a id="mainFinances" href="javascript: void(0)">Finances</a></li>
<li><a id="mainMissions" href="javascript: void(0)">Missions</a></li>
<li><a id="mainTerritory" href="javascript: void(0)">Territory</a></li>
<li><a id="mainCompany" href="javascript: void(0)">Company</a></li>
<li><a id="mainTravel" href="javascript: void(0)">Travel</a></li>
</ul>
<!-- More <ul> between the two -->
<ul class="menu">
<li><a id="suitLoadout">Loadout</a></li>
<li><a id="suitEquipment">Equipment Market</a></li>
<li><a id="suitMunitions">Munitions Surplus</a></li>
<li><a id="suitRefuel">Refuel</a></li>
<li><a id="suitRepair">Repair</a></li>
</ul>
For CSS
#suitRepair {
display: none;
}
/* same for all of the IDs */
So when id mainSuit is selected - all of <ul class="menu"> will be hidden and the section for suit is shown.
How would I get it so that any gaps for UL blocks between these too are removed.
Just try specify the id on < li > instead < a >:
<li><a id="suitLoadout">Loadout</a></li>
will be:
<li id="suitLoadout"><a>Loadout</a></li>
Now you will hide the < li > tag not the content of that tag, so the space gap will be solved ;)
UPDATED
Even better - use the <ul> as the identifier and go that route:
<ul id="mainMenu">
<li id="mainSuit"><a onclick="mainSuit()" href="javascript: void(0)">Suit</a></li>
</ul>
<ul id="suitMenu">
<li id="suitLoadout"><a>Loadout</a></li>
<li id="suitEquipment"><a>Equipment Market</a></li>
<li id="suitMunitions"><a>Munitions Surplus</a></li>
<li id="suitRefuel"><a>Refuel</a></li>
<li id="suitRepair"><a>Repair</a></li>
</ul>
With JS of:
function backSelected() {
$("#mainMenu").show();
$("#suitMenu").hide();
}
function mainSuit() {
$("#mainMenu").hide();
$("#suitMenu").show();
}
I have an unordered list of items where each item is an image followed by some text. I would like the text to line up exactly, but due to the icons being slightly different sizes, the text of each is not aligned. See the JSFiddle below for an example. You can see the "O" of Option is further to the left than the "R" of RSS feed.
What is the easiest way of achieving this? Is there a way to do this WITHOUT changing the images?
This is my HTML:
<ul class="dropdown-menu">
<li><a id="login" style="cursor:pointer;"><img src="http://www.w3schools.com/images/up.gif" /> Login</a></li>
<li><a id="upload" style="cursor:pointer;"><img src="http://static.bbci.co.uk/id/0.23.4/img/bbcid_orb_signin_dark.png" /> Upload a file</a></li>
<li><a id="option 3" style="cursor:pointer;"><img src="http://res2.windows.microsoft.com/resbox/en/windows%207/main/4f6cbd09-148c-4dd8-b1f2-48f232a2fd33_818.jpg"/>Option 3</a></li>
<li><a id="rss" id="rss" ><img src="http://www.w3schools.com/images/up.gif" /> RSS Feed</a></li>
<li><a id="about" style="cursor:pointer;"><img src="https://www.google.com/images/icons/product/googlemail-16.png" /> About</a></li>
</ul>
There is a JSFiddle here:
http://jsfiddle.net/9f1gxLv6/
Thanks,
Phil
If you're looking to space the icons and text evenly horizontally I recommend using the images as backgrounds instead of inline, then adding some padding:
#login {
background-image: url('http://www.w3schools.com/images/up.gif');
}
#upload {
background-image: url('http://static.bbci.co.uk/id/0.23.4/img/bbcid_orb_signin_dark.png');
}
#option_3 {
background-image: url('http://res2.windows.microsoft.com/resbox/en/windows%207/main/4f6cbd09-148c-4dd8-b1f2-48f232a2fd33_818.jpg');
}
#rss {
background-image: url('http://www.w3schools.com/images/up.gif');
}
#about {
background-image: url('https://www.google.com/images/icons/product/googlemail-16.png');
}
a {
display:inline-block;
padding: 2px 0 2px 30px;
background-repeat:no-repeat;
background-position: left center;
}
<ul class="dropdown-menu">
<li><a id="login" style="cursor:pointer;">Login</a>
</li>
<li><a id="upload" style="cursor:pointer;">Upload a file</a>
</li>
<li><a id="option_3" style="cursor:pointer;">Option 3</a>
</li>
<li><a id="rss" id="rss">RSS Feed</a>
</li>
<li><a id="about" style="cursor:pointer;">About</a>
</li>
</ul>
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'm making a navbar that consists of icons followed by the title of their page (e.g. Icon of a home followed by the text 'Home'). Let's say I want to change the color of only(!) the icon from black (default) to blue when hovering over either the text or the icon itself using the :hover selector. How can I do that? (I don't want to use jQuery, just CSS)
The markup is now something like this:
<ul id="navbar">
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-home"></i></li>
<li class="navname">Home</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-info"></i></li>
<li class="navname">Information</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-contact"></i></li>
<li class="navname">Contact</li>
</ul>
</li>
</ul>
Of course everything is {display:inline}
Set the hover to the ul inside the navgroups. CSS below does that, you can add whatever styling you like to it.
http://jsfiddle.net/PQShS/9/
CSS:
.navgroup ul:hover .navicon{
color:#FFF;
}
Your Code
<ul id="navbar">
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-home"></i></li>
<li class="navname">Home</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-info"></i></li>
<li class="navname">Information</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-contact"></i></li>
<li class="navname">Contact</li>
</ul>
</li>
</ul>
Since it boils down to changing the look of the icon when the cursor hovers anywhere above the ul element, you can do this:
.navgroup ul:hover .navIcon .icon-home
{
/*hover style for the icon*/
}
.navgroup ul .navIcon .icon-home
{
/*non-hover style for the icon*/
}
You should use the following css:
.navgroup:hover .navicon {
background-color: blue;
}
It will modify just the navicon anytime you hover anywhere within the navgroup
See this jsFiddle
you should use anchor tag
css:
.testing:hover {
color: red;
}
html:
<a class="testing" href="">
<span>hello1</span>
<span style="color:black;">hell2</span>
</a>
Give the whole styling to <a> tag and give the inline styling to other element inside <a> tag that you don't want to change.