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>
Related
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 trying to create a fixed horizontal navigation that stretches to the browser's width.The problem I am having is that the links in the navigation bar move when i resize the browser window. How can I make it so that when you resize the web browser, the links(Home, Services...) stay fixed to the right and vertically in-line with the #content.?
Here is my html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
</head>
<body>
<!--Navigation-->
<div id="fixed_bar">
<div id="navigation">
<ul>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<!--Content-->
<div id="content">
<!--Content-->
</div>
</body>
</html>
And my CSS:
body {
background-color:yellow;
color:black;
width:100%;
padding:0;
margin-left:auto;
margin-right:auto;
font-size:16px;
font-family:"Sans-Serif", Helvetica, Arial;
}
/*Navigation*/
#navigation {
background-color:green;
color:black;
width:100%;
height:60px;
margin:0;
padding:0;
position:fixed;
top:0;
z-index:99;
}
#navigation ul {
list-style:none;
display:inline-block;
margin:0;
padding:0;
float:right;
overflow:hidden;
}
#navigation ul li{
padding:10px;
float:left;
clear:right;
}
#navigation ul li a{
background-color:inherit;
color:black;
vertical-align:middle;
text-decoration:none;
text-transform:uppercase;
font-size:15px;
font-family:"Lato", sans-serif;
letter-spacing:1px;
line-height:40px;
clear:both;
}
/*Content*/
#content {
padding-top:50px;
margin:auto;
width:900px;
color:black;
background-color:white;
}
I have been trying to solve this for hours, help would be much appreciated
You can apply your actual #navigation CSS rules to your #fixed_bar div and give #navigation the same width of the content (900px), let the browser calculate the margins with automatic margins and align the text to the right, so the ul will be at the right of #navigation while you keep the background, etc in #fixed_bar.
See it here: http://jsbin.com/bibulewa/1
And this is the CSS I've modified:
#fixed_bar {
background-color:green;
color:black;
width:100%;
height:60px;
margin:0;
padding:0;
position:fixed;
top:0;
z-index:99;
}
#navigation {
width: 900px;
text-align: right;
margin: auto;
}
Not sure if this is what you're looking for
I gave the ul an absolute position and align to the right:2%.
A top margin of 5px.
Remove the float and display the list as inline-block
Here's a jsfiddle - http://jsfiddle.net/rezasan/kE7LK/
/*Navigation*/
#navigation {
background-color:green;
color:black;
width:100%;
height:60px;
margin:0;
padding:0;
position:fixed;
top:0;
z-index:99;
}
#navigation ul {
list-style:none;
position:absolute;
right:2%;
display:inline-block;
margin:5px;
padding:0;
overflow:hidden;
width:60%;
text-align:right;
}
#navigation ul li{
padding:5px;
display:inline-block;
}
#navigation ul li a{
background-color:inherit;
color:black;
vertical-align:middle;
text-decoration:none;
text-transform:uppercase;
font-size:15px;
font-family:"Lato", sans-serif;
letter-spacing:1px;
line-height:3px;
clear:both;
}
set navigation styling:
left:0;
right:0;
html
<footer>
<div class="Footer_Container">
<div class="Footer_Rows">
<div class="span3" id="sspan1">
<h5>CONTACT</h5>
<ul>
<li>chris#pagemotion.com</li>
<li>(03) 013 3134114</li>
</ul>
</div><!--end of span-->
<div class="span3" id="sspan2">
<h5>FOLLOW</h5>
<ul>
<li>Facebook</li>
<li>Twitter</li>
</ul>
</div><!--end of span-->
<div class="span3" id="sspan3">
<h5>VISIT</h5>
<ul>
<li>6700 N New York Ave Suite 233 Portland, OR 97203</li>
</ul>
</div><!--end of span-->
<div class="span3" id="sspan4">
<img src="Image/mylogo.png" class="mylogo">
<!-- <img src="Image/rdio-icon.png" class="sg"> -->
</div><!--end of span-->
</div><!--end of FooterRows-->
</div><!--end of FooterContainer-->
css
footer{
width:100%;
height:100%;
min-height:150px;
padding:30px 0 80px;
color:#fff;
font-size:14px;
line-height:1.6;
background:#222;
position:relative;
}
.Footer_Container{
max-width:1080px;
width:86%;
min-height:150px;
padding-right:10px;
padding-left:10px;
margin:0px auto;
/*box-sizing:border-box;*/
display:block;
background-color:red;
}
.Footer_Rows{
margin-right:-10px;
margin-left:-10px;
padding:25px;
overflow:auto;
/*margin:0px auto;*/
}
.span3{
width:16%;
position:relative;
padding-right:30px;
padding-left:30px;
min-height:1px;
float:left;
font-size:14px;
color:#fff;
font-family:"colfax-web";
background-color:blue;
}
.span3 h5{
margin:0 0 10px;
font-size:16px;
font-style:normal;
}
.span3 ul{
margin:0;
padding:0;
list-style:none;
}
.span3 ul li{
display:list-item;
/*text-align:-webkit-match-parent;*/
box-sizing:border-box;
}
.span3 ul li a{
font-size:14px;
font-family:"colfax-web";
color:#fff;
text-decoration:none;
-webkit-trasition:all .2s ease-in-out;
transition:all .s2 ease-in-out;
}
#sspan1{
margin-left:10px;
}
#sspan4{
margin-left:10px;
}
.mylogo{
width:150px;
height:100px;
}
please copy and paste i cant put link here , i want to make this responsive , which will be 2 box on top , 2 box on bottom . but i have no idea how to make it can any one show me how ?
so is like this:
A B
C D
thank ~
Are you looking for something like this?
http://jsfiddle.net/62uzV/
.span3{
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
footer {
width:100%;
height:100%;
min-height:150px;
padding:30px 0 80px;
color:#fff;
font-size:14px;
line-height:1.6;
background:#222;
position:relative;
}
.Footer_Container {
max-width:1080px;
width:86%;
min-height:150px;
padding-right:10px;
padding-left:10px;
margin:0px auto;
/*box-sizing:border-box;*/
display:block;
background-color:red;
}
.Footer_Rows {
margin-right:-10px;
margin-left:-10px;
padding:25px;
overflow:auto;
/*margin:0px auto;*/
}
.span3 {
width:50%;
padding-right:30px;
padding-left:30px;
min-height:1px;
float:left;
font-size:14px;
color:#fff;
font-family:"colfax-web";
background-color:blue;
}
.span3 h5 {
margin:0 0 10px;
font-size:16px;
font-style:normal;
}
.span3 ul {
margin:0;
padding:0;
list-style:none;
}
.span3 ul li {
display:list-item;
/*text-align:-webkit-match-parent;*/
box-sizing:border-box;
}
.span3 ul li a {
font-size:14px;
font-family:"colfax-web";
color:#fff;
text-decoration:none;
-webkit-trasition:all .2s ease-in-out;
transition:all .s2 ease-in-out;
}
.mylogo {
width:150px;
height:100px;
}
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;
}
This is kinda embarrasing for me, since ive been working with CSS for such a long time for a living, that i would be considered an expert.
Yet! Experts also learn new things daily.
Well, my problem is, that this sample code with a full stretched Bg image is working fantastic in both Chrome and FF, it should work in IE too (atleast IE8) But i just cant get it to work, the image shows but the text wraps underneat the image like if the content box was not set to relative positioning.
I hope you can help me out.
<html>
<head>
<style> body, html {
margin:0px; padding:0px;
background-color:#fff;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
}
img.bg {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
#media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
#spacer { height:20px; }
#content { width:900px; margin:0 auto; padding:10px; position:relative; }
#header { height:117px; }
#logo { float:left; width:101px; height:117px; }
#menu { float:left; height:50px; width:749px; margin-left:50px; margin-top:70px; }
#menu ul { list-style:none; margin:0px; padding:0px; }
#menu ul li { padding:0px; margin:0px; float:left; line-height:50px; padding-left:10px; margin-right:10px; }
h1 { margin:0px; padding:0px; color:#333333; font-size:16px; text-decoration:underline; margin-bottom:10px; }
#menu ul li a { color:#333; text-decoration:none; }
#lftmen { float:left; width:140px; margin-top:70px; }
#lftmen ul { margin:0px; padding:0px; list-style:none; }
#lftmen ul li { height:30px; background-image:url(img/lftbg.png); border:1px dashed #999; margin-bottom:10px; }
#lftmen ul li a { color:#fff; line-height:30px; text-decoration:none; margin-left:20px; font-size:14px; }
#lftmen ul li a:hover { color:#333; }
#midcont { line-height:16px; float:left; margin-top:60px; background-image:url(img/contbg.png); width:729px; margin-left:10px; font-size:12px; padding:10px; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<img src="img/bg.jpg" class="bg" />
<div id="content">
<div id="header">
<div id="logo"><img src="img/logo.png" /></div>
<div id="menu">
<ul>
<li>Opdatering: Zhoop rekrutere butikker i Aalborg</li>
</ul>
</div>
<div style="clear:both;"></div>
</div>
<div id="lftmen">
<ul>
<li>Forside</li>
<li>Se video</li>
<li>Udbyd tilbud</li>
<li>Information</li>
<li>Kontakt</li>
<li>Hent: android</li>
</ul>
</div>
Well first of all why would you use <img/> to define the page background pattern.
It is more suitable to define this kind of background directly in css.
e.g.:
body {
background: url(img/bg.jpg) 0 0 no-repeat;
...
}