I have a blue underline that I'm having trouble removing.
I'm pretty sure that it is either a border:none or text-decoration:none problem, but I can't seem to find the solution.
Here is a screenshot of my problem:
HTML:
<a href="#top"><div class="content_tab" id="first_tab">
<span class="tab_text_centred">Back to top</span>
</div></a>
CSS:
.content_tab {
width: 220px;
height: 340px;
margin-right: 0px;
margin-bottom: 20px;
float: left;
background-color: #000;
overflow: hidden;
color: #FFF;
font-family: Georgia, Times ,serif;
font-size: 30px;
font-style: italic;
}
#first_tab {
background-color: #1b1c20;
text-align: center;
}
.tab_text_centred {
position:relative;
top:153px;
}
JSFIDDLE: http://jsfiddle.net/craigzilla/DptMf/
A tag have the default property display:inline.
DIV tag have defaut property: display:block.
A tag wrap DIV tag is not incompatible with W3C.
With your case, it can be more simple as below:
HTML code:
<a href="#top" class="content_tab" id="first_tab">
<span class="tab_text_centred">Back to top</span>
</a>
CSS code:
.content_tab {
width: 220px;
height: 340px;
line-height: 340px;
margin-right: 0px;
margin-bottom: 20px;
float: left;
background-color: #000;
overflow: hidden;
color: #FFF;
font-family: Georgia, Times ,serif;
font-size: 30px;
font-style: italic;
}
#first_tab {
background-color: #1b1c20;
text-align: center;
}
You can not put a tags around a div in pre-HTML5. This is not how you make a div and it's contents link clickable in pre-HTML5. It seems your issue could be connected to a text decoration issue caused by the use of this tag in this manner. Ensure you adopt the correct way for HTML 4.01 or keep it as you have but ensure you use the correct declaration in the head of your document.
I don't see anything but make sure you haven't got anything underlined by doing the following, then try again.
a, a:focus, a:active, a:hover, a:visited {
text-decoration:none;
}
I don't see the line in your fiddle using Chrome, but that's a lot of extra markup.
http://jsfiddle.net/DptMf/2/
Back to top
.content_tab {
width: 220px;
height: 340px;
line-height:340px;
margin-right: 0px;
margin-bottom: 20px;
float: left;
background-color: #000;
text-decoration:none;
overflow: hidden;
color: #FFF;
font-family: Georgia, Times ,serif;
font-size: 30px;
font-style: italic;
}
#first_tab {
background-color: #1b1c20;
text-align: center;
}
Is putting a div inside an anchor ever correct?
As specified by another person:
'You can not put a tags around a div. This is not how you make a div and it's contents link clickable.
This applies to pre-HTML5, and support for a tags is low. I think it's a text decoration issue caused by this action.
Related
I have a logo/home button for my webpage which is the abbreviation of my project (the temp letters I use are ABCDEF). I am using Arial for the font (although may change it later). As you can see from the photo of the logo, the letters do not completely align under each other.
I've tried font-kerning: none; which helps but does not completely make it do what I want it to do.
I've made a jsfiddle for this example and here's the link: https://jsfiddle.net/7dfetxto/
Otherwise, here's my code (same as in the jsfiddle):
HTML
<div id="logo">
<a href="#">
<h1>ABC</br>DEF</h1>
</a>
</div>
CSS
#logo{
font-family: "arial", "times", "sans-serif";
width: 128px;
height: 100%;
background-color: #336699;
float: left;
}
#logo a{
width: 100%;
height: 100%;
display: block;
text-decoration: none;
}
#logo h1{
margin: 0px;
padding: 26px 30px;
text-align: center;
text-transform: uppercase;
font-kerning: none;
display: block;
color: white;
}
My goal is to get the letters on the second line to fall directly under their respective letter on the first line.
Thank you.
letter-spacing
Use CSS letter-spacing property.
JSfiddle.
#logo {
font-family: "arial", "times", "sans-serif";
width: 128px;
height: 100%;
background-color: #336699;
float: left;
}
#logo a {
width: 100%;
height: 100%;
display: block;
text-decoration: none;
}
#logo h1 {
margin: 0px;
padding: 26px 30px;
text-align: center;
text-transform: uppercase;
font-kerning: none;
display: block;
color: white;
}
.h1b {
letter-spacing: 3.25px;
}
<div id="logo">
<a href="#">
<h1>ABC<br><span class="h1b">DEF</span></h1>
</a>
</div>
You might find this interesting: kerningjs
There are more possible ways. One is
font-size
By making the font-size of the second line (in this case) bigger, it will grow and reach the two sides of the first line: JSFiddle.
I have the following code:
.tratoresList h3{
font-family: "opensans-light-webfont";
font-size: 17px;
color: #000;
width: 210px;
text-align: center;
}
.tratoresList strong{
font-family: "opensans-extrabold-webfont";
font-size: 17px;
color: #000;
width: 210px;
}
.tratoresList strong, .tratoresList h3:hover{
font-family: "opensans-extrabold-webfont";
font-size: 17px;
color: #a80000;
width: 210px;
}
And here is the HTML, can someone say me what is wrong?
<ul class="margin-top-50 tratoresList">
<li>
<img src="./imagens/trator1.png" />
<h3>linha <strong>4000</strong></h3>
<div class="tratoresListArrow"></div>
</li>
When I hover within the h3 he has to do the hover also in strong and vice versa.
What did I do wrong?
.tratoresList h3{
font-family: "opensans-light-webfont";
font-size: 17px;
color: #000;
width: 210px;
text-align: center;
}
.tratoresList strong{
font-family: "opensans-extrabold-webfont";
font-size: 17px;
color: #000;
width: 210px;
}
.tratoresList h3:hover, .tratoresList h3:hover ~ strong{
font-family: "opensans-extrabold-webfont";
font-size: 17px;
color: #a80000;
width: 210px;
}
<div class="tratoresList">
<h3>CSS - HOVER AN ELEMENT THAT WILL TAKE EFFECT IN ANOTHER</h3>
<strong>I THINK ITS POSSIBLE NOW !</strong>
</div>
I hope it helps you....
You cannot do this in CSS3 unless the strong element can be specified in the same selector as h3:hover (right now, this only works when the strong element is an sibling), however otherwise you cannot do "disjoint" effects using pure CSS, you must use scripting. Here's a quick example (that doesn't use jQuery for once). I haven't tested it - it might work, it might not. Have fun!
document.querySelectorAll(".tratoresList h3")forEach( function(el1) {
el1.addEventListener("mouseover", function() {
document.querySelectorAll(".tratoresList strong").forEach( function(el2) {
el2.classList.toggleClass("hoverEffect");
} );
});
} );
If you want to change the style of text in strong tags(inside h3) when you hover over h3..
.tratoresList h3:hover strong{
color: green;
}}
Due to layout requirements I have enclosed an h4 tag and a p tag inside an anchor tag. The problem is this does not validate properly. I need the anchor tag for the link and the mouseover action on the background image.
What is the correct way to do this without breaking the layout?
Here is the HTML:
<div class="services">
<a href="http://corecubed.com/our-services/{url_title}">
<h4>{home_page_title}</h4>
<p>{home_page_blurb}</p>
</a>
</div>
Here is the CSS:
.services a:link, .services a:visited {
width: 165px;
height: 181px;
display: block;
color: #5e5e5e;
text-decoration: none;
float: left;
margin: 0 5px 20px 0;
background: url(/images/bg_services.png) no-repeat center bottom;
}
.services a:hover {
background-position: center top;
}
.services h4 {
width: 140px;
height: 50px;
display: block;
font-size: 13px;
font-weight: normal;
color: #eaeaea;
margin: 0;
padding: 10px 10px 0 15px;
}
.services p {
line-height: 19px;
padding: 0 10px 0 10px;
}
I am open to any solid guidance on this.
This may not be an issue as HTML progresses.
In HTML5, the a tag can enclose both inline and block level elements (phrasing and flow elements respectively).
See: http://www.w3.org/TR/html-markup/a.html#a
Example
I used the following snippet:
<a href="http://www.yahoo.com">
<h3>Go see Yahoo...</h3>
<p>A short paragraph.</p>
</a>
and created the following HTML5 page:
http://jsfiddle.net/audetwebdesign/Hm7wp/show/
Using the following validator, http://validator.w3.org, I got a successful result
except for the warning that the HTML5 validator is experimental (work in progress).
You can review the Validation Results and examine the details.
I am having some difficulty changing font color decoration ect across the same DIV tag.
What I want to do is make a breadcrumb type navigation on certain pages in my site and I would like to minimize the amount or Div's I use so as to make it easier to maintain.
here is what I have and would like to do.
<div id="product-breadcrumbs">
<div id="breadcrumbs">(Link and color) // (another link and another color)
</div>
</div>
CSS
#product-breadcrumbs {
position: absolute;
left: 0px;
top: 66px;
width: 1024px;
height: 34px;
background-color: #E7E5F2;
}
#breadcrumbs {
position: relative;
padding-top: 7px;
padding-bottom: 7px;
text-align: left;
text-indent: 140px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #09C;
text-decoration: none;
}
Edit: Reread your question (you are right, I did misread it). You could accomplish this by giving classes to your links, no?
<div id="product-breadcrumbs">
<div id="breadcrumbs">
A link
Another link
</div>
</div>
with the following CSS:
#breadcrumbs a.colorOne {
color: black;
}
#breadcrumbs a.colorTwo {
color: blue;
}
When I linked to my external style-sheet, it seems my wrapper styles are broken. If I paste the styles into the head on my index.html, it works just fine, but not when linking to a .css. All other css rules work perfectly either way, only the wrapper style appears to break.
The only rule applied to the wrapper is to center it within the browser, so if there is another reasonable way to accomplish this I'm all ears.
the wrapper css:
#wrapper {
width: 960px;
margin: 0 auto;
}
and the html (minus content):
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="nav">
</div>
<div id="content">
<div id="cont_left">
</div>
<div id="cont_right">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
Any help or advice would be great.
EDIT: here is the full css:
#wrapper {
width: 960px;
margin: 0 auto;
}
#header {
width: 960px;
height: 144px;
background-image: url(../images/header.jpg);
background-repeat: repeat-x;
margin-bottom: -14px;
}
#logo {
margin-right: 48px;
margin-top: 33px;
float: right;
}
#logo a img {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#tagline {
margin-top: 90px;
margin-left: 48px;
float: left;
clear: both;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
color: #CCC;
}
#nav {
width: 960px;
height: 48px;
background-image: url(../images/nav_bar.jpg);
background-repeat: repeat-x;
}
#nav_bar {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
margin-left: -50px;
padding-top: 14px;
}
#nav_bar li {
display: inline;
padding-left: 58px;
}
#nav_bar li a {
text-decoration: none;
color: #999;
padding: 4px;
}
#nav_bar li a:hover {
color: #fff;
background-color: #666;
}
.current {
color: #CCC;
}
#content {
float: left;
width: 960px;
background-image: url(../images/content.jpg);
background-repeat: repeat-x;
}
#cont_left {
width: 40%;
margin: 48px;
float: left;
}
#cont_right {
width: 40%;
margin: 48px;
float: right;
}
#footer {
clear: both;
height: 48px;
width: 960px;
background-image: url(../images/footer.jpg);
background-repeat: repeat-x;
}
#footer_list {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666;
font-style: normal;
text-align: center;
padding-top: 16px;
}
#footer_list li {
display: inline;
padding: 18px;
}
#footer_list li a {
text-decoration: none;
color: #666;
padding: 4px;
}
#footer_list li a:hover {
color: #000;
text-decoration: underline;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 48px;
line-height: 20px;
font-weight: normal;
margin: 0px;
padding-top: 0px;
padding-bottom: 12px;
}
p {
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 20px;
}
body {
background-image: url(../images/background.jpg);
background-repeat: repeat-x;
}
EDIT TO ADD: Website is not live, therefore I have no link to provide, sorry. Still in early development stages, got stuck on this issue.
What browser are you using? I've just tried your sample in IE8 and it won't centre at all unless I include the XHTML doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
No idea why, or if you have this or not, but it may help.
View source of the page you are using and click on the CSS document you link you have linked. It should pull up a CSS page with your styles, if not, you're either 1) not linking it correctly or 2) there is a permissions issue on the server.
ADD: Check it in developer tools (F12 -> IE, left-click>inspect Element -> chrome, Firefox).
It will not make a difference whether your css rule is in an external stylesheet or in a <style> tag in head. Things to try;
Validate your css file (will inform you of typos) http://jigsaw.w3.org/css-validator/
Do you have multiple css files? If so, try to include this stylesheet last.
Use firebug (or chrome inspector if you prefer) to inspect your #wrapper element, to see if your definition show up at all (and if its overruled and by what).
I would love to see your entire solution if possible, so i can poke around :)
I have never had this problem before. You may not have the link correct
Make sure that you attached you style sheet correctly:
<link href="Default.css" rel="stylesheet" type="text/css" />
If it is in a folder (say Styles for ex):
<link href="Styles/Default.css" rel="stylesheet" type="text/css" />
If your webpage is in a folder then you need to add "../" to the front
<link href="../Styles/Default.css" rel="stylesheet" type="text/css" />
You can also try !important
#wrapper {
width: 960px;
margin: 0 auto !important;
}
If that does not work, then right click the wrapper element and click "inspect element" in chrome. This will show you all applied css on that element, and what has been over written by what. This will give you a better idea of what is actually going on (downloading Firebug for firefox is also helpful)