I don't know how to get rid of the bars on the side when I hover over the navbar. Can anyone help? I dont want to change the look or position of the navigation bar. I only want to make the parts that are not affected by hovering affected by it.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Site</title>
</head>
<body>
<div id="container">
<div id="body">
<center>
<ul class="navbar">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Services</li>
<li>Biography</li>
</ul>
</center>
</div>
</div>
</body>
</html>
CSS:
#charset "utf-8";
#container {
margin-left:auto;
margin-right:auto;
width:960px;
background-color:#666666;
}
#body {
background-color:#666666;
width:960px;
height:500px;
border:2px solid #FFFFFF;
margin-top:50px auto;
}
.navbar {margin:0px;
background-color:#66FF33;
text-align:center;
list-style:none;
border-bottom:none;
padding-left:0px
}
ul.navbar li {
width:19%;
display:inline-block;
}
ul.navbar a {
display:block;
width:100%;
margin:0px;
padding:10px 0px;
text-decoration:none;
}
ul.navbar a:hover {
background-color:#33FFD7;
}
body {
background-color:#333333;
}
Try removing all the space between your <li> elements. The spaces are creating extra, well, space between links. This adds to the 100% width 5 elements at 20% width should be creating.
<li>Home</li><li>About</li><li>Contact</li><li>Services</li><li>Biography</li>
I hope that there is a more satisfying answer than this, but if you just want the quick and easy, this will work.
JSFiddle
Related
I would like to change the background color in 2n element. I've tested it but the bg-color is still blue:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>nothing here</title>
</head>
<body>
<style type="text/css">
.btn{
height:50px;
width:100%;
background:blue;
margin-bottom:20px;
}
.btn:nth-child(2n){
background:yellow;
}
</style>
<div>
<div class="btn"></div>
</div>
<div>
<div class="btn"></div>
</div>
</body>
</html>
it should be more like :
.btn{
height:50px;
width:100%;
background:blue;
margin-bottom:20px;
}
div:nth-child(2n) .btn{
background:yellow;
}
Because, in each div , there's only one .btn
nth-child works with adjacent element, not nested unfortunately :)
.btn is inside a div.
.btn:nth-child(2n) will work if your HTML structure is as follows:
<div>
<div class="btn"></div>
<div class="btn"></div>
</div>
For your HTML structure, it should be
div:nth-child(2n) .btn {
background:yellow;
}
DEMO here.
i want the part with the border to be centered on all screen resoultions. is this possible with the margin-top and margin-bottom properties?
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Site</title>
</head>
<body>
<div id="container">
<div id="body">
<img src="2.png" width="1000" height="100" />
<center>
<ul class="navbar">
<li>Home</li><li>About</li><li>Contact</li><li>Services</li><li>Biography</li>
</ul>
</center>
</div>
</div>
</body>
</html>
CSS:
#charset "utf-8";
html {
text-align: center
}
#container {
margin-left:auto;
margin-right:auto;
margin-top:50 auto;
margin-bottom:50 auto;
width:960px;
background-color:#666666;
}
#body {
background-color:#666666;
width:1000px;
height:1000px;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
.navbar {
margin:0px;
background-color:#66FF33;
text-align:center;
list-style:none;
border-bottom:none;
padding-left:0px;
}
ul.navbar li {
width:20%;
display:inline-block;
}
ul.navbar a {
display:block;
width:100%;
margin:0px;
padding:10px 0px;
text-decoration:none;
}
ul.navbar a:hover {
background-color:#33FFD7;
}
body {
background-color:#333333;
}
Try:
#container{
width:960px;
margin:0 auto;
/*more CSS*/
}
You can change 0 to whatever, like 50px. Your image width is larger than 960px though.
Maybe you want something like this:
var pre = onload; // window is implicit
onload = function(){ // I personally don't indent directly inside the onload
if(pre)pre(); // execute old window.onload if it existed
var doc = document, IE = parseFloat(navigator.appVersion.split('MSIE')[1]);
function E(e){
return doc.getElementById(e);
}
function alignTop(id){
var e = E(id), w, h;
if(IE){
h = parseInt(e.currentStyle.height);
}
else{
h = parseInt(getComputedStyle(e).getPropertyValue('height'));
}
w = innerHeight || doc.documentElement.clientHeight || doc.body.clientHeight;
e.style.marginTop = w/2-h/2+'px';
}
alignTop('container');
}
You should put your script tag in the head so the body is defined in some older Browsers. I would use external JavaScript, so it's cached, like:
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<title>Your Title Here</title>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<meta name='keywords' content='some words to help SEO here' />
<style type='text/css'>
#import 'common.css'; #import 'thisPage.css';
</style>
<script type='text/javascript' scr='someName.js'></script>
</head>
<body>
<div>
<div id='container'>Example Only</div>
</div>
</body>
</html>
To see a working model, visit http://jsfiddle.net/MeMQz/2/ .
i know that centers it but i want the top to be equal to the bottom by centering the whole page.not just left and right – HeyItsProdigy
Based on your comment above I guess you are trying to make the height of the content is 100% equal based on the height of the browser. You can use this trick:
html, body{
height: 100%;
}
#container{
display: block;
height: 100%;
}
Have a look at the result here http://jsfiddle.net/qiqiabaziz/GB4W2/1/
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> This is my site </title>
<link rel="stylesheet" type="text/css" href="StyleSheet.css">
</head>
<body>
<div id="bigger">
<div id="header">
<div id="adv">
</div>
<div id="flag">
</div>
</div>
</div>
</body>
</html>
CSS
#bigger
{
height:1280px;
width:880px;
margin:0px 0px 0px 0px;
position:absolute
}
#header
{
background-color:Blue;
height:10%;
width:100%;
position:absolute
}
#adv
{
background-color:Yellow;
height:100%;
width:35%
}
#flag
{
background-color:Red;
height:100%;
width:65%;
float:right
}
How do you make the flag div appear beside the adv div inside the header div?
#adv needs float:left, so it floats to the left (and #flag floats to the right, next to it, because of float: right).
try this
#header
{
background-color:Blue;
height:10%;
width:100%;
position:relative
}
#flag
{
background-color:Red;
height:100%;
width:65%;
position:absolute;
top:0;
right:0;
}
Try this:
Normally: (somebody please correct me if I'm wrong on this):
Widths and heights should be set in pixel height-width from the beginning instead of percentages because the code will be easier to work with later. Also, I'm sure both elements should float left because then the code will be again, easier to work with and will follow better code conventions. Also, I added margins for easier viewing. You can always delete them if you wish. Code:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> This is my site </title>
<link rel="stylesheet" type="text/css" href="example1.css">
</head>
<body>
<div id="bigger">
<div id="header">
<div id="adv">
</div>
<div id="flag">
</div>
</div>
</div>
</body>
</html>
CSS:
#bigger
{
height:1280px;
width:880px;
margin:0px 0px 0px 0px;
position:absolute
}
#header
{
background-color:Blue;
height:90px;
width:1290px;
overflow: hidden;
}
#adv
{
background-color:Yellow;
height:80px;
width:840px;
margin: 5px;
float: left;
}
#flag
{
background-color:Red;
height:80px;
width:420px;
margin: 5px;
float:left;
}
I have a little issue w/ an element displaying in IE9
the structure:
<div id="container">
<a id="logo" href="#">stuff here</a>
</div>
the problem is that the container has a height of 47px and the anchor has a height of 65px. In chrome, ff, opera etc the overflow of the anchor is visible but cut off in IE9.
this is the css for the container and anchor
#container{
width:100%;
height:47px;
overflow visible;
}
#logo{
background:url('path/to/myimage');
display:block;
float:left;
height:65px;
}
and this displays great in everything except IE... any ideas? thanks in advance.
You must to declare Doctype For IE all versions:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#container{
width:100%;
height:47px;
border:1px solid red;
}
#logo{
background:url('path/to/myimage');
display:block;
float:left;
height:65px;
border:1px solid blue;
}
</style>
</head>
<body>
<div id="container">
<a id="logo" href="#">stuff here</a>
</div>
</body>
</html>
I am making a css site and I want to look like that:
3 vertical divs. LEFT CENTER RIGHT. In the center div is the site content, and I want the left and right div to fill the space between the center and the browser borders.
Here is my code.
#container
{
width:100%;
background-color:#000;
}
.center
{
width:1000px;
height:400px;
background-color:#F90;
margin: 0px auto;
overflow: auto;
}
.spacer-left
{
width:100%;
height:400px;
background-color:#F90;
float:left;
}
.spacer-right
{ width:100%;
height:400px;
background-color:#F90;
}
And here is the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div class="spacer-left"></div>
<div class="center" style="background-color:#F30;"></div>
<div class="spacer-right"></div>
<div style="clear:both"></div>
</div>
</body>
</html>
I've try with 2 divs and there was no problem. The left with float:left and width in pixels and right one with 100% width without float. It worked. But how to make it with 3 divs. Thanks in advance!
Thank you for the help Sebastian but I figured out other way.
This is how the code looks now and it works.
#container
{
width:1000px;
background-color:#000;
margin:0 auto;
}
.center
{
width:100%;
height:400px;
background-color:#F90;
margin: 0px auto;
overflow: auto;
}
.spacer
{
width:50%;
height:400px;
background-color:#F90;
float:left;
}
.head_warp
{
width:100%;
display:block;
height:400px;
margin:0 auto;
padding:0;
position:absolute;
top: 0;
left: 0;
text-align:center;
z-index:-9999;
}
and the HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="head_warp">
<div class="spacer"></div>
<div class="spacer" style="background-color:#F06"></div>
</div>
<div id="container">
<div class="center" style="background-color:#F30;"></div>
</div>
</body>
</html>
Thank you for the help one again. I will write here again if there is a problem with my solution.
Update: a different alternative to the answer below, using three divs and z-index.
http://jsfiddle.net/SebastianPataneMasuelli/mzvB4/1/
if you are trying to make a site with the content in the center div, you can replicate that layout using simply:
<body>
<div class="center">center</div>
</body>
with the css:
html {height: 100%; }
.center { width:750px; margin: 30px auto; height: 100%; }
play with it here: http://jsfiddle.net/SebastianPataneMasuelli/mzvB4/
from the class names .spacer_left and .spacer_right i'm assuming that those divs are empty spacers and not necessary.
this is a good resource for base css layouts: http://www.csseasy.com/