I seem to be having an issue with my Science project.
For some reason in Safari and Firefox (Haven't tested Chrome), There seems to be a padding/margin on the top menu, the iframe seems to be working fine, I'll replace it with a div for now and links to nowhere, yet the top of the document doesn't and has what I guess would be a top border, I don't recall adding it though. I honestly can't see whats wrong.
<!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>Science Project</title>
<style>
html, body {
margin: 0 0 0 0;
padding: 0;
width: 100%;
height: 100%;
background-color:#000;
}
div.header {
background-image: linear-gradient(to bottom, #FFFFFF 0%, #E0E0E0 100%);
height: 100px;
width: 100%;
font-family:Arial, Helvetica, sans-serif;
color: #000;
border-bottom:20px solid #09F;
border-top-left-radius:12px;
}
p.title {
padding-top: 20px;
padding-left:20px;
}
div.menu {
width:100%;
height:80px;
border-bottom-left-radius:12px;
background-color:#fff;
border-bottom: 1px solid #000;
}
a.button {
display:table-cell;
width:120px;
height:80px;
border-bottom-left-radius: 10px;
background-color:#999;
text-decoration:none;
color:#FFF;
text-align:center;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
}
.content {
height:calc(100% - 221px);
width:100%;
}
</style>
</head>
<body>
<div class='header'>
<p class='title'>The Big Bang Theory Explained.</p>
</div>
<div class='menu'>
<a class='button' target='content'><div class="centertext"><p>What is the big bang?</p></div></a>
</div>
<div class="content"></div>
</body>
</html>
If you could let me know what exactly I'm doing wrong here, I was able to get this to work last time. I'm just finding this rather odd.
jsfiddle: http://jsfiddle.net/ny4fH/
Thanks!
Josh
You are experiencing margin-collapse.
<p class='title'>The Big Bang Theory Explained.</p>
Paragraphs, by default have a top and bottom margin. This is the problem. You can prevent margin collapse with:
.header { overflow: hidden }
Or other fancy tricks described here. (Fiddle)
your code is ok.
Just remember to reset values of the tags you use. In this case it was the paragraph tag.
p { margin: 0; }
You can as well avoid paragraphs margins by hiding the parent (.header) overflow
.header { overflow: hidden; }
Related
I am creating a web page. Even though i have added margin:0px and padding:0px still some blank space is present at the top of my web page. here is my css code for body section.Any solutions?Thanx in advance..
<html >
<head>
<style>
html {
margin: 0;
padding: 0;
}
#navR
{float:right;
margin-right:0px;
}
#mR{
float: right;
}
.bodyl{
height: 100%;
background-color: #F8FADE;
font-family: Arial;
font-size:15px;
margin:0px;
top: -22px;
clear: both;
}
.local{
background-color:#DEB887;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:0px;
padding:0px;
width:100%;
vertical-align: baseline;
}
.heading{
font-size: 250%;
color:#5B3205;
margin-top:10px;
font-style: oblique;
}
</style>
</head>
<body>
<div class="local">
<p id="mR"><strong>My name</strong></p>
<h3 id="navR"> <a>logout</a> </h3>
<h1 class="heading">My space</h1>
</div> </br>
</body>
</html>
You are using a <h1> tag. This text has a default margin set by the browser. You can set a margin-top: 0px in your .heading class. That will fix the problem.
edit: In your case you should replace margin-top: 10px with margin-top: 0px
Please also set margin to 0 on your html attribute
body, html {
margin: 0;
padding: 0;
}
Then it should work perfectly for you, as it does for me. It could also be possible that you have a child attribute that has a certain margin and so it could lead to that white space.
I am attempting to re-create something similar to this image below, minus the little page curl in top right hand corner.
Banner Example:
I am adding the code to a previously coded website by another designer. I am first coding it separately, but cannot get the text and banner to be responsive, though the image is. Nor can I get it to overlay like I wish on the image itself.
Here is my code below, I know it is something simple but seem to be hitting a mental wall.
#charset "UTF-8";
/* CSS Document */
/*Header Image*/
.headerimage
img
{
}
h1
{
position: absolute;
display: block;
width: 100%;
font-size: 1.45em;
font-family: 'Roboto Slab', Rockwell, Serif;
font-weight: bold;
color: #FFF;
text-shadow: 0 .125em .125em rgba(0, 0, 0, .5);
padding: .6em 1em .6em 1.7em;
background: linear-gradient(to right, rgba(178,34,34,0) 0%,rgba(169,32,32,0.8) 5%,rgba(160,30,30,1) 50%,rgba(152,29,29,0.8) 75%,rgba(178,34,34,0) 100%);
}
.interior-header img
{
display: block;
position: relative;
width: 100%;
height: auto;
border: 1px solid #b22222;
padding: 1px;
}
<!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>Test Heading</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="interior-header img>
<div class="headerimage">
<img src="images/Joslyn-Interior-Images.jpg" width="630" height="240" alt="Traffic Control" />
<h1>Traffic Control</h1>
</div>
</div>
</body>
</html>
Traffic Violations Image
I didn't want to type out all your code so here is an example.
Note: When I posted this one, no codes were up, I left it up in case it helps others. The code for the answer is at the bottom of the answer.
https://jsfiddle.net/norcaljohnny/5o95L0qy/
.box {
background: grey;
height: auto;
width: 100%;
}
.text {
font-size: 6vw
}
Updated: Here is the current JsFiddle. Hope this helps.
https://jsfiddle.net/norcaljohnny/65wnds86/
Sorry to ask the same question many before me have asked... I have read lots of these and they all say change
margin: 0;
There is a gap between the two divs (div class ="heady" and div class="menus") I just can't seem to get rid of the white space, hopefully it is clear enough, let me know if its not.
Thanks James.
html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>website</title>
<link rel="shortcut icon" href="favicon.ico"/>
</head>
<link rel="stylesheet" type="text/css" href="CSS/style1.css" />
<body>
<div class="heady">
<br></br>
<h1><a class="header" href="index.html">website</a></h1>
</div>
<div class="menus">
<ul>
<il><a class="list" href="x.html">About</a></il>
<t> | </>
<il><a class="list" href="y.html">Beginners</a></il>
<t> | </>
<il><a class="list" href="z.html">Advanced</a></il>
<t> | </>
<il><a class="list" href="contact.html">Contact</a></il>
</ul>
</div>
</body>
</html>
CSS
/*general rules*/
html,body {
font-size:11pt;
font-family: 'Lucida Grande', 'Lucida Sans', Geneva, Arial, Helvetica, sans-serif;
color: black;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 0px;
background-color: white;
padding-top: 0px;
margin-top: 0px;
}
h1 {
font-size: 25pt;
margin-left:10px;
margin-bottom:0;
padding-bottom: 0;
}
a:link, a:visited {
color: white;
}
a:hover, a:active {
color: grey;
}
/*header section rules*/
div.heady {
height: 200px;
width: 760px;
padding: 0;
background-color: grey;
background-repeat:no-repeat;
margin: 0;
}
a.header {
text-decoration: none;
}
a.header:link, a.header:visited, a.header:active,a.header:hover {
color: red;
margin:0;
}
div.menus {
padding: 0;
margin:0;
background-color:black;
width: 760px;
text-align: center;
font-size:12pt;
}
a.list {
margin:0;
}
Here is a link to a jsFiddle.
Browsers apply default styles to ceratin elements. In this case it's ul that gets some margin. Note that this margin separates the divs even though the divs themselves have no margins.
Use
ul { margin: 0; }
or include a reset stylesheet
Are you using the Firebug plugin for Firefox? Even if you don't already use firefox, you should download it along with the firebug plugin. With Firebug you can look at an element in your source code and see the styles that are being applied, the layout (width/height, padding, margin), and even manipulate the styles to view what a change in your CSS would do.
I HIGHLY recommend it!
Download Firefox
Download Firebug
.heady { display:block; }
.heady { margin:0; padding:0; }
.heady { line-height:100%; /* or even 0 (if no text present) */ }
the content can fool here, but 1 or all 3 of those should tame the beast across browsers.
google for a "css reset" too
As you can see from the example below, I have a black background and red links to emphasize this problem of dotted borders showing up on my links when they are clicked. I added border-style:none but it doesn't seem to have any effect. Is there some other way to remove the dotted border appearing around the links when they are clicked?
<!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">
html, body
{
height: 100%;
margin: 0;
padding: 0;
font-weight:normal;
font-size:12pt;
font-family: Verdana, Arial, Helvetica, serif, sans-serif;
background:black;
}
#linksouter
{
margin: 0;
padding: 0;
border-style:solid;
border-width:0px;
position:absolute;
top: 0px;
left: 0px;
width: 80px;
text-align:left;
}
#linksinner
{
margin: 80px 0 0 .5em;
width:100%;
display:inline;
height:100%;
}
#linksinner a
{
color:red;
text-decoration: none;
display:block;
margin: 5px 0 0 0;
border-style:none;
}
</style>
</head>
<body>
<div id="linksouter">
<div id="linksinner">
1
1
1
1
1
</div>
</div>
</body>
</html>
the border you see is called an outline. you can get rid of it by putting this style into your a rules:
outline:none;
personally i always define it as a blanket a rule near the top of my stylesheets (i really dislike outlines even though i know they have a use)
a { outline:none; }
hope this helps
That´s not the border, it is the outline.
You can disable it by setting:
a {
outline: none;
}
I believe you need to define all the rules for your link such as Link, Hover, Active, and Visited.
More information: http://www.echoecho.com/csslinks.htm
Have you tried using those pseudo selectors on links?
like
a:hover
a:active
Coz when you set the css in just using a, it will only change the static appearance on the link.
I have just started making web pages and I'm having lots of trouble with this very simple web page. I can't make anything appear on IE but it works fine on everyother browser. I'll take the liberty of putting all the code in my question because it is really short. If anyone could help me it would be great!
The html is:
<!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>Rhaya<title>
<link rel='stylesheet' media="screen" type="text/css"
href='rhaya.css'/>
</head>
<body>
<div id="masthead"> Rhaya </div>
<div id="content"> Aca va todo el
contenido </div>
<div id="footer"> ©2009 Rhaya | Teresa
Siu | Pía Fabry </div>
</body>
</html>
and the css is:
ul,ol,li {list-style:none}
body { margin:0 auto; padding:0;font-family: Tahoma;font-size:13px; background: #fff; line-height:15px; color:#000;}
a {color: #000;text-decoration:none}
a:hover {text-decoration:none;color:#000;cursos:default;}
/* Masthead */
#masthead {
margin:10px 0 10px 0;
height: 50px;
font-weight: bold;
padding:10px;
border:1px solid #a2ebf4;
background-color:#e1f2f9;
background-image: url(img/header.png);
}
/* Content */
#content {
margin-left:0px;
margin-bottom:10px;
padding:10px;
border:1px solid #000;
min-width: 300px;
min-height: 300px;
font-family: Tahoma;
font-size:13px;
}
/* Footer */
#footer {
clear:both;
padding:10px;
border:1px solid #a2ebf4;
background-color:#e1f2f9;
text-align:center;
}
#wrapper{
width:1002px;
clear:both;
height:auto;
margin:0px auto;
background:#fff;
}
I'm really sorry for asking so blatantly but I really am stumped.
Thanks!
For future reference: http://validator.w3.org/#validate_by_input
Use it for resolving html issues.
You have a mistake in your html head:
<title>Rhaya<title>
should be
<title>Rhaya</title>
Wow, it actually didn't show up at all in IE.
The reason is that you have the entire page in the title of the page. Change this:
<title>Rhaya<title>
to:
<title>Rhaya</title>
I suggest adding the following to you css:
div { position: relative; }
<html
tag isn't closed properly
title tag isn't closed properly.
I have tried and tested. it is your title problem. enclosed it title /title will definitely work.