<il> is pushed down when border appears - html

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/

Related

I cannot get my CSS code to show the changes I am making in the browser

I cannot get my CSS code to show the changes I am making in the browser when I refresh it. Some of the CSS code is working correctly and some of the CSS code I provided below is not working correctly. I am trying to change the CSS on my main header navigation bar and none of the changes are working. For example, if I change the background color to red nothing happens.
nav {
width: 100%;
height: 100px;
background-color: #0b98de;
}
nav a {
display: block;
font-family: sans-serif;
font-size: 9px;
color: white;
background-color: #17b0cf;
border: 1px solid #000;
padding-top: 20px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
text-decoration: none;
}
nav a:hover {
background-color:#e3e7ee
}
#logo {
font-family: 'Hind', sans-serif;
font-size: 30px;
letter-spacing: -2px;
text-shadow: 1px 1px 2px #c4c4c4;
padding-left: 20px;
padding-right: 40px;
margin-right: 10px;
margin-top: -20px;
}
<body>
<nav>
<a id="logo" href="#">Logo</a>
How it works
Sign Up
Login
</nav>
</body>
You have a syntax error in your
nav a:hover{
background-color:#e3e7ee
}
You ought to end things with a semi-colon in CSS. change the following to
nav a:hover{
background-color:#e3e7ee;
}
If it still doesn't work, try using a different browser and see how it behaves. If it works in a different browser, you will have to clear the cache of your testing browser.
Use below code structure fo HTML:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
nav {
width: 100%;
height: 100px;
background-color: #0b98de;
}
nav a {
display: block;
font-family: sans-serif;
font-size: 9px;
color: white;
background-color: #17b0cf;
border: 1px solid #000;
padding-top: 20px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
text-decoration: none;
}
nav a:hover {}
#logo {
font-family: 'Hind', sans-serif;
font-size: 30px;
letter-spacing: -2px;
text-shadow: 1px 1px 2px #c4c4c4;
padding-left: 20px;
padding-right: 40px;
margin-right: 10px;
margin-top: -20px;
}
</style>
</head>
<body>
<nav>
<a id="logo" href="#">Logo</a>
How it works
Sign Up
Login
</nav>
</body>
</html>
Make sure of your HTML syntax and create a style.css file and insert your css code there. It'll be a good practice.
Maintain a separate style.css file or use <style> tag inside your html file.
Always follow correct patters while creating navbar first ul and then li.
nav {
width: 100%;
height: 100px;
background-color: #0b98de;
}
nav a {
display: block;
font-family: sans-serif;
font-size: 15px;
color: white;
background-color: #17b0cf;
border: 1px solid #000;
padding-top: 20px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
text-decoration: none;
}
nav a:hover {
background-color:grey;
}
#logo {
font-family: 'Hind', sans-serif;
font-size: 30px;
letter-spacing: -2px;
text-shadow: 1px 1px 2px #c4c4c4;
padding-left: 20px;
padding-right: 40px;
margin-right: 10px;
margin-top: -20px;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<nav>
<a id="logo" href="#">Logo</a>
How it works
Sign Up
Login
</nav>
</body>
</html>

How to make sure that an element is not covered by another (CSS)?

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
}

Imaging floating when resizing browser window

