I'm brand-new to html and decided to make a start page for Firefox. The problem I have is that when I mouseover above and below my links' text my mouse's cursor changes to the hotlink pointy hand, as it would normally when you mouseover a link. But it does this within a 20+ pixel radius above and below that link in an invisible field it would seem. It doesn't do this to the left and right of the link text. I want to fix it so that it only changes when my mouse is directly over the text, as all website links do. I'm probably missing some code. Here's my full html code. Any help is greatly appreciated.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="author" content="name">
<title>~name#inferno</title>
<link href="favicon.ico" rel="icon">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style type="text/css">
body {
background: url(x.jpg) no-repeat;
background-size: cover;
background-color: #0A0F14;
-moz-appearance: none;
}
td {
transition: all 2s ease 0.9s;
color: inherit;
-moz-appearance: none;
}
a:link {
color: inherit;
text-decoration: none;
}
a:visited {
color: inherit;
text-decoration: none;
}
a:hover {
color: inherit;
text-decoration: none;
}
a:active {
color: inherit;
text-decoration: none;
}
a {
font-family: "Segoe UI";
font-size: 12px;
font-weight: bold;
outline: none;
float: right;
margin-right: 15px;
margin-top: -3px;
}
td:hover{
background: rgba(16, 21, 27, 0);
}
.box {
background: #10151B;
border-radius: 0px 0px 15px 10px;
line-height: 50px;
width: 140px;
height: 592px;
position: fixed;
top: 1px;
bottom: 0px;
left: 0px;
}
.icon {
color: #D12248;
float: left;
margin-top: 10px;
text-indent: 5px;
}
.icon2 {
color: #D19011;
float: left;
margin-top: 10px;
text-indent: 5px;
}
.icon3 {
color: #57A3D1;
float: left;
margin-top: 10px;
text-indent: 5px;
}
.icon4 {
color: #AAD130;
float: left;
margin-top: 10px;
text-indent: 5px;
}
.icon5 {
color: #4ED1B3;
float: left;
margin-top: 10px;
text-indent: 5px;
}
.icon6 {
color: #98D1CE;
float: left;
margin-top: 10px;
text-indent: 5px;
}
Seems like your issue was the 'float:right' in the CSS.
That made the a element take up all the space of the box.
Try setting a line height so that the 'a' element will be limited in height:
a {
font-family: "Segoe UI";
font-size: 12px;
font-weight: bold;
outline: none;
float: right;
margin-right: 15px;
margin-top: 10px; //updated the margin top
line-height: 15px; //added line height
}
The line-height change makes it so the a appears in the top of the row.
Updating margin-top fixes that.
https://jsfiddle.net/aw09geqh/1/
Try to remove this rule:
td:hover{
background: rgba(16, 21, 27, 0);
}
It's hard to say without seeing the HTML, but from what you write, that might be it.
Related
I am new at web developing.
Trying to make site logo look good.
Have two elements, one of them is covered by another so user can't click on first of them.
Help me please making them one above another.
How can I do this stuff using only CSS?
Codepen: https://codepen.io/h071/pen/YOeXaw
This is HTML part:
<header>
<link rel="stylesheet" type="text/css" href="/a/www/css/style_header.css">
<nav class="container-fluid">
<a class="logo" href="/a/www/index.php">
<span>Sitename</span>
</a>
<p id="reg-auth-title">Login|Registration</p>
And this is CSS:
header {
width: 100%;
height: 5em;
position: relative;
}
nav {
width: 100%;
}
.logo {
display: block;
float: left;
position: absolute;
margin-top: 0.4em;
margin-left: 1em;
}
.logo span {
font-size: 5em;
color: black;
display: inline-block;
/*line-height: 1em;*/
}
#reg-auth-title {
/* width: 20%; */
padding: 0;
margin: 0;
float: left;
}
#reg-auth-title a.top-auth {
font: bold 15px sans-serif;
text-decoration: none;
padding-left: 8px;
padding-right: 8px;
padding-top: 4px;
padding-bottom: 4px;
border: 1px solid red;
border-radius: 5px; /*other browsers*/
-webkit-border-radius: 5px; /*safari*/
-moz-border-radius: 5px;
cursor: pointer;
color: black;
}
#reg-auth-title a.top-auth:hover {
text-decoration: none;
}
#reg-auth-title a {
font: 15px sans-serif;
font-weight: bold;
text-decoration: none;
color: #58ACFA;
margin-left: 1em;
border-bottom-style: dashed;
border-bottom-color: #58ACFA;
border-bottom-width: 1px;
}
You need to put your link above logo using z-index.
#reg-auth-title {
z-index: 10;
position: relative; // z-index works only with non-static positioned elements
}
I'm new to HTML and CSSand I have been trying to figure out what I've been doing wrong all night.
I would like to set the background color of div with id="transparentBox" to be a different color (eventually a and off-white box with some currently unknown opacity setting) However, it seems as thought the styling I'm applying via CSS isn't doing the trick. Any advice here would be greatly appreciated.
I've set a background on my HTML, now how do I set the background of one id to be a different color?
html
{
text-align: center;
background: linear-gradient(to top right, #33ccff 0%, #0066ff 100%) fixed;
}
body
{
text-align: center;
}
p
{
text-align: left;
}
.off
{
color: #F0FFFF;
}
#header
{
height:100px;
width:960px;
}
#header h1
{
position: relative;
text-align: left;
color: #000000;
font-size: 45px;
left: 5px;
top: 20px;
}
body
{
margin: 0px;
padding: 0px;
text-align: left;
font: 12px Arial, Helvetica, sans-serif;
font-size: 14px;
}
#navigationBar
{
height: 40px;
background-color: #F0FFFF;
border-color: #000000;
}
ul
{
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: #333;
}
li
{
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding-top: 13px;
padding-bottom: 13px;
padding-left: 15px;
padding-right: 15px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover
{
background-color: #111;
}
.active
{
background-color: #4CAF50;
}
#navigationMenu
{
margin-top: 0px;
height: auto;
background-color: #F0FFFF;
border-color: #000000;
border-radius: 25px;
}
#transparentBox
{
position: relative;
display: block;
margin: 10px;
padding: 10px;
width: 500px;
height: 400px;
background-color: #FFFFFF;
border-color: #000000;
border-radius: 10px;
}
<!DOCTYPE html>
<html xmlns="http://www.calebwolff.us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="refresh" content="30" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Caleb Wolff's Personal Website</title>
</head>
<body>
<div id="header">
<h1>Caleb<span class="off">Wolff</span></h1>
</div>
<div id="navigationBar">
<ul>
<li>Home</li>
<li>Facebook</li>
</ul>
</div>
<div id="transparnetBox">
<h1>HELLLOOO</h1>
</div>
</body>
</html>
To change the background there are two methods
Change color normally without shades as
html
{
text-align: center;
background: linear-gradient(to top right, #33ccff 70%, #0066ff 100%) fixed;
}
Change color with gradient shades
you should change the colors in html style with color codes of 6 digits
html
{
text-align: center;
background: linear-gradient(to top right, #33ccff 70%, #0066ff 100%) fixed;
}
There are list of color codes available and opacity of those colors are set in percentage.You can try either of these two methods.
The id name in css and html are different(typo), in css its '#transparentBox' and in html it is 'transparnetBox'.
Please make sure the id name every where you use are the same. You can always use browser developer tools to check and inspect styling on DOM elements
<!DOCTYPE html>
<html xmlns="http://www.calebwolff.us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<meta http-equiv="refresh" content="30"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<title>Caleb Wolff's Personal Website</title>
<style>
html {
text-align: center;
background: linear-gradient(to top right, #33ccff 0%, #0066ff 100%) fixed;
}
body {
text-align: center;
}
p {
text-align: left;
}
.off {
color: #F0FFFF;
}
#header {
height: 100px;
width: 960px;
}
#header h1 {
position: relative;
text-align: left;
color: #000000;
font-size: 45px;
left: 5px;
top: 20px;
}
body {
margin: 0px;
padding: 0px;
text-align: left;
font: 12px Arial, Helvetica, sans-serif;
font-size: 14px;
}
#navigationBar {
height: 40px;
background-color: #F0FFFF;
border-color: #000000;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding-top: 13px;
padding-bottom: 13px;
padding-left: 15px;
padding-right: 15px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
#navigationMenu {
margin-top: 0px;
height: auto;
background-color: #F0FFFF;
border-color: #000000;
border-radius: 25px;
}
#transparnetBox {
position: relative;
display: block;
margin: 10px;
padding: 10px;
width: 500px;
height: 400px;
background-color: #FFFFFF;
border-color: #000000;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="header">
<h1>Caleb<span class="off">Wolff</span></h1>
</div>
<div id="navigationBar">
<ul>
<li>Home</li>
<li>Facebook</li>
</ul>
</div>
<div id="transparnetBox">
<h1>HELLLOOO</h1>
</div>
</body>
</html>
Adding color styling to the <html> tag rather than the <body> tag is a bit unusual. Why not change that to the <body> tag?
On another note, try this:
#transparentBox
{
position: relative;
display: block;
margin: 10px;
padding: 10px;
width: 500px;
height: 400px;
background-color: #FFFFFF !important;
border-color: #000000;
border-radius: 10px;
}
Check the typo between <div id="transparnetBox"> and # transparentBox.
You had to check your block in the browser and see that you do not have any styles for this component, and not just "background colors."
It is hard to learn "float" "overflow" "clear" and some other properties so please help me find good online websites to learn these properties ..
I opened some websites to make designs like them I found http://wix.com I admired its nav bar so i tried to make like it but i had a problem when mouse is over the il it is pushed down to show the top border how can I fix that
thanks and I am sorry for my weak English
body {
background-color: lightblue;
}
ul {
position: fixed;
list-style-type: none;
overflow: hidden;
top: 0px;
right: 0px;
width: 100%;
margin: 0px;
padding: 0px;
padding-top: 8px;
padding-bottom: 8px;
display: block;
background-color: #666666;
transition:background-color, 1s;
}
ul:hover {
background-color: #333;
}
il {
transition:border-top,1s;
float: left;
padding-right: 10px;
border-right: 1px solid white;
}
il:hover {
border-top:5px solid lightblue;
}
#navl {
font-family: Trebuchet MS’, Helvetica, sans-serif;
letter-spacing: 3px;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
pre{
font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
letter-spacing: 2px;
font-size: 30px;
text-align: center;
color: white;
margin-top: 150px;
}
#plans:link, #plans:visited {
background-color: white;
color: black;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: block;
border: 1px solid white;
border-radius: 30px;
margin: auto;
width: 110px;
padding-top: 20px;
padding-bottom: 20px;
font-size:20px;
font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
}
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<il><a id="navl" href="index.html">Home</a></il>
<il><a id="navl" href="Plans.html">Plans</a></il>
<il><a id="navl" href="About.html">About</a></il>
<il><a id="navl" href="Contact.html">Contact Us</a></il>
</ul>
<pre>test</pre>
<a id="plans" href="plans.html">Plans</a>
</body>
</html>
The reason this happens is because the border adds height to the element. To correct it, you can either remove height from the main element or shift it up:
li:hover {
margin-top: -5px; //shifts the element up 5px
}
or you can have an invisible border as Teuta mentions that gets "covered up" by the new border.
At first, replace those il with li, and add this style to your li:
li {
border-top: 5px solid transparent;
}
And in ul, instead of padding-top:8px add padding-top:3px.
Here is the link with a little work around I did. I removed the padding top in ul. Changed the il to li. Because actually it is 'li' not 'il'. And I added a border top in li.
Here is the css code I changed.
ul:hover {
background-color: #666666;
}
li {
transition:border-top,1s;
float: left;
padding-right: 10px;
border-right: 1px solid white;
border-top:5px solid #666666;
}
li:hover {
border-top:5px solid lightblue;
}
https://jsfiddle.net/7x7dy3jt/
I have created a website using node js and html. When i look at the website on my phone, I have to zoom in in order to see it. Is there any code I can put in my css where I can fix the website content to adjust to the size of the window/browser?
/*Styles the Webpage*/
h1 {
color:black;
font-family: Georgia;
line-height: 1.4;
font-weight: normal;
font-stretch: normal;
font-variant: small-caps;
font-size: 36px;
text-align: center;
padding: 35px;
}
label {
position: relative;
float: left;
text-align: left;
font-size: 18px;
color: black;
}
input[type=submit] {
width: 5em; height: 1.5em;
align: center;
}
input[type=number] {
width: 8em; height: 1.5em;
}
div {
border: 1px solid black;
box-sizing: border-box;
padding: 25px;
}
body {
background-color:#c7c9c7 ;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 60px;
text-decoration: none;
}
a:hover:not(.active) {
background-color: #8a8d8f;
}
.active {
background-color:#002B7F ;
}
img {
position: fixed;
width: 190px;
height:50px;
left: 40px;
top: 40px;
}
You need to make your website responsive. This you can do it with CSS media queries and add to head:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Put this code into the <head> tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
It will cause every device to show the real pixel sizes of your elements.
CSS:
body {
background-image: url("../images/ITWorld.jpg");
background-repeat: no-repeat;
background-size: 150%;
font-family: sans-serif;
}
p {
font-size: 22px;
}
#navbar {
display: inline;
text-align: center;
font-size: 25px;
}
a {
text-decoration: none;
font-family: sans-serif;
color: black;
}
.listitem {
padding: 7px;
display: inline;
border: 3px solid black;
}
a:hover {
color: white;
}
.reference {
font-size: 22px;
padding-top: 50px;
padding-bottom: 50px;
}
#overviewpara {
width: 800px;
}
.referenceli {
padding: 5px;
}
HTML:
<ul>
<li class="referenceli"><a class="reference" href="http://jobsearchtech.about.com/od/careersintechnology/p/ITDefinition.htm">http://jobsearchtech.about.com/od/careersintechnology/p/ITDefinition.htm</a></li>
<li class="referenceli"><a class="reference" href="http://www.guardian.co.uk/higher-education-network/2011/sep/05/top-100-universities-world-computer-science-and-information-systems-2011">http://www.guardian.co.uk/higher-education-network/2011/sep/05/top-100-universities-world-computer-science-and-information-systems-2011</a></li>
</ul>
My problem is that when i hover over my hyperlinks on my references page they do not react in the correct areas. For example I'll be link 5px above the link and it will not higligh or i will be right over the link, but it will not work. Sorry for messy html.
You should make the padding on your a tag 5px, and not your list item.
.referenceli {
padding: 5px;
}
should be
.reference {
padding: 5px;
text-decoration: none;
font-family: sans-serif;
color: black;
}
Also remove the 50px padding from the a tags: You will be better of applying that size(50px) to the margin of the list items:
.reference {
font-size: 22px;
padding-top: 50px;
padding-bottom: 50px;
}
should be
.reference {
font-size: 22px;
padding: 5px; /*So you will have a hover effect 5px below and above the link*/
}
.referenceli {
margin: 50px 0px;
}
Changed paddings top and bottom to 5px:
.reference {
font-size: 22px;
padding-top: 5px;
padding-bottom: 5px;
}
Fiddle:
http://jsfiddle.net/uNpbk/
Changed paddings top and bottom to 5px:
.reference
{
font-size: 22px;
padding-top: 5px;
padding-bottom: 5px;
}
Give this a try. I think that you need to style div and not the li tags. I added some borders to the reference and referenceli. Add the borders to your code to see your styling impact.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<style>
body {
background-image: url("../images/ITWorld.jpg");
background-repeat: no-repeat;
background-size: 150%;
font-family: sans-serif;
}
p {
font-size: 22px;
}
#navbar {
display: inline;
text-align: center;
font-size: 25px;
}
a {
text-decoration: none;
font-family: sans-serif;
color: black;
}
.listitem {
padding: 7px;
display: inline;
border: 3px solid black;
}
a:hover {
color: red;
font-weight:bold;
}
.reference {
font-size: 22px;
padding:10px 0 10px 0;
border:green solid 1px;
}
#overviewpara {
width: 800px;
}
div.referenceli{
padding:20px 0 0 0;
border:red 1px solid;
}
</style>
<ul>
<div class="referenceli"><!--USE DIV TO FOCUS CSS -->
<li><a class="reference" href="http://jobsearchtech.about.com/od/careersintechnology/p/ITDefinition.htm">http://jobsearchtech.about.com/od/careersintechnology/p/ITDefinition.htm
</a></li><!-- END LI -->
</div><!-- END REFERENCELI -->
<div class="referenceli">
<li><a class="reference" href="http://www.guardian.co.uk/higher-education-network/2011/sep/05/top-100-universities-world-computer-science-and-information-systems-2011">http://www.guardian.co.uk/higher-education-network/2011/sep/05/top-100-universities-world-computer-science-and-information-systems-2011
</a></li><!-- END LI -->
</div><!-- END REFERENCELI -->
</body>
</html>