alright, first time asker, i have an issue when using an external style sheet with the chrome browser, which doesn't occur when using Edge and Firefox. it also works correctly in Jsfiddle.
the issue is that it doesn't display background or text colour in my body, but for the header, it works perfectly.
this is my first time using an external style sheet, but i assume since its working in other browsers, this is an issue with compatibility with chrome.
i link the CSS file like so:
<link rel="stylesheet" type="text/css" href="styles.css" />
here is my CSS code itself:
body {
background-color: Black;
color: Green;
font-family: verdana;
}
h1 {
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: Green;
}
li {
float: left;
border-right:1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: Black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: green;
}
thanks in advance for any help you can offer, its for a school esque project with strict criteria, which is why it needs to be external and in chrome.
goto settings
search for cache
clear browsing data
check cached images and files (the past hour / day)
clear browsing data
and goto your webpage and press "Ctrl + r"
Hope this helps !
Related
I have a problem. I suspect that the problem is a browser-side rendering problem. Maybe even an expectable behaviour, but I have no idea, and that is why I am going to ask you:
I have an <a>-element and I place two other elements (a <span> and a <div>, the <div> has even more children) inside that element.
I upload my HTML-file to my server and can access and download it (e.g. via curl or wget). There is no problem and the file is exactly the same. When I open it in web browsers (I tested Firefox and Chrome) it is still the same, but only when I open it using the "debugging" tab where I can see the original files. The displayed HTML-file (which I can access using the "inspection" tab) is different. The <div>-element got moved out of the <a>-element. Here is the code-snippet:
<div class="navbar">
A link
<a class="dropdown">
<span>A dropdown</span>
<div class="dropdown-content">
Another link
And a third link
</div>
</a>
</div>
As you can guess, it is a snipped from a navbar ;) Maybe you need the CSS (I use SCSS-files) too:
.navbar {
background-color: $navbar-color;
overflow: hidden;
padding-left: 10vw;
padding-right: 10vw;
a {
position: relative;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
color: $navbar-text-color;
}
a.dropdown {
position: static;
display: inline-block;
span::after {
content: '\f0d7';
font-family: FontAwesome;
padding-left: 6px;
}
.dropdown-content {
display: block;
position: absolute;
background-color: $navbar-color;
min-width: 160px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
a {
float: none;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
color: $navbar-text-color;
}
}
}
}
I know, the design is not perfect and not finished, but I expect I am facing an HTML problem and so I wanted to ask you first.
Do you have any hints, ideas, references, explanations or corrections for me? I would really appreciate it.
I'm using Squarespace, set the page "danieconz.com/about" as my homepage and, as so, it gets redirected to "danielconz.com".
I've created links to pages at the footer and some CSS codes. My problem is that, when I'm at "danielconz.com" these links get all selected. However, only the "About" link should be selected.
Here's the CSS I'm using:
#media all and (max-width:750px) {
#footer h1 {
width: 120px;
margin: 0 auto;
padding-bottom: 0px;
line-height: 70px!important;
}
#footer h1 .active-link {
border-top: 2px solid #1a1611;
}
#footer h1 a:hover {
border-top: 2px solid #1a1611;
}
}
#media all and (min-width:750px) {
#footer h1 a:hover {
border-top: 2px solid #1a1611;
padding: 0px !important;
}
#footer h1 .active-link {
border-top: 2px solid #1a1611;
padding: 0px !important;
}
}
And follow a couple of images of the problem on desktop and mobile. Could anyone please help me with that?
Thanks in advance.
desktop
mobile
You have a javascript adding the link-active class to the links in your footer.
A quick thing you can do is change the function to this, please check it:
$(function() {
if(location.pathname.split("/")[1]==""){
$('footer h1 a').removeClass('active-link');
$('footer h1 a[href^="/about"]').addClass('active-link');
}else{
$('footer h1 a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active-link');
}
$('body').addClass('enter');//This part is the same
});
I've been working on making a personal site with a navigation bar. I read w3schools' article and used the code there to make my nav. There are some problems with this, however:
The same code needs to be copied and pasted on each page.
If I decide to add a new page, I have to add the navigation bar to the new page and add the new page's link to the navigation bar on every page.
If I find an error in the nav code, I have to fix it on each individual page.
Here's the code:
html {
color: blue;
font-family: sans-serif;
}
.resource-dropdown {
position: sticky;
display: inline-block;
}
.resource-dropdown-content {
display: none;
position: absolute;
background-color: #b51d1d;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 12px 16px;
z-index: 1;
}
.resource-dropdown:hover .resource-dropdown-content {
display: block;
}
.resource-dropdown-content:hover {
color: greenyellow;
}
.topnav {
background-color: black;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: white;
color: black;
}
<div class="topnav">
Home
<div class="resource-dropdown">
<span><a>Resources</a></span>
<div class="resource-dropdown-content">
<p>Sites</p>
<p>Books</p>
<p>Videos</p>
<p>Other</p>
</div>
</div>
About
</div>
Is there a way to make a shortcut? (Something like the alias command in the C languages)
There is no shortcut in HTML only. If you avec a local server such as MAMP / XAMP for exemple, and that you're ready to make a bit of PHP, you'll be able to create one file for the menu, and include it in all other files. This way, each time you change the menu in the menu file, it'll change on every pages.
here is the official documentation on php include function : http://php.net/manual/en/function.include.php
here is the documentation of MAMP : https://www.mamp.info/en/#controlcenter
Hey all I posted a question earlier here : Why am I getting white space between my HTML element? which was solved.
I have continued working on this page and have ended up with the following:
IE Screenshot:
http://postimage.org/image/2aqd5k99g/
Chrome Screenshot:
http://postimage.org/image/1xdm95138/
What I really want is basically the chrome screenshot but without the white space below my red footer. What can I do to get this desired effect for both IE and Chrome?
My HTML file is:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="swaggersstyle.css">
<title>Oamaru Backpackers Hostel, Swaggers Backpackers - Home</title>
</head>
<body>
<img src="final.jpg" id="banner"></img>
<ul id="nav">
<li class="links">Home</li>
<li class="links">Planning</li>
<li class="links">Construction</li>
<li class="links">Evaluation</li>
</ul>
<div id="mainc">
<p>Make Yourself at Home</p>
<p>Swaggers Backpackers is a converted old house located within walking distance of all the best parts of Oamaru. Explore the old victorian era buildings and shops of the city centre, or see the penguin colonies down the street. Swaggers is owned and operated by camp mum Agra, who makes all guests feel welcome, informed, and perhaps a bit mothered. </p>
</div>
<div id="rightcolumn">
<p>hghadgadgadg</p>
<p>easfasf</p>
<p>safSFS</p>
<p>afafafadf</p>
<p>safasf</p>
<p>saasfasf</p>
<p>fasfsaf</p>
</div>
<div id ="footer">
<p> fsafasfasf </p>
</div>
</body>
</html>
and my CSS file is:
html{
font-family: sans-serif;
background-color:#464E54;
}
body{
width: 960px;
margin: auto;
background-color: white;
border: 5px solid black;
}
#banner{
padding: 0px;
margin: 0;
display: block;
}
#nav {
list-style-type: none;
padding: 0px;
margin: 0px;
overflow: hidden;
}
#mainc {
float: left;
width: 760px;
background-color: white;
margin: 0;
}
#rightcolumn {
padding-left: 3px;
float: left;
background-color: #dad8bf;
width: 197px;
}
#footer {
clear: both;
background-color: red;
}
.links {
float: left;
margin: 0px;
}
a:link {
display: block;
width: 232px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:visited {
display: block;
width: 232px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:hover {
background-color: #999999;
}
a:active{
background-color: #999999;
}
Once again cheers for everyones help - hopefully after this I will be a bit more familiar to these mysterious white lines showing up.
add the following rule
div#footer p {
margin:0;
}
Use inspect element on chrome by right clicking.
you will find the area which is blue by moving mouse over the respected area and then you can solve the problem
Have you checked it on different chrome browsers (From different PCs chrome browsers) or do you have any download manager extension installed on your browser, if yes; then disable that first and then reload your page.
Hope this works for you.
Many of these problems are solved, only by importing and using a CSS Reset. Why don't you use them?
Theory: Browsers apply some default style on HTML elements, and they are not the same in that. For example, IE might add 15px margin to p elements, while Chrome might add 13px. This means that incosistencies can exist between default styles of HTML elements across browsers. CSS Reset is technically a set of CSS rules which zero-outs these default values. For example, you can see that in CSS reset, a p is directed to have 0 margin.
p
{
margin: 0;
}
I have a newsfeed which is obviously organized by an . When the user hovers over each of the items, the background is highlighted. I'd also like to have a small "x" in the top right hand corner of each item, only shown when hovered. This "x" would be a delete button to remove that post.
Right now I just have some basic html stating: <div class="hide-button">x</div>
I know that I don't want the "x" displayed in the html, but rather have it in the CSS. So I have the <li> css below for hovering, as well as the CSS for the hide button. I'd like to know the best method to integrate the hide button div into the <li>
.hide-button {
float: right;
margin-top: -13px;
font-size: 11px;
font-family: helvetica;
color: gray;
}
.hide-button a{
text-decoration: none;
color:gray;
}
.hide-button a:hover {
text-decoration: underline;
color:gray;
}
and the list:
.newsfeedlist li {
background: white;
border-bottom: 1px solid #E4E4E4;
padding: 12px 0px 12px 0px;
overflow: hidden;
}
.newsfeedlist li:hover {
background-color: #F3F3F3;
}
Thank you so much!!!!!
Presuming your delete buttons are inside another container you could do something like
.hide-button {
float: right;
margin-top: -13px;
font-size: 11px;
font-family: helvetica;
color: tray;
display: none;
}
... the other bits of CSS ...
.newsfeedlist li:hover .hide-button {
display: block;
}
Modifying the close button to be hidden by default and then when hovering on a list item you set the display back again on the close button.
Hope this makes sense
Tim
You might really be in need of this:
Demo at jsFiddle.net
I modified an example and tushed it up for multiple content areas or images.
But hide-button element in the li and do
.newsfeedlist li:hover .hide-button {
display: inline-block;
}
and add display: none; to .hide-button
Otherwise, there's always javascript.