been trying to get my logo which is a .gif to float on my header image and stick there even when resizing page
almost had it, then i resized my window. Am i wasting my time because i actually give up been trying for hours with no luck.
<head>
<meta charset="utf-8" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>B.13 DJ Hire</title>
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css">
<link rel="stylesheet" type="text/css" media="screen" href="bubba.css"/>
</head>
<body>
<div id="box">
<div id="header">
<a href="index.html" class="banner">
<img src="images/banner.jpg">
</a>
<a href="index.html" class="logo">
<img src="images/logo.gif">
</a>
</div>
<h1>B13. DJ Equipment Hire</h1>
<nav>
<ul id="mainnav">
<li class="home">Home</li>
<li class="mixers">Mixers</li>
<li class="turntables">Turntables</li>
<li class="mp3">MP3 Media Players</li>
<li class="headphones">Headphones</li>
<li class="contact">Contact Us</li>
</ul>
</nav>
<h2> Our Equipment Range<h2>
<br><br>
<p> we are a equipment hire company..</p>
<br>
<p id="footer">45 Marsh Grass Ln. • Marble, MN 55764 • (218) 555-5253</p>
</div>
</body>
Here is my CSS code
body {
padding: 0;
margin: 0;
font-family: tahoma, arial, helvetica, sans-serif;
}
h1, h2 {
text-align: center;
font-family: georgia, "times new roman", times, serif;
}
h1 {
margin: 0;
font-size: 2em;
color: white;
background: #585858;
line-height: 1.90em;
width: auto;
text-align: centre;
background-position: center;
text-shadow: 2px 2px 4px #000000;
border-radius: 0.30em;
}
h2 {
font-size: 1.5em;
}
#box {
border-style: none;
width: 70em;
padding: 0em;
margin-left: auto;
margin-right: auto;
background: #C2C2C2;
}
#header{
}
.banner img{
position: relative;
float: left;
height:206px;
width:1120px;
z-index: 1;
display:block;
}
.logo img {
position: absolute;
float:right;
margin-top: 0px;
margin-left: 0px;
z-index: 2;
height:290px;
width:712px;
bottom:335px;
right:50px;
}
#footer {
background: #A6A6A6;
text-align: right;
padding: 0.25em;
margin: 0;
}
.callout {
font-weight: bold;
}
#mainnav {
text-align: center;
background: #A6A6A6;
padding: 0.75em;
margin: 0;
position: relative;
border-radius: 0.5em;
}
#mainnav li {
display: inline-block;
list-style-type: none;
padding: 0;
background: A6A6A6;
color: #A6A6A6;
}
#mainnav a:link{
color:black;
background-color: transparent;
text-decoration: none;
}
#mainnav a:hover{
color: blue;
background-color:#C2C2C2;
text-decoration: underline;
text-shadow: 8px 12px 12px blue;
}
#mainnav a:visited {
color: black;
}
#mainnav li.home a{
color: black;
padding: 10px 20px;
border-top: 2px solid #A6A6A6;
border-bottom: 2px solid #A6A6A6;
}
#mainnav li.home a:hover {
color: black;
background-color:#C2C2C2;
padding: 10px 20px;
}
#mainnav li.mixers a{
color: black;
padding: 10px 20px;
border-top: 2px solid #A6A6A6;
border-bottom: 2px solid #A6A6A6;
}
#mainnav li.mixers a:hover {
color: black;
background-color:#C2C2C2;
padding: 10px 20px;
}
#mainnav li.turntables a{
color: black;
padding: 10px 20px;
border-top: 2px solid #A6A6A6;
border-bottom: 2px solid #A6A6A6;
}
#mainnav li.turntables a:hover {
color: black;
background-color:#C2C2C2 ;
padding: 10px 20px;
}
#mainnav li.mp3 a{
color: black;
padding: 10px 20px;
border-top: 2px solid #A6A6A6;
border-bottom: 2px solid #A6A6A6;
}
#mainnav li.mp3 a:hover {
color: black;
background-color:#C2C2C2 ;
padding: 10px 20px;
}
#mainnav li.headphones a{
color:#black;
padding: 10px 20px;
border-top: 2px solid #A6A6A6;
border-bottom: 2px solid #A6A6A6;
}
#mainnav li.headphones a:hover {
color: black;
background-color:#C2C2C2 ;
padding: 10px 20px;
}
#mainnav li.contact a{
color: black;
padding: 10px 20px;
border-top: 2px solid #A6A6A6;
border-bottom: 2px solid #A6A6A6;
}
#mainnav li.contact a:hover {
color: black;
background-color:#C2C2C2 ;
padding: 10px 20px;
}
#slideshow {
position:absolute;
text-align: center;
}
#pics {
margin-left: auto;
margin-right: auto;
width: 50%;
float: right;
text-align: center;
}
#content {
position: relative;
}
#content img {
position: absolute;
top: 0px;
right: 0px;
}
img {
max-width: 120%;
display: block;
background-size: 100%;
}
img {
max-width: 100%;
display: block;
}
#slideshow {
wd
You say you want to float your image, and you have float stated for the logo style, but you also have position:absolute stated as well. You need to use one or the other to achieve your goal my friend.
Also you are missing a few closing DIVs in your code. Can you share a URL to your issue? that may be easier than seeing the incomplete code.
Your CSS styling you have (position:absolute) is causing the problem. Along with the fact that you have it positioned exactly in a fixed spot on the page with your position properties like "top" "bottom" "left" and "right". You do not want this when you have a logo in a spot on the page that doesn't move around (like in your header). To fix this, you want to remove what you had under the CSS for ".logo img" and put the following:
.logo img {
height:200px;
width:200px;
}
Here is an example of it: https://jsfiddle.net/Lp7fwm7a/. When you resize the window, the logo stays in the correct place like how you want it.
You might also want to look into the float property if you have two div's in your header. Here's a good article on it: https://css-tricks.com/all-about-floats/.
Using the position: absolute; attribute means that image is being positioned according to the browser window (because you don't have any other absolute positioned elements on the page).
Your top and bottom values are counting from the edge of the browser window, not from the edge of your image.
You can center it like by replacing .logo img with:
position: absolute;
left: 0;
right: 0;
margin: 0 auto 0;
height: 290px;
width: 712px;
z-index: 2;
Your logo is a lot taller than your header image. I noticed the top of the logo in your code was cut off, not sure if you meant to do that or not but if you edit that first 0 in margin, you can adjust the top margin. -100px or so should put it back where you had it.
Also just a comment about what the other answers say, you're not missing a closing div tag - there's just really inconsistent indentation making your HTML and CSS really difficult to read. You are missing a / in the closing h2 tag and you spelled 'center' as 'centre' in your h1, h2 CSS.
Here's a link to all the fixes (including indentation): http://codepen.io/anon/pen/KpXKVG

Entire Box As Link

Essentially, I'm trying to get the entire box to be a link and when you hover over it, the entire box also changes colors. I know this is easily done if I write separate code for each "li" tag but that would be timely. Is there something I'm doing wrong?
Here is my code:
.genrelist li {
float: left;
text-transform: uppercase;
font-weight: bolder;
list-style-type: none;
text-align: center;
width: 150px;
height: 150px;
margin: 50px;
background: #fff;
margin: 15px;
border-style: solid;
border-width: 5px;
border-color: #000;
}
.genrelist li:hover {
float: left;
list-style-type: none;
text-align: center;
width: 150px;
height: 150px;
background: #000;
margin: 15px;
border-style: solid;
border-width: 5px;
border-color: #000;
}
<ul>
<li><span>Fiction Short Stories</span></li>
<li><span>Non-Fiction Short Stories</span></li>
<li><span>Comic Strips</span></li>
<li><span>Poetry</span></li>
<li><span>Biblical</span></li>
<li><span>Inspirational</span></li>
<li><span>Children's Corner</span></li>
<li><span>Comedy</span></li>
<li><span>Drama</span></li>
<li><span>Chiller</span></li>
<li><span>Romance</span></li>
<li><span>Science Fiction</span></li>
<li><span>Memoirs</span></li>
<li><span>In The Feathers</span></li>
</ul>
They all work when you hover over the word, but only the first item works when you hover over any part of it's box. Any help is appreciated!
a needs to be wrapped into li to valid your HTML structure, then displayed as block.
A pseudo element can be used to help vertical-align your span.
display:flex; could be used too to center a content.
Demo using pseudo-element
li {
float: left;
text-transform: uppercase;
font-weight: bolder;
list-style-type: none;
text-align: center;
width: 150px;
height: 150px;
margin: 50px;
background: #fff;
margin: 15px;
border-style: solid;
border-width: 5px;
border-color: #000;
}
li:hover {
list-style-type: none;
text-align: center;
width: 150px;
height: 150px;
background: #000;
margin: 15px;
border-style: solid;
border-width: 5px;
border-color: #000;
}
li a {
display:block ;
height:100%;
width:100%;}
a:before {
content:'';
display:inline-block;
vertical-align:middle;
height:100%;
}
a span {
display:inline-block;
max-width:99%;
}
<ul>
<li><span>Fiction Short Stories</span></li>
<li><span>Non-Fiction Short Stories</span></li>
<li><span>Comic Strips</span></li>
<li><span>Poetry</span></li>
<li><span>Biblical</span></li>
<li><span>Inspirational</span></li>
<li><span>Children's Corner</span></li>
<li><span>Comedy</span></li>
<li><span>Drama</span></li>
<li><span>Chiller</span></li>
<li><span>Romance</span></li>
<li><span>Science Fiction</span></li>
<li><span>Memoirs</span></li>
<li><span>In The Feathers</span></li>
</ul>

a href not clickable in the right area

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>