I want to change the colour of the border on my navigation bar but it ain't working for me.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<title> site </title>
</head>
<style type="text/css">
body
{
background-color:#75b5d6;
color:white;
font-family:"Arial";
text-align:center;
}
a:link
{
color:white;
}
a:visited
{
color:white;
}
a:hover
{
color:white;
}
a:active
{
color:white;
}
.nav
{
border:3px solid white;
border-width:0px;
list-style:none;
margin:2;
padding:2;
text-align:center;
background-color:orange;
font-family:"Bookman Old Style";
}
.nav li{
display:inline;
}
.nav a
{
display:inline-block;
padding:10px;
}
h1
{
font-size:40;
font-family:"Lucida Handwriting";
}
h2
{
font-size:27.5;
text-decoration:underline;
}
p
{
font-size:12;
}
</style>
<body>
<h1> Kevril.net </h1>
<ul class="nav">
<li>Home</li>
<li>site1</li>
<li>site2</li>
</ul>
<h2>Welcome</h2>
<p>Hellow</p>
</body>
</html>
what did i do wrong? Is it something in the css part or the html? I would be very happy if you can help. thanks.
I'm assuming you mean the .nav class. If so, you have:
border:3px solid white;
border-width:0px;
Make sure it has a width and you'll see the colour you set.
You have a border-width:0px; in your style for .nav which is making your border not appear. Remove that line (you set your width in the shorthand border definition anyway) and it should work.
It's handy for these kind of things to use a developer tool such as Chrome's "Inspect Element" to help you work out what style's breaking it.
(IE has "Developer tools" and Firefox has something similar built in, or you can install firebug)
That's because on .nav you've specified border-width:0;.
That's effectively rendering your border with no width, even though you specified 3px in your border style.
Take that off and it works.
DEMO: http://jsfiddle.net/cVNwn/
Remove border-width:0px; from your .nav and it should work
Demo: http://jsfiddle.net/zRQdj/
Related
i'm having this really frustrating problem where a thin silver of the color that i'm applying as the a:hover,a:active is appearing outside of where it should. i have an image in absolute positioning right above the menu that is exhibiting this....i could just move the image up one but i want to solve it the correct way....here is my css
.logo
{
width:200px;
height:108px;
position:absolute;
left:5px;
top:10px;
}
#menu
{
position:relative;
top:110px;
padding-top:0px;
clear:both;
}
ul
{
list-style-type:none;
overflow:hidden;
padding:0px;
width:900px;
}
a
{
text-decoration:none;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
font-weight:bold;
text-align:center;
background-color:#ffffff;
padding:3px;
width:120px;
height:auto;
color:#000000;
float:left;
}
a:hover,a:active
{
background-color:#804000;
color:#ffffff;
}
here is my corresponding html:
Sorry, your browser doesn’t support JavaScript!
U4U Test Page
<div class="header">
<img class="logo" src="linktofilehere" alt="U4U Logo" />
</div>
<div id="menu">
<ul>
<li><a href="/" >Home</a></li>
<li>About Us</li>
<li>Programs</li>
<li>US Movement</li>
<li>Sponsorship</li>
<li>Donate</li>
</ul>
</div>
</body>
</html>
i've searched through the help knowledge and couldn't find anything related really....i'm sure it is something simple....any help would be appreciate, i think it might have to do with positioning or not defining the hover area correctly but i'm not sure....i just started learning html and css last week so please be kind!
You will need to create a new style for the 'a' of your image. If you don't, it will use the standard 'a' stylings of your CSS.
Like this :
a.imglink:hover
{
background:none;
}
I'd add a style to remove the background color from linked images - that way you won't run into issues with transparent PNGs etc:
.imglink:hover {
background-color:transparent;
}
I just specifically targetted links inside the list for the background color on hover..
CSS:
#menu > ul > li > a:hover,a:active
{
background-color:#804000;
color:#ffffff;
}
http://jsfiddle.net/cSSU7/
Did this solve your problem?
/* remove the background */
.imglink:hover { background: none; }
/* if you run into specificity issues, be more selective! :) */
a.imglink:hover { background: none; }
/* or remove the padding from just the first a */
a:first-of-type{ padding: 0; }
/* or remove the background from the first link */
a:first-of-type{ background: none; }
DEMO
As shown in image below their is little gap between two red regions..
I have set all the margins and paddings to zero but it is still giving that 4px(i think) margin in between.. I want to know why that is appearing there...
two red regions are given floating to left and displayed as inline-block.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>learning...</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="_body">
<div id="_header">
<img src="images/header_index.jpg"/>
<br />
<h3> this is just a view of uttrakhand from a camera come here and explore the whole beauty...</h3>
</div>
<div id="_navigation">
<ul>
<li>Destinations</li>
<li>Culture</li>
<li>Adventure</li>
<li>Hotels</li>
<li>Wild Life</li>
<li>History</li>
<li>About</li>
</ul>
</div>
<div id="_left">
this is left region of the page..
</div>
<div id="_content">
this is content region of the page
</div>
<p id="background-viewer">..</p>
</div>
<pre>this is something written inside pre<a></a></pre>
<script src="JavaScript.js"></script>
</body>
</html>
CSS
* {
margin: 0px;
padding: 0px;
}
#_left , #_content , #_navigation > ul {
display:inline-block;
}
#_body {
width:1200px;
background:-webkit-linear-gradient(top,#0000CC,#3999FF);
margin:0px auto;
padding:0px;
}
/*Here comes all the stylin gog header*/
#_header {
}
#_header > img {
width:1200px;
}
#_header > h3 {
border-bottom:3px solid black;
font-weight:normal;
text-align:center;
text-transform:capitalize;
padding:10px;
}
/*Here ends styling of header*/
/*here comes styling of navigatin bar*/
#_navigation {
margin:20px 20px 10px 20px;
}
/*here remains 960px for navigation bar*/
#_navigation > ul {
list-style-type:none;
}
#_navigation ul > li {
width:135px;
display: inline-block;
padding: 5px 15px 5px 0px;
font-family: Verdana;
font-size: 22px;
vertical-align: middle;
background:-webkit-linear-gradient(top,blue,aqua);
border-bottom-right-radius:5px;
border-top-left-radius:5px;
}
#_navigation ul > li:active {
background:-webkit-linear-gradient(bottom,blue,aqua);
}
#_navigation a {
text-decoration: none;
}
#_navigation a:visited {
color:black;
}
#_navigation a:active {
color:black;
}
#_navigation a:focus {
color:black;
}
/*here ends styling of _navigation*/
/*this part is for _left and _content*/
#_left {
width:400px;
padding:0px;
background-color:red;
min-height:100px;
}
#_content {
width:795px;
background-color:red;
min-height:100px;
}
/*here ends all the styling of mid region*/
Here is all of my code..
javascript file has nothing so i didn't put that here...
Your divs are incorporated in a inline formating context and a whitespace is generated by the new line in the html document
<div id="_left">
this is left region of the page..
</div>
<div id="_content">
this is content region of the page
</div>
You may avoid that by putting together the closing and ending tag of those divs as so
<div id="_left">
this is left region of the page..
</div><div id="_content">
this is content region of the page
</div>
A good idea is to use google chrome or firefox to inspect the elements you want to understand more. Just right click on your red block, inspect element. This then shows you the css applicable to the elements, including any inherited from other elements. You can live test alternatives by either editing the css code in the inspector or by editing the style sheet also presented by the inspector.
Ok, try
#_content {
float:left
}
here's fiddle: http://jsfiddle.net/cfgXX/
How would i change the colour of my nav bar in this code?
CSS
<style type="text/css">
body
{
background-color:#454545;
color:white;
font-family:"Courier New";
text-align:center;
}
a:link
{
color:white;
}
a:visited
{
color:white;
}
a:hover
{
color:white;
}
a:active
{
color:white;
}
.nav
{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
.nav li{
display:inline;
}
.nav a
{
display:inline-block;
padding:10px;
}
h1
{
font-size:40;
}
h2
{
font-size:27.5;
text-decoration:underline;
}
h3
{
font-size:20;
}
p
{
font-size:12;
}
</style>
HTML
<li>Home</li>
<li>Youtube</li>
<li>Twitter</li>
I've looked up how to change it but it only gave me things about twitter. I just want to know how to change the navigation bar colour not the whole page colour.
To change the background colour of the navigation bar itself, add this to the .nav class:
background-color:#002d60;
You could use something like colorpicker.com to find colour hexadecimal codes.
If you would instead like to change the colour of the text in the navigation bar, add a color property like so:
color:#003d60;
For both of these instances, you could also use rgba(n,n,n,n), rgb(n,n,n) or even hsl(n,n,n) to select colours with red-green-blue or hue-saturation-lightness values.
Add a background to the .nav block?
background: #FFDD00; //some color
Add this is the right section of css to colorize some element.
background-color:#000;
It is difficult to tell without seeing all the code or the desired effect, but background-color is the CSS property you want for changing the background, or color for changing the text color.
I'am trying to make a navigation bar horizontal but at the moment its vertical. Any help would be great. The problem is that its vertical. I have made the list in html and then used my other file in css to edit it.
HTML:
<html>
<head>
<link rel="stylesheet" href="Style/style.css" type="text/css"/>
</head>
<body>
<div class="horizontal">
<ul>
<li>Home</li>
<li>News</li>
<li>Articles</li>
</ul>
</div>
</body>
<html>
CSS:
div.horizontal
{
width:100%;
height:63px;
}
div.horizontal ul
{
list-style-type:none;
margin:0;
padding:0;
}
div.horizontal li
{
float:left;
}
div.horizontal a
{
display:block;
width:86px;
}
div.horizontal a:link,div.horizontal a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
div.horizontal a:hover,div.horizontal a:active
{
background-color:#7A991A;
}
Personally, I always set up my horizontal nav bars with CSS like this (using your current CSS as starting point):
div.horizontal li {
width:86px;
height:inherit;
display:inline-block;
/* Fix bug in IE7 and below */
zoom:1;
*display:inline;
}
div.horizontal li a {
display:block;
width:100%;
height:100%;
}
The inline-block on the li will let it sit horizontally, and declaring its width/height creates the appropriate container for the a. The a then inherits the height/width from the li container. The lack of float:left also eliminates the need to clear anything.
Edit: updated to show the workaround for IE7 and below not respecting inline-block;
Try:
div.horizontal a
{
display:block;
width:86px;
float: left;
}
Use
display:inline-block;
You can't use the current method for Horizontal ,As blocks position themselves vertically in the flow.
But this attribute overrides the flow and makes it see itself as a inline/block hybrid.
i have made a toolbar using links placed inside listitems but the problem is that i cant get my toolbar to sit on a "div" placed below it. This is what i want to see.
but this is what am getting in firefoxNotice the space between my 'toolbar' and the div below it. Questionswhy is the code displaying properly in jsfiddle but displaying badly if i run it directly in fierfox?How can i solve the problem?
ps:
here is the html
<html><head>
<link rel='stylesheet' type='text/css' href='style.css'>
</head><body>
<div id='headercontainer'>
<h2>welcome to research club</h2>
<ul class='mainNavigation'>
<li><a class='currentPage' href='#'>Home</a></li>
<li><a href='#'>Meetups</a></li>
<li><a href='#'>Feedback</a></li>
<li><a href='#'>About</a></li>
</ul>
</div>
<div id='page'>
<p> this is a simple paragraph inside the page that is full of meaningless words but tries to populate a page . mama miya tolina galya mamba eno.</p>
</div><!--#page-->
</html>
Here is the css
div#headercontainer
{
position:relative;
}
div#page
{
margin:0px 50px 0px 50px;
padding:0 450px 0 30px;
position:relative;
background:#181C21;
clear:right;
color:white;
}
ul.mainNavigation
{
list-style:none;
margin:0px 50px 0px 0px;
position:absolute;
bottom:0; right:0;
padding:0;
}
ul.mainNavigation li
{
background:#192839;
color:white;
float:left;
height:1.6em;
padding:5px;
}
ul.mainNavigation li a
{
color:#bbbbbb;
display:block;
text-decoration:none;
height:1.6em;
font-size:0.9em;
}
ul.mainNavigation li a:hover
{
border-bottom:2px solid #0F67ff;
color:white;
}
ul.mainNavigation li a.currentPage
{
border-bottom:2px solid #176092;
}
I'm guessing that you haven't added a general selector to put all margins and paddings to 0, in this case you would need to add:
div#headercontainer {
position:relative;
padding:0px;
margin:0px;
}
or
*{
padding:0px;
margin:0px;
border:0px;
}
All browsers have some basic setups for non defined elements meaning I can set the I want all texts to be white instead of black and if you haven't set the color all the texts will be written in white.
Hoping this will help…
Use float and clear instead of position absolute.
Like this:
div#headercontainer{
float:left;
position:relative;
}
h2{
float:left;
}
ul.mainNavigation{
float:right;
}
#page{
clear:both;
float:left;
}
Hope this help... (This is my first answer on this website :S)