I am trying to add a hover effect from Youtube Video
I tried for an hour, changed my code two times; where my original code was this:
* {
font-family: 'Montserrat', sans-serif;
color: white;
margin: 0;
padding: 0;
}
.header {
width: 100%;
background-color: #2C2F33;
border-bottom: 5px #FF9F00 solid;
font-size: 15px;
display: flex;
align-items: center
}
#logo img {
float: left;
margin: 0;
padding: 20px;
width: 187.5px;
height: 63.75px;
background-color: #2C2F33;
}
.navbar {
display: flex;
justify-content: space-between;
margin-left: auto;
}
li {
display: inline;
padding: 0 22.5px 0 22.5px;
}
.navbar,
li,
a {
text-decoration: none;
list-style-type: none;
text-transform: uppercase;
background-color: #2C2F33;
position: relative;
}
.navbar,
li,
a:hover {
color: #FF9F00;
text-decoration: none;
list-style-type: none;
}
#userbalance {
background-color: #23272A;
padding: 10px;
border: 3px #FF9F00 solid;
}
#userbalance {
background-color: #23272A;
}
#balance,
#dsh {
color: #FF9F00;
}
#dosh {
color: #FFFFFF;
}
.body {
background-color: #23272A;
}
footer {
background-color: #23272A;
position: absolute;
text-align: center;
clear: both;
width: 100%;
bottom: 18px;
font-size: 12.5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="./css/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300" rel="stylesheet">
<meta name="viewport" content="width=device-width">
<meta name="author" content="Arszilla">
<title>Website</title>
</head>
<body>
<div class="header">
<div id="logo">
<img src="./img/logo.png"></img>
</div>
<div class="navbar">
<div id="leftnavbar">
<ul>
<li id="userbalance"><span id="balance">Balance:</span> <span id="dosh">1.00000000</span> <span id="dsh">DSH</span></li>
</ul>
</div>
<div id="rightnavbar">
<ul>
<li>Button 1</li>
<li>Button 2</li>
<li>Button 3</li>
<li>Button 4</li>
</ul>
</div>
</div>
</div>
</body>
</html>
I removed the <div class="header"> etc and made it all <header> and such (Basically got rid of div)
I followed the video and until 14 minute mark it was okay, I understood what he was doing. After that stuff went downhill.
I added these to my code:
.navbar,
li
{
position: absolute;
display: inline-block;
}
and
.navbar,
li
a::before
{
content: '';
display: block;
height: 5px;
width: 100%;
background-color: red;
position: absolute;
}
and got this as a result:
Result
I am not sure how can I fix this as I am not that experienced. Would someone mind helping me? I am not sure if I should remake the site from scratch and just use <header>, <nav> etc instead of using divs and labeling 'similar' classes to them (class="header" etc)
* {
font-family: 'Montserrat', sans-serif;
color: white;
margin: 0;
padding: 0;
}
.header {
width: 100%;
background-color: #2C2F33;
border-bottom: 5px #FF9F00 solid;
font-size: 15px;
display: flex;
align-items: center
}
#logo img {
float: left;
margin: 0;
padding: 20px;
width: 187.5px;
height: 63.75px;
background-color: #2C2F33;
}
.navbar {
display: flex;
justify-content: space-between;
margin-left: auto;
}
.navbar,
li,
a {
text-decoration: none;
list-style-type: none;
text-transform: uppercase;
background-color: #2C2F33;
position: relative;
}
ul li {
padding: 9px 22.5px 11px 22.5px;
float:left;
border: 3px solid transparent
}
ul li:hover {
border: 3px #FF9F00 solid;
}
#userbalance {
background-color: #23272A;
padding: 10px;
border: 3px #FF9F00 solid;
}
#userbalance {
background-color: #23272A;
}
#balance,
#dsh {
color: #FF9F00;
}
#dosh {
color: #FFFFFF;
}
.body {
background-color: #23272A;
}
footer {
background-color: #23272A;
position: absolute;
text-align: center;
clear: both;
width: 100%;
bottom: 18px;
font-size: 12.5px;
}
<html>
<head>
<meta charset="utf-8">
<link href="./css/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300" rel="stylesheet">
<meta name="viewport" content="width=device-width">
<meta name="author" content="Arszilla">
<title>Website</title>
</head>
<body>
<div class="header">
<div id="logo">
<img src="./img/logo.png">
</div>
<div class="navbar">
<div id="leftnavbar">
<ul>
<li id="userbalance"><span id="balance">Balance:</span> <span id="dosh">1.00000000</span> <span id="dsh">DSH</span></li>
</ul>
</div>
<div id="rightnavbar">
<ul>
<li>Button 1</li>
<li>Button 2</li>
<li>Button 3</li>
<li>Button 4</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Use this CSS code and check your hover effect
ul li {
padding: 9px 22.5px 11px 22.5px;
float:left;
border: 3px solid transparent
}
ul li:hover {
border: 3px #FF9F00 solid;
}
Related
Here is my code below. I'm having trouble displaying the logo at the top left hand corner of the screen.
My main problem is that the image is not showing up anywhere on the screen, although I inputted the correct file name into the image section.
If anyone would be able to help me, I'd really appreciate it! Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background: url(../img/bg-pattern.png),linear-gradient(to left,#FF6900, orange);
border-radius: 0px;
position: fixed;
top: 0;
width: 100%;
}
li {
float: right;
}
#logo {
float: left;
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
margin-right: 20px;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #F29078;
border-radius: 5px;
}
.active {
background-color: #F29078;
}
.logo {
width: 33px;
height: 67px;
border-radius: 5px;
}
</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="0">
<ul>
<li><img src="imageO.jpg" id="logo" class="logo"/> </li>
<li>About</li>
<li>Features</li>
<li>Download</li>
</ul>
</div>
</body>
</html>
Is your logo really 7x5 px? I just move the first li item to the left side and if imageO.jpg is in the same path of your Html, this works fine.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background: url(../img/bg-pattern.png),linear-gradient(to left,#FF6900, orange);
border-radius: 0px;
position: fixed;
top: 0;
width: 100%;
}
li {
float: right;
}
#logo {
float: left;
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
margin-right: 20px;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #F29078;
border-radius: 5px;
}
.active {
background-color: #F29078;
}
.logo {
width: 70px;
height: 50px;
border-radius: 5px;
border: 1px black;
}
li:first-child {
float: left;
}
</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="0">
<ul>
<li><img src="imageO.jpg" alt="not found" id="logo" class="logo"/> </li>
<li>About</li>
<li>Features</li>
<li>Download</li>
</ul>
</div>
</body>
</html>
Here, I've done this in another way:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background: url(../img/bg-pattern.png),linear-gradient(to left,#FF6900, orange);
border-radius: 0px;
position: fixed;
top: 0;
width: 100%;
display:flex;
justify-content:flex-end;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
margin-right: 20px;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #F29078;
border-radius: 5px;
}
.active {
background-color: #F29078;
}
.logo {
width: 50px;
height: 50px;
border-radius: 5px;
position:fixed;
left:20px;;
}
<body data-spy="scroll" data-target="#myScrollspy" data-offset="0">
<ul>
<li><img src="https://www.ikea.com/at/de/images/products/klappa-soft-toy-ball-multicolour__0606619_PE682422_S5.JPG?f=s" id="logo" class="logo"/> </li>
<li>About</li>
<li>Features</li>
<li>Download</li>
</ul>
</div>
Hi hope this pen would help with the position of the logo, also notice you have a closing div tag that does not open, as the previous answer i took out the logo from the Ul because since you are floating all the ul content it takes the logo too.
https://codepen.io/MoneWebGuru/pen/WNQwVGX`
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background: url(../img/bg-pattern.png),linear-gradient(to left,#FF6900, orange);
border-radius: 0px;
position: fixed;
top: 0;
left:0px;
width: 100%;
}
li {
float: right;
list-style-type: none;
}
#logo {
float: left;
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
margin-right: 20px;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #F29078;
border-radius: 5px;
}
.active {
background-color: #F29078;
}
.logo {
border-radius: 5px;
height: 50px;
padding-top:10px;
}
</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="0">
<div style="width:100%">
<img src="https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528__340.jpg" id="logo" class="logo"/> <ul>
<li>About</li>
<li>Features </li>
<li>Download</li>
</ul>
</div>
</body>
</html>
`
For some reason, there is some extra space around the navigation bar and in it. I have set the margins and padding all to 0px, so there should be no space around it, and I don't know how to remove the extra space in the div. I have tried looking it up, but I haven't been able to find anything that helps, so I hoped that some of you could, Thanks!
* {
margin: auto 0;
padding: 0px;
font-family: 'Source Code Pro', monospace;
}
li {
list-style: none;
padding: 20px;
padding-left: 30px;
cursor: pointer;
}
a {
color: white;
}
a:hover {
color: white;
text-decoration: none;
}
.nav1 {
height: 10fr;
width: auto;
border: 2px solid white;
background: #787878;
border-radius: 15px;
}
.header {
display: flex;
grid-template-rows: repeat(auto);
font-size: 23px;
}
.left {
display: flex;
justify-content: center;
}
.left:hover {
background: #404040;
border-radius: 13px;
}
.right {
margin-left: auto;
}
.right:hover {
background: #404040;
border-radius: 13px;
}
.disable {
display: flex;
justify-content: center;
color: white;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style1.css">
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:300&display=swap" rel="stylesheet">
</head>
<body>
<nav class="nav1">
<ul class="header">
<li class="left disable">Home Page</a></li>
<li class="left">Find Support</li>
<li class="left">Want To Offer Support?</li>
<li class="left">Found A Mistake?</li>
<li class="right">Contact Us</li>
</ul>
</nav>
</body>
</html>
In your class nav1 there is a white border. Remove it.
.nav1 {
height: 10fr;
width: auto;
//border: 2px solid white;
background: #787878;
border-radius: 15px;
}
Other solution has written by HanJeaHwan
set margin-bottom: 0 for header class
.header {
display: flex;
grid-template-rows: repeat(auto);
font-size: 23px;
margin-bottom: 0;
}
You can fix the problem by adding the margin-bottom: 0 code inside the ul tag.
as follows
* {
margin: auto 0;
padding: 0px;
font-family: 'Source Code Pro', monospace;
}
li {
list-style: none;
padding: 20px;
padding-left: 30px;
cursor: pointer;
}
a {
color: white;
}
a:hover {
color: white;
text-decoration: none;
}
.nav1 {
height: 10fr;
width: auto;
border: 2px solid white;
background: #787878;
border-radius: 15px;
}
.header {
display: flex;
grid-template-rows: repeat(auto auto auto);
font-size: 23px;
margin-bottom: 0px;
}
.left {
display: flex;
justify-content: center;
}
.left:hover {
background: #404040;
border-radius: 13px;
}
.right {
margin-left: auto;
}
.right:hover {
background: #404040;
border-radius: 13px;
}
.disable {
display: flex;
justify-content: center;
color: white;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style1.css">
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:300&display=swap" rel="stylesheet">
</head>
<body>
<nav class="nav1">
<ul class="header">
<li class="left disable">Home Page</a>
</li>
<li class="left">Find Support</li>
<li class="left">Want To Offer Support?</li>
<li class="left">Found A Mistake?</li>
<li class="right">Contact Us</li>
</ul>
</nav>
</body>
</html>
I cant seem to figure out how to get the menu inline with the text in the heading which is in the centre of the heading already. I'm sure it isnt a difficult problem but i cant figure it out as im trying to teach myself.
Any help would be appreciated.
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
font-family: sans-serif, arial;
}
#toplocation {
background-color: black;
color: grey;
margin-top: 0;
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
#heading {
background-color: #2b2b2b;
color: white;
padding-top: 14px;
padding-right: 14px;
padding-bottom: 14px;
padding-left: 14px;
}
#redline {
background-color: #ff0a0a;
height: 2px;
border: 0;
padding: 0;
}
ul#menu {
padding: 0;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: #383838;
color: white;
padding: 4px 11px;
text-decoration: none;
border-radius: 3px 3px 3px 3px;
}
ul#menu li a:hover {
background-color: #ff0a0a;
}
<link href="http://cdnjs.cloudflare.com/ajax/libs/font- awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<!DOCTYPE html>
<div id="toplocation">
<i class="fa fa-fax"></i>
(01)-8393790      
<i class="fa fa-map- marker"> Baldoyle Industrial Estate</i>
</div>
<div id="heading">
<h3>Kilbride Classic Cuisine
<ul id="menu">
<li>Home</li>
<li>Products</li>
<li>MyOwn Gym Foods</li>
<li>Contact Us</li>
</ul>
</h3>
</div>
<div id="redline"></div>
Is this what you are looking for ? Making a few guesses from your description.
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
font-family: sans-serif, arial;
}
#toplocation
{
background-color:black;
color:grey;
margin-top: 0;
margin-bottom:0;
margin-right: 0;
margin-left: 0;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
#heading
{
background-color:#2b2b2b;
color:white;
padding-top: 14px;
padding-right: 14px;
padding-bottom: 14px;
padding-left: 14px;
}
#redline
{
background-color:#ff0a0a;
height: 2px;
border: 0;
padding: 0;
}
.pull-left{
float:left;
display:inline-block;
margin-right:100px;
}
.h2{
font-size:22px;
}
ul#menu {
padding: 0;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: #383838;
color: white;
padding: 4px 11px;
text-decoration: none;
border-radius: 3px 3px 3px 3px;
}
ul#menu li a:hover {
background-color: #ff0a0a;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font- awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="HomepageStyleSheet.css">
<title>Kilbride Classic Cuisine</title>
</head>
<body>
<div id="toplocation">
<i class="fa fa-fax"></i>
(01)-8393790      <i class="fa fa-map- marker"> Baldoyle Industrial Estate</i>
</div>
<div id="heading">
<div class="h2">
<span class="pull-left">Kilbride Classic Cuisine </span>
<ul id="menu">
<li>Home</li>
<li>Products</li>
<li>MyOwn Gym Foods</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<div id="redline"></div>
Firstly, your really shouldn't put the ul inside the h3.
Then to align the Heading h3 and menu, set them both to display:inline-block and vertical-align:middle;.
The menu and heading will then line up provided there is enough room for both on the same line.
Codepen Demo
#toplocation {
background-color: black;
color: grey;
padding: 5px;
}
#heading {
background-color: #2b2b2b;
color: white;
padding: 14px;
}
#heading h3 {
display: inline-block;
}
ul#menu {
padding: 0;
display: inline-block;
vertical-align: middle;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: #383838;
color: white;
padding: 4px 11px;
text-decoration: none;
border-radius: 3px 3px 3px 3px;
}
ul#menu li a:hover {
background-color: #ff0a0a;
}
<div id="toplocation">
<i class="fa fa-fax"></i>
(01)-8393790 <i class="fa fa-map-marker"> Baldoyle Industrial Estate</i>
</div>
<div id="heading">
<h3>Kilbride Classic Cuisine </h3>
<ul id="menu">
<li>Home</li>
<li>Products</li>
<li>MyOwn Gym Foods</li>
<li>Contact Us</li>
</ul>
</div>
Take a look at this, I've fixed your code: https://jsfiddle.net/geof9LuL/2/
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
font-family: sans-serif, arial;
}
#toplocation {
background-color: black;
color: grey;
margin-top: 0;
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
#heading {
overflow:hidden;
background-color: #2b2b2b;
color: white;
padding-top: 14px;
padding-right: 14px;
padding-bottom: 14px;
padding-left: 14px;
}
#redline {
background-color: #ff0a0a;
height: 2px;
border: 0;
padding: 0;
}
ul#menu {
padding: 0;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: #383838;
color: white;
padding: 4px 11px;
text-decoration: none;
border-radius: 3px 3px 3px 3px;
}
ul#menu li a:hover {
background-color: #ff0a0a;
}
.title {
display: inline-block;
}
.menu-container {
display: inline-block;
float:right;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font- awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="HomepageStyleSheet.css">
<title>Kilbride Classic Cuisine</title>
</head>
<body>
<div id="toplocation">
<i class="fa fa-fax"></i> (01)-8393790      
<i class="fa fa-map- marker"> Baldoyle Industrial Estate</i>
</div>
<div id="heading">
<h3 class="title">Kilbride Classic Cuisine</h3>
<div class="menu-container">
<ul id="menu">
<li>Home</lai>
<li>Products</li>
<li>MyOwn Gym Foods</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<div id="redline"></div>
Also, in your example you had the menu inside the <h3> which isn't valid.
The ul#menu and the h3 tag both should be declared as display: inline.
Try to avoid to do something in the <h3>-tag expect text because some search-engines are looking for those tags and use them.
<h3>Kilbride Classic Cuisine</h3>
<ul id="menu">...</ul>
For the <div id="heading"> you could use the new html tag <header id="heading">.
Edited
Is that what you want?
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
font-family: sans-serif, arial;
}
#toplocation
{
background-color:black;
color:grey;
margin-top: 0;
margin-bottom:0;
margin-right: 0;
margin-left: 0;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
h3{float:left;margin:12px 10px;}
#heading
{
background-color:#2b2b2b;
color:white;
padding-top: 14px;
padding-right: 14px;
padding-bottom: 14px;
padding-left: 14px;
}
#redline
{
background-color:#ff0a0a;
height: 2px;
border: 0;
padding: 0;
}
ul#menu {
padding: 0;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: #383838;
color: white;
padding: 4px 11px;
text-decoration: none;
border-radius: 3px 3px 3px 3px;
}
ul#menu li a:hover {
background-color: #ff0a0a;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font- awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="HomepageStyleSheet.css">
<title>Kilbride Classic Cuisine</title>
</head>
<body>
<div id="toplocation">
<i class="fa fa-fax"></i>
(01)-8393790      <i class="fa fa-map- marker"> Baldoyle Industrial Estate</i>
</div>
<div id="heading">
<h3>Kilbride Classic Cuisine </h3>
<ul id="menu">
<li>Home</li>
<li>Products</li>
<li>MyOwn Gym Foods</li>
<li>Contact Us</li>
</ul>
</div>
<div id="redline"></div>
Adding display: inline to your ul#menu should do the trick.
margin-left: 20px; to have spacing between heading and menu.
Modified ul#menu as below
ul#menu {
padding: 0;
margin-left: 20px;
display: inline;
}
Here is the full Snippet:
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
font-family: sans-serif, arial;
}
#toplocation {
background-color: black;
color: grey;
margin-top: 0;
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
#heading {
background-color: #2b2b2b;
color: white;
padding-top: 14px;
padding-right: 14px;
padding-bottom: 14px;
padding-left: 14px;
overflow: hidden;
}
#redline {
background-color: #ff0a0a;
height: 2px;
border: 0;
padding: 0;
}
ul#menu {
padding: 0;
margin-left: 20px;
display: inline;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: #383838;
color: white;
padding: 4px 11px;
text-decoration: none;
border-radius: 3px 3px 3px 3px;
}
ul#menu li a:hover {
background-color: #ff0a0a;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font- awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="HomepageStyleSheet.css">
<title>Kilbride Classic Cuisine</title>
</head>
<body>
<div id="toplocation">
<i class="fa fa-fax"></i>
(01)-8393790      
<i class="fa fa-map- marker"> Baldoyle Industrial Estate</i>
</div>
<div id="heading">
<h3>Kilbride Classic Cuisine
<ul id="menu">
<li>Home
</li>
<li>Products
</li>
<li>MyOwn Gym Foods
</li>
<li>Contact Us
</li>
</ul>
</h3>
</div>
<div id="redline"></div>
</body>
I am new to UI design, and I'm trying to create a tabbed layout.
All the tabs are on the center top, and then there are two divs on each other:
Blue Div
Red Div
The problem is with zooming in and out.
Zoom out misplaces all the tabs (tab F moves to another row).
Same sort of problem with zoom in: Content moves somewhere else apart from their original positioning
I just want the zooming to work the same as image zooming. The content should not move anywhere.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
body,html {
height: 100%;
}
div.tabcontents {
padding: 1%;
background-color: black;
color: white;
height: 80%;
background-color: blue;
margin-left: 10%;
margin-right: 10%;
}
ul.tabs {
padding: 1% 0;
font-size: 0;
margin: 0;
list-style-type: none;
text-align: right;
}
ul.tabs li {
display: inline;
margin: 0;
margin-right: 1%; /*distance between tabs*/
font: normal 14px Verdana;
padding: 0.5% 4%;
border: 1px solid white;
border-bottom-color: black;
color: white;
}
ul.tabs li a:hover,ul.tabs li:hover,ul.tabs li.activeTab {
background: black;
color: white;
}
ul.tabs li a {
text-decoration: none;
color: white;
}
</style>
</head>
<body bgcolor="black">
<ul class="tabs" style="margin-right: 19%">
<li id="admin" class="activeTab"><a>tabA</a></li>
<li id="admin" class="activeTab"><a>tabB</a></li>
<li id="admin" class="activeTab"><a>tabC</a></li>
<li id="admin" class="activeTab"><a>tabD</a></li>
<li id="admin" class="activeTab"><a>tabE</a></li>
<li id="admin" class="activeTab"><a>tabF</a></li>
</ul>
<div class="tabcontents">
<div style="height: 100%; background-color: red"></div>
</div>
</body>
</html>
Try Removing The Padding from the tab list
ul.tabs li {
display: inline;
margin: 0;
margin-right: 1%; /*distance between tabs*/
font: normal 14px Verdana;
padding: 0.5% 4%; /*Remove This*/
border: 1px solid white;
border-bottom-color: black;
color: white;
your new CSS will be looks like
ul.tabs li {
display: inline;
margin: 0;
margin-right: 1%; /*distance between tabs*/
font: normal 14px Verdana;
border: 1px solid white;
border-bottom-color: black;
color: white;
Also I made the following Changes:
ul.tabs {
padding: 1% 0;
font-size: 0;
margin: 0;
list-style-type: none;
text-align: center; /* Text made center*/
}
Removed the Style from
<ul class="tabs" style="margin-right: 19%">
now looks like <ul class="tabs">
The whole code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
body,html {
height: 100%;
}
div.tabcontents {
padding: 4%;
color: white;
height: 80%;
background-color: blue;
margin-left: 10%;
margin-right: 10%;
}
ul.tabs {
padding: 1% 0;
font-size: 0;
margin: 0;
list-style-type: none;
text-align: center;
}
ul.tabs li {
position:static;
max-width: 80%;
display: inline;
margin: 3px;
margin-right: 1%; /*distance between tabs*/
font: normal 14px Verdana;
border: 1px solid white;
border-bottom-color: black;
color: white;
}
ul.tabs li a:hover,ul.tabs li:hover,ul.tabs li.activeTab {
background: black;
color: white;
}
ul.tabs li a {
text-decoration: none;
color: white;
}
</style>
</head>
<body bgcolor="black">
<ul class="tabs" >
<li id="admin" class="activeTab"><a>tabA</a></li>
<li id="admin" class="activeTab"><a>tabB</a></li>
<li id="admin" class="activeTab"><a>tabC</a></li>
<li id="admin" class="activeTab"><a>tabD</a></li>
<li id="admin" class="activeTab"><a>tabE</a></li>
<li id="admin" class="activeTab"><a>tabF</a></li>
</ul>
<div class="tabcontents">
<div style="height: 100%; background-color: red"></div>
</div>
</body>
</html>
So I'm building a website in html and css. I have made a navigation bar with the links, but when I zoom out, the links go underneath one another instead of inline. If someone can give me some pointers, that'd be great. Thanks
<html>
<head>
<link rel="stylesheet" href="style/style.css" />
</head>
<body>
<div class="wrap">
<div class="logo"><img src="img/logo.png"></div>
<div class="nav">
<ul>
<li>HOME</li>
<li>PRODUCTS</li>
<li>SHOPS</li>
<li>FAQ</li>
<li>ABOUT US</li>
</ul>
</div>
<div class="main">
</div>
</div>
</body>
</html>
body {
padding: 0;
margin: 0;
background: #1b1b1b url('../img/bg.jpg') no-repeat fixed top center;
}
.logo {
margin-bottom: 10px;
margin: auto;
width: 524px;
}
.wrap {
width: 960px;
margin: auto;
}
.nav {
height: 37px;
background-color: rgba(26,26,26,0.8);
border: 1px solid black;
margin-bottom: 10px;
}
ul {
margin: 0;
padding: 0;
text-align: center;
line-height: 38px;
}
ul li {
display: inline;
color: #828282;
padding: 2px 40px;
background: #595959;
border:1px solid #828282;
margin: 0 10px;
}
ul li a {
text-decoration: none;
color: white;
font-family: arial;
}
ul li a:hover {
}
.main {
min-height: 300px;
height: auto;
background-color: rgba(26,26,26,0.8);
border: 1px solid black;
}
"the links go underneath one another instead of inline"
To fix this, you will want to add the float: left; property to your li like so:
ul li {
display: inline-block;
float: left;
color: #828282;
padding: 2px 40px;
background: #595959;
border:1px solid #828282;
margin: 0 10px;
}