i have a very annoying problem. i have made a design of my site using CSS and it seems to work perfectly in Google Chrome and IE but the CSS designing is not all working in Firefox. what Could be the problem , i tried lots of things its still not working.
As new users are not allowed to post the image. i m unable to explain with the screen shot.
My code in Index.php
<!Doctype html>
<html lang="en">
<title>Online Voting RTC</title>
<head>
<link type="text/css" rel="stylesheet" href="css\style.css">
<script type="text/javascript" src="js\create_text_box.js">
</script>
</head>
<body>
<div id="wapper">
<!-- Define Header -->
<?php include("header.php"); ?>
<!-- End Header -->
<!-- Main content area -->
<?php include("maincontent.php");?>
<!-- End of Main content area -->
<!-- Left Sidebar -->
<?php include("sidebar.php");?>
<!-- End Left Sidebar -->
<!-- Footer -->
<?php include("footer.php");?>
<!-- End of Footer -->
</div>
</body>
</html>
This is the Css portion
body {
background: #ffffff;
margin: 0;
padding: 0;
}
#wrapper {
width: 100%;
height: 100px;
margin: 0;
padding: 0;
border: 0;
float: left;
background: #dddddd;
}
#header {
width: 100%;
height: 100px;
margin: 0;
padding: 0;
border: 0;
float: left;
background: #403cf7;
}
.logo {
float:left;
position:relative;
left:20px;
top:20px;
}
.pagetitle {
float:left;
position:relative;
left:550px;
top:20px;
}
.usermenu {
float:right;
position:relative;
right:20px;
top:20px;
}
#sidebar {
width: 20%;
height: 600px;
margin: 0;
padding: 0;
border: 0;
float: left;
background: #ffff99;
text-align: center;
}
#maincontent {
width: 80%;
height: 600px;
margin: 0;
padding: 0;
border: 0;
float: right;
background: #95dff8;
}
#footer {
width: 100%;
height: 70px;
margin: 0;
padding: 0;
border: 0;
float: left;
background: #272727;
}
/*-----------------------------------------CSS for navigation Menu------------------------*/
#navMenu{
color:#d4d3d3;
font-family:Geneva;
float:left;
}
#navMenu ul li a{
text-decoration:none;
color:#989694;
}
#navMenu ul li a:hover{
color:#f46322;
}
#navMenu ul{
padding:0;
margin:0;
margin-left:25px;
list-style:none;
position:relative;
left:20px;
top:20px;
}
/*----------------------------------------------------------------------------------------*/
i would be very grateful if someone can help me out in this case. Actually i was checking for browser compatibility, and i came across this problem.
Thanks in advance :D
The character “\” (backslash) is not allowed in a URL; change it to “/” (normal slash). Some browsers implicitly convert the incorrect “\” to “/”.
try to remove the type="text/css".
Your code should be look like this:
<link rel="stylesheet" href="css/style.css">
You need to close your link tag
<link type="text/css" rel="stylesheet" href="css/style.css" />
If your css folder is off the route dir of your site you would be better using
<link type="text/css" rel="stylesheet" href="/css/style.css" />
as this will still work if you move your page to a different folder.
You also need to move your title tag within the HEAD element to make the HTML valid.
I had this problem too. Once I removed the z-index of -1 from the container class. the links started working again.
Related
After looking on stackoverflow for really long i could not find an answer to my question, so that's why i am asking it instead!
There's a strange white part between my navigation bar and main container, which i tested by just typing a under the bar
This is my code:
body, html {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
background-color: gray;
}
#wrapper {
margin: 32px 160px 0 160px;
background-color: white;
height: 90%;
}
#nav {
background-color: #48D1CC;
margin: 0;
padding: 0;
}
#nav ul li {
margin: -7px 4px 1px 0;
background-color: #48D1CC;
width: 19.5%;
height: 42px;
display: inline-block;
text-decoration: none;
text-align: center;
color: black;
}
#nav a {
line-height: 42px;
font-family: arial, serif;
font-size: 20px;
}
#nav ul li:hover {
background-color: #40E0D0;
}
#right {
margin: 0;
width: 15%;
height: 10px;
color: black;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="description" content="A test homepage"/>
<meta name="keyword" content="This is a few test key words"/>
<meta name="robots" content="index,follow"/>
<link rel="stylesheet" href="style.css"/>
<link rel="icon" href="favicon.ico"/>
</head>
<body>
<div id="wrapper">
<div id="nav">
<ul>
<li>Home</li>
<li>Help</li>
<li>Contact</li>
<li>Forum</li>
<li>Info</li>
</ul>
</div>
a
<noscript>Please enable JavaScript, you have it disabled</noscript>
</div>
</body>
</html>
I am not sure why this happens, so some help would be great to have.
Your ul has a 16px bottom margin
#nav ul {
margin-bottom: 16px;
}
NOTE the next time you face a similar problem try using Chrome Dev Tools (prssing f12) or FireBug to analyze the elements with an unexpected behaviour
Your <ul> tag is adding padding by default. Override it by adding:
ul{
margin-bottom: -1px;
}
I am refining a responsive navigation menu, and would like to have the menu icon clicked to have the drop down menu instead of the hover effect. I am using a Google jquery so I am not sure if that is all ready scripted in the script src or not, and would I have to create the drop down menu manually in jquery or just an easy CSS or html5 fix. Thanks for any feedback.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dan Meier Website</title>
<meta name="description" content="Responsive Header Nav">
<meta name="author" content="Treehouse">
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
<link rel="stylesheet" href="layoutnew.css">
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</header>
CSS
header {
background: #404040;
width: 100%;
height: 76px;
position: fixed;
top: 0;
left: 0;
border-bottom: 4px solid #4C9CF1;
z-index: 100;
}
#logo{
margin: 20px;
float: left;
width: 200px;
height: 40px;
background: img src="images/menuicon.png" no-repeat center;
display: block;
}
nav {
float: right;
padding: 20px;
}
#nav ul.sub-nav {
display: none;
}
#nav ul.visible {
display: block;
}
ul {
list-style: none;
}
li {
display: inline-block;
float: left;
padding: 10px
}
/*MEDIA QUERY*/
#media only screen and (max-width : 640px) {
header {
position: absolute;
}
#menu-icon {
display:inline-block;
}
nav ul, nav:active ul {
display: none;
position: absolute;
padding: 20px;
background: #fff;
border: 5px solid #444;
right: 20px;
top: 60px;
width: 50%;
border-radius: 4px 0 4px 4px;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
Use CSS to style and hide your menu and do the following:
Load jQuery (I can't see that in your code)
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
And you can do something like this (to show and hide the menu on click)
$('#menu-icon').click( function(){
$('nav ul').toggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
Where "menu" is the variable value of your menu. you can declare it like.....
$(function() {
var menu = $('ul li');
});
hope it will help you..... :D
Rj
I'm working on a brand new website and I'm trying to just get the basic layout going. I am using the ASP.NET MVC 4 generated HTML and I would like to get the DIV named body to fill the available space after making room for the header and thus anchoring the footer to the bottom of the browser window. However, what I'm getting right now is three panels just stacked on top of each other.
I would like a solution that would work if the browser supported HTML5 and one if it didn't
Please note I've inlined comments in the CSS to try and explain what I've tried.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">#Html.ActionLink("Title", "Index", "Home")</p>
</div>
</div>
</header>
<div id="body">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© #DateTime.Now.Year - ACME. All rights reserved.</p>
</div>
<div class="float-right">
<ul id="social">
<li>Facebook</li>
<li>Twitter</li>
</ul>
</div>
</div>
</footer>
#RenderSection("scripts", required: false)
</body>
</html>
CSS
body {
/* I'VE TRIED BOTH OF THE FOLLOWING TO SEE IF THE BODY ITSELF WOULD SPAN */
/* WITH NO OTHER CSS APPLIED TO THE body ELEMENT */
/*height: fill-available;*/
/*height: 100%*/
}
/* general layout
----------------------------------------------------------*/
.float-left {
float: left;
}
.float-right {
float: right;
}
.clear-fix:after {
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
/* main layout
----------------------------------------------------------*/
.content-wrapper {
margin: 0 auto;
max-width: 960px;
}
#body {
background-color: #efeeef;
clear: both;
padding-bottom: 35px;
/* I'VE TRIED BOTH OF THE FOLLOWING TO SEE IF I COULD GET THIS ELEMENT TO SPAN */
/* WITHOUT ANY OTHER CSS APPLIED TO THE body TAG */
/*height: fill-available;*/
/*height: 100%*/
}
.main-content {
/*background: url("../Images/accent.png") no-repeat;*/
padding-left: 10px;
padding-top: 30px;
}
.featured + .main-content {
/*background: url("../Images/heroAccent.png") no-repeat;*/
}
footer {
clear: both;
background-color: #e2e2e2;
font-size: .8em;
height: 100px;
}
/* site title
----------------------------------------------------------*/
.site-title {
color: #c8c8c8;
font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
font-size: 2.3em;
margin: 20px 0;
}
.site-title a, .site-title a:hover, .site-title a:active {
background: none;
color: #c8c8c8;
outline: none;
text-decoration: none;
}
/* social
----------------------------------------------------------*/
ul#social li {
display: inline;
list-style: none;
}
ul#social li a {
color: #999;
text-decoration: none;
}
a.facebook, a.twitter {
display: block;
float: left;
height: 24px;
padding-left: 17px;
text-indent: -9999px;
width: 16px;
}
a.facebook {
background: url("../Images/facebook.png") no-repeat;
}
a.twitter {
background: url("../Images/twitter.png") no-repeat;
}
Just snap the header and footer at the bottom of the page using fixed positioning.
header, footer{ position:fixed; left:0; right:0; z-index:1; }
header{ top:0; }
footer{ bottom:0; }
Then you can give your body the background your div#body had before. The div gets no background and will expand as much as needed.
div#body{ background:none; }
body{ background:#eee; }
This will look like the div would fill the remaining space of the page. Finally give your header and footer a background so that you can't see the background of the body under it.
header, footer{ background:#fff; }
By the way I would suggest removing body margins. body{ margin:0; }
I believe it's a bit impossible to do that with just CSS. You can make a webpage with 100% height like this:
html{
height: 100%;
}
body{
height: 100%;
}
#body{
height: 100%;
}
And then for header, body and footer you can do like this:
header{
height: 100px;
left: 0;
position: absolute;
top: 0;
width: 100%;
background-color: #f00;
}
#body{
bottom: 100px;
left: 0;
position: absolute;
right: 0;
top: 100px;
background-color: #fff;
}
footer{
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
background-color: #ff0;
}
It might work for a bit, but it'll break at some point. When you resize your browser, it'll be running out of room for your #body. If you want a better solution, you should use javascript. In your javascript, calculate how much space you have for your #body, then either adjust the height of header and footer. Or adjust the #body instead.
I'm trying to learn CSS/HTML at the moment so sorry if there is a really obvious solution to this. I'm just using this to practice what I've learnt at the moment, but it keeps going wrong.
After literally hours of messing around with my code, I've finally got my navigation bar to align to the right, without messing everything else up. However it now won't sit in my "header" div. My basic structure is a header div, and within that a div for the logo (aligned to the left), and a div for the navigation menu (aligned to the right).
However after finally getting them aligned correctly, I can't seem to get my menu div in the right place. Here is a picture illustrating what I mean:
http://i.stack.imgur.com/ot5ls.png
I have temporarily changed the colour of my "header" div to black, to better illustrate my problem. As you can see, my menu is underneath the header div, and also slightly to the right?
Here is my HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>T5</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body id="home_p">
<div id="header">
<div id="logo">
</div>
<div id="menu">
<ul id="nav">
<li id="home"></li>
<li id="about"></li>
<li id="portfolio"></li>
<li id="contact"></li>
</ul>
</div>
</div>
</body>
</html>
And here is my CSS:
body
/* T5 */
{background-color:#fff8d3; font-size:100%;}
body#home_p #home{background:url('home.gif') 0 -45px;}
body#about_p #about{background:url('about.gif') 0 -45px;}
body#portfolio_p #about{background:url('portfolio.gif') 0 -45px;}
body#contact_p #about{background:url('contact.gif') 0 -45px;}
#header {
background-color:#000000;
height:45px;
width:1200px;
margin-left:auto;
margin-right:auto;
margin-top:90px;
}
#logo {
background-image('logo.gif');
height:45px;
width:181px;
}
#menu {
width:328px;
float:right;
}
#nav
{position:absolute;}
#nav ul{
display: inline;
}
#nav li{
height:45px;
margin:0px;
padding:0px;
list-style:none;
position:absolute;
right:0px;
top:0px;
display:inline;
float:right;
}
#nav a
{height:45px;
display:block;
}
#home{left:0x; width:62px;}
#home{background:url('home.gif') 0 0;}
#home a:hover{background: url('home.gif') 0 -45px;}
#about{left:62px;width:65px;}
#about{background:url('about.gif') 0 0;}
#about a:hover{background: url('about.gif') 0 -45px;}
#portfolio{left:147px;width:98px;}
#portfolio{background:url('portfolio.gif') 0 0;}
#portfolio a:hover{background: url('portfolio.gif') 0 -45px;}
#contact{left:265px;width:83px;}
#contact{background:url('contact.gif') 0 0;}
#contact a:hover{background: url('contact.gif') 0 -45px;}
I would really appreciate any help. Thanks in advance.
CSS:
body
{
background-color: #fff8d3;
min-width: 600px;
}
body#home_p #home, body#about_p #about, body#portfolio_p #about, body#contact_p #about
{
background-position: 0 -45px !important;
}
#header
{
background-color: black;
height: 45px;
width: 90%;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 90px;
}
#logo
{
background-image: url('logo.gif');
background-color: #fff8d3;
height: 45px;
width: 181px;
}
#nav
{
position: relative;
float: right;
padding: 0;
margin: 0;
}
#nav li
{
height: 45px;
margin: 0 -2px;
padding: 0;
list-style: none;
position: relative;
display: inline-block;
background-position: 0 0;
background-repeat: no-repeat;
position: relative;
}
#nav li:hover
{
background-position: 0 -45px;
}
#nav a
{
height: 100%;
width: 100%;
position: abosolute;
display: block;
}
#home
{
width: 62px;
background-image: url('home.gif');
}
#about
{
width: 65px;
background-image: url('about.gif');
}
#portfolio
{
width: 98px;
background-image: url('portfolio.gif');
}
#contact
{
width: 83px;
background-image: url('contact.gif');
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>T5</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body id="home_p">
<div id="header">
<!-- The floating elements have to go before the main content, or they will appear below. -->
<ul id="nav">
<li id="home" title="Home"></li>
<li id="about" title="About"></li>
<li id="portfolio" title="Portfolio"></li>
<li id="contact" title="Contact"></li>
</ul>
<div id="logo"></div>
</div>
</body>
</html>
By setting position:absolute on #nav but not giving it coordinates (left/top), it falls somewhere else. Add a border to it and you'll see. But let's put that aside:
You don't need the absolute position on the menu items. Set each to float:left with a margin
Set position:relative on #header, then anchor #nav to the top right with position:absolute
Since every link shares the same hover state, declare a:hover only once changing the background-position
Use an accessible image replacement method, keep the actual text in your HTML
Here's a scaffold for you to build on: http://jsfiddle.net/Pz3Q3/
I strongly recommend you to read this: http://na.isobar.com/standards/
The width you are setting on your #menu is causing havoc throughout your CSS. Your "#nav ul" isn't doing anything. But ultimately the problem is that your #logo needs to have a float: left;
All the absolute positioning is unnecessary. Use this:
#logo {
background-image('logo.gif');
height:45px;
width:181px;
float: left;
}
#menu {
float: right;
}
#nav li{
list-style:none;
display: inline;
}
I'm working on a CSS layout, but I don't understand why the background color of my navigation bar doesn't show up unless I add overflow: hidden to the CSS. Can someone explain to me what's going on? Thanks :)
My CSS file:
#import "reset.css"; /* Meyer's CSS reset */
body { background-color: #f3f3f3; font: 15px sans-serif; }
#wrapper {
width: 1000px;
margin: 0 auto;
}
#navigation {
width: inherit;
margin-top: 20px;
background-color: #ccc;
overflow: hidden;
}
#navigation li {
float: left;
}
#navigation li a {
display: block;
padding: 10px 10px;
text-decoration: none;
color: #000;
}
#navigation li a:hover {
background-color: #aaa;
}
My HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>
<div id="wrapper">
<div id="navigation">
<ul>
<li>Nav0</li>
<li>Nav1</li>
<li>Nav2</li>
<li>Nav3</li>
<li>Nav4</li>
<li>Nav5</li>
</ul>
</div>
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
overflow: hidden causes the container to establish a new formatting context within which to contain the floats. Without it, the floated elements form their own formatting contexts and display independently of the container, out of normal flow.
You should use a clear fix class (either an empty element after the <ul> or use a clear fix class on the <ul> so the browser will properly clear the floats.
.clearfix {
zoom:1;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
Is one I use most of the time. Here is a fiddle of it in action: http://jsfiddle.net/gpQ2f/1/