I am creating a webpage and I had completed a basic layout which was working completely fine. All the divisons were of proper size. But suddenly, i pressed some button accidentally and now it has become skewed. It has actually become smaller scaled.
Can someone please help me find out what is the bug here? I am trying but I am not sure, how to debug this.
Thanks.
HTML File:
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div id="header">
<h1>ABCD</h1
</div>
<div id="subheader">
<h3>Certified General Accountant </h3>
</div>
<div id="sidebar">
Hello
Hi
How
</div>
<div id="content">
Main Body!!
</div>
<div id="footer">
Contact Us
</div>
</body>
</html>
CSS FIle:
#header
{
background-image:url('texture.jpg');
height:10%;
font-variant:small-caps;
font-family:Lucida Console;
font-size: large;
line-height:480%;
margin:0;
padding:0;
}
#subheader
{
background-color:red;
font-family:Lucida Console;
width:100%;
height:4%;
margin:0;
padding:0;
text-align:right;
}
#sidebar
{
width:10%;
height:80%;
float:left;
background-color:yellow;
margin:0;
padding:0;
}
#content
{
background-color:green;
float:left;
width:90%;
height:80%;
margin:0;
padding:0;
}
#footer
{
background-color:blue;
margin:0;
padding:0;
}
h1
{
margin:0;
}
h3
{
margin:0;
}
Found it. The tag for h1 is missing > . Amazed how HTML works !! Feeling silly now, couldn't spot this earlier. – TorontoSummers
Related
header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
background-color:gainsboro;
height:548px;
width:100px;
float:left;
padding:px;
}
body {
background-color:Lavender;
}
article {
float:right;
height:1250px;
width:580px;
text-align:center;
padding:1em;
background-color:#5DADE2;
}
section {
float:left;
height:1320px;
width:600px;
text-align:center;
padding:0em;
background-color:#ECF0F1
}
footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
div.container {
width:100%;
border:2px solid purple;
}
.clearfix {
overflow: auto;
}
.clear {
clear:right;
line-height:0;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Links - Bannerlord Assignment</title>
<link rel="stylesheet" type="text/css" a href="BannerlordTheme2.css">
</head>
<div class="container">
<body>
<header>
<h1>Further Information</h1>
</header>
<nav>
Home<br>
About<br>
Media<br>
</nav>
</body>
</div>
<br class="clear" />
</html>
Please do bear with me I am aware this is mind-numbingly basic but I need to start somewhere and I both can't find an answer and can't find a reason why.
My nav bar does not correspond to my div's border and this is less of a problem but how do I get it so that the nav bar and the header don't overlap when I use the border because as of now the div border is only working on the header.
you need overflow hidden to container.
header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
background-color:gainsboro;
height:548px;
width:100px;
float:left;
padding:px;
}
body {
background-color:Lavender;
}
article {
float:right;
height:1250px;
width:580px;
text-align:center;
padding:1em;
background-color:#5DADE2;
}
section {
float:left;
height:1320px;
width:600px;
text-align:center;
padding:0em;
background-color:#ECF0F1
}
footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
div.container {
width:100%;
border:2px solid purple;
overflow: hidden;
}
.clearfix {
overflow: auto;
}
.clear {
clear:right;
line-height:0;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Links - Bannerlord Assignment</title>
<link rel="stylesheet" type="text/css" a href="BannerlordTheme2.css">
</head>
<div class="container">
<body>
<header>
<h1>Further Information</h1>
</header>
<nav>
Home<br>
About<br>
Media<br>
</nav>
</body>
</div>
<br class="clear" />
</html>
Have you thought about adding a 5px top margin to your nav bar, this will account for the 5px border... I think. I'm also still learning. Best of luck, I'll be watching.
Also you always want body to be the outer most thing of what is rendered on the page. So any containers need to be inside of it.
Problem is a) your body tag is in the wrong place (should start just before head, and end just before html tag and b) there is no height declaration on the container.
Adding this code to the CSS:
html,body {
background-color:Lavender;
height:100%;
}
div.container {
width:100%;
height:100%;
border:2px solid purple;
}
and having this to html should work.
<body>
<div class="container" style = "border: solid yellow;">
<header>
<h1>Further Information</h1>
</header>
<nav>
Home<br>
About<br>
Media<br>
</nav>
</div>
<br class="clear" />
</body>
</html>
I can't get the hover CSS effect to work on my divs.
Here is the HTML:
<!doctype html><!--HTML5-->
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="chaosMain.css"/>
</head>
<body>
<div id="featuredContent1"></div>
</body>
</html>
Here is the CSS for it:
html{
margin:0px;
padding:0px;
height:100%;
width:100%
}
body{
margin:0px;
padding:0px;
height:100%;
width:100%;
background-color:#F0F0F0;
color:#F0F0F0;
}
div{
position:fixed;
}
#featuredContent1{
margin-left:8.5%;
margin-top:11.7%;
width:23%;
height:40%;
background-color:#F26E24;
z-index:-1;
border-radius:2px;
}
#featuredContent1:hover {
width:25%;
height:42%;
}
I can't find what is wrong with it, but the hover has no effect whatsoever.
remove this line from #featuredContent1 style
z-index:-1;
code
html{
margin:0px;
padding:0px;
height:100%;
width:100%
}
body{
margin:0px;
padding:0px;
height:100%;
width:100%;
background-color:#F0F0F0;
color:#F0F0F0;
}
div{
position:fixed;
}
#featuredContent1{
margin-left:8.5%;
margin-top:11.7%;
width:23%;
height:40%;
background-color:#F26E24;
border-radius:2px;
}
#featuredContent1:hover {
width:25%;
height:42%;
background:red;
}
<body>
<div id="featuredContent1"></div>
</body>
As shown in A B's answer, this is caused by the negative z-index. The div is technically hidden behind the body, so the mouse is never really hovering on the div.
Viewed from the "side" it would look like this:
------------------ (top)
------------------ body
------------------ element
So, your mouse is always hovering the body, but never hovering the element.
How do I get the navigation bar to appear next to the logo instead of breaking to the next line under it?
I've tried several changes but it keeps going onto the next line. I'm trying to avoid using floats because I was told they are not good to use. I want it to look like the navigation bar on this website in this end:
http://www.freecsstemplates.org/
I would like to understand how it is being done on that website.
I am just very confused as to how the process is to work.
CSS:
#header
{
background-image:url('menubg.png');
background-repeat:repeat-x;
}
#logo
{
display:inline-block;
}
#menu ul
{
display:inline-block;
list-style-type:none;
padding: 0px;
margin:0px;
}
#menu li
{
display:inline-block;
margin:0px;
padding:0px;
}
#menu a:link,a:visited
{
display:inline-block;
text-transform:lowercase;
width:auto;
font-weight:bold;
padding-left:47.5px;
padding-right:47.5px;
padding-top:9px;
padding-bottom:9px;
text-decoration:none;
color:#57fafc;
text-align:center;
background-color:#62d2d3;
}
#menu a:hover,a:active
{
background-color:#7ce5e6;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mainstyle.css">
<title>Blah</title></head>
<body>
<div id="header">
<div id="logo"><img src="logo.png" /></div>
<div id="menu">
<ul>
<li>Home</li><li>Contact</li><li>About</li><li>Products</li><li>Design-a-Tee</li><li>Reviews/Testimonials</li>
</ul>
</div>
</div>
</body>
</html>
add this css
#logo {
float:left;
}
#menu {
float:right;
}
#header {
clear: both;
overflow: auto;
}
I am trying to replicate layout of html5doctor.com. I have IE8 installed here.
I am able to produce following output:
HTML
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<div id="header">
</div>
<div id="nav">
<div id="navmenus">
<ul id="navmenulist">
<li class="menu" id="id1">
Home
<li class="menu">
Products
<li class="menu">
About Us
</ul>
</div>
</div>
<div id="content" >
<div id="article"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</body>
</html>
CSS
/*I have added CSS Reset from http://meyerweb.com/eric/tools/css/reset/
Just deleted it for simplicity
*/
body
{
margin:0px;
padding:0px;
background-color:#E8E8E8;
text-align:center;
}
#header
{
background-color:#1F7ADB;
width:100%;
height:150px;
}
#nav
{
background-color:#1F7ADB;
width:100%;
text-align:center;
}
#navmenus
{
background-color:#14B3F7;
width:900px;
text-align:left;
}
li.menu
{
list-style:none;
display:inline;
height:35px;
padding:12px;
}
li.menu:hover
{
background-color:yellow;
}
li.menu a
{
text-decoration:none;
font-family:Arial;
font-size:18px;
}
#content
{
width:900px;
background-color:#ffffff;
height:1300px;
}
Notice li.menu:hover in above CSS. It is not working in IE8. So I added <!DOCTYPE html> as suggested at this thread.
It made hover work but now it broke the layout as follows:
I will like to get result that will work on IE8 first and then will like to learn work around that will work consistently in major (may not be in IE6) browser. And will glad to stick to CSS and HTML (no script). And above all will like to learn whats exactly wrong here.
Remove the text-align:center; from the body and use margin:auto for the block elements you want centered in the page..
The elements that require it are #navmenus and #content, so
#navmenus
{
background-color:#14B3F7;
width:900px;
margin:0 auto;
}
#content
{
width:900px;
background-color:#ffffff;
height:1300px;
margin:0 auto;
}
I would update the CSS for the content area to this:
#content
{
width:900px;
background-color:#ffffff;
height:1300px;
margin: 0 auto;
}
Using the margin will center this element, rather than trying to use text-align on the parent element.
My code has been validated by w3school yet it still displays differently in IE and firefox.
My link bar allong the top seems to cascade down in IE but displays in a stright line (as it should be ) in Firefox!!!
My HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="lbf.css">
<title>Love British Film</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="main_container">fegerfg
<div id="header">
<div class="logo">Love British Film.com </div>
</div>
<div class="nav_bar">
<ul class="nav_list">
<li class="odd">Home</li>
<li class="even">Reviews</li>
<li class="odd">Forums</li>
<li class="even">Videos</li>
<li class="odd"><a href="index.html" >Downloads</a></li>
<li class="even">News</li>
<li class="odd"><a href="index.html" >Fun bits</a></li>
<li class="even">Contact us</li>
</ul>
</div>
<div class="main_text">
<div class="header">HEADER FOR MAIN CONTENT</div>
Main content!!
</div>
<div id="film_of_day">Film of day </div>
<div id="poll_of_week">asdnasdljasasdasfdasfasfas</div>
</div>
</body>
</html>
And My CSS code
body
{
background:url(bg.jpg) no-repeat #FFF center top;
padding:0;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
margin:0px auto auto auto;
}
div {
margin: 0px;
padding: 0px;
width: 0px;
}
#main_container{
width:1200px;
height:auto;
margin:auto;
padding:0px;
}
#header{
position:relative;
width:1200px;
height:170px;
background:url(header.jpg) no-repeat center;
background-position:0px 0px;
margin:auto;
padding:5px;
}
.logo{
width:auto;
height:auto;
font-size:20px;
position:relative;
top:80%;
text-align:right;
}
.nav_bar{
width:1200px;
height:50px;
}
ul.nav_list{
list-style-type:none; float:left; display:block; width:1200px;
margin:0px; padding:0px;
}
ul.nav_list li.odd a{
display:block;width:150px; text-align:center; float:left;text-decoration:none; background:url(images/home.png) no-repeat left;
background-color:rgb(147,216,255);height:40px; line-height:40px; color:rgb(168,100,63);
}
ul.nav_list li.even a{
display:block;width:150px; text-align:center; float:left;text-decoration:none; background:url(images/home.png) no-repeat left; color:rgb(168,100,63);
height:40px; line-height:40px;background-color:rgb(26,142,165);
}
a.odd:link, a.odd:visited {
display:block;width:133px; text-align:center; float:left;text-decoration:none; background:url(images/home.png) no-repeat left; }
ul.nav_list li.even a:hover{background-color:#A29;}
ul.nav_list li.odd a:hover{background-color:#F99;}
a.even:link, a.even:visited {
display:block;width:133px; text-align:center; float:left;height:40px;text-decoration:none; background:url(images/home.png) no-repeat left; color:#676d77;}
a.even:hover{
color:#FFFFFF;
}
.header{
width:500px;
text-align:center;
margin-bottom:50px;
}
.main_text{
display:inline-block;
float:left;
width:600px;
height:600px;
background-color:rgb(147,216,255);
}
#film_of_day{
float:right;
width:340px;
height:250px;
background-color:rgb(147,216,255);
}
#poll_of_week{
margin-top:50px;
float:right;
width:280px;
height:250px;
outline:solid;
padding:1px;
}
Welcome to the real world.
IE and Firefoy interpret CSS different from each other. This was always a problem, and it will always be ! If you want to reduce different behaviours or looks, you could try to use a so called CSS reset.
What is a css reset ?
This is a simple css file, which resets every positioning, padding,margin, everything that comes by default from the browser to zero. So you can ensure that most of your styling will be interpreted the same. Sure still it will not alway be the same, but it helps you to put it in the right direction. You could also use GridLayouts for positioning, which is also a great tool and works and looks the same in the most browsers.
http://meyerweb.com/eric/tools/css/reset/
http://960.gs/
And just a hint, open it with opera,chrome, elder verions of IE, safari and you will be astonished that it also looks different ;-)
You are floating your a tag inside your li tag which isn't good practice and causing your problems.
You should float your li tag and leave your a tag un-floated inside as the link
See: http://jsfiddle.net/ZmhzA/1/