So I have a menu from ul and li, and it looks something like this at page load:
but when i click each menu and executed the code this happens:
what should i do? here's my CSS:
#menu-centered {
padding: 0px;
margin-bottom: 0px;
}
#menu-centered ul {
margin: 0;
padding: 0;
height: 99px;
width: 603px;
}
#menu-centered li {
display: inline;
list-style: none;
padding: 0px;
background: url(images/menu1.png) no-repeat right top;
}
#menu-centered a {
border-style: none;
border-color: inherit;
border-width: medium;
display: block;
margin-right: 0;
padding: 20px 30px 0px 30px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
color: #FFFFFF;
height: 68px;
width: 130px;
text-align: center;
}
#menu-centered a:hover {
background: url(images/menu2.png) no-repeat right top;
}
and here's my html code for the menus:
<div id="menu-centered">
<ul>
<li> <a href="javascript:Clikbtn1()" >MENU1</a></li>
<li>MENU2</li>
<li>MENU3</li>
</ul>
</div>
Please help. Thanks
Your menus need some LoVe and HAte. In other words you need to create all four of the important link pseudoselectors to avoid letting browsers destroy your layout by applying the default active pseudoslector.
Define a:link, a:visited, a:hover and a:active for your menu, in that order exactly.
Related
So it's the first time I use CSS (been looking through some documentation) and I have this problem.
I created a navigation menu, a horizontal one on the right side, and I want to have the website title on the left side, inline with it. I tried a few things, but it either gets it up and moves the menu lower, or places it under the menu.
Last thing I tried worked but it seems that I can't use the padding-top property anymore (however, I can use padding-left). I would be grateful if any of you could help me with this last thing. Thank you!
The CSS code: (it's messy, I know, as I said, my first one :) )
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
padding-top: 10px;
padding-right: 50px;
}
li {
float: right;
font-family: 'Raleway';
font-size: 20px;
}
a {
display: block;
padding: 20px;
background-color: transparent;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
a:hover {
color: orangered;
}
/* Logo */
#logo {
float: left;
display: inline-block;
position: relative;
padding-left: 200px;
padding-top: -250px;
font-family: 'Raleway';
font-size: 30px;
}
/* Fonts */
#font-face {
font-family: Raleway;
src: url(/css/fonts/raleway.ttf);
}
First, you can't put a <p> inside a <ul>.
You can achieve what you want by putting the logo inside a <li> and use float:left;.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
padding-top: 10px;
padding-right: 50px;
}
li {
float: right;
font-family: 'Raleway';
font-size: 20px;
}
a {
display: block;
padding: 20px;
background-color: transparent;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
a:hover {
color: orangered;
}
/* Logo */
#logo {
float: left;
font-size: 30px;
}
/* Fonts */
#font-face {
font-family: Raleway;
src: url(/css/fonts/raleway.ttf);
}
<ul>
<li id="logo">Cluj</li>
<li>CONTACT</li>
<li>IMAGINI</li>
<li>STIRI</li>
<li>EVENIMENTE</li>
<li>ACASA</li>
</ul>
my problem is that i have styled my navigation bar with a block/button style graphic. that works just fine it's just when i put any tags it resorts to that styling? is there a way on the css style sheet to stop that style and having a different one. i've had this problem on other pages too, but it didnt end up being a problem. can anyone help?
css:
nav {
position:relative;
z-index:3;
position: absolute;
margin-left: 420px;
margin-top: -15px;
float: right;
}
ul {
list-style-type: none;
margin-top: 2px; padding: 0;
overflow: hidden;
}
li {
float: left;
margin-top: 0px;
}
a:link,a:visited {
display: block;
width: 100px;
height: 25px;
font-weight: bold;
font-size: 12px;
color: #000000;
background-image: url(images/buttonreg.png);
text-align: center; padding-top: 5px;
text-decoration: none;
font-variant: small-caps;
}
a:hover,a:active {
color: #FFAA50;
background-image: url(images/buttonhover.png);
}
html: just an unordered list
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>portfolio</li>
<li>services</li>
<li>contact</li>
</ul>
</nav>
It's not clear what your question is, but I'm sure what you want to do is easy enough. Sounds like you need to add a class or ID to your elements, or to make your CSS more specific. E.g.
nav ul {
list-style-type: none;
margin-top: 2px; padding: 0;
overflow: hidden;
}
nav li {
float: left;
margin-top: 0px;
}
nav a:link,a:visited {
display: block;
width: 100px;
height: 25px;
font-weight: bold;
font-size: 12px;
color: #000000;
background-image: url(images/buttonreg.png);
text-align: center; padding-top: 5px;
text-decoration: none;
font-variant: small-caps;
}
nav a:hover,a:active {
color: #FFAA50;
background-image: url(images/buttonhover.png);
}
Simply make your CSS selector more specific by making it only select <a> elements that are descendants of <nav>:
nav a:link,
nav a:visited {
display: block;
width: 100px;
height: 25px;
font-weight: bold;
font-size: 12px;
color: #000000;
background-image: url(images/buttonreg.png);
text-align: center; padding-top: 5px;
text-decoration: none;
font-variant: small-caps;
}
nav a:hover,
nav a:active {
color: #FFAA50;
background-image: url(images/buttonhover.png);
}
I've gotten my navbar to work like I wanted, mostly, but now, again, I am having the problem, that when I minimize the window, the navbar with all its links collapses, and it almost looks quite decent, but it covers over my content area and some of the link text runs over the navbar area and I have to hide that and etc. So the simplest way I thought was to have navbar not move at all, and just be scrollable with the entire page.
Here is my CSS:
#navBar{
width: 100%;
float: left;
position: fixed;
top: 0;
background-color: #000000;
left: 0;
}
#navBar ul{
margin: 0 auto;
height: 65px;
list-style:none;
min-width:760px;
}
#navBar li{
float: left;
height: 65px;
}
#navBar li a:link , a:visited{
font-size: 90%;
display: block;
color: #ffffff;
padding: 20px 25px;
font: 18px "open sans", sans-serif;
font-weight: bold;
text-decoration: none;
}
#navBar li a:hover{
background-color: #ffffff;
color: #000000;
text-decoration: none;
Here is my HTML:
<body>
<nav>
<div id="navBar">
<ul>
<li>ESILEHT</li>
<li>UUDISED</li>
<li>ÜLEVAATED/ARVUSTUSED</li>
<li>LOGI SISSE</li>
</ul>
</div>
</nav>
<div class="content">
<div id="logo">
<img src="http://i.imgur.com/Y4g5MOM.png" alt="Gaming website logo" height="84" width="540"/>
</div>
</div>
<div class="artikkel">
<p>check check</p>
</div>
</body>
</html>
Would appreciate some help, my first real webpage that I am working on, been trying quite a few things, but cannot seem to find a compromise, always one thing works and then the other thing wont work as intended..
You should remove position:absolute; and float:left; on #navBar like this :
FIDDLE
CSS :
#navBar {
width: 100%;
background-color: #000000;
left: 0;
overflow: hidden;
}
#navBar ul {
margin: 0 auto;
height: 65px;
list-style:none;
}
#navBar li {
float: left;
height: 65px;
}
#navBar li a:link, a:visited {
font-size: 90%;
display: block;
color: #ffffff;
padding: 20px 25px;
font: 18px"open sans", sans-serif;
font-weight: bold;
text-decoration: none;
}
#navBar li a:hover {
background-color: #ffffff;
color: #000000;
text-decoration: none;
}
I had to apply a clearfix to my list items in order for a border to wrap around my floats, but once I added the clearfix, it caused a wordwrap I had applied to the list to stop working and now long URLs extend the div into other divs.
If anyone could help with this issue, it would be greatly appreciated. The issue can be viewed here: http://www.noellesnotes.com (Tweets section of the footer).
Here;s the relevant code:
HTML
<div id="tweets">
<ul>
<li class="clearfix">
<p class="tweet">The tweet.</p>
<p class="timePosted">TIME</p>
<p class="interact">INTERACT LINKS</p>
</li>
</ul>
</div>
CSS
.tweet, .tweet a, .tweet span, .interact a{
margin-bottom: 10px;
font-size: 12px;
font-family: 'Open Sans', sans-serif, Georgia, sans-serif;
word-wrap:break-word;
}
.timePosted{
width:40%;
font-size: 12px;
float: left;
font-weight: bold;
text-align: left;
}
.interact{
width:60%;
font-size: 12px;
float: left;
text-align: right;
overflow: hidden;
}
.interact a{
margin-right: 3px;
text-decoration: underline;
font-family: 'Arvo', Georgia;
}
#tweets ul{
margin-left: 0;
padding-left: 0;
list-style: none;
}
#tweets ul li{
border: 3px solid rgba(255,255,255,0.4);
margin: 3px 0;
padding: 3px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* for IE/Mac */
display: inline-block;
}
Adding:
#tweets ul li { width: 100%; }
Solved the issue for me :)
I want my menu to stay highlighted when I press on it. How could I do that? I am only a begginer html and CSS programer and I don't know how could I do this, I tried as others have said, didn't work.....
HTML:
<div id="menu">
<ul>
<li>Domov</li>
<li>Igre</li>
<li>Robotika</li>
<li>O nas</li>
<li>Kontakt</li>
<li>Forum</li>
</ul>
</div>
CSS:
#menu {
width: 950px;
height: 60px;
margin: 0 auto;
background: #6AA2FD url(images/img04.gif);
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
text-transform: uppercase;
}
#menu a {
display: block;
float: left;
background: url(images/img15.gif) no-repeat right 100%;
padding: 18px 30px 0 30px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
color: #FFFFFF;
}
#menu a:hover {
height: 60px;
background: url(images/img16.gif) repeat-x right 30%;
color: #000000;
}
#menu .current_page_item {
}
#menu .current_page_item a {
color: #FFFFFF;
background: url(images/img16.gif) repeat-x right 30%;
}
I don't know how to make that, pls help. And sorry for bad English i'm from Slovenia.
Is this what you are looking for http://jsfiddle.net/rYAGY/5/
If yes, please add this jQuery code to your bottom of page
var elements = $('#nav li a');
elements.on('click', function(e){
debugger;
e.preventDefault();
var th = $(this);
if(!th.hasClass('selected')){
elements.removeClass('selected');
th.addClass('selected');
}
});