I'm helping my brother to set up a site for his business, and I've hit a snag. A hyperlink becomes white, and thusly invisible, in some browsers. What's even more puzzeling, it's white in Firefox, but not while browsing in porn mode, se this screenshot. (1) (This made me think the problem was gone, but due to faulty flushing of cache.) The link works, and if you know it's there you can click it (or tap it if on a tablet or phone), but you can't see it.
HTML for index.html (2)
<html>
<head>
<link rel="stylesheet" type="text/css" href="stil.css">
<title>Albins glass och delikatesser</title>
</head>
<body>
<img alt="Albins glass och delikatesser" src="bilder/albinsglass.gif" style="width: 320px; height: 175px; display: block; margin: 0 auto;"/>
<div class="meny">
<ul class="meny">
<li>Hem</li><li>Sortiment</li><li>Turlista</li><li>Kontakt</li>
</ul>
</div>
<p>Välkommen till <i>Albins glass och delikatesser</i>, din lokala glassbil med god svensk kvalitetsglass från <i>Engelholms Glass</i> och smakrik lokalproducerad ostkaka!</p>
<p>Glassen tillverkas i Ängelholm av det svenska familjeföretaget Engelholms Glass. De satsar på högsta kvalitet och tillverkar gräddglass med de bästa råvarorna. Läs mer om Engelholms Glass här.</p>
<p>Ostkakan kommer från <i>Stellas Ostkaka</i> i Pilås! Läs mer här.</p>
</body>
</html>
CSS for the site (3)
body {
max-width: 960px;
margin: 0 auto;
float: none;
font-family: "Arial", Arial, sans-serif;
}
a:link, a:visited {
text-decoration: none;
}
a:hover, a:active {
color: #FF9595;
}
.meny a:link, a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #00AEEF;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
font-family: "Times New Roman", Times, serif;
}
.meny a:hover, a:active {
background-color: #0066CC;
}
b {
font-weight: bold;
}
c {
text-align: center;
}
i {
font-style: italic;
}
p {
margin: 10px;
overflow: visible;
}
div.meny {
margin: 10px auto 25px;
width: 536px;
}
ul.meny {
list-style-type: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
.meny li {
display: inline;
float: left;
}
The site in question (4) (in swedish)
http://www.albinsglass.se
Note, due to limitation on new accounts, I can apparently not include more than two links. Here's a link to a pastebin with the four links i mentioned.
LLAP!
Once you've visited the link you are hitting this CSS selector .meny a:link, a:visited { which states the color should be white.
You can alter the CSS for this to whatever color you want, or provide a separate CSS rule.
I would change this:
.meny a:link, a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #00AEEF;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
font-family: "Times New Roman", Times, serif;
}
to:
a:visited{
color:#990099;/* Change this to whatever color you want your plain links to be */
}
.meny a:link, .meny a:visited {
/* ^^^^^--This specifies that only links *within* your menu are styled here */
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #00AEEF;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
font-family: "Times New Roman", Times, serif;
}
Related
This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Does UL have default margin or padding [duplicate]
(2 answers)
Closed 1 year ago.
I am trying to create a Portfolio, I am new to HTML and CSS. I am trying to get the top navigation bar, to be all black. But around the navigation bar, it shows the html's tag background color.
Image:
As you can see, well it's a little hard to see here, but around the navigation bar, it shows the background color, how do I turn it black? (Click on the image to see it better)
Code:
<!DOCTYPE html>
<html style="background-color: #111;">
<head>
<title>My Portfolio</title>
<style type="text/css">
h6 {
font-weight: light;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
position: sticky;
}
ul li img {
width: 2vw;
height: 2vw;
}
li {
float: left;
}
li a {
display: block;
color: grey;
text-align: center;
padding: .4vw .5vw;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
#navigation-bar {
background-color: black;
color: grey;
font-weight: bold;
font-family: monospace;
font-size: 1.2vw;
}
#main-page {
background-color: #111;
color: white;
}
.header {
background-color: #111;
color: white;
text-align: center;
font-weight: bold;
font-family: cursive;
font-size: 2.5vw;
}
.sub-header {
background-color: #111;
color: white;
text-align: center;
font-weight: normal;
font-family: cursive;
font-size: 1.7vw;
}
.sub-header th{
padding-left: 1vw;
padding-right: 1vw;
}
.sub-header-two {
background-color: #111;
color: white;
text-align: center;
font-weight: normal;
font-family: cursive;
font-size: 1.1vw;
}
#copyright {
background-color: #111;
color: white;
text-align: left;
position: absolute;
bottom: .5vw;
font-weight: light;
font-family: sans;
font-size: .7vw;
}
</style>
</head>
<body>
<div id="navigation-bar">
<ul>
<li><img src="https://cdn.discordapp.com/avatars/471009727602491405/1205d2f887ec380308940bb54b593d60.webp?size=128" height="50px" width="50px"></li>
<li>Home</li>
<li>About Me</li>
<li>Languages</li>
<li>Previous Work</li>
<li style="float: right;">An Amazing Website </li>
</ul>
</div>
<div id="main-page">
<h1 class="header">Welcome to my Portfolio</h1>
<table align="center" >
<tr class="sub-header">
<th>What can I do here?</th>
<th>How can I get in contact?</th>
<th>Where can I support?</th>
</tr>
<tr class="sub-header-two">
<td><br><br>Here you can look around, or learn<br>about me! You can find info like<br>what languages I know, my previous<br>work, etc.</td>
<td>You can get in contact with me on<br>discord # killrebeest#4357</td>
<td>Just Support by supporting me, like<br>a supporter</td>
</tr>
</table>
</div>
<div id="copyright">
(C)Copyright 2022 All Rights Reserved
</div>
</body>
</html>
Add this styling
body, li {
margin: 0;
}
Explanation: It has a margin on body on top. Because of this, your nav bar is a little bit near to bottom. When you do this, you remove a default margin from top.
Also I added li because, It has also default margin on it.
There is some strange whitespace that keeps appearing under all my display: block elements. It's for a meganavigation. I have no idea what is causing this. Basically, I have the code (plus some more that determines the column widths) below, and when it generates the meganav, the items that are rendered as "display:block" have a space below them. You can also see it when hovering over the items in the main navigation as well. I'm not quite sure what to do.
a {
font-family: "Frutiger LT Std 45 Light", sans-serif;
color: black;
text-decoration: none;
font-size: 10px;
display: block;
padding: 3px;
}
a:hover {
text-decoration: none;
color: white;
background-color: #c8a51b;
}
.nav {
background: #1b2c69;
width: 800px;
margin: 10px;
height: 30px;
}
.nav li {
list-style: none;
}
.nav > li {
padding: 0;
float: left;
position: relative;
}
.nav > li > a {
font-family: "Frutiger LT Std 45 Light", sans-serif;
float: left;
color: #fff;
font-size: 13px;
text-decoration: none;
line-height: 30px;
padding: 0 20px;
height: 43px;
text-transform: uppercase;
}
.nav > li:hover > a {
background: #FFF;
color: #1b2c69;
}
HTML:
<ul class="nav">
<li>Home
</li>
<li>Our Company
<div class="tab1">
<div class="container-1">
<div class="col1"> Business Reports
<br> Core Values
<br> Corp Priority Updates
<br> Critical Success Factors
<br> Daily Reports
<br> EBIT Chart
<br> HyVisability Scorecard
<br> Mission Statement
<br> Quality Vision
<br> Strategic Vision
<br>
</div>
</div>
</div>
</li>
See this link
I have added bgcolor to background to see the white space.
The fix is:
.nav > li > a {
font-family: "Frutiger LT Std 45 Light", sans-serif;
float: left;
color: #fff;
font-size: 13px;
text-decoration: none;
line-height: 30px;
padding: 0 20px;
height: 30px;
text-transform: uppercase;
}
In the above css I changed height: 43px; to height: 30px;
Because the height for all li tags should be same in tour case to achieve what you want. Hope you understand.
My site works and looks fine using Chrome, Safari, and Firefox but in the Microsoft Edge browser, my navbar breaks. Whenever I visit a page, the background color of the nav link becomes white when its supposed to stay dark blue (#293241). Here is my code:
.nav a:link, .nav a:visited {
display: block;
width: 100px;
background-color: #293241;
color: #FFF;
padding: 7px;
text-decoration: none;
font-family: Francois One, sans-serif;
text-align: center;
text-transform: uppercase;
}
<div class="nav">
test
</div>
Any work around?
Edited a:link and a:visited into two css sections fixed the issue. Like so:
.nav a:link {
display:block;
width:100px;
background-color:#293241;
color: #FFF;
padding: 7px;
text-decoration:none;
font-family: Francois One, sans-serif;
text-align: center;
text-transform: uppercase;
}
.nav a:visited {
display:block;
width:100px;
background-color:#293241;
color: #FFF;
padding: 7px;
text-decoration:none;
font-family: Francois One, sans-serif;
text-align: center;
text-transform: uppercase;
}
<div class="nav">
test
</div>
My problem is that my background is there, but it's behind my divs. I want it to be on the sides of the content div but it won't work. This is the part I think the problem is:
body {
background-image:"C:\Users\Peter\Documents\onze server met div\achtergrond.png";
background-color:;
min-height: 100%;
height:1500;
list-style-type:none;
margin:0;
padding:0;
overflow-y:scroll;
}
And this is the whole css code:
body {
background-image: "C:\Users\Peter\Documents\onze server met div\achtergrond.png";
background-color:;
min-height: 100%;
height: 1500;
list-style-type: none;
margin: 0;
padding: 0;
overflow-y: scroll;
}
li {
float: left;
}
.class1 A:link {
display: block;
width: 150px;
height: 20;
font-weight: bold;
color: #FFFFFF;
background-color: #bababa;
text-align: center;
padding: 6;
text-decoration: none;
text-transform: uppercase;
}
.class1 A:visited {
display: block;
width: 150px;
height: 20px;
font-weight: bold;
color: #FFFFFF;
background-color: #bababa;
text-align: center;
padding: 6;
text-decoration: none;
text-transform: uppercase;
}
.class1 A:active {
display: block;
width: 150px;
height: 20px;
font-weight: bold;
color: #FFFFFF;
background-color: #bababa;
text-align: center;
padding: 6;
text-decoration: none;
text-transform: uppercase;
}
.class1 A:hover {
background-color: #a6a6a6;
}
.class2 A:link {
}
.class2 A:visited {
}
.class2 A:active {
}
.class2 A:hover {
}
.class3 A:link {
text-decoration: underline;
color: #000080;
text-align: center;
}
.class3 A:visited {
text-decoration: underline;
color: #000080;
text-align: center;
}
.class3 A:active {
text-decoration: underline;
color: #000080;
text-align: center;
}
.class3 A:hover {
text-decoration: underline;
color: #000080;
text-align: center;
}
.class4 {
background-image: "C:\Users\Peter\Documents\onze server met div\achtergrond.png";
}
#content {
margin-top: 20;
text-align: left;
background-color: #EEEEEE;
height: 1000;
width: 70%;
float: left;
overflow-y: auto;
margin-left: 15%;
margin-right: 15%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
box-shadow: 10px 10px 5px #888888;
margin-bottom: 10;
padding: 20;
background: "C:\Users\Peter\Documents\onze server met div\achtergrond.png";
}
#footer {
background-color: #FFA500;
clear: both;
text-align: center;
}
#header {
background-color: #FFA500;
}
#menu {
background-color: #bababa;
height:;
width: 100%;
float: center;
}
#container {
background-image: "C:\Users\Peter\Documents\onze server met div\achtergrond.png";
}
and this is my html
<html>
<head>
<LINK HREF="C:\Users\Peter\Documents\onze server met div\Hetstylesheet.css" REL="stylesheet" TYPE="text/css">
</head>
<body background="C:\Users\Peter\Documents\onze server met div\achtergrond.png">
<div id="container" style="width:*">
<div id="header">
<h1 style="margin-bottom:0;">Onze server webpagina</h1>IP:</div>
<div id="menu">
<span class="class1">
<li>Home</li>
<li>De Server </li>
<li>Contact</li>
<li>Updates</li>
<li>loes</li>
</span>
<span class="class3">
<div id="content">
<br><P Style="font-size:18pt;"><strong>WELKOM</p></strong></style>
<br><br>Hoi, diegene die dit ziet.<br>
VEEL PLEZIER!!!
</div>
<div id="footer">
Copyright © Peter Kingma</div>
</span>
</div>
</body>
</html>
Forward thanks
Try one approach (not using inline CSS would be preferred) or another, as you've got two different Background declarations going on. One inline, and one in your stylesheet.
In your stylesheet you've got a couple of things that are fighting/canceling each other as well:
body {
...
min-height: 100%; /*max-height:100%; will prevent an image from scaling larger than it's true size */
height:1500; /* this is the height you'll get no matter what, by setting it explicitly
}
<body background="this will override your stylesheet"> ... I'd remove it.
To your question ... <body> will ALWAYS be behind your content divs, and those divs will always be children of <body>. If you want to use a background image that appears to be on the side of a <div>, all you need to do is make sure <body> stays wider than the BG Image + width of the <div>s + any side margins you want/need.
body {
background:url(your.png) right 0; /* aligned to the right */
background-size:80px 60px; /* CSS3 not good for older browsers (using an image you know is 80px wide, for example, would work best for browser compatibility. */
min-width:###px; /*body bg img + width of div + any margins you want. */
}
div {
max-width:###px; /* follow <body>s rule from above */
}
The nav bar displays the correct way (horisontally) in IE 8 and above and every other browser. However only IE 5.5, 6 and 7 it displays diagonally. Can any body help?
.top-nav ul {
margin: 0;
list-style: none;
line-height: normal;
}
.top-nav li {
margin-left: 220px;
}
.top-nav a {
display: block;
float: left;
height: 38px;
margin-right: 1px;
padding: 4px 30px 0 30px;
text-decoration: none;
font-size: 34px;
font-weight: bold;
font-family: 'Exo', sans-serif;
color: #FFF;
}
.top-nav a:hover {
background: #272727;
color: #18942f;
}
.top-nav .current_page_item a {
background: #252525;
color: #FFF;
}
HTML
<div class="top-nav">
<ul>
<li>Home</li>
<li>About Me</li>
<li>Skills</li>
<li class="current_page_item"> Contact</li>
</ul>
</div>
Instead of floating each link, why not use display:inline on your li, display: inline works on IE 5.5
Also you need to remove "display: Block" as this is what is causing the links to move down.
.top-nav ul {
margin: 0;
list-style: none;
line-height: normal;
}
.top-nav li {
display: inline;
}
.top-nav a {
height: 38px;
margin-right: 1px;
padding: 4px 30px 0 30px;
text-decoration: none;
font-size: 34px;
font-weight: bold;
font-family: 'Exo', sans-serif;
color: #aaa;
}
http://jsfiddle.net/YJjya/
If you need to have your items be blocks, then use inline-block. Workaround to make it work on older version or IE can be found here: Work Around Inline Block
Also here is a handy piece of code to place immediately after your first head tag. It will only display is the user is using IE 7 or later and will tell them get their sh*t together and download a new browser. It is really not worth the time trying to make your site work on every IE version as you'll end up pulling your hair out to please a few people who obviously aren't internet savvy to begin with. As Mario said only 6% of the world still use IE6... But if you take a closer look at countries such as the US or UK that number is below 1%
After Head
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. Upgrade your browser today or install Google Chrome Frame to better experience this site.</p>
<![endif]-->
CSS
.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
I've seen this problem many times. You want to float the LI and not the A that's inside the LI.
All you need to do is remove [float:left] from [.top-nav a] class and add it to the [.top-nav li] class. Your CSS would be:
.top-nav ul {
margin: 0;
list-style: none;
line-height: normal;
}
.top-nav li {
margin-left: 220px;
float: left;
}
.top-nav a {
display: block;
height: 38px;
margin-right: 1px;
padding: 4px 30px 0 30px;
text-decoration: none;
font-size: 34px;
font-weight: bold;
font-family: 'Exo', sans-serif;
color: #FFF;
}
.top-nav a:hover {
background: #272727;
color: #18942f;
}
.top-nav .current_page_item a {
background: #252525;
color: #FFF;
}