In the following example the color selectors in the <li> styles are not having an effect but the background-color and font-weight ones work just right.
If it isn't just operator-error but some subtle feature conflict I'd love to know where to find the reference for the next odd thing I trip over. I've tried removing the background-color and using the numeric value for the color.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- based on https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements -->
<title>Untitled</title>
<meta name="generator" content="BBEdit 8.2">
<style>
ul {
padding: 0;
}
li {
padding: 3px;
margin-bottom: 5px;
}
li:nth-of-type(even) {
background-color: #ccc;
color: darkred;
}
li:nth-of-type(odd) {
background-color: #eee;
}
li:hover {
font-weight: bold;
color: red;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<ul>
<li>United Kingdom</li>
<li>Germany</li>
<li>Finland</li>
<li>Russia</li>
<li>Spain</li>
<li>Poland</li>
</ul>
</body>
</html>
You need to set the color on the anchor when it is hovered.
a:hover {
color: red;
text-decoration: underline;
}
Currently it's using the default color for anchors when hovered and red is not being inherited.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- based on https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements -->
<title>Untitled</title>
<meta name="generator" content="BBEdit 8.2">
<style>
ul {
padding: 0;
}
li {
padding: 3px;
margin-bottom: 5px;
}
li:nth-of-type(even) {
background-color: #ccc;
color: darkred;
}
li:nth-of-type(odd) {
background-color: #eee;
}
li:hover {
font-weight: bold;
}
a {
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}
</style>
</head>
<body>
<ul>
<li>United Kingdom</li>
<li>Germany</li>
<li>Finland</li>
<li>Russia</li>
<li>Spain</li>
<li>Poland</li>
</ul>
</body>
</html>
FWIW, I'd switch from the HTML4 doctype to an HTML5 doctype.
<!DOCTYPE html>
It's because there are more specific rules that are overriding your styles on the li elements. Each browser has it's own set of default styles called "user agent styles", which are determined by the browser. There is a user agent style for anchor tag color, but there isn't one for font-weight. Because of this, the inherited value of font-weight is applied to your links on hover, but color is not. Any value that is inherited has a lower "specificity" than any other style (even the default user agent styles) that might be applied. As you can see from the image below, in chrome the color is set to -webkit-link. There is a similar style in all other major browsers.
To correct the issue, you need to apply your style directly to the anchor. You can do this with a rule for li:nth-of-type(even) a, a:hover (or li:hover a but I prefer to keep my :hover styles on an anchor only), et.al. The point is, you need the style to be on the anchor itself. Otherwise, it's just implicitly inherited and the browser will consider its own user agent styles to be the more specific ones.
Maybe try using hex colors instead of the way you have them typed?
you could try putting the styles inline on the list? ie.
try using applying the css to the a tags instead of to the li tag ie:
a:hover{
color:red;
};
try using the nth child selector instead of nth of type:
ul > *:nth-child(2n) <- for even
ul > *:nth-child(2n-1) <-for odd
I'm honestly not sure but I think something in the above should work. If not, please let me know and I'll try to help more.
Related
This is my css code what should i add to reduce the size of the link to where its just the word is a clickable link?
<style>
ul {
list-style-type: none;
}
li {
float: center;
}
li a {
display: block;
color: Black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
text-decoration: underline;
background-color: #6CCFFFb1;
}
.active {
background-color: #6CCFFF ;
}
</style>
</head>
I've read some stuff but most code I've added hasn't worked or distorted the image of the webpage.
<!DOCTYPE html>
<head>
<title>Andis Place</title>
<link rel="stylesheet" type="text/css"href="stylesheet.css"/>
</head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<body style="font-family:Courier New;" bgcolor="White"
<head>
<h1 style="color:Orange;"> <center>Welcome to Andis Place</center></h1>
</head>
</body>
<body>
<p style="font-size:15px;">Enjoy… </p>
<!DOCTYPE html>
<html>
<body>
<ul style="list-style-type:none">
<li class="external-link">
Soundcloud
</li>
<li class="external-link">
Shop
</li>
<li class="external-link">
Photos
</li>
<li class="external-link">
About Me
</li>
</ul>
</body>
<body>
</body>
</html>
This is my html code.
Move where you do your float.
Change your style from this:
ul {
list-style-type: none;
}
li {
float: center;
}
li a {
:
:
To this:
ul {
list-style-type: none;
float: center
}
li a {
display: block;
color: Black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
:
:
Notice that I removed the "li" style altogether... also remove the style application on the UL tag itself. The CSS is sufficient.
I would recommend that you spend some more time working on some html and css basics while you are trying to fix this problem. I see a lot of errors in your markup and your styles that, although they may not be related to this particular issue, do make it harder to isolate just this behavior that you want to modify. The Mozilla HTML introduction is a good place to start.
Particularly you want to make sure that your HTML document is structured correctly. Only one body tag, no display content in the head tag, proper sets of opening and closing tags, etc. Focusing on these fundamentals makes debugging your code a lot easier (for you and others).
You are also trying to set a few css properties with values that don't actually exist, such as float:center.
As for this particular behavior you are seeing, this happens because it is the default behavior for block level elements to fill their container 100%. So your list items are stretching all the way across the screen, and you have set your anchor elements display: block as well, so they are stretching all the way across the screen. Try removing display:block and text-align:center from the anchor elements and just setting text-align: center on the li instead. (It is not necessary to set display: block on an li because that is it's default value.
You can see a very simple example here in this codepen.
I am trying to display a page with different styles based on PC or mobile.
My html,
<link media="only screen and (max-device-width: 780px)" href="iPhone.css" type="text/css" rel="stylesheet" />
<link href="pc.css" type="text/css" rel="stylesheet" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
</head>
<body>
<!-- Site navigation menu -->
<ul class="navbar">
<li>Home page</li>
<li>Musings</li>
<li>My town</li>
<li>Links</li>
</ul>
<!-- Main content -->
<h1>My first styled page</h1>
<p>Welcome to my styled page!</p>
<p>It lacks images, but at least it has style.
And it has links, even if they don't go
anywhere</p>
<p>There should be more here, but I don't know
what yet.</p>
<!-- Sign and date the page, it's only polite! -->
<address>Made 5 April 2004<br>
by myself.</address>
</body>
</html>
my pc.css,
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
and iPhone.css,
body {
color: #FFFFFF;
background-color: #000000 }
ul.navbar {
display : none }
I tested this with chrome through Inspect Element and selected IPhone4 option, the menu links were not displayed as expected but the color and background-color styles in iPhone.css was not taking effect. It is shown as line crossed.
Please help me find where it goes wrong or provide a standard way to do this.
Thanks.
Swap the two <link> elements. The generic stylesheets should go first, since their rules will get overridden by rules from more specific (device-specific) stylesheets that follow (if any).
You should also place the <link> tags inside the <head> tag - otherwise your HTML is heavily malformed. There's a lot of code in WebKit that tries to handle this as gracefully as possible, though...
UPDATED:
I have found out this : margin: 0 auto; in the body {} block of the style sheet makes the header move. If I remove it, the banner header picture moves to the right. So that piece of line is the culprit. Does anybody know why?
As I have progressed (somewhat in the mystery) the question goes the other way.
I have this header file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<link rel="stylesheet" href= "<?php echo base_url() ?>css/main_style.css" />
<link rel="stylesheet" href= "<?php echo base_url() ?>css/webform.css" />
</head>
<div id="header" class = "header"><h1 class="header">Real Estate Worldwide</h1> </div>
<body>
Which connects to this View file (I am on MVC)
The code in the view has nothing to do with the issue, I asked so we'll skip it.
Then I have this Style sheet.
<style type = "text/css">
::selection{ background-color: #E13300; color: white; }
::-moz-selection {background-color: #E13300; color: white; }
::webkit-selection{ background-color: #E13300; color: white; }
body {
background:url('../assets/uploads/miweb/gradient2.png');
background-repeat:repeat-x;
margin: 40px;
font: 13px/20px normal Helvetica, Arial, sans-serif;
color: #4F5155;
width:600px;
height:500px;
margin: 0 auto;
}
#header {
float:center;
background: url("../jq185/css/start/images/ui-bg_gloss-wave_75_2191c0_500x100.png") repeat-x scroll 50% 50% #2191C0;
font-family: 'trebuchet ms',geneva,arial,tahoma,sans-serif;
font-size: 10px;
margin: 0 auto;
margin-top: 2px;
padding: 0;
width: 1050px;
h2 {color:#ffffff;}
}
.header {
color:#ffffff;
}
ISSUE:
If I remove the 3 selection ::selection lines from the style sheet, the gradient effect, from the background body disappears.
If I leave it there, then the gradient effect works but then the #header jpg file that you see down the style sheet changes its position from the centered marging: 0 auto; to the right.
You have the full code there. I am puzzled as hell, because I cannot understand why something like ::selection would have a radical effect on the code snippet that refers to body {} where the call to the gradient picture is and also affects the font style within that body {}
II UPDATE
Here is the Controller
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Home_c extends CI_Controller {
function __construct()
{
parent::__construct();
$this->load->model('home_model');
}
public function index ()
{
$this->load->view('header');
$this->load->view('home');
}
public function load()
{ $this->load->view('header');
$data['paises'] = $this->home_model->devolverPaises();
$data['ofertas'] = $this->home_model->devolverOfertas();
I wouldn't be surprised if the strange effects you're seeing are tied to not having proper markup.
EDITED: As I made comments, I realized the may not have been clear enough for OP.
Your HTML structure needs to be valid, to start with:
<!DOCTYPE html >
<html>
<head>
<!-- title, meta, styles, etc go here -->
</head>
<body>
<!-- all your other content goes here -->
</body>
</html>
Make sure that when your page renders in the browser, when you look at View Source, you see those container elements in their proper places, nested as such. Better yet, run your page through a validation service. (http://validator.w3.org/ for example)
You have invalid CSS:
#header {
float:center; /* no such attribute... only left, right, none, or inherit */
h2 {color:#ffffff;} /* you can't nest tags inside other specs, except with the use of pre-processors like SASS or LESS */
}
<div class="HeaderLink" id="Home">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MDB1</title>
<link rel="stylesheet" type="text/css" href="Index.css" />
</head>
<body id="HeaderFive">
<div class="HeadPanelElement" lang="en" id="HeadPanel"> Blog
Videos
Home
Contact
About MDB1 </div>
</body>
</html>
</div>
#charset "utf-8";
/* CSS Document */
.HeadPanelElement{
position: absolute;
width: 10%;
left: -10%;
}
#HeadPanel{
left: 15%;
width: 100%;
height: 100%;
font-family: Georgia, "Times New Roman", Times, serif;
border: dashed;
border-color: #C00;
border-width: 2px;
font-size: 1em;
Intentions are for the page to layout like this
Why aren't the position attributes working?
quick to do ...
#HeadPanel
{
display: inline;
width: 100%;
}
.HeadPanelElement
{
width: 10%;
/* or
padding: 10px; */
}
the real factor here is the display: inline; which will layout the div in a side by side fashion.
You are using 'left:' but you didn't include 'position:absolute'? Try that maybe it might help.
position: absolute; will help you get that interesting layout.
For declarations like left and top to make any sense, you need to apply them to positioned elements:
#foo {
position:absolute;
top:10%;
left:25%;
}
Your elements don't appear to have be positioned as absolute or relative.
There are many other problems with your markup as well that will cause many, many problems. All of your markup should go within the body tag:
<!DOCTYPE html>
<html>
<head>
<title>Foo Example</title>
<style type="text/css">
#foo {
position:absolute;
top:10%; left:10%;
background:yellow;
padding:10px 20px;
border:1px solid #000;
color:#000;
width:30%
}
</style>
</head>
<body>
<!-- all markup goes here -->
<div id="foo">Hello World</div>
<!-- all markup goes here -->
</body>
</html>
Online Demo: http://jsbin.com/efukol/edit
There are a few things going on here:
The A element is inline, and things will sit right next to each other, like BlogVideosHomeContactAbout MDB1, as I am sure you have already seen.
This LOOKS like a list or menu, so use the appropriate markup. List markup would be best, or if you want to try HTML5, there is already the NAV element with is specifically for that purpose.
I notice that you are not using URLs in the a elements. It is better to use something which will not generate a 404 on the server.
Why are you bothering with target="_self" unless you are using frames, and if that is the case, please Google for Frames are Evil. If not, then A) _self is redundant, B) if you are using a Strict doctype, the target attribute is deprecated for accessibility reasons.
Naming your CSS file index.css might get you in trouble if the server is configured to use index. with ANY suffix to as the default page. Better would be something like style.css.
Now to get these things going across, you can go a few ways:
/* CSS using line list markup */
#HeadPanel ul {list-style-type:none;}
#HeadPanel ul li {display:inline; padding:.25em 1em .25em 1em}
/* CSS using floats list markup */
#HeadPanel ul {list-style-type:none;}
#HeadPanel ul li {display:block;float:left;margin: 0 .1em 0 .1em;padding:.25em;}
#HeadPanel ul li a {display:block; /*what ever else you want to do */}
<div class="HeaderLink" id="Home">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MDB1</title>
<link rel="stylesheet" type="text/css" href="Index.css" />
</head>
<body id="HeaderFive">
<div class="HeadPanelElement" lang="en" id="HeadPanel"> Blog
Videos
Home
Contact
About MDB1 </div>
</body>
</html>
</div>
#charset "utf-8";
/* CSS Document */
.HeadPanelElement{
position: absolute;
width: 10%;
left: -10%;
}
#HeadPanel{
left: 15%;
width: 100%;
height: 100%;
font-family: Georgia, "Times New Roman", Times, serif;
border: dashed;
border-color: #C00;
border-width: 2px;
font-size: 1em;
Intentions are for the page to layout like this
Why aren't the position attributes working?
quick to do ...
#HeadPanel
{
display: inline;
width: 100%;
}
.HeadPanelElement
{
width: 10%;
/* or
padding: 10px; */
}
the real factor here is the display: inline; which will layout the div in a side by side fashion.
You are using 'left:' but you didn't include 'position:absolute'? Try that maybe it might help.
position: absolute; will help you get that interesting layout.
For declarations like left and top to make any sense, you need to apply them to positioned elements:
#foo {
position:absolute;
top:10%;
left:25%;
}
Your elements don't appear to have be positioned as absolute or relative.
There are many other problems with your markup as well that will cause many, many problems. All of your markup should go within the body tag:
<!DOCTYPE html>
<html>
<head>
<title>Foo Example</title>
<style type="text/css">
#foo {
position:absolute;
top:10%; left:10%;
background:yellow;
padding:10px 20px;
border:1px solid #000;
color:#000;
width:30%
}
</style>
</head>
<body>
<!-- all markup goes here -->
<div id="foo">Hello World</div>
<!-- all markup goes here -->
</body>
</html>
Online Demo: http://jsbin.com/efukol/edit
There are a few things going on here:
The A element is inline, and things will sit right next to each other, like BlogVideosHomeContactAbout MDB1, as I am sure you have already seen.
This LOOKS like a list or menu, so use the appropriate markup. List markup would be best, or if you want to try HTML5, there is already the NAV element with is specifically for that purpose.
I notice that you are not using URLs in the a elements. It is better to use something which will not generate a 404 on the server.
Why are you bothering with target="_self" unless you are using frames, and if that is the case, please Google for Frames are Evil. If not, then A) _self is redundant, B) if you are using a Strict doctype, the target attribute is deprecated for accessibility reasons.
Naming your CSS file index.css might get you in trouble if the server is configured to use index. with ANY suffix to as the default page. Better would be something like style.css.
Now to get these things going across, you can go a few ways:
/* CSS using line list markup */
#HeadPanel ul {list-style-type:none;}
#HeadPanel ul li {display:inline; padding:.25em 1em .25em 1em}
/* CSS using floats list markup */
#HeadPanel ul {list-style-type:none;}
#HeadPanel ul li {display:block;float:left;margin: 0 .1em 0 .1em;padding:.25em;}
#HeadPanel ul li a {display:block; /*what ever else you want to do */}