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;
}
Related
When I try to validate my CSS code on w3c, it gives me these errors sorry if this has already been asked but I can't seem to find an answer. Some errors where fixed but these ones are still there.
Parse Error <html> <head> > <title>style2.CSS</title> </head> <body> html{ background-image: url(headerimg.jpg); }
130 Parse Error
<head>
<meta http-equiv="content-type";content="text/html";charset="UTF-8"/>
<title>style2.CSS</title>
</head>
<body>
html{
background-image: url(headerimg.jpg);
}
header{
background-image: url(headerimg.jpg);
background-position: center top;
background-repeat: no-repeat;
background-size:1000px 150px;
}
body{
background-image:url(bg.jpg);
padding-left:175px;
padding-right:175px;
width:940px;
}
#text{
background-color:white;
padding-top:0px;
padding-left:20px;
padding-right:69.5px;
width:600px;
padding-bottom:0px;
display:inline-block;
}
#headchoix{
background-color:#333;
height:50px;
word-wrap: normal;
padding-top:30px;
}
#bot{
float: top;
float:right;
background-color:#D3D3D3;
height:713px;
padding-left:0.1px;
width:250px;
}
#top1,#top2,#top3,#top4,#top5,#top6{
padding-right:40px;
color:white;
padding-left:10px;
font-size:150%;
font-weight: bold;
text-decoration:none;
}
#pad{
float:left;
}
#footerchoix{
background-color:#333;
width:940px;
height:160px;
display:inline-block;
}
#aside2,#aside1{
float:left;
padding-right:170px;
color:white;
}
#aside3{
float:left;
color:white;
}
#aside4{
float:right;
color:white;
width:200px;
}
a:visited{
color:black;
}
a:hover{
color:red;
}
a:active{
color:yellow;
}
a:link{
color:blue;
}
</body>
Your meta tag has erroneous semi-colons:
This:
<meta http-equiv="content-type";content="text/html";charset="UTF-8"/>
Should read:
<meta http-equiv="content-type" content="text/html" charset="UTF-8" />
As the validator suggests, there was a parse-error at the semi-colon before the content attribute. That is because you are not supposed to separate attributes with semi-colons. You use white-space characters to separate attributes.
You should put CSS inside style tags
<style>
html{
background-image: url(headerimg.jpg);
}
header{
background-image: url(headerimg.jpg);
background-position: center top;
background-repeat: no-repeat;
background-size:1000px 150px;
}
body{
background-image:url(bg.jpg);
padding-left:175px;
padding-right:175px;
width:940px;
}
#text{
background-color:white;
padding-top:0px;
padding-left:20px;
padding-right:69.5px;
width:600px;
padding-bottom:0px;
display:inline-block;
}
#headchoix{
background-color:#333;
height:50px;
word-wrap: normal;
padding-top:30px;
}
#bot{
float: top;
float:right;
background-color:#D3D3D3;
height:713px;
padding-left:0.1px;
width:250px;
}
#top1,#top2,#top3,#top4,#top5,#top6{
padding-right:40px;
color:white;
padding-left:10px;
font-size:150%;
font-weight: bold;
text-decoration:none;
}
#pad{
float:left;
}
#footerchoix{
background-color:#333;
width:940px;
height:160px;
display:inline-block;
}
#aside2,#aside1{
float:left;
padding-right:170px;
color:white;
}
#aside3{
float:left;
color:white;
}
#aside4{
float:right;
color:white;
width:200px;
}
a:visited{
color:black;
}
a:hover{
color:red;
}
a:active{
color:yellow;
}
a:link{
color:blue;
}
</style>
Include this in head tag
HTML
<div class="btn" >
<span>X<span>
<div class="vertical_line"></div>
</div>
CSS
div.btn{
width:100px;
height:100px;
float:left;
border:1px solid #000000;
font-family:Arial, Helvetica, sans-serif;
font-size:80px;
text-align:center;
position: relative;
}
div.vertical_line{
width:0;
height:100px;
border:1px solid #000000;
position:absolute;
right:50px;
z-index:100;
margin:0;
padding:0;
}
div.btn span{
position:absolute;
z-index:0;
}
Here is the jsfiddle.
Can anyone please tell me how to position 'X' in center such that the vertical line and X will overlap each other?
Instead of making span text to have absolute position, I have given line to have absolute position, and have placed text in center using text-align : center.
div.btn{
width:100px;
height:100px;
float:left;
border:1px solid #000000;
font-family:Arial, Helvetica, sans-serif;
font-size:80px;
text-align:center;
position: relative;
}
div.vertical_line{
width:0;
height:100px;
border:1px solid #000000;
position:absolute;
right:49px;
z-index:100;
margin:0;
padding:0;
top : 0;
}
div.btn span{
float:left;
width : 100%;
text-align : center;
z-index:0;
}
Change your code to the following
HTML
<div class="btn" >
<div class="vertical_line"></div>
<span>X</span>
</div>
CSS
div.btn{
width:100px;
height:100px;
float:left;
border:1px solid #000000;
font-family:Arial, Helvetica, sans-serif;
font-size:80px;
text-align:center;
position: relative;
}
div.vertical_line{
width:0;
height:100px;
border:1px solid #000000;
position:absolute;
right:50px;
z-index:100;
margin:0;
padding:0;
}
div.btn span{
position:relative;
z-index:0;
}
Edit : Is this what you want ? https://jsfiddle.net/y9d25gxq/9/
I'm trying to make a navigation bar for my website, but the 'info' button will not stay inside the parent. Here is my HTML:
<div id="header">
<div id="homeB">
HOME
</div>
<div id="infoB">
INFO
</div>
</div>
<div id="main"></div>
And my CSS:
#header {
height:11%;
width:70%;
background:violet;
margin-left:15%;
}
#main {
height:100%;
width:70%;
background:blue;
margin-top:1%;
margin-left:15%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display:inline-block;
}
#homeB {
width:20%;
height:100%;
background:red;
}
#homeBTEXT {
display:block;
font-size:250%;
text-align:center;
text-decoration:none;
font-family:Impact, charcoal, sans-serif;
color:blue;
}
#infoB {
width:20%;
height:50px;
background:red;
float:right;
left:64.2%;
}
#infoBTEXT {
display:block;
font-size:250%;
text-align:center;
text-decoration:none;
font-family:Impact, charcoal, sans-serif;
color:blue;
}
Could someone clear up why this is not working?
Thanks, I'm not great at a lot of HTML and CSS elements, so any extra help would be appreciated too :)
Give float: left; to the #homeBTEXT and also clear the #header!
#homeBTEXT {
display:block;
font-size:250%;
text-align:center;
text-decoration:none;
font-family:Impact, charcoal, sans-serif;
color:blue;
float:left;
}
#header {overflow: hidden;}
Preview
Fiddle: http://jsbin.com/setipusabihu/1
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 can get my background image to fill out every browser other than safari on the mac. I've had issues with background images before and I finally want to get this figured out. If there is an "industry standard" for getting background images to fit across all browsers OR to design pages specifically for a certain browser and get certain pages to display based on what browser the user has, I would like to know what that technique is. Also when I open my page up in safari everything is somehow shifted to the left. I've been trying to figure this stuff out for a while and all I've discovered is others have the same problem. If anyone can give me a solution to these problems that would be awesome. Here is the code for my html and css.
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="home.css" />
</head>
<body>
<div class="container">
<div class="logo">
<img src="IB SportsTV Logo.png" width="240px" height="180px"/>
</div>
<p class="teaser">July 24th</p>
</div>
</body>
</html>
CSS:
<style type="text/css">
#import url("reset.css");
html
{
padding:0;
margin:0;
}
body
{
background-image:url("HomeIBSTVBG.png");
background-size:100%;
background-repeat:no-repeat;
background-color:black;
}
.container
{
width: 73.2em;
margin: 0 auto;
position:relative;
}
.login
{
position:absolute;
top:50px;
right:100px;
color:white;
font-family:trajan pro;
}
.register
{
position:absolute;
top:300px;
right:100px;
}
.text
{
color:white;
font-size:20px;
font-weight:bold;
font-family:trajan pro;
}
.logo
{
position:absolute;
top:-20px;
left:100px;
}
.box
{
position:absolute;
top:20px;
left:15px;
overflow:hidden;
width:470px;
height:310px;
}
.boxtext
{
position:absolute;
bottom:-300px;
width:470px;
height:310px;
font-size:25px;
font-family:trajan pro;
color:white;
}
.twitterfeed
{
position:absolute;
top:240px;
left:100px;
}
/*memberpage box properties*/
.gamebox
{
position:absolute;
top:150px;
right:100px;
}
.leaderboardbox
{
position:absolute;
top:165px;
left:100px;
}
.viewerspotbox
{
position:absolute;
top:370px;
left:93px;
}
/*picks page properties*/
.mainform
{
position:absolute;
top:150px;
left:100px;
color:white;
font-family:trajan pro;
border:solid darkblue;
background-color:blue;
}
.form2
{
position:absolute;
top:150px;
right:400px;
color:white;
font-family:trajan pro;
border:solid darkblue;
}
.form3
{
position:absolute;
top:500px;
right:400px;
color:white;
font-family:trajan pro;
border:solid darkblue;
}
.form4
{
position:absolute;
top:850px;
right:400px;
color:white;
font-family:trajan pro;
border:solid darkblue;
}
.form5
{
position:absolute;
top:1200px;
right:400px;
color:white;
font-family:trajan pro;
border:solid darkblue;
}
/*Leaderboard Table Properties*/
.tablehead
{
color:white;
font-family:trajan pro;
background-color:blue;
border-color:darkblue;
}
.tablecontents
{
color:white;
text-align:left;
font-family:trajan pro;
background-color:transparent;
border-color:darkblue;
}
.tableposition
{
position:absolute;
top:250px;
left:150px;
}
caption
{
caption-side:bottom;
color:white;
font-size:42px;
font-family:trajan pro;
}
/*teaser text*/
.teaser
{
color:black;
font-family:trajan pro;
font-size:72px;
position:absolute;
left:450px;
top:250px;
}
</style>
Try adding a width and height to html, to give body something to inherit:
html {
width: 100%;
height: 100%;
}
Works for me all the time with full-page background or videos.