I have this HTML Code
<a href="test.html">
<div class=" menubox mcolor1">
<h3>go to test page</h3>
</div>
</a>
and this is the css
.menubox {
height: 150px;
width: 100%;
font-size: 14px;
color: #777;
margin: 0 0 0 0;
padding: 0;
-moz-border-radius: 10px;
border-radius: 10px;
position: relative;}
.mcolor1 { background: #3A89BF url(../images/prod2.png) no-repeat center center; }
on mouse hover this div, the text shows the hyperlink line, how can I hide it?
As others have suggested, it's easy to remove the underline from links. However, if you need to target just this specific link, try giving it a class. Example:
.no-underline:hover {
text-decoration: none;
}
<a href="test.html" class="no-underline">
<div class=" menubox mcolor1">
<h3>go to test page</h3>
</div>
</a>
If you want to remove the underline on hover, use this CSS:
a:hover {
text-decoration: none;
}
Note :
Unless your page uses the HTML5 doctype (<!doctype html>), your HTML structure is invalid. Divs can't be nested inside a element before HMTL5.
With the HTML as it stands, you can’t hide the link underline just for this link.
The following CSS will remove the underline for all links:
a:hover {
text-decoration: none;
}
To remove it for just this link, you could move the link inside the <div>:
.menubox > a {
display: block;
height: 100%;
}
.menubox > a:hover {
text-decoration: none;
}
<div class="menubox mcolor1">
<a href="test.html">
<h3>go to test page</h3>
</a>
</div>
Related
I am adding a responsive navigation bar to a website, closely based on a w3 school tutorial (https://www.w3schools.com/howto/howto_js_topnav_responsive.asp).
All is working fine, except that I am trying to center the menu links on the page (for the desktop version), instead of having it on the left side like the tutorial explains.
I tried modifying the value of each property, including float, but without success so far. It must be extremely simple, but what am I missing?
html:
<div class="nav" id="nav">
Home
About
Menu
Drinks
Values
Gallery
Booking
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
css:
.nav {
background-color: gold;
overflow: hidden;
}
.nav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.nav a:hover {
background-color: pink;
color: green;
}
.nav .icon {
display: none;
}
I saw that this question has already been asked with bootstrap, but as a beginner, I am only using plain css here.
you can use flex with center layout, give it a try
.topnav {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
background-color: #333;
}
Another approach if you wanted to avoid using flexbox for whatever reason would be to set the menu items to display: inline-block instead of using floating. Then a simple text-align: center on the nav wrapper will be sufficient.
On a side note, it would make more sense semantically to use the <nav> element as a wrapper and put the menu items in a <ul> list as <li> elements.
.nav {
background-color: gold;
overflow: hidden;
text-align: center;
}
.nav a {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.nav a:hover {
background-color: pink;
color: green;
}
.nav .icon {
display: none;
}
<div class="nav" id="nav">
Home
About
Menu
Drinks
Values
Gallery
Booking
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
How to display text from alt tag of from title tag on a button with CSS or with JavaScript?
Something like this
document.getElementById("myBtn").value="MyNewValue";
But how do I get the ID's for this buttons?
The buttons are social login buttons and you can see them here:
Virtual Forms Framework login
You have to add some javascript code to achieve this. Check below Snippet:
$('.the_champ_login_ul li').each(function(index) {
$('<span>' + $(this).find('i').attr('alt') + '</span>').insertAfter($(this).find('i ss'));
});
.theChampLogin {
width: 100%;
display: block;
}
.theChampFacebookBackground {
background-color: #3C589A;
}
.theChampFacebookLoginSvg {
background: url(//login.create.net/images/icons/user/facebook_30x30.png) left no-repeat;
}
.theChampTwitterLoginSvg {
background: url(//login.create.net/images/icons/user/twitter-b_30x30.png) left no-repeat;
}
.theChampLoginSvg {
height: 100%;
width: 35px;
display: inline-block;
}
.theChampLogin {
padding: 0!important;
margin: 2px;
height: 35px;
float: left;
cursor: pointer;
border: none;
}
ul.the_champ_login_ul li i span {
font-style: normal;
display: inline-block;
color: #fff;
line-height: normal;
vertical-align: top;
padding-top: 10px;
}
ul.the_champ_login_ul {
list-style: none!important;
padding-left: 0!important;
}
.theChampTwitterBackground {
background-color: #55acee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="the_champ_login_ul">
<li>
<i class="theChampLogin theChampFacebookBackground theChampFacebookLogin" alt="Login with Facebook" title="Login with Facebook" style="display: block;"><ss class="theChampLoginSvg theChampFacebookLoginSvg"></ss></i></li>
<li>
<i class="theChampLogin theChampTwitterBackground theChampFacebookLogin" alt="Login with Twitter" title="Login with Twitter" style="display: block;"><ss class="theChampLoginSvg theChampTwitterLoginSvg"></ss></i></li>
</ul>
img tags are self-closing <tag /> tag, and therefore they contain no "content". Since they do not contain any content, no content can be appended ::after or prepended ::before . its not possible to show the "alt" as "content" using css
I tried to make a banner for my website I'm creating, but when I add it to my website, it turns out really bad with the text. I'm wondering if I can add text to my banner using HTML5 and / or CSS.
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Play - Learn - Grow</title>
<link rel="stylesheet" href="main.css">
</head>
<body class="body">
<span class="banner_h">
<img src="Images\Top_Banner_4.png" alt="Banner" height="150" width ="1240"/>
</span>
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Become a Member</li>
<li>Borrow Toys</li>
<li>Our Policies</li>
<li>Site Map</li>
</ul>
</nav>
<span class="banner_l">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<span class="banner_r">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<h2 class="headers">Welcome to the Home Page!</h2>
<div class="container">
Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
their cognitive, social, emotional and physical development in the important first six years of their lives.
<br><br><span class="Links">Be sure to check out our Wikispace site with more information here!</span>
</div>
<div id="content"></div>
<div id="footer">
Copyright © 2013
</div>
</body>
</html>
CSS:
/* Entire Document CSS */
html{
height: 100%;
}
/* Header CSS */
.headers{
color: #FFD89A;
text-align: center;
padding: 10px;
}
/* Body CSS */
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
}
.container{
margin: 0 auto 0 auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
height: 50%;
}
/* Navigation CSS */
.nav {
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0;
padding: 0;
min-width: 1000px;
width: 100%;
}
.nav li {
list-style-type: none;
width: 14.28%;
float: left;
}
.nav a {
display: inline-block;
padding: 10px 0;
width: 100%;
text-align: center;
}
/* Banner / Picture CSS / Text in Images */
.banner_l{
float: left;
}
.banner_r{
float: right;
}
.banner_h{
display: block;
width: 100%;
}
.banner_h img{
width: 100%;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link{
color: #FFFFFF;
text-decoration: none;
}
a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover{
background-color: #028482;
color: #FFFFFF;
text-decoration: underline;
}
a:active{
background-color: #FCDC3B;
color: #AA00FF;
text-decoration: overline;
}
.Links A:hover{
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
I'm trying to center / centre my text on the banner, with a white coloured font (font can be varied). What do I have to do to make this happen? Thanks!
It depends on the kind of text you will be adding to the banner. If you want to add text that will be static (as in, it will never or rarely change) and want to add custom fonts, you should probably edit the image in Photoshop.
On the other hand, if the content in the banner will change constantly, then I would suggest adding the image as a background. Your banner h class would look something like this:
.banner_h{
display: block;
width: *actual pixel size of the banner*;
height: *actual pixel size of the banner*;
background: url('*location of file*') no-repeat;
}
If you leave the width to a percentage what will happen is that the div will not have anything inside of it and thus will not show the banner, so you need to figure out what the actual width and height of the banner is and put it in this CSS declaration so that it shows the banner.
Once you have done this, delete the image from the tag and replace it with the content you wish to add.
Should look like this:
(source: gyazo.com)
My attempt
<div class="header">
<div class="container">
<img id="logo" src="img/logo.png"/>
<ul class="menu">
<li class="current">Home</li>
<li>Forums</li>
<li>Donate</li>
<li>Vote</li>
<li>Info</li>
</ul>
</div>
</div>
I use Current class for the current page background.
Added the header
.header {
width: 100%;
height: 86px;
background-image: url("../img/gradient.png");
background-repeat: repeat-x;
border-bottom: solid 1px #a2a2a2;
}
Floated menu to right, made it display inline and centered the text
.menu {
float: right;
padding: 2.7%;
}
.menu a{
color: #1e1e1e;
}
.menu a:hover{
color: #5e5e5e;
}
.menu li {
display: inline;
float: left;
margin-left: 10px;
padding-left: 20px;
padding-top: 5px;
}
Now the part of the current background
.current {
background-image: url("../img/hoverdiamond.png");
background-repeat: no-repeat;
width: 78px;
height: 36px;
padding-left: 20px;
padding-top: 5px;
color: white;
}
Result:
(source: gyazo.com)
Can you see theres a big space between the current and other items? How do I remove this? make it equal to others spaces.
Things I tried:
Adding position relative
result:
Menu item 'current' goes over the menu item 'forums'
I could not find any other way to do so, what am I doing wrong?
Try the following HTML:
<div class="header">
<div class="container">
<img id="logo" src="img/logo.png"/>
<ul class="menu">
<li class="current">Home</li>
<li>Forums</li>
<li>Donate</li>
<li>Vote</li>
<li>Info</li>
</ul>
</div>
</div>
With the following amends to your CSS:
.menu {
float: right;
padding: 2.7%;
}
.menu li {
float: left;
margin-left: 10px;
}
.menu a{
color: #1e1e1e;
display: block;
padding-left: 20px;
padding-top: 5px;
}
.menu a:hover{
color: #5e5e5e;
}
.current {
background-image: url("../img/hoverdiamond.png");
background-repeat: no-repeat;
color: white;
}
Your HTML was structured incorrectly ... you shouldn't be placing the <li> elements inside the anchor elements.
You also don't need to have display: inline; on the list items, as they are floated left anyway, they should already be inline.
In future, you may want to check that your HTML is valid using the W3C validator, it should explain any errors in your HTML and how you can fix them.
Let me know if the above doesn't fix it and I'll happily have another look.
EDIT: Forgot to also state that I removed the height and width on the current css declaration, that was unnecessary, and almost definitely causing the spacing issues.
Remove the width on .current. That is what's adding the extra spacing.
If you don't want to change that, change the spacing on the the adjacent li:
.current + li {
padding-left: 0;
}
Here is a simplified demo of what you are trying to accomplish. Learn from it:
HTML
<ul>
<li class="current">Home</li>
<li>Forums</li>
<li>Donate</li>
<li>Vote</li>
<li>Info</li>
</ul>
CSS
ul {
float: right;
}
li {
display: inline;
padding: 10px;
}
.current {
background-image: url('http://placekitten.com/200/200');
}
Demo
For some reason, I am getting a weird overlapping dropdown menu glitch. It works fine when I open it with Firefox, but when I publish the HTML onto Blogger.com website, it overlaps.
My website I am updating it to is http://clubpenguinspin.com/, as you can see, when you mouseover "Chat", it has so many choices and weird overlapping menus. Heres a picture of it:
http://prntscr.com/aopk4
Take a look at my HTML:
<center>
<!-- Link to styles used for our Navigation Bar -->
<link href="http://cpspintest123.x10.mx/nav-id-19fnroex/tea.css" rel="stylesheet" type="text/css" />
<!-- Link to a file with couple simple JavaScript functions used for our Navigation Bar -->
<script src="http://cpspintest123.x10.mx/nav-id-19fnroex/SimpleNavBarScripts.js" language="JavaScript" type="text/javascript"></script>
<!-- main nav bar titles -->
<!-- Note how the the closing angle bracket of each </a> tag runs up against the next <a> tag,
to avoid leaving a gap between each menu title and the next one. -->
<!-- REPLACE each "placeholder.html" URL below with the specific page you want the user
to go to when the given menu title is clicked. For example, the first link below
is for the "Home" menu title, so you'd probably replace the first URL with index.html. -->
<div class="mynavbar">
<a class="navbartitle" id="t1" href="http://clubpenguinspin.com/"
onmouseout="HideItem('products_submenu');"
onmouseover="ShowItem('products_submenu');"
>Home<a class="navbartitle" id="t2" href="http://xat.com/clubpenguincheatzone"
onmouseout="HideItem('services_submenu');"
onmouseover="ShowItem('services_submenu');"
>Chat<a class="navbartitle" id="t3" href="http://twitter.com/#!/cpcheatzone"
onmouseout="HideItem('funstuff_submenu');"
onmouseover="ShowItem('funstuff_submenu');"
>Twitter<a class="navbartitle" id="t4" href="#"
onmouseout="HideItem('aboutus_submenu');"
onmouseover="ShowItem('aboutus_submenu');"
>Extras<a class="navbartitle" id="t5" href="http://support.clubpenguinspin.com"
onmouseout="HideItem('contact_submenu');"
onmouseover="ShowItem('contact_submenu', 't5');"
>Support</a>
<a class="navbartitle" id="t6" href="#"
onmouseout="HideItem('yeaman_submenu');"
onmouseover="ShowItem('yeaman_submenu');"
>Coming Soon
<!-- Products sub-menu, shown as needed -->
<div class="submenu" id="products_submenu"
onmouseover="ShowItem('products_submenu');"
onmouseout="HideItem('products_submenu');">
<div class="submenubox">
</div>
</div>
<!-- Services sub-menu, shown as needed -->
<div class="submenu" id="services_submenu"
onmouseover="ShowItem('services_submenu');"
onmouseout="HideItem('services_submenu');">
<div class="submenubox">
<ul>
<li>CPCheatZone Chat</li>
<li>NoeExclusives Chat</li>
<li>TheCpWorld Chat</li>
</ul>
</div>
</div>
<!-- Fun Stuff sub-menu, shown as needed -->
<div class="submenu" id="funstuff_submenu"
onmouseover="ShowItem('funstuff_submenu');"
onmouseout="HideItem('funstuff_submenu');">
<div class="submenubox">
<ul>
<li>CPCheatZone</li>
<li>444ppenguin</li>
<li>Noe231</li>
<li>Rich Nich</li>
<li>Master Swamp</li>
</ul>
</div>
</div>
<!-- About Us sub-menu, shown as needed -->
<div class="submenu" id="aboutus_submenu"
onmouseover="ShowItem('aboutus_submenu');"
onmouseout="HideItem('aboutus_submenu');">
<div class="submenubox">
<ul>
<li>Freebies</li>
<li>Graphics Store</li>
<li>Club Penguin Cheats</li>
<li>Fun</li>
<li>More coming soon!</li>
</ul>
</div>
</div>
<!-- CONTACTS & DIRECTIONS sub-menu, shown as needed -->
<div class="submenu" id="contact_submenu"
onmouseover="ShowItem('contact_submenu');"
onmouseout="HideItem('contact_submenu');">
<div class="submenubox">
<ul>
<li>Banners</li>
<li>Contact Us</li>
<li>More</li>
</ul>
</div>
</div>
<div class="submenu" id="yeaman_submenu"
onmouseover="ShowItem('yeaman_submenu');"
onmouseout="HideItem('yeaman_submenu');">
<div class="submenubox">
<ul>
</ul>
</div>
</div><!-- end of sub-meus -->
</a></a></a></a></a></div>
</center>
Here is my CSS:
.mynavbar {
position: relative;
width: 974px;
height: 23px; /* corresponds to 'line-height' of a.navbartitle below */
margin: 0; border: 0; padding: 0;
background-color: #005EFF;
border-bottom: #003cff solid 3px;
border-left: #003cff solid 3px;
border-right: #003cff solid 3px;
}
a.navbartitle {
display: block;
float: left;
color: white;
text-shadow: 1px 1px 3px #000;
outline: 0;
background-color: #005EFF;
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
margin: 0; border: 0; padding: 0;
line-height: 23px; /* corresponds to 'top' value of .submenu below */
text-align: center;
text-decoration:none;
}
a.navbartitle:hover {
background-color: #0241AD;
}
/* menu title widths */
#t1 { width: 104px; }
#t2 { width: 100px; }
#t3 { width: 102px; }
#t4 { width: 102px; }
#t5 { width: 120px; }
#t5 { width: 110px; }
#t6 { width: 120px; }
/* We just specify a fixed width for each menu title. Then, down below we specify
a fixed left position for the corresponding submenus (e.g. #products_submenu, etc.)
Using these fixed values isn't as elegant as just letting the text of each
menu title determine the width of the menu titles and position of the submenus,
but we found this hardwired approach resulted in fewer cross-browser/cross-OS
formatting glitches -- and it's pretty easy to adjust these title widths and the
corresponding submenu 'left' positions below, just by eyeballing them whenever
we need to change the navbar menu titles (which isn't often). */
.submenu {
position:absolute;
z-index: 2;
top: 23px; /* corresponds to line-height of a.navbartitle above */
padding: 0; margin: 0;
width:166px; /* If adjust this, then adjust width of .submenu below a too */
color: white;
background-color: #0241ad;
border: 1px solid transparent; /* box around entire sub-menu */
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: 11px;
}
/* Fix IE formatting quirks. */
* html .submenu { width: 148px; } /* IE needs narrower than width of .submenu above */
/* End */
/* position of each sub menu */
/* We just eyeball the position of each submenu here -- can move left or right as needed.
If you adjust menu title text, you might want to adjust these too. */
#products_submenu { left: 0px; visibility: hidden; }
#services_submenu { left: 104px; visibility: hidden; }
#funstuff_submenu { left: 204px; visibility: hidden; }
#aboutus_submenu { left: 306px; visibility: hidden; }
#contact_submenu { left: 408px; visibility: hidden; }
#contact2_submenu { left: 408px; visibility: hidden; }
#yeaman_submenu { left: 517px; visibility: hidden; }
/* Note, each submenu is hidden when the page loads - then made visible when
the mouse goes over the menu title. Using the 'visibility' property instead
of using the 'display' property avoided a bug in some versions of Safari.
(The bug is pretty where esoteric: The browser ignored the 'hover' property
on 'li' objects inside an object whose display property was set to 'none'
when the page loaded...) Using the 'visibility' property instead of 'display'
would normaly take up extra room on the page, but that's avoided here by putting
the submenu on a second layer: see 'position: absolute' and 'z-index: 2'
in .submenu definition, higher up this page. */
.submenu a
{
display: block;
color: #eee;
background-color: #005EFF;
width: 146px; /* This should be width of .submenu above minus right-side padding on next line */
padding: 5px 0px 4px 20px;
text-decoration: none;
background-color: #005EFF;
border-bottom: #003cff solid 1px;
border-left: #003cff solid 1px;
border-right: #003cff solid 1px;
}
ul { position: left; display: block; }
li { position: left; display: block; }
.submenubox {
margin: 0; padding: 0; border: 0;
}
.submenubox ul
{
margin: 0; padding: 0; border: 0;
list-style-type: none;
}
.submenubox ul li {
margin: 0; padding: 0; border: 0;
}
.submenubox ul li a:link { }
.submenubox ul li a:visited { }
.submenubox ul li a:hover
{
color: #c6e8e2; /* text color for submenu items */
background-color: transparent;
border-bottom: transparent solid 1px;
}
Please help me! This is very annoying to my website viewers, and others.
:(
You have to add a closing </a> after "Coming Soon" and your other links:
<a class="navbartitle" id="t1" href="http://clubpenguinspin.com/"
onmouseout="HideItem('products_submenu');"
onmouseover="ShowItem('products_submenu');"
>Home</a><a class="navbartitle" id="t2" href="http://xat.com/clubpenguincheatzone"
onmouseout="HideItem('services_submenu');"
onmouseover="ShowItem('services_submenu');"
>Chat</a><a class="navbartitle" id="t3" href="http://twitter.com/#!/cpcheatzone"
onmouseout="HideItem('funstuff_submenu');"
onmouseover="ShowItem('funstuff_submenu');"
>Twitter</a><a class="navbartitle" id="t4" href="#"
onmouseout="HideItem('aboutus_submenu');"
onmouseover="ShowItem('aboutus_submenu');"
>Extras</a><a class="navbartitle" id="t5" href="http://support.clubpenguinspin.com"
onmouseout="HideItem('contact_submenu');"
onmouseover="ShowItem('contact_submenu', 't5');"
>Support</a>
<a class="navbartitle" id="t6" href="#"
onmouseout="HideItem('yeaman_submenu');"
onmouseover="ShowItem('yeaman_submenu');"
>Coming Soon</a>
Fortunately, the problem is simple. Add an </a> to the end of your "Coming Soon" link:
<a class="navbartitle" id="t6" href="#"
onmouseout="HideItem('yeaman_submenu');"
onmouseover="ShowItem('yeaman_submenu');"
>Coming Soon
I'd run a fine tooth comb through that and make sure your HTML is set up properly. Also, considered taking out the JS from the HTML file where possible and making a separate JS file? You'll thank yourself later.