I have a code here for a nav bar. When I hover over the links, a small arrow which is a png image should display below it in the center. The below code works fine in Firefox and Chrome but in IE, the arrow goes slightly below the div so only a part of it is seen. What's the issue?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="normalize.css">
</head>
<body>
<div id="wrapper">
<div id="logo-wrapper">
<img src="logo.png" id="logo">
</div>
<div id="menu-wrapper">
<ul>
<li><a id="home" href="#" >Home</a></li>
<li><a href="#" >Work</a></li>
<li><a href="#" >Us</a></li>
<li><a href="#" >Contact</a></li>
</ul>
</div>
</div>
below is the CSS:
body,html{
border:0px;
padding:0px;
margin:0px;
}
#wrapper{
width:954px;
height:59px;
padding-top:0px;
padding-right:20px;
padding-bottom:0px;
padding-left:15px;
margin:0 auto;
border-style:none;
outline:none;
background-color:black;
position:relative;
}
#logo{
padding:0px;
margin:none;
outline:none;
height:59px;
}
#logo-wrapper{
width:223px;
float:left;
padding:0px;
margin:none;
}
#menu-wrapper{
padding:0px;
margin:none;
position:absolute;
bottom:6%;
right:30px;
}
ul{
width:200px;
position:relative;
left:0;
bottom:-5px;
list-style-type:none;
padding:0px;
margin:none;
}
li{
margin:0px;
padding:0px;
display:inline;
width:20%;
text-align:center;
}
#home{
margin:0px;
padding:none;
background: url('arrow.png') center 100% no-repeat;
}
#menu-wrapper a{
height:31px;
padding-bottom:16px;
text-decoration:none;
font-family:"arial";
font-weight:bold;
font-size:12px;
color:white;
margin-right:13px;
margin-bottom:0px;
border:none;
}
#menu-wrapper a:hover{
padding:none;
margin:0px;
outline:none;
border:none;
background: url('arrow.png') center 100% no-repeat;
}
#menu-wrapper a:active{
outline:none;
margin:0px;
border:none;
}
#menu-wrapper a:focus{
outline:none;
margin:0px;
border:none;
}
You could try to add a z-index to the arrow image.
Like this:
#logo{
padding:0px;
margin:none;
outline:none;
height:59px;
z-index: 9999;
}
Edit. z-index on all images inside #logo-wrapper
#menu-wrapper img{
z-index: 9999;
}
Related
The border after every menu item ie after news,sports,whether etc are extending the top bar the height should be similiar to the top bar should not go out of the top bar
And also the the bar below the top bar which is news bar is not displaying properly check the image link which is the required output for ref see the images click on This is correct image link below
To see the code click the link below "Click Me to see the code"
This is correct image
Click Me to see the code
**HTML**
<html>
<head>
<title> BBC NEWS</title>
</head>
<body>
<div class="container">
<div class="topbar">
<div class="fixwidth">
<div class="bbclogo">
<img src="../Images/bbc logo.PNG"/>
</div>
<div class="signin">
<img src="../Images/Signin.PNG"/>Sign In
</div>
<div class="topmenu">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
<li>IPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div>
<div class="search">
<input type="text" placeholder="Search"/>
</div>
<div class="empty"></div>
<div class="newsbar">
<div class="fixwidth">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
<style type="text/css">
body{
margin:0;
}
.topbar{
background-color:#7A0000;
height:40px;
width:100%;
color:white;
font-family:arial,helvetica,sans-serif;
position:fixed;
}
.fixwidth{
margin:0 auto;
width:1150px;
}
.bbclogo{
padding:5px;
float:left;
border-right:1px solid #990000;
padding-right:10px;
}
.signin{
padding:8px 80px 12px 20px;
font-weight:bold;
font-size:15px;
float:left;
border-right:1px solid #990000;
margin-top:3px;
}
.signin img{
position:relative;
top:1px;
}
.topmenu{
float:left;
}
.topmenu ul{
margin:0;
padding:0;
}
.topmenu li{
float:left;
list-style:none;
font-weight:bold;
font-size:15px;
border-right:1px solid #990000;
height:100%;
padding:10px 20px 0 20px;
line-height:1;
}
.search{
float:left;
padding:8px;
}
.search input{
height:25px;
border:none;
padding:3px;
font-size:12px;
font-family:Times New Roman;
font-style:italic;
background-image:url(../../../blq-search_grey_alpha.png);
background-repeat:no-repeat;
background-position:right center;
}
.empty{
clear:both;
}
.newsbar{
background-color:#990000;
height:40px;
width:100%;
color:white;
}
</style>
Removed the height of navbar and made necessary changes
Demo Link
<html>
<head>
<title> BBC NEWS</title>
<style type="text/css">
body{
margin:0;
}
.topbar{
background-color:#7A0000;
/*height:40px;*/ /* removed*/
width:100%;
color:white;
font-family:arial,helvetica,sans-serif;
position:fixed;
}
.fixwidth{
margin:0 auto;
width:1050px;
}
.bbclogo{
padding:13px;
float:left;
border-right:1px solid #990000;
padding-right:10px;
}
.signin{
padding:8px 80px 12px 20px;
font-weight:bold;
font-size:15px;
float:left;
border-right:1px solid #990000;
margin-top:3px;
}
.signin img{
position:relative;
top:1px;
}
.topmenu{
float:left;
}
.topmenu ul{
margin:0;
padding:0;
}
.topmenu li{
float:left;
list-style:none;
font-weight:bold;
font-size:15px;
border-right:1px solid #990000;
height:100%;
padding: 4px 20px 0 20px; /* changed */
line-height: 2.8; /* added */
}
.search{
float:left;
padding:8px;
}
.search input{
height:25px;
border:none;
padding:3px;
font-size:12px;
font-family:Times New Roman;
font-style:italic;
background-image:url(../../../blq-search_grey_alpha.png);
background-repeat:no-repeat;
background-position:right center;
}
.empty{
clear:both;
}
.newsbar{
background-color:#990000;
height:40px;
width:100%;
color:white;
}
</style>
</head>
<body>
<div class="container">
<div class="topbar">
<div class="fixwidth">
<div class="bbclogo">
<img src="../Images/bbc logo.PNG"/>
</div>
<div class="signin">
<img src="../Images/Signin.PNG"/>Sign In
</div>
<div class="topmenu">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
<li>IPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div>
<div class="search">
<input type="text" placeholder="Search"/>
</div>
<div class="empty"></div>
<div class="newsbar">
<div class="fixwidth">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
for newsbar you have to change your height and width like below :
.newsbar{background-color:#990000; height:5000px; width:100%; color:white; }
Will definately works ☺
How come my padding isnt working on my logo div it was working before i added an extra div but i still cant see the reason it isn't working.Please check out my code to figure out if you can help me :)
<!DOCTYPE html>
<html>
<head>
<title>Learning Javacript</title>
<link href="main.css" rel="stylesheet" type="text/css">
<link href="normalize.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="contact_info">
<div class="email">
<img src="icons/icon_mail.png">
<p>contact#thislooksgreat.net</p>
</div>
<div class="phone">
<img src="icons/icon_phone.png">
<p>+40.727.123.456</p>
</div>
<div class="Social_Media">
<ul>
<li><img src="Social/facebook.png"></li>
<li><img src="Social/twitter.png"></li>
<li><img src="Social/youtube.png"></li>
<li><img src="Social/googleplus.png"></li>
<li><img src="Social/linked.png"></li>
</ul>
</div>
<div class="language">
<p>ENGLISH</p>
<img src="icons/arrow.png">
</div>
</div>
</header>
<div class="main_real">
<div class="main_img">
<div class="main_nav_width">
<div class="main_nav">
<div class="logo">
<img src="Logo/logo.png">
</div>
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>News</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</body>
</html>
html,body,h1,h2,h3,h4,h5,h6,p,li,ul,a,nav{
padding:0px;
margin:0px;
}
header{
width:100%;
background-color:#143e6e;
height:40px;
border-top:6px solid #0d2f57;
}
.contact_info{
width:1200px;
margin:0 auto;
}
.contact_info p, img{
float:left;
}
.email p,img{
float:left;
}
.email .phone, p{
padding-top:12px;
padding-right:60px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:white;
}
.email img{
padding-top:11px;
padding-right:10px;
}
.phone p,img{
float:left;
}
.phone img{
padding-top:7px;
}
.Social_Media ul{
padding-top:10px;
padding-left:25px;
float:right;
}
.Social_Media li{
display:inline;
}
.Social_Media img{
padding-right:25px;
}
.Social_Media li:last-child img {
padding-right:0px
}
.language{
float:right;
}
.language p{
padding-right:0px;
}
.language img{
padding-top:15px;
padding-left:5px;
}
.main_nav_width{
width:100%;
background-color:white;
box-shadow: 0 5px 6px -6px black;
}
.main_nav{
width:1200px;
margin:0 auto;
height:90px;
}
}
.logo{
clear:both;
float:left;
padding-top:15px;
}
nav ul{
float:right;
padding-top:35px;
height:55px;
}
nav li{
display:inline;
}
nav li:last-child a{
margin-right:0px;
}
nav a{
width:50px;
margin-right:20px;
margin-left:20px;
padding-top:33px;
padding-bottom:40px;
text-decoration:none;
height:90px;
color:#143e6e;
}
nav a:hover {
width:90px;
padding-top:35px;
text-decoration:none;
height:15px;
color:#143e6e;
border-bottom:5px solid blue;
padding-bottom:33px;
}
nav li:last-child a:hover{
width:70px;
margin-left:20px
}
.main_img{
background-image: url("images/imac.png");
background-repeat:no-repeat;
background-position: 780px 64px;
background-repeat: no-repeat;
background-size:500px 500px;
width:100%;
height:650px;
}
.main_real{
background-image: url("images/background_jumbo.jpg");
background-repeat:no-repeat;
background-position: right top;
background-size:100% 480px;
width:100%;
}
Check your brackets. The extra curly brace might be throwing you off. If not try get a JSFiddle up.
.main_nav{
width:1200px;
margin:0 auto;
height:90px;
}
}
.logo{
clear:both;
float:left;
padding-top:15px;
}
My divs cover each other which is not intended. I have run it through a debugger and nothing came up...
I'm trying to build a pop-up menu.
This is my html:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="noteBack.css">
</head>
<body>
<div class="container">
<header><span>Note</span></header>
<div class="sub-header"><span>friday 25.7.13 </span></div>
</div>
</body>
</html>
this is my css:
.container{
position:relative;
width:382px;
border:1px solid black;
}
header{
position:absolute;
width:100%;
height:41px;
color:white;
background-color:#de4b4b;
font-weight: bold;
font-size:14px;
margin:auto;
}
header span{
display:inline-block;
padding-left:172px;
padding-top:14px;
padding-bottom:14px;
}
.sub-header{
position:absolute;
width:100%;
height:37px;
background-color:white;
font-size:10px;
margin:auto;
}
.sub-header span{
display:inline-block;
padding:bottom:14px;
}
any help would be appreciated.
JsFiddle
Your positioning system is causing problem ,Try this css
.container{
/*container position should be absolute*/
position:absolute;
width:382px;
border:1px solid black;
}
header{
/*header position should be relative*/
position:relative;
width:100%;
height:41px;
color:white;
background-color:#de4b4b;
font-weight: bold;
font-size:14px;
margin:auto;
}
header span{
display:inline-block;
padding-left:172px;
padding-top:14px;
padding-bottom:14px;
}
.sub-header{
/*sub-header position should be relative*/
position:relative;
width:100%;
height:37px;
background-color:white;
font-size:10px;
margin:auto;
}
.sub-header span{
display:inline-block;
padding:bottom:14px;
}
I am building a navigation bar. This is what the HTML looks like
<div class="navhead">TEXT</div>
<div class="navcontainer">
<div class="button">TEXT</div>
<div class="button">TEXT</div>
<div class="button">TEXT</div>
<div class="button">TEXT</div>
<div class="button">TEXT</div>
</div>
And this is what the CSS looks like.
body {
margin:0px;
padding:0px;
font-family:"futura";
margin-top:75px;
height:100%;
width:100%;
}
.navcontainer {
width:100%;
position:fixed;
background-color:#FFF;
height:60px;
top:24px;
border:solid;
color:#000;
border-top:none;
border-bottom:solid;
border-left:none;
border-right:none;
margin:0px;
padding:0px;
}
.button {
width:20%;
height:60px;
float:left;
background-color:#FFF;
color:#000;
text-align:center;
vertical-align:central;
line-height:60px;
transition:background-color 1.5s ease;
margin:0px;
padding:0px;
}
.button:hover {
width:20%;
height:60px;
float:left;
background-color:#000;
color:#FFF;
text-align:center;
vertical-align:central;
line-height:60px;
margin:0px;
padding:0px;
}
.navhead {
width:100%;
color:#FFF;
background-color:#000;
position:fixed;
top:0px;
height:24px;
text-align:center;
font-size:9px;
line-height:24px;
}
The problem I am having is that the last button to the right isn't flush with the browser window. I don't really know what I'm doing wrong. I added everything I thought I needed to the "body" class, but still there's space... I mean, there's no space on top of it, just to the right of the last button.
jsfiddle here
This is a better way to structure your HTML and a more reliable way to create that menu: http://codepen.io/pageaffairs/pen/xaGuq
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body {
margin:0px;
padding:0px;
font-family:"futura";
margin-top:75px;
height:100%;
width:100%;
}
.navcontainer {
width:100%;
position:fixed;
background-color:#FFF;
top:24px;
border:solid;
color:#000;
border-top:none;
border-bottom:solid;
border-left:none;
border-right:none;
margin:0px;
padding:0px;
list-style: none;
display: table;
table-layout: fixed;
}
.navcontainer li {display: table-cell;}
.navcontainer li a {line-height: 60px;
background-color:#FFF;
color:#000;
text-align:center;
transition:background-color 1.5s ease;
display: block;
text-decoration: none;
}
.navcontainer li a:hover {
background-color:#000;
color:#FFF;
}
.navhead {
width:100%;
color:#FFF;
background-color:#000;
position:fixed;
top:0px;
height:24px;
text-align:center;
font-size:9px;
line-height:24px;
}
</style>
</head>
<body>
<div class="navhead">TEXT</div>
<ul class="navcontainer">
<li>
TEXT
</li>
<li>
TEXT
</li>
<li>
TEXT
</li>
<li>
TEXT
</li>
<li>
TEXT
</li>
</ul>
</body>
</html>
I am trying to make my button horizontal but always not work
I have tried display:block, display:inline, adjust padding & margin
This is my html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="text/html">
<title>Rumah Yatim dan Dlu'afa | Jazirah Indonesia I</title>
<link rel="stylesheet" type="text/css" href="basic.css">
</head>
<body>
<div class="banner_box">
<span>
<img src="images/head.png" height="150px" class="banner_img" alt="logo">
</span>
<p1>
RUMAH TAHFIDZ
</p1>
<br>
<p2>
YATIM PIATU DAN DLU'AFA
<p2>
<ul class="navbutton">
<li>BERANDA</li>
<li>ACARA</li>
<li>INFO</li>
<li>DONASI</li>
<li>PROFIL</li>
</ul>
</div>
</body>
</html>
and this is my css
/* Html */
html {
min-height:100%;
min-width:100%;
max-height:100%;
max-width:100%;
}
/* Background */
body {
background:url(images/body.png);
background-repeat:no-repeat;
background-size:cover;
background-position:center;
background-attachment:fixed;
}
/* Banner */
.banner_box {
width:480px;
height:180px;
padding:5px;
border:4px;
border-style:solid;
border-color:#063;
margin:0 auto;
}
.banner_img {
float:left;
padding-right:10px;
}
p1 {
font-size:30px;
font-weight:bold;
color:#FFF;
text-align:center;
}
p2 {
font-size:20px;
color:#FFF;
text-align:center;
}
/* Button */
.myButton {
background-color:#44c767;
border-radius:28px;
border:1px solid #18ab29;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:17px;
padding:10px 20px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
background-color:#5cbf2a;
}
.myButton:active {
position:relative;
top:1px;
}
ul.navbutton {
position:relative;
list-style-type:none;
}
ul.navbutton li {
display:inline;
}
and this is preview
https://db.tt/uxAm95A2
help my practice
thank you in advance :)
Check this link, if this is what you want:-
http://jsfiddle.net/s7d8D/
ul.navbutton {position: relative;width: 100%;}
Try
ul li {
display:inline-block;
float:left;
}
Thanks a lot to you guys :D :D :D
I have edited my html and css
my html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="text/html">
<title>Rumah Yatim dan Dlu'afa | Jazirah Indonesia I</title>
<link rel="stylesheet" type="text/css" href="basic.css">
</head>
<body>
<div class="banner_box">
<span>
<img src="images/head.png" height="150px" class="banner_img" alt="logo">
</span>
<span class="p1">
RUMAH TAHFIDZ
</span>
<span class="p2">
YATIM PIATU DAN DLU'AFA
</span>
<ul class="navbutton">
<li class="navbutton1">
BERANDA
</li>
<li class="navbutton2">
ACARA
</li>
</li>
<li class="navbutton5">
PROFIL
</li>
<li class="navbutton4">
DONASI
</li>
<li class="navbutton3">
INFO
</ul>
</div>
</body>
</html>
and this is my css
/* Html */
html {
min-height:100%;
min-width:100%;
max-height:100%;
max-width:100%;
}
/* Background */
body {
background:url(images/body.png);
background-repeat:no-repeat;
background-size:cover;
background-position:center;
background-attachment:fixed;
}
/* Banner */
.banner_box {
width:480px;
height:186px;
padding:5px;
border:4px;
border-style:solid;
border-color:#063;
border-radius:35px;
margin:0 auto;
}
.banner_img {
padding-right:10px;
}
.p1 {
font-size:30px;
font-weight:bold;
color:#FFF;
position:relative;
top:-128px;
text-align:center;
}
.p2 {
font-size:20px;
color:#FFF;
position:relative;
top:-129px;
left:190px;
text-align:center;
}
/* Button */
.myButton {
background-color:#44c767;
border-radius:28px;
border:1px solid #18ab29;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:17px;
padding:10px 20px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
background-color:#5cbf2a;
}
.myButton:active {
position:fixed;
top:1px;
}
.navbutton {
position:inline;
width:100%;
}
.navbutton1 {
position:relative;
top:-38px;
left:-30px;
list-style-type:none;
}
.navbutton2 {
position:relative;
top:-58px;
left:80px;
list-style-type:none;
}
.navbutton3 {
position:relative;
top:-118px;
left:170px;
list-style-type:none;
}
.navbutton4 {
position:relative;
top:-98px;
left:240px;
list-style-type:none;
}
.navbutton5 {
position:relative;
top:-78px;
left:330px;
list-style-type:none;
}
works well on firefox, safari and chrome :D :D
preview
https://db.tt/oLPp1Bza