I can't seem to figure out why but there seems to be a gap around the third li element. It shows up in Chrome but when viewing in FireFox, all is good. Anybody know what's going on here?
Link to view gap...
html,
body,
ul,
li,
a {
margin: 0;
padding: 0;
}
html,
body {
background-image: url('../images/bg.png');
background-repeat: repeat;
height: 100%;
width: 100%;
}
ul {
font-size: 0;
height: 50%;
margin-top: 12.5%;
padding: 0;
position: relative;
width: 100%;
}
ul li {
background-color: #FFFFFF;
/*WHITE*/
display: inline-block;
font-size: 14px;
height: 100%;
opacity: .50;
width: 14%;
}
ul li:hover {
opacity: 1;
}
ul li a {
border-top: 1px solid #000;
bottom: 0;
color: #000;
/*BLACK*/
padding: 10px 0;
position: absolute;
text-align: center;
text-decoration: none;
width: inherit;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="keywords" content="" />
<meta http-equiv="description" content="" />
<link rel="stylesheet" href="styles/main.css" type="text/css" />
</head>
<body>
<ul>
<li>Assignment 1
</li>
<li>Assignment 2
</li>
<li>Assignment 3
</li>
<li>Assignment 4
</li>
<li>Assignment 5
</li>
<li>Assignment 6
</li>
<li>Assignment 7
</li>
</ul>
</body>
</html>
Related
I just started developing my first web page after learning HTML and CSS and I don't have much understanding yet.
The issue is, as mentioned, problem with centering. I have specified CSS property text-align: cetner; but that has no result.
Another thing I couldn't achieve is to expand link clickable area to whole button. I mean, wherever you click on a button, the browser should go to the URL from the link, I tried specifying width: 100%; with no success.
Below is my code:
li.hMenu {
display: inline;
background: red;
width: 33.33%; /*for the older browsers fallback */
width: calc(100% / 3);
float: left;
}
li.hMenu:hover{
background-color: darkred;
}
li.hMenu:active{
position: relative;
left: 1px;
top: 1px;
background-color: darkred;
}
#menu {
width: 100%;
float: left;
margin: 0;
padding: 0;
list-style-type: none;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="CommonLayout.css" />
<script src="ProjectPage.js"></script>
</head>
<body>
<ul id="menu">
<li style="z-index: 10" class="hMenu">
Main Page
</li>
<li style="z-index: 9" class="hMenu">
About
</li>
<li style="z-index: 8" class="hMenu">
Calculator
</li>
</ul>
<p>This is <em>Main Page</em> page.</p>
</body>
</html>
Just change your anchor element's display property to block:
li a {
display: block;
This way it will take up 100% of it's containing boxes width and your text-align property will take affect.
li.hMenu {
display: inline;
background: red;
width: 33.33%; /*for the older browsers fallback */
width: calc(100% / 3);
float: left;
}
li.hMenu:hover{
background-color: darkred;
}
li.hMenu:active{
position: relative;
left: 1px;
top: 1px;
background-color: darkred;
}
#menu {
width: 100%;
float: left;
margin: 0;
padding: 0;
list-style-type: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="CommonLayout.css" />
<script src="ProjectPage.js"></script>
</head>
<body>
<ul id="menu">
<li style="z-index: 10" class="hMenu">
Main Page
</li>
<li style="z-index: 9" class="hMenu">
About
</li>
<li style="z-index: 8" class="hMenu">
Calculator
</li>
</ul>
<p>This is <em>Main Page</em> page.</p>
</body>
</html>
You have to change this code block:
li.hMenu {
text-align: center;
display: inline;
background: red;
width: 33.33%;
width: calc(100% / 3);
float: left; }
I hope you guys can help me with the next thing. I've made the top of a website. When you hover the navigation, a dropdown menu will show. unfortunately this dropdown is positioned under a hr. How can i fix it to get this positioned on top of an hr? The hr is required element, so I can't remove it. Here is the example of the problem
Html code:
#import url('https://fonts.googleapis.com/css?family=Lato:300i,400,400i,700,900');
html {
box-sizing: border-box;
}
body {
font: 15px 'Lato', sans-serif;
margin: 0;
padding: 0;
}
.container {
margin: auto;
max-width: 1024px;
width: 100%;
overflow: hidden;
}
hr {
border-color: #b9b9b9;
position: absolute;
width: 100%;
margin-top: -55.5%;
}
header {
width: 80%;
margin-left: 10%;
}
header img {
width: 15%;
height: auto;
}
img {
width: 100%;
height: auto;
margin: -1% 0 0.5% 0;
}
h1 {
display: none;
}
nav {
float: right;
padding: 2% 0 5% 0;
}
li {
display: inline-block;
position: relative;
padding: 10px 0px 0px 0px;
margin-left: 10px;
}
header a {
text-decoration: none;
text-transform: uppercase;
font-size: 12px;
color: black;
font-weight: 400;
}
ul ul {
position: absolute;
left: 0;
top: 100%;
display: none;
padding: 1% 0;
}
li:hover ul {
display: block;
background-color: gainsboro;
}
ul ul a {
color: white;
}
.selected {
border-bottom: 2px solid #49997b;
padding-bottom: 0.5%;
}
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vakantie op de Dominicaanse Republiek</title>
<link rel="stylesheet" href="CSS/vakantie.css" type="text/css">
<link rel="stylesheet" href="CSS/normalize.css" type="text/css">
</head>
<body>
<div class="container">
<header>
<h1>Vakantie op de Dominicaanse republiek</h1>
<nav>
<ul>
<li class="selected">Home</li>
<li>Bezienswaardigheden</li>
<li>Over de Dominicaanse
<ul>
<li>Reisdocumenten</li>
<li>Inentingen</li>
<li>Feestdagen</li>
<li>Geld en koers</li>
</ul>
</li>
<li>Recreatie</li>
<li>Contact</li>
</ul>
</nav>
</header>
<img src="Afbeeldingen/Dominicaanse_header.jpg" alt="dominicaanse">
<hr>
</div>
</body>
</html>
You can set the menu's z-index higher than the hr and it should appear on top instead of behind it. I can't see the image to tell if this works or not but it should.
hr {
border-color: #b9b9b9;
position: absolute;
width: 100%;
margin-top: -55.5%;
z-index: 1;
}
.container {
margin: auto;
max-width: 1024px;
width: 100%;
overflow: hidden;
z-index: 2;
}
function ServicesMenu() {
document.getElementsByClassName("services-cont")[0].classList.toggle("showS");
}
#charset "UTF-8";
*{padding:0;margin:0;}
body{min-width:300px; margin: 0px; padding: 0px; background:#f8f8f8 }
.wrapper {
max-width: 980px;
height:2000px;
margin: 0px auto;
position: relative;
background-color: #fff;
}
header{
width:980px;
height:105px;
background: #e60000;
}
ul.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
top:63px;
right:60px;
width: 560px;
display: block;
position: absolute;
}
ul.navbar li {
display:inline-block;
Margin-left:15px;
background: black;
}
ul.navbar li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 5px 15px;
text-decoration: none;
font-size: 17px;
}
ul.navbar li a:hover {background-color: #660000;}
.services-cont{display: none;}
.services-cont.showS {
list-style-type: none;
display: block;
background-color: #707070 ;
}
.services-cont.showS li {
float: none;
display: inline;
height:0;
border:none;
}
.services-cont.showS li a {
display: block;
text-align: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="menustyle.css">
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1" />
<script src="MenuFunc.js"></script>
<Title>Menu</title>
</head>
<body>
<div class="wrapper">
<header>
</header>
<ul class="navbar">
<li>Home</li>
<li>Services
<ul class="services-cont">
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
However, the parent <li> appears on top with the nested list below and the rest <li> of the parent list are below aligned with the end of the child list.
How do I get the parent list items Home, Services and Contact horizontally aligned in a straight line?
Explanation
The position: absolute and overflow: hidden properties were interfering and not allowing the dropdown list to display properly. I have commented them in the code so you can see.
You should refrain from using absolute positioning where you can achieve the same effect by simply nesting the tags properly. For instance, I nested your navbar inside the red header.
Code
Press the 'Run code snippet' button below to see the code output.
* {
padding: 0;
margin: 0;
}
body {
min-width: 300px;
margin: 0px;
padding: 0px;
background: #f8f8f8
}
.wrapper {
max-width: 980px;
height: 2000px;
margin: 0px auto;
/*position: relative;*/
background-color: #fff;
}
header {
padding: 20px;
width: 980px;
height: 30px;
background: #e60000;
}
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
/*overflow: hidden;*/
top: 63px;
right: 60px;
width: 560px;
display: block;
/*position: absolute;*/
}
.navbar li {
display: inline-block;
Margin-left: 15px;
background: black;
}
.navbar li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 5px 15px;
text-decoration: none;
font-size: 17px;
}
.navbar li a:hover {
background-color: #660000;
}
.navbar li ul {
position: absolute;
top: auto;
list-style-type: none;
display: none;
background-color: #707070;
}
.navbar li ul li {
float: none;
display: inline;
height: 0;
border: none;
}
.navbar li ul li a {
display: block;
text-align: left;
}
.navbar li:hover>ul {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<Title>Menu</title>
</head>
<body>
<div class="wrapper">
<header>
<ul class="navbar">
<li>Home
</li>
<li>Services
<ul>
<li>Service 1
</li>
<li>Service 2
</li>
<li>Service 3
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</header>
</div>
</body>
</html>
Explanation
You need to add the following two line of CSS code for the nested <li> tag.
ul li ul {
position: absolute;
top: auto;
}
Setting the position to absolute and top to auto will display your nested ul under the parent tag.
Code
Press the 'Run code snippet' button below to see the code output.
ul li {
background: black;
color: white;
display: inline-block;
width: 100px;
}
ul li ul {
margin: 0px;
padding: 0px;
background: grey;
/*YOU NEED THE TWO LINES BELOW*/
position: absolute;
top: auto;
}
ul li ul li {
color: white;
background: grey;
display: block;
width: 80px;
padding: 10px;
}
<html>
<body>
<ul>
<li>
Home
</li>
<li>
Services
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
</body>
</html>
so i think this is just about navigation i made and it work just fine, but i just realize when i change my resolution to 1768x992 that my navigation won't work like i want it
The problem is when i ran code with resolution 1768x992 or below i cannot click or hover the home link. The first-child (home) on the left side cannot be hover but when i shake my mouse a little bit to the right near registration it will show the hover action. And moreover i cannot click the home link.
first thought was my border stack eraser
.nav:nth-child(n+2){
margin-left:-2px;
}
but when i clean it and see what happened it just feel the same. no clue what's going on with home button, can some body please explain it to me why...
o ya this is my code
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: Helvetica
}
/*header*/
header {
width: 100%;
}
#logo {
position: absolute;
left: 0;
top: 0;
}
#logo img {
width: 40%;
}
/*navigation*/
.navigation {
top: 0;
width: 50%;
height: 120px;
margin: 0 auto;
text-align: center;
}
.nav-head {
font-size: 0;
margin-top: 5%;
padding-left: 0;
width: 100%;
}
.nav a {
color: #e74c3c;
text-decoration: none;
font-size: 1em;
}
.nav {
list-style: none;
display: inline-block;
border: solid 2px #e74c3c;
font-size: 15px;
margin: 0;
padding: 8px 18px;
min-width: 20%;
}
.nav:nth-child(n+2) {
margin-left: -2px;
}
.nav:hover {
padding: 16px 18px;
margin-top: -16px;
}
.nav.currentPage {
padding: 16px 18px;
margin-top: -16px;
}
<!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" />
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<header>
<div id="logo">
<a href="index.php">
<img src="Asset/Logo.png" alt="logo" />
</a>
</div>
<nav class="navigation">
<ul class="nav-head">
<li class="nav" id="nav1">HOME
</li>
<li class="nav" id="nav2">REGISTRATION
</li>
<li class="nav" id="nav3">TUTORIAL
</li>
<li class="nav currentPage" id="nav4">CONTACT US
</li>
</ul>
</nav>
</header>
</body>
</html>
I am not able to get this code working properly on IE-8. I am sorry as I am beginner in CSS.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:py="http://purl.org/kid /ns#">
<head>
<meta name="generator" content= "HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org" />
<meta content="text/html; charset=us-ascii" http-equiv="Content-Type"/>
<link href="/site_media/css-dock-menu/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="/site_media/css/new.css"/>
</head>
</body>
<ul class="navbar">
<li style="width:9%;">
Useful Sites
<ul>
<li>Portal</li>
<li>Calender</li>
</ul>
</li>
<li>
[....]
Basically Hovering over "Useful Sites" should display drop down having "Portal" and "Calender".
Here is my new.css -
#wrap {
width: 100%;
height: 30px;
margin: 0;
z-index: 99;
position: relative;
background-color: #366b82;
}
.navbar {
height: 20px;
padding: 0;
width: 100%;
left-margin: 0;
position: absolute;
right: 0;
}
.navbar li {
height: auto;
width: 125px;
float: left;
list-style: none;
}
.navbar a {
padding: 10px 0;
border-left: 1px solid #54879d;
border-right: 1px solid #1f5065;
text-decoration: none;
color: white;
display: block;
}
.navbar li ul {
display: none;
height: auto;
margin: 0;
padding: 0;
}
.navbar li:hover ul {
display: block; /* Displays the drop-down box when the menu item is hovered over */
}
Thanks in advance !
you need as below
.navbar li a:hover ul
{
display: block; /* Displays the drop-down box when the menu item is hovered over */
}