I am unable to remove default top margin after many attempts. Below is my html and css code. Please suggest where I am lacking?
HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Sample</title>
</head>
<body>
<div id="maincontainer">
<div id="header">
<h1>Sample</h1>
</div>
</div>
<div id="contents">
Body of page
</div>
</body>
</html>
CSS File
html, body
{
margin:0 auto;
padding:0;
border:0;
background:#fff;
font-family:Times New Roman;
font-size: 16px;
width:1024px;
}
#maincontainer
{
margin:0;
padding:5px;
}
#header
{
margin:0;
padding:0;
height:100px;
background:#8A0808;
text-align:left;
}
h1
{
margin:0;
padding:0 0 0 10px;
font-size: 60px;
font-weight:normal;
color:#fff;
}
padding: 5px; on the #maincontainer might be your issue. There's going to be 5px of white surrounding anything inside of the #maincontainer div.
Related
If I do the following, I notice that <input type='image' /> adds the border to the input, which makes sense because you want the image to fit. But check out that space at the top, it looks like that's a bug.
/* external.css */
html,body{
padding:0; margin:0; background:#000;
}
body{
overflow-y:scroll;
}
.main{
width:980px; margin:0 auto;
}
.cartpal{
width:544px; height:64px; text-align:center; margin:0 auto;
}
#to_cart,#paypal{
background:#eee; border:2px solid #007; font:bold 20px Arial, Helvetica, sans-serif; border-radius:30px;
}
#to_cart{
width:200px; height:64px;
}
#paypal{
width:306px; height:60px;
}
#to_cart:hover,#paypal:hover{
border-color:#fff;
}
#to_cart:active,#paypal:active{
border-color:#fc3;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<meta name='viewport' content='width=device-width'>
<title>Is this a Bug?</title>
<link type='text/css' rel='stylesheet' href='external.css' />
</head>
<body>
<div class='main'>
<div class='cartpal'><input id='to_cart' name='to_cart' title='Add to Cart' type='button' value='Add to Cart' /><input id='paypal' name='paypal' title='Pay with PayPal' alt='PayPal - The safer, easier way to pay online!' type='image' src='https://www.paypalobjects.com/webstatic/en_US/i/btn/png/silver-pill-paypalcheckout-60px.png' /></div>
</div>
</body>
</html>
After a simple change to from <input type='image' /> it works as expected. Can't be the white space. It's been removed.
/* external.css */
html,body{
padding:0; margin:0; background:#000;
}
body{
overflow-y:scroll;
}
.main{
width:980px; margin:0 auto;
}
.cartpal{
width:544px; height:64px; text-align:center; margin:0 auto;
}
#to_cart,#paypal{
height:64px; background:#eee; border:2px solid #007; border-radius:30px; font:bold 20px Arial, Helvetica, sans-serif; padding:0;
}
#to_cart{
width:200px;
}
#paypal{
width:306px; background:url(https://www.paypalobjects.com/webstatic/en_US/i/btn/png/silver-pill-paypalcheckout-60px.png);
}
#to_cart:hover,#paypal:hover{
border-color:#fff;
}
#to_cart:active,#paypal:active{
border-color:#fc3;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<meta name='viewport' content='width=device-width'>
<title>Is this a Bug?</title>
<link type='text/css' rel='stylesheet' href='external.css' />
</head>
<body>
<div class='main'>
<div class='cartpal'><input id='to_cart' name='to_cart' title='Add to Cart' type='button' value='Add to Cart' /><input id='paypal' name='paypal' title='Pay with PayPal' type='button' /></div>
</div>
</body>
</html>
Here is another behavior I don't fully understand.
/* external.css */
html,body{
padding:0; margin:0; background:#000;
}
body{
overflow-y:scroll;
}
.main{
width:980px; margin:0 auto;
}
.cartpal{
width:544px; height:64px; text-align:center; margin:0 auto;
}
#to_cart,#paypal{
height:64px; background:#eee; border:2px solid #007; border-radius:30px;
}
#paypal{
width:306px; background:url(https://www.paypalobjects.com/webstatic/en_US/i/btn/png/silver-pill-paypalcheckout-60px.png);
}
#to_cart{
width:200px; font:bold 20px Arial, Helvetica, sans-serif;
}
#to_cart:hover,#paypal:hover{
border-color:#fff;
}
#to_cart:active,#paypal:active{
border-color:#fc3;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<meta name='viewport' content='width=device-width'>
<title>Is this a Bug?</title>
<link type='text/css' rel='stylesheet' href='external.css' />
</head>
<body>
<div class='main'>
<div class='cartpal'><input id='to_cart' name='to_cart' title='Add to Cart' type='button' value='Add to Cart' /><input id='paypal' name='paypal' title='Pay with PayPal' type='button' /></div>
</div>
</body>
</html>
All I did was only set the font on #to_cart. Since the default font-size is even smaller, why is #paypal now a pixel or 2 from the top? Would not the half-leading on a smaller font be less?
I can do a work arounds, that's not the issue. I'm really just trying to understand why my first and last example exhibit this strange, chaotic behavior. What's the logic? Any help is greatly appreciated.
You need to make your Inputs floating to align in row. Just change your css:
#paypal, #to_cart {
height: 62px;
background: #eee;
border: 2px solid #007;
border-radius: 30px;
float: left;
}
Every browser provide some sort of default implementation to some elements,
Like in your case because of default styling provided by the browser...
input="button"
input="image"
Notice addition 1px of padding to top and bottom, because of default appearance rule by rendering engine of your browser.
input[type="button" i],
input[type="submit" i],
input[type="reset" i],
input[type="file" i]::-webkit-file-upload-button, button {
padding: 1px 6px;
}
here you can see addition padding is applied by browser for input="button" but the same dont exist for input="image"
More about appearance
I don't use min-height command. I want to add data in section area. But I see the situation in this picture. When I am adding bigger things than section area, I see the situation in first picture.
Intented Situation:
<!DOCTYPE html>
<html>
<head>
<title>Sayfa Düzeni</title>
<meta charset="utf-8">
<link rel="stylesheet" href="./script/style.css">
<style>
body{
margin:0;
padding:0;
}
#wrapper{
margin:auto;
max-width:900px;
border-color:black;
border-style:solid;
min-height:500px;
background-color:yellow;
}
header{
max-width:900px;
height:70px;
border-color:gray;
border-style:dashed;
background-color:cyan;
}
nav{
max-width:900px;
height:50px;
border-color:gray;
border-style:dashed;
background-color:pink
}
aside{
float:left;
width:150px;
min-height:280px;
border-color:gray;
border-style:dashed;
background-color:cyan;
}
section{
float:left;
width:738px;
min-height:280px;
border-color:gray;
border-style:dashed;
background-color:white;
}
footer{
float:left;
min-width:894px;
min-height:76px;
border-color:gray;
border-style:dashed;
background-color:pink;
}
</style>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Dağcılık ve Kış Sporları Ürünleri</title>
<meta charset="utf-8">
<link rel="stylesheet" href="./script/style.css">
</head>
<body>
<div id="wrapper">
<header>Header</header>
<nav>
Anasayfa
Hizmetlerimiz
Ürünlerimiz
Biz Kimiz?
İletişim
</nav>
<aside>Yan Menü</aside>
<section>
Section
</section>
<footer>Sayfa Altı</footer>
</div>
</body>
</html>
<!-- begin snippet: js hide: false console: true babel: false -->
for section css;
width: 80.5%;
overflow-y: scroll;
for aside css;
width: 18%;
I am making a website for some work and I have successfully made the background for the headers and all. But the problem is, I want to join it to the top of my webpage but it refuses to do that. How do I prevent it? (Not a duplicate of where the answer was adding !Important to the code)
Here is my code:
HTML:
<!DOCTYPE html>
<html class="html">
<head>
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>LMUN - Home</title>
<div class="header"></div>
</head>
</html>
CSS:
.html
{
background-color: #FFFFFF;
}
.header
{
background-color: #70A5DA;
height: 4.5%;
width: 90%;
box-sizing: content-box;
position:absolute;
margin-left:5%;
margin-right:5%;
margin-top:0 !important;
padding:0 !important;
}
Note: I want to keep position absolute as it allows me to set everything in percentage values which is very essential for me.
Try this
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>LMUN - Home</title>
</head>
<body>
<div class="header"></div>
</body>
</html>
CSS
body {
margin:0;
}
.html
{
background-color: #FFFFFF;
}
.header
{
background-color: #70A5DA;
height: 4.5%;
width: 90%;
box-sizing: content-box;
position:absolute;
margin-left:5%;
margin-right:5%;
margin-top:0 !important;
padding:0 !important;
}
Yes for this you need to set the margin for body and also you can add same for html as 0.Then it will reduce unnecessary spaces. Like for example.
html{margin:0;}
body{margin:0}
I'm building a simple website, and discovered that the while the CSS works fine in Chrome (which I usually work with), it doesn't at all in Firefox or IE. As in it's a blank white page with pictures and text, like I hadn't written any CSS. The HTML loads fine, but it's obvious that the CSS isn't being used at all.
Here's all of my HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Apple Tree House</title>
<link rel="stylesheet" type="css" href="stylesheet.css" />
<link rel="shortcut icon" href="root/icon.ico" type="image/ico" />
</head>
<body>
<div id="container">
<header>
<img src="root/logo.png" id="logo" width="300px" height="300px">
<h2>New Bed and Breakfast</h2>
<h1>Opening January 2015</h1>
<h4>Apple Tree House, Farndon Road, Woodford Halse, Northamptonshire</h4>
</header>
<div id="textcontainer">
---Basic text info here---
</div>
<footer>
<img src="root/footer.png" id="footbanner">
</footer>
</div>
</body>
</html>
And my CSS:
html, body{
margin: 0;
padding: 0;
}
body {
background-color:#85A366;
font-family:Arial, Helvetica, Sans-serif;
font-size:12pt;
margin:0 auto;
padding-left:10px;
padding-right:10px;
}
#container{
width:80%;
height:100%;
padding-left:5px;
padding-right:5px;
padding-bottom:0px;
padding-top:0px;
text-align:center;
color:black;
background:#FFFFEE;
margin:0 auto;
font-family: Goudy Old Style,Garamond,Big Caslon,Times New Roman,serif;
font-weight:600;
font-style:italic;
font-size:13pt;
color:#7D5833;
}
h1, h2, h3, h4, h5, h6 {
color:#472400;
}
h1 { font-size: 40px; }
h2 { font-size: 32px; }
h4 { font-size: 24px; }
#textcontainer{
width:45%;
text-align:center;
margin:0 auto;
top:auto;
}
footer{
text-align:center;
height:100px;
}
#footbanner {
max-width:100%;
max-height:100%;
}
#media screen and (max-width:420px) {
table{
font-size:8pt;
}
#container {
width:100%;
}
}
Anything you can see in there that's making it work in Chrome but not at all in other browsers?
<link/> type should be text/css not just css as shown below:
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
i'm no expert here, but it caught my eye that you used 'css' instead of 'text/css'.
perhaps that will fix the issue?
although strangely enough this does work for me:
http://prntscr.com/58m1fi
My layout currently breaks on 320px resolution (.info drops below .icon and breaks the layout) and I'm lost as to how about preventing it from breaking.
The .num info(number) is being loaded dynamically, and could be anything from 0 - 2147483647. If the screen resolution is not wide enough to show the .num and the .unread on one line, instead of breaking, I would like the .unread to drop down to the next line (display:block applied to it?). I tried to think of a way to use only css, then though I could use js to apply class if more than 2 digits are present, but this direction still doesn't seem right if the resolution is wider and could show more digits. E.G - 1000px could show many more digits... I would want it to stay on one line in this case.
My code is below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<style>
body{
padding:20px;
}
.wrapper {
background-color:#cccccc;
border-radius:20px;
overflow:hidden;
border:2px solid black;
}
.icon {
font-size:40px;
padding:12px;
display:block;
}
.icon, .info {
float:left;
}
.info {
border-left:1px solid black;
padding-left: 15px;
}
.info h3 {
font-size:16px;
margin:10px 0 0;
}
.info p {
margin:10px 0;
}
.num {
font-weight:bold;
font-size:20px;
}
.unread {
white-space: nowrap;
}
</style>
</head>
<body>
<div class="wrapper">
<div>
<div class="icon">X</div>
<div class="info">
<h3>Header Information</h3>
<p>
<a class="num">23</a>
<span class="unread">Unchecked Voicemails to Date</span>
</p>
</div>
</div>
</div>
</body>
</html>
http://plnkr.co/edit/18Mids4M3SupNwOT8ocP?p=preview
I figured it out. I needed to add a width to the .info container and make the elements inside of .info p display:inline-block.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<style>
body{
padding:20px;
}
.wrapper {
background-color:#cccccc;
border-radius:20px;
overflow:hidden;
border:2px solid black;
}
.icon {
font-size:40px;
padding:12px;
}
.icon, .info {
float:left;
}
.info {
border-left:1px solid black;
padding-left:15px;
width:60%;
}
.info h3 {
font-size:16px;
margin:10px 0 0;
}
.info p {
margin:5px 0 15px;
}
.info span {
display:inline-block;
}
.num {
font-weight:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class="wrapper">
<div>
<div class="icon">X</div>
<div class="info">
<h3>Header Information</h3>
<p>
<a class="num">2</a>
<span class="unread">Unopened Voicemails</span>
</p>
</div>
</div>
</div>
</body>
</html>
http://plnkr.co/edit/NanIRaMcK9AJvpNEQG3Z?p=preview