Its too much code to paste here so, I have created demo please have a look at this DEMO
My question is, I'm trying to change the name of the Menu from "Home" to "My Home" its quite very simple but I have already spent good amount of time figuring out but no avail....
Yes, I have debugged using firebug too...
//html
<div class="wrapper">
<div class="wrap">
<div class="header">
<ul class="menu">
<li class="home">My Home</li>
<li class="genres">TEST 123</li>
</ul>
</div>
</div>
</div>
//css:
please see the demo
It is an image:
http://www.mp3mixx.com/i/menu.png
CSS:
.menu li a.title
{
text-indent:-9999em;
display:block;
height:11px;
background:url('http://www.mp3mixx.com/i/menu.png') no-repeat;
overflow:hidden;
}
The text is there for accessibility and/or search engine optimization.
The text isn't shown; it's a background image. You'd have to change the background image to change the text.
Related
I'm working on a project(using bootstrap) and I can't seem to figure out why my nav is still stacked up instead of being laid out horizontally. I've tried just about everything I can think of and even sought help online where I'm learning to code but they couldn't figure it out either. They told me it should be working and in fact it does work in their code editor, it just doesn't work on my computer which is where the files are located since I don't have web hosting and I'm just learning. I also noticed that in my browser the nav pull-right works and the links are on the right hand side(although they're still not horizontal) but when I ran it through here where it says "run code snippet" the nav appears right underneath the img placeholder, don't know if that means anything but I thought I'd include that bit of information.
header nav ul{
display: inline-block;
}
<header>
<div class="container">
<div class="row">
<img id="logo" src="http://placehold.it/150x150">
<nav>
<ul class="nav pull-right">
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
enter image description here
Do you mean you want to make the navigation to align horizontally?
Then you can try using this
header nav ul li {
display: inline-block;
}
working example here.
The reason your method doesn't work is because you apply to ul instead of the li element.
I'm trying to make my website with Wordpress.
I wanted to add my custom horizontal menu, with plain CSS and HTML since plugins can't satisfy me.
This is my HTML code:
<div id="provamenutop">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
and this is my CSS:
#provamenutop {background-color:#333; width:90%; line-height:100%;}
#provamenutop li {position: relative; float:left; list-style: none; font-family:verdana;}
#provamenutop li a {display:inline-block; text-decoration:none; padding: 20px; color: white; background: #333; transition:.4s;}
#provamenutop li a:hover {background: #111;}
On my local computer, this looks right:
https://gyazo.com/d5b38f6cc1c7857dbe37945e2d8b5002
But here's what it looks like on my website, using a custom theme called Sportexx:
https://gyazo.com/5ccb7e944b627244a7d3ac8344471b28
I know this could be some CSS already existing in the theme interfering with mine, but what could I do to avoid the problem? (The space in between one Home button and the other is also clickable)
Thank you for reading.
When you use Chrome Developer Tools or Firefox Firebug and inspect the HTML, you will see the following output for your menu on the web site http://www.ferrari.co.it/athletic/
<div id="provamenutop">
<ul>
<li>Home</li><a href="#">
</a><li>Home</li><a href="#">
</a><li>Home</li><a href="#">
</a><li>Home</li><a href="#">
</a><li>Home</li><a href="#">
</a></ul><a href="#">
</a>
</div>
So the problem here is not CSS, but faulty HTML. You have two additional <a href...></a> tags. One before the Home and one outside the closing </li> tag and also one outside the closing </ul> tag.
If you fix your HTML, so that it looks like this, it will actually work:
<div id="provamenutop">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
It's definitely a CSS conflicting issue. Do you have a link so we can check it in firebug? Should be a very easy fix. When I run your html and css in JSFiddle it works fine.
I'm not sure what you mean by On my local computer, this looks right:
But here's what it looks like on my website, using a custom theme
called Sportexx:
Are you not using sportexx on your local computer? If it's working without the theme and not working with the theme it's the CSS. Just open up firebug in your browser and look at the css around the menu. You should be able to adjust it right there and remove the problem. Then go to your stylesheet and make the changes accordingly.
After seeing your comment. It's the html. Just delete the other links.
I am using the materializecss framework from materializecss.com. I have a simple image that I place above the navbar from materializecss and there is a small white space. I checked the source and there is no margin, padding or border at all. The space goes away if I put the navbar above the image so I am not sure what the problem is.
<img id="header" src="/public/images/header.gif" alt="Header"/>
<nav class="grey darken-4">
<div id="navbar" class="nav-wrapper">
<ul id="nav-mobile" class="hide-on-med-and-down">
<li>Profile</li>
<li>Skills</li>
<li>Projects</li>
</ul>
</div>
</nav>
I am not using any other css besides the materializecss css file. Any ideas? I don't think that css has any margins anywhere as I don't see it when viewing the source for any of the elements.
Edit: Here is a jsfiddle: http://jsfiddle.net/0tL9up9s/ The list elements aren't appearing because I haven't copied over the javascript but you can still see the white space between the image and the navbar.
OK, I think it has to do with the fact that the image is display:inline and therefore has dimensions that include the line-height.
Setting your image to display: block will correct this issue.
CSS
#header { display:block; }
Or (HTML)
<img id="header" src="/public/images/header.gif" style="display:block" alt="Header"/>
Your fiddle: http://jsfiddle.net/0tL9up9s/1/
Adding a html {line-height: 0} to the end of the materialize.css file seems to fix the problem. I have no idea if it will break any other functionality though, so be careful.
http://jsfiddle.net/8ppt5zou/1/
<img id="header" style="display:block;" src="http://www.thousandwonders.net/covers/89/Bryce.Canyon.National.Park.jpg" alt="Header" >
<nav class="grey darken-4">
<div id="navbar" class="nav-wrapper">
<ul id="nav-mobile" class="hide-on-med-and-down">
<li>Profile
</li>
<li>Skills
</li>
<li>Projects
</li>
</ul>
</div>
</nav>
I am facing a big css problem
I made a MDI system in html/jquery.
Inside the window clientzone I add html code with an ajax request and the use of the append method.
All is working fine.
My problem is about the code Inside the client zone.
You can see it here : http://jsfiddle.net/2P4Mb/1/
<div id="windowClientZone" style="height:300px; background-color:red; overflow:hidden;">
<div id="ajaxHtmlAppendedCode">
<h1>Title</h1>
<div id="ContentToBescrolled" style="overflow:scroll; background:yellow;">
<ul id="MediaExplorer" class="gallery">
<li class="DraggableItem">
<div/>
</li>
<li class="DraggableItem">
<div/>
</li>
<!-- ... -->
<li class="DraggableItem">
<div/>
</li>
<li class="DraggableItem">
<div/>
</li>
</ul>
</div>
</div>
I have a content made with two parts : a title, and a wrap panel based upon an UL with floating.
I want the ul control to be scrollable and the title stay always visible.
i tried a lot of things with overflow/position asbolute but i not able to find a solution.
the ul zone is always greater than the window client zone.
Is there a way of making that easily ?
Thanks for your help
I'm having problems trying to align an image with a header inside a navigation menu. Ideally, everything should be align at the bottom. I have created a jsfiddle to reproduce the issue:
http://jsfiddle.net/graphicsxp/j2t9R/
<nav style="float: left">
<ul class="menu">
<li>
<a href="index.html" class="logo">
<img src="img/logo.png" alt="" class="brand logo_def" width="125" height="39" /></a>
</li>
<li>
<h4 >Sam</h4>
</li>
</ul>
<div class="clear"></div>
</nav>
<nav>
<ul class="menu">
<li class="current-menu-parent">ACCUEIL
</li>
<li>PAGES
</li>
</ul>
<!-- .menu -->
<div class="clear"></div>
</nav>
</div>
</header>
as is:
to be:
I solved the problem using your code, and honestly I couldn't tell you what I changed because there is way to much code going on for such a simple task. Here it is anyway
I also took the liberty of making a new one, showing how simple your code could look
Simple, clean, easy to read. All done with one <div>, and an unordered list.
Simplifying your code and making it easy to read should be a primary goal in coding no matter what, but it also helps users answer your questions quicker, easier, and better help you with questions you have.
Temp fix can be as:
add css for h4 element.... better to give id and then add.
I have seen your fiddle, please put below code in your css
h4{
margin-top:150px;
}
or
(Give id=hompageheaderUserName to h4 of sam)
h4#hompageheaderUserName
{
margin-top:150px;
}
Change width a/c to your need.
Screenshot from fiddle: