It is a copied code from an exercise, but I don't know why the header sets -30px beyond the right boarder of the viewport (doesn't happen on the video tutorial). I have tried applying 30px to the right, but it counts from 0 not from that additional pixels I got as a gift.
The Internet hasn't shown me any answers yet..
Please help.
As seen here it adds 30px on the right hand side, so the header (100% width) goes outside the viewport:
snapshot
#charset "UTF-8";
header {
width: 100%;
height: 88px;
position: fixed;
right: auto;
padding: 15px;
top: 0;
left: 0;
z-index: 5;
background: #FF825C;
box-shadow: 0px 2px 4px #EA6044;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}
header input {
width: 100%;
height: 50px;
float: left;
background: #FFA473;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
border: 0px;
box-shadow: none;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>ToDoList app</title>
<link rel="stylesheet" type="text/css" href="resources/css/reset.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
</head>
<body>
<header>
<input type="text" placeholder="Enter an activity...">
<button type="button" name="button"></button>
</header>
</body>
</html>
That happens because you set the padding for all sides. Try to put right padding only and check:
#charset "UTF-8";
header {
width: 98.5%;
height: 88px;
position: fixed;
padding: 15px;
top: 0;
left: 0;
z-index: 1;
background: #FF825C;
box-shadow: 0px 2px 4px #EA6044;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}
header input {
width: 99.5%;
height:50px;
float: left;
background: #FFA473;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
border: 0px;
box-shadow: none;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>ToDoList app</title>
<link rel="stylesheet" type="text/css" href="resources/css/reset.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
</head>
<body>
<header>
<input type="text" placeholder="Enter an activity..."/>
<button type="button" name="button"></button>
</header>
</body>
</html>
Related
The div with id="intro" is supposed to be hidden but it shows. The main container, which is div with "id=myQuiz", has width and height 650px and 'overflow' set to 'hidden'. Now, if the div with "class=intro" has margin 660px from the left, it should be hidden because it's margin is higher than the maximum width of the main container. My code is as follows:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test Your Knowledge: Saturn</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/quiz.css">
</head>
<body>
<div id="myQuiz">
<h1>Test your knowledge:<span>Saturn</span></h1>
<div class="progress"></div>
<div class="intro"></div>
<h2>Welcome</h2>
<p>Click begin to test your knowledge of Saturn</p>
<p class="btn">Begin</p>
<div class="question"></div>
<div class="results"></div>
</div>
</body>
</html>
CSS code is as follows:
#import url(http://fonts.googleapis.com/css? family=Titillium+Web:900|Roboto:400,100);
body { background-color: #fff; padding: 20px; }
#myQuiz {
font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 400;
width: 650px; height: 650px;
position: relative;
overflow: hidden;
color: #fff;
background: #000 url(../images/background.jpg) no-repeat 0px 0px;
}
#myQuiz h2 { font-size: 3em; margin: 0px; font-weight: 100;}
#myQuiz h3 { font-size: 2.4em; margin: 0px; font-weight: 100;}
#myQuiz p { margin: 0px 0px 40px 0px;}
#myQuiz .btn {
display: inline-block; cursor: pointer; background-color: #c04b01;
color: #fff; text-decoration: none;
padding: 5px 15px; border-radius: 6px;
}
#myQuiz .intro { position: absolute; top:225px; left: 660px; width: 550px;}
#myQuiz .intro p { margin: 0px 0px 40px 0px; }
Here is the link to my code on jsfiddle.net:
https://jsfiddle.net/h02y8usu/
You should hide the <div class="intro"> by adding display: none property to .intro
I am making a layout for one of my sites and i have a div in the middle of the page. When i type text into the div there seems to be a big gap between the border of the div and the text. i have set padding to 0 on the div and it is still applying some sort of padding. i have tested this on IE 10 and Google Chrome 29. My code is below Here is a jsFiddle.
Html:
<!DOCTYPE html>
<html>
<head>
<title>Club Website</title>
<link rel="stylesheet" href="Assets/Stylesheets/Global/Global.css" />
<link rel="stylesheet" href="Assets/Stylesheets/Bootstrap/css/bootstrap.min.css" />
<style type="text/css">
</style>
<script type="text/javascript" src="Assets/Scripts/Javascript/jQuery/jQuery.js"></script>
<script type="text/javascript">
$('document').ready(function() {
});
</script>
</head>
<body>
<div id="Wrapper">
<div id="Header">
<div id="HeaderInner">
Main Page
Other Page
Other Page
Other Page
Other Page
</div>
</div>
<div id="Body">
<div id="BodyInner">
Hi
</div>
</div>
</div>
</body>
</html>
CSS
/* Layout */
html, body, #Wrapper {
width: 100%;
min-width: 1000px;
height: 100%;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
font-size: 16px;
background-color: #f2f2f2;
}
#Header {
width: 100%;
height: 45px;
display: block;
margin: 0;
padding: 0;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background-color: #333;
box-shadow: 2px 2px 3px #999;
}
#HeaderInner {
width: 965px;
height: 45px;
display: block;
margin: 0 auto;
padding: 0;
background-color: transparent;
line-height: 45px;
text-align: center;
}
#Body {
width: 100%;
height: 100%;
display: block;
margin: 0;
padding: 0;
position: absolute;
top: 45px;
left: 0;
background-color: transparent;
}
#BodyInner {
width: 965px;
height: auto;
min-height: 100%;
display: block;
margin: 0 auto;
padding: 0;
background-color: transparent;
word-wrap: break-word;
white-space: pre-wrap;
border-left: 1px solid #999;
border-right: 1px solid #999;
}
/* Layout */
/* Links */
.HeaderLink {
color: #999;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
text-decoration: none;
cursor: pointer;
margin: 0 15px;
}
.HeaderLink:hover {
text-decoration: none;
color: #FFF;
}
.HeaderSelectedLink {
color: #FFF;
}
/* Links */
The spacing is caused by the following CSS rule:
white-space: pre-wrap;
Which renders similarly to the <pre> tag, drawing a line for every newline/line-break in the HTML source.
So with the following HTML:
<div id="BodyInner">
Hi
</div>
the whitespace before and after Hi are being drawn on-screen.
remove
white-space: pre-wrap;
BodyInner in your code,
refer this: http://www.w3schools.com/cssref/playit.asp?filename=playcss_white-space&preval=pre-wrap
I'm in the process of teaching myself HTML again (the last time I did this stuff, people were still using tables) and running into some issues. I'm trying to figure out why the div known as "inset" is not showing up. Inside the pink box should be a black box but that isn't showing up. What's missing?
Below are the HTML file and CSS.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Page</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<!-- Wrapper -->
<div id="wrapper">
<!-- Project banner -->
<div id="projectbanner"> Banner
</div>
<!-- Project data -->
<div id="projectdata">Data</div>
<!-- Summary section -->
<div id="summary">Some stuff</div>
<!-- Project body -->
<div id="projectbody">
<div id="inset">More stuff</div>
</div>
<!-- Footer -->
<div id="footer">This is the Footer</div>
</div>
<!-- End Wrapper -->
</body>
</html>
css
* { padding: 0; margin: 0; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin: 0 auto;
width: 1050px;
}
#projectbanner {
color: #333;
background: #E7E7E7;
margin: 0px 0px 0px 0px;
padding: 0px;
width: 750px;
height: 310px;
float: left;
}
#projectdata {
color: #333;
background: #888888;
margin: 0px 0px 0px 0px;
width: 300px;
height: 510px;
float: right;
}
#summary {
color: #333;
background: #666666;
margin: 0px 0px 0px 0px;
width: 750px;
height: 200px;
float: left;
}
#projectbody {
width: 1050px;
color: #333;
border: 0px solid #ccc;
background: #F2BBE6;
margin: 0px 0px 0px 0px;
height: 850px;
}
#inset {
width: 800px;
color: #fff;
border: 0px solid #ccc;
background: #000000;
margin: 0px 0px 0px 0px;
height: 350px;
}
#footer {
color: #333;
width: 1050px;
border: 0px solid #ccc;
background: #BDBB8C;
margin: 0px 0px 0px 0px;
padding: 0px;
}
You are floating the earlier elements in the page flow. When you float an element, it doesn't add height to its containing element, that's why the #projectbody div ends up behind the earlier div's on the page. You can fix it by adding clear: both to the #projectbody div.
#projectbody {
width: 1050px;
color: #333;
border: 0px solid #ccc;
background: #F2BBE6;
margin: 0px 0px 0px 0px;
height: 850px;
clear: both;
}
Here's a jsFiddle
Take the projectbody div above the summery. float works near the element before it.
<div id="projectbody">
<div id="inset">
More stuff
</div>
</div>
<!-- Summary section -->
<div id="summary">
Some stuff
</div>
See example
Hi I'm trying to make my maintenance page for my site however when I try and put the main content div in the middle by using margin: auto; however it seems to stay at the top and the only way to pull it down is by using <br /> but i'd prefer not to use that as it looks messy so I was wondering if you has any ideas what's wrong
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=utf-8" />
<title>Untitled Document</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
</head>
<body lang="en">
<div class="alert">Do you want advertsing space? Contact us: <b>advertising#chattrd.com</b></div>
<div class="topBar">
<div class="topBarcontainer">
<img class="logo" src="images/logo.png" alt="Chattrd home">
</div>
</div>
<div id="navigationBar">
<ul>
<li>Home</li>
<li>About us</li>
<li>Contact us</li>
</ul>
</div>
<div id="mainContent"></div>
</body>
</html>
CSS:
body {
background: #F7F7F7;
font-family:Tahoma, Geneva, sans-serif;
margin: 0;
padding: 0;
}
.alert {
font-size: 10px;
color: #FFF;
background: #1f1f1f;
height: 14px;
padding-left: 10px;
font-family: Arial;
white-space: nowrap
}
.topBar {
background: #06C;
height: 40px;
}
#navigationBar {
background: #1f1f1f;
height: 28px;
color: white;
font-family: 'Open Sans';
}
.topBarcontainer{
margin: auto;
width: 1000px;
}
.logo {
padding: 7px;
height: 24px;
width: 98px;
}
#navigationBar ul {
margin: 0;
padding: 3px;
list-style-type: none;
text-align: center;
}
#navigationBar ul li {
display: inline;
}
#navigationBar ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
}
#navigationBar ul li a:hover {
color: #FFF;
background-color: #06C;
}
#mainContent {
margin: auto;
width: 500px;
height: 200px;
border: 1px solid #D8D8D8;
border-radius: 5px;
background: #E6E6E6;
}
Vertical centering will not work because there is nothing to center - the body will, like all HTML elements by default, be just the height needed to accomodate its contents.
Since your main content is of a fixed size you could simply solve it with absolute positioning:
#mainContent {
width: 500px;
height: 200px;
position:fixed;
left:50%;
top:50%;
margin:-100px 0 0 -250px;
border: 1px solid #D8D8D8;
border-radius: 5px;
background: #E6E6E6;
}
Fiddled for your pleasure.
This must be a very stupid question, but I can't get this media query to work. The page just doesn't change when I resize it.
stylesheet.css:
#font-face {
font-family: ubuntu;
src: url('Ubuntu-L.ttf');
}
#font-face {
font-family: ubuntu;
src: url("Ubuntu-B.ttf");
font-weight: bold;
}
html, body {
background-image: url('bg2.png');
background-repeat: repeat;
background-attachment: fixed;
font-family: ubuntu;
font-size: 48px;
margin: 0;
padding: 0;
text-align: center;
}
#menu {
width:900px;
height: 150px;
background: #FFF;
position: fixed;
left: 50%;
margin-left: -450px;
top: 50px;
}
#content {
width: 800px;
margin: 0px auto;
padding-top: 100px;
}
.block {
width: 100%;
height: 800px;
margin-top: 100px;
margin-bottom: 100px;
border-radius: 5px;
background: #FFF;
-moz-box-shadow: 0 0 25px 0px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 25px 0px rgba(0,0,0,0.5);
box-shadow: 0 0 25px 0px rgba(0,0,0,0.5);
}
//MEDIA QUERY
#media screen and (max-width: 900px) {
#content {
width: 90%;
}
#menu {
width: 100%;
left: 0%;
top: 0%;
margin-left: 0px;
}
}
index.html:
<html>
<head>
<link rel="shortcut icon" href="http://www.yellos.com/favi.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>yellos</title>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div id="menu">
...
</div>
<div id="content">
<div class="block" id="1">
TEST
</div>
</div>
</body>
</html>
What am I doing wrong?
The error is that // comments aren't allowed in CSS.
Change
//MEDIA QUERY
to
/* MEDIA QUERY */