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
Related
I have the following problem: When I use absolute positioning for the #mobile-nav-content container for my mobile menu, the elements of the ul in it are appearing top of each other.
I want them to be stacked under each other with background-color:grey; (They do not need to be hidden, I will work on that part later).
I want the elements of the ul to be over each other and the background color to be BLACK.
This is my code, what do I need to change to get this to work?
/*===FARBEN===
BLAU:#1F4E8C
GRAU:#3D3F45
HELLGRAU: #E5E5E5
ROT: #A62C21
*/
/* GLOBAL */
body {
margin: 0;
font-family: 'Raleway', 'Lato', 'Helvetica Neue', 'Arial', sans-serif;
font-size:16px;
}
* {
box-sizing: border-box;
}
/* GENERELLES */
.clearfix::after{
content: "";
display: block;
clear: both;
}
/*===NAVIGATIONSLEISTE===*/
.header-nav{
width:100%;
height:50px;
background-color:#3d3f45;
position:relative;
font-size:25px;
font-weight:bold;
}
.header-nav a>img{
position:absolute;
height:30px;
width:auto;
top:10px;
left:10px;
}
.header-nav ul>li{
display:inline-block;
height:100%;
}
.header-nav ul{
margin:0;
padding:0;
position:absolute;
height:100%;
right:10px;
}
.header-nav ul>li>a{
display:inline-block;
margin-top:10px;
}
.header-nav ul>li>a:link{color:black;text-decoration:none;}
.header-nav ul>li>a:hover{color:black;text-decoration:none;}
.header-nav ul>li>a:active{color:black;text-decoration:none;}
.header-nav ul>li>a:visited{color:black;text-decoration:none;}
#active{
background-color:#A62C21;
}
/* MOBILES NAVIGATIONSMENÜ */
#mobile-nav-dropdown{
position:relative;
}
#mobile-nav-content{
position:absolute;
right:0;
top:50px;
}
#mobile-nav-button{
color:white;
float:right;
font-size:30px;
border: 2px solid white;
padding-left:9px;
padding-right:9px;
margin-top:5px;
margin-right:5px;
}
#mobile-nav-content>ul>li{
display:block;
background-color:#3D3F45;
padding-left:20px;
padding-right:20px;
}
#mobile-nav-content>ul{
margin-right:40px;
}
/* HEADER-BANNER */
#header-banner{
background: url("../img/hintergrund.jpg") no-repeat;
width:100%
height:0;
padding-top:20.83%;
background-size:contain;
}
#header-banner-klein{
background: url("../img/hintergrund-klein.jpg") no-repeat;
width:100%
height:0;
padding-top:15.625%;
background-size:contain;
}
/* GRID SYSTEM */
.container{
width:95%;
margin-left:auto;
margin-right:auto;
}
.row::after{
content:"";
clear:both;
display:block;
border: 0 !important;
}
[class*="col-"]{
float:left;
padding:10px;
}
.col-1{width:16.6666%;}
.col-2{width:33.3333%;}
.col-3{width:50%; }
.col-6{width:100%; }
/* GRID SYSTEM SICHTBARKEIT
.container,.container *{
border:1px solid #91c4ff;
}
[class*="col-"]{
background-color:#bfddff;
}
p {background-color:#91c4ff;
padding:0;
margin:0;
color:#fff;
text-align:center;
} */
/* Responsive Design */
#media(max-width:768px){
.col-1{width:33.3333%;}
.col-2{width:50%;}
.col-3{width:100%;}
}
#media(max-width:480px){
.col-1{width:50%;}
.col-2{width:100%;}
.col-3{width:100%;}
}
/* GRID SYSTEM FIX */
.header-nav *{
padding:0;
border:0;
}
.header-nav .container{
width:100%;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Startseite</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="src/css/styles.css">
</head>
<body>
<!-- NAVIGATIONSLEISTE -->
<nav class="header-nav">
<!-- <div class="container">
<div class="row">
<div class="col-6">
<a href="index.html">
<img src="src/img/webdesign-logo.png">
</a>
<ul>
<li id="active">Startseite</li>
<li>Leistungen</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</div>
</div>
</div> -->
<div class="container">
<div class="row">
<div class="col-6 clearfix">
<a href="index.html">
<img src="src/img/webdesign-logo.png">
</a>
<div id="mobile-nav-dropdown" class="clearfix">
<div id="mobile-nav-button">≡</div>
<div id="mobile-nav-content" class="clearfix">
<ul>
<li id="active">Startseite</li>
<li>Leistungen</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
<!-- HEADER-BANNER -->
<header id="header-banner"></header>
</body>
</html>
You are very close with the code you have, you just need to make one change. The problem is being caused by height:100% in your .header-nav ul CSS. What this does is take 100% of the container height (i.e. #mobile-nav-dropdown ), but for this to work the container must have been given a specific height.
In this case, we don't want to give the nav dropdown and ul a specific height, but instead to be auto so it will be the height it needs to accommodate its contents. So you just need to change the height in .header-nav ul to auto:
.header-nav ul{
margin:0;
padding:0;
position:absolute;
right:10px;
/* Change height from 100% to auto (or remove it altogether as auto is the default value ) */
height:auto;
}
When you start working on the code to show/hide the menu, this should work with it!
Working Example:
/*===FARBEN===
BLAU:#1F4E8C
GRAU:#3D3F45
HELLGRAU: #E5E5E5
ROT: #A62C21
*/
/* GLOBAL */
body {
margin: 0;
font-family: 'Raleway', 'Lato', 'Helvetica Neue', 'Arial', sans-serif;
font-size:16px;
}
* {
box-sizing: border-box;
}
/* GENERELLES */
.clearfix::after{
content: "";
display: block;
clear: both;
}
/*===NAVIGATIONSLEISTE===*/
.header-nav{
width:100%;
height:50px;
background-color:#3d3f45;
position:relative;
font-size:25px;
font-weight:bold;
}
.header-nav a>img{
position:absolute;
height:30px;
width:auto;
top:10px;
left:10px;
}
.header-nav ul>li{
display:inline-block;
height:100%;
}
.header-nav ul{
margin:0;
padding:0;
position:absolute;
height:auto;
right:10px;
}
.header-nav ul>li>a{
display:inline-block;
margin-top:10px;
}
.header-nav ul>li>a:link{color:black;text-decoration:none;}
.header-nav ul>li>a:hover{color:black;text-decoration:none;}
.header-nav ul>li>a:active{color:black;text-decoration:none;}
.header-nav ul>li>a:visited{color:black;text-decoration:none;}
#active{
background-color:#A62C21;
}
/* MOBILES NAVIGATIONSMENÜ */
#mobile-nav-dropdown{
position:relative;
}
#mobile-nav-content{
position:absolute;
right:0;
top:50px;
}
#mobile-nav-button{
color:white;
float:right;
font-size:30px;
border: 2px solid white;
padding-left:9px;
padding-right:9px;
margin-top:5px;
margin-right:5px;
}
#mobile-nav-content>ul>li{
display:block;
background-color:#3D3F45;
padding-left:20px;
padding-right:20px;
}
#mobile-nav-content>ul{
margin-right:40px;
}
/* HEADER-BANNER */
#header-banner{
background: url("../img/hintergrund.jpg") no-repeat;
width:100%
height:0;
padding-top:20.83%;
background-size:contain;
}
#header-banner-klein{
background: url("../img/hintergrund-klein.jpg") no-repeat;
width:100%
height:0;
padding-top:15.625%;
background-size:contain;
}
/* GRID SYSTEM */
.container{
width:95%;
margin-left:auto;
margin-right:auto;
}
.row::after{
content:"";
clear:both;
display:block;
border: 0 !important;
}
[class*="col-"]{
float:left;
padding:10px;
}
.col-1{width:16.6666%;}
.col-2{width:33.3333%;}
.col-3{width:50%; }
.col-6{width:100%; }
/* GRID SYSTEM SICHTBARKEIT
.container,.container *{
border:1px solid #91c4ff;
}
[class*="col-"]{
background-color:#bfddff;
}
p {background-color:#91c4ff;
padding:0;
margin:0;
color:#fff;
text-align:center;
} */
/* Responsive Design */
#media(max-width:768px){
.col-1{width:33.3333%;}
.col-2{width:50%;}
.col-3{width:100%;}
}
#media(max-width:480px){
.col-1{width:50%;}
.col-2{width:100%;}
.col-3{width:100%;}
}
/* GRID SYSTEM FIX */
.header-nav *{
padding:0;
border:0;
}
.header-nav .container{
width:100%;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Startseite</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="src/css/styles.css">
</head>
<body>
<!-- NAVIGATIONSLEISTE -->
<nav class="header-nav">
<div class="container">
<div class="row">
<div class="col-6 clearfix">
<a href="index.html">
<img src="src/img/webdesign-logo.png">
</a>
<div id="mobile-nav-dropdown" class="clearfix">
<div id="mobile-nav-button">≡</div>
<div id="mobile-nav-content" class="clearfix">
<ul>
<li id="active">Startseite</li>
<li>Leistungen</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
<!-- HEADER-BANNER -->
<header id="header-banner"></header>
</body>
</html>
I write HTML file and CSS file and operate in Chrome but I think CSS file doesn't apply to HTML file...
I don't know why... but I think I documented code properly
here is directory
enter image description here
and this is What Problematic code
* {
margin:0;
padding:0;
}
body {
font-family:"맑은 고딕", "돋움";
font-size:12px;
color:#444444;
}
ul {
list-style-type:none;
}
.clear {
clear:both;
}
#wrap {
width:970px;
margin:0 auto;
}
/* 상단 헤더 */
header {
height:100px;
position:relative;
}
header #logo {
position:absolute;
top:10px;
left:20px;
}
header #top_menu {
position:absolute;
top:10px;
left:770px;
}
header #main_menu{
width:757px;
height:38px;
background-image:url("../img/main_menu_bg.png");
background-repeat:no-repeat;
position:absolute;
top:40px;
left:210px;
}
header #main_menu li {
display:inline-block;
margin:12px 30px 0 50px;
font-size:13px;
}
header #main_menu a:link {
text-decoration:none;
color:#ffffff;
}
header #main_menu a:hover {
text-decoration:none;
color:#ffffff;
}
header #main_menu a:visited {
text-decoration:none;
color:#ffffff;
}
header #main_menu a:active {
text-decoration:none;
color:#ffffff;
}
aside {
width:190px;
float:left;
}
aside #login_box {
width:186px;
heigth:120px;
border:solid 1px #dddddd;
}
aside #login_title {
margin:10px 0 0 10px;
}
aside #input_button {
margin:10px 0 0 10px;
}
aside #login_input {
float:left;
}
aside #login_btn {
float:left;
margin:3px 0 0 5px;
}
aside #login_input input {
width:100px;
height:20px;
border:solid 1px #dddddd;
}
aside #login_input li {
margin-top:2px;
}
aside #join_search {
margin: :10px 0 0 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>클래식기타 커뮤니티</title>
<link rel="stylesheet" type=="text/css" href="/css/common.css?">
<link rel="stylesheet" type=="text/css" href="/css/header.css?">
<link rel="stylesheet" type=="text/css" href="/css/footer.css?">
<link rel="stylesheet" type=="text/css" href="/css/main.css?">
</heda>
<body>
<div id="wrap">
<header>
<a href="index.html"><img id="logo" src="img/logo.png">
<nav id="main_menu">
<ul>
<li>자유 게시판<li>
<li>기타 연주<li>
<li>공동 구매<li>
<li>연주회 안내<li>
<li>회원 게시판<li>
</ul>
</nav>
</header> <!-- header -->
<aside>
<article id="login_box">
<img id="login_title" src="img/ttl_login.png">
<div id="input_button">
<ul id="login_input">
<li><input type="text"></li>
<li><input type="password"></li>
</ul>
<img id="login_btn" src="img/btn_login.gif">
</div>
<article>
</aside>
</div><!-- wrap -->
</body>
</html>
and this is the output enter image description here
so I want to know why CSS file doesn't work :/
There seems to be some problem with the file paths specified in the link href of the css files. Instead of mentioning "/css/common.css" if you write "css/common.css". The styles should load given the directory structure is as posted in the image.
Check your css pathing used in the css, according to your screenshot you need to remove the / from the start, also i adivce you to open the consil of chrome that way you cann see the pathing issue
If you check the console of the browser you will most probably have the failing CSS includes and you will see from where it tries to load them.
By using href="/css/common.css" it tries to load the styles from the base domain so, for example if your URL to access the website is: http://localhost/Ch12_Make_commuSite/index.html the CSS files will be loaded from here: http://localhost/css/common.css which is definitely not correct.
It works exactly like the src for the images which you got correctly.
You can read more here
Here is a solution that should work
* {
margin:0;
padding:0;
}
body {
font-family:"맑은 고딕", "돋움";
font-size:12px;
color:#444444;
}
ul {
list-style-type:none;
}
.clear {
clear:both;
}
#wrap {
width:970px;
margin:0 auto;
}
/* 상단 헤더 */
header {
height:100px;
position:relative;
}
header #logo {
position:absolute;
top:10px;
left:20px;
}
header #top_menu {
position:absolute;
top:10px;
left:770px;
}
header #main_menu{
width:757px;
height:38px;
background-image:url("../img/main_menu_bg.png");
background-repeat:no-repeat;
position:absolute;
top:40px;
left:210px;
}
header #main_menu li {
display:inline-block;
margin:12px 30px 0 50px;
font-size:13px;
}
header #main_menu a:link {
text-decoration:none;
color:#ffffff;
}
header #main_menu a:hover {
text-decoration:none;
color:#ffffff;
}
header #main_menu a:visited {
text-decoration:none;
color:#ffffff;
}
header #main_menu a:active {
text-decoration:none;
color:#ffffff;
}
aside {
width:190px;
float:left;
}
aside #login_box {
width:186px;
heigth:120px;
border:solid 1px #dddddd;
}
aside #login_title {
margin:10px 0 0 10px;
}
aside #input_button {
margin:10px 0 0 10px;
}
aside #login_input {
float:left;
}
aside #login_btn {
float:left;
margin:3px 0 0 5px;
}
aside #login_input input {
width:100px;
height:20px;
border:solid 1px #dddddd;
}
aside #login_input li {
margin-top:2px;
}
aside #join_search {
margin: :10px 0 0 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>클래식기타 커뮤니티</title>
<link rel="stylesheet" type=="text/css" href="css/common.css?">
<link rel="stylesheet" type=="text/css" href="css/header.css?">
<link rel="stylesheet" type=="text/css" href="css/footer.css?">
<link rel="stylesheet" type=="text/css" href="css/main.css?">
</heda>
<body>
<div id="wrap">
<header>
<a href="index.html"><img id="logo" src="img/logo.png">
<nav id="main_menu">
<ul>
<li>자유 게시판<li>
<li>기타 연주<li>
<li>공동 구매<li>
<li>연주회 안내<li>
<li>회원 게시판<li>
</ul>
</nav>
</header> <!-- header -->
<aside>
<article id="login_box">
<img id="login_title" src="img/ttl_login.png">
<div id="input_button">
<ul id="login_input">
<li><input type="text"></li>
<li><input type="password"></li>
</ul>
<img id="login_btn" src="img/btn_login.gif">
</div>
<article>
</aside>
</div><!-- wrap -->
</body>
</html>
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;
}
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 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;
}