i have a logo called gif.gif, what i am trying to do is position it on the top left corner. At the moment there is a gap, i want no padding or margins.
This is my html and css
CSS
#header, .img
margin:0px;
padding:0px;
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="foo.css" type="text/css" /><!-- Footer Stylings -->
</head>
<body>
<div id="header">
<div class="logo">
<a href="https://www.google.co.uk"/><img src="gif.gif"/></a>
</div>
</div>
</body>
</html>
Try this:
body
{
margin:0px;
padding:0px;
}
Consider approaching it purely in CSS, like so;
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="foo.css" type="text/css" /><!-- Footer Stylings -->
<style>
html, body {
margin: 0px;
padding: 0px;
}
#header {
margin: 0px auto;
width: 960px;
}
.logo {
display: block;
width: 200px;
height: 200px;
background-image: url('gif.gif');
}
.logo:hover {
/* Some hover styling here */
}
</style>
</head>
<body>
<div id="header">
</div>
</body>
</html>
You would make your a tag a block (non-inline). I assumed the size to be 200x200 pixels. You can change that to your liking. The a tag will still maintain it's hyperlink properties, but display differently.
Try reset your css before your start do anything.
<style type="text/css">
* {
margin:0;
padding:0;
list-style:none;
vertical-align:baseline;
}
</style>
I make a simple test with css reset above and works fine. Just paste before all css in your html file.
Add to the body:
body{margin:0px; padding:0px;}
You can eliminate this kind of problems if you use reset.css or normalize.css
Related
The top of my page looks like this (blue bit at the top is the bottom of my bookmarks bar):
I have a wrapper div holding two imgs (left, right) and a div. I want these three things to all hug the top of the page and line up. I thought adding display: inline would do it, but that didn't work. Now I'm stumped.
CSS:
body {
margin:0px;
padding:0px;
}
#main{
display: inline;
}
p {
font-family:"Open Sans",sans-serif;
font-size: 14px;
}
#img1{
float:left;
}
#img2{
float:right;
}
.design-img {
/*border:1px red;*/
display: inline;
top:0px;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"> </meta>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/libs/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="js/libs/raphael.min.js"></script>
</head>
<body>
<div id='container'>
<img src='go.jpg'/ id='img1' class='design-img'>
<div id='main'>
<h1>Table of Contents</h1>
<p></p>
</div>
<img src='go.jpg'/ id='img2' class='design-img'>
</div>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
#main {
display: inline-block;
}
This should do the trick.
Look for the differences between inline and inline-block
Put this css may this help you..
#img1{ width:30%; float:left;}
#img2{ width:30%; float:right;}
h1{ margin:0; width:40%;float:left;}
The problem is that you have #img2 after the main div in the source, which means it starts further down than the first image. Floating it to the right won't make it move up on the page!
One solution is to move the <img> up to the top, near the first <img>, so that the main div comes after.
body {
margin: 0px;
padding: 0px;
}
#main {
display: inline;
}
p {
font-family: "Open Sans", sans-serif;
font-size: 14px;
}
#img1 {
float: left;
}
#img2 {
float: right;
}
.design-img {
/*border:1px red;*/
display: inline;
top: 0px;
}
<div id='container'>
<img src='https://placehold.it/150x150' id='img2' class='design-img'>
<img src='https://placehold.it/150x150' id='img1' class='design-img'>
<div id='main'>
<h1>Table of Contents</h1>
<p></p>
</div>
</div>
No changes to the css.
By the way, you have an error in your source: a stray / in the <img> tag. Under some circumstances, this may cause the error correcting routines to think this is the end of the <img> tag. So remove those.
I am making an HTML website's index page now, and I don't know why this CSS isn't working. My CSS code is as follows, and my HTML code after that:
body {
background-image:url("background.png");
font-family:sans-serif;
}
#content {
margin:0 auto;
overflow:auto;
background-color:white;
border-radius:10px;
width:60%;
}
.header {
margin:10px;
}
.body {
margin:10px;
}
.footer {
margin:10px;
}
HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Welcome!</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id="content">
<div id="header">
<p>This is the header!</p>
</div>
<div id="body">
<p>This is the body!</p>
</div>
<div id="footer">
<p>This is the footer!</p>
</div>
</div>
</body>
</html>
So, what ends up happening is that overflow: auto is not setting the side margins, but it is successfully setting the top and bottom margins. Thanks in advance.
By the way, all of the images are also in the directory, and they are working fine.
You're using class selectors in your CSS and id attributes in your HTML.
Either change your CSS to #header, #body, and #footer.
Or, change your HTML to class="header", class="body", and class="footer".
i'm trying to make a div have a width using the absolute positioning and it work fine in google chrome but in fierfox it doesnt. why is there a conflict ? i tried the exact same code in both browser and on fierfox doesnt reconize it.
<!DOCTYPE HTML>
<html >
<head>
<meta charset="utf-8"/>
<title>Kelma</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<input type="text" id="center" />
</body>
</html>
and this is the css file
#center{
position: absolute;
left:50px;
right: 50px;
}
Take a look at this:
<!DOCTYPE HTML>
<html >
<head>
<meta charset="utf-8"/>
<title>Kelma</title>
<link rel="stylesheet" href="style.css" />
<style>
#wrapper
{
position: absolute;
left:50px;
right: 50px;
}
#center
{
width:100%;
}
</style>
</head>
<body>
<div id="wrapper">
<input type="text" id="center" value="test" />
</div>
</body>
</html>
i wrapper the input with a div, and i applied the styling to the div, and 100% width to the input.
I've gotten it to work with inline css
here is an example from my personal website
<div style="position:absolute; top:60px; bottom:5%; left:5%; right:5%; width:90%; text-align:center;"> SOME TEXT </div>
I personally like to use the percent as it can look better on some sites. Let me know if this works for you! To see it live: http://cbogausch.com/portal It works in both firefox and chrome
Try this:
#center{
position: absolute;
left:0px;
width: 100%;
}
Isn't this what you mean?
body{padding: 0 50px;}
input{width:100%;
Use this on your css:
#center {
margin: 0 auto;
width: 90%;
}
Hgs,
Vinicius =)
I try to stretch a DIV to the bottom of the page with a element above it. That basically works but the height of the element above it is added to the DIV.
Please see jsFiddle example: http://jsfiddle.net/CjKFX/
How to fix this?
CSS:
html, body {height: 100%;}
#header, #headline { position:absolute; width:100%; top:0; }
#header {height: 100px; z-index:1; background-color:#f40; }
#headline {height: 100%; top:100px; margin-top:-100px; background: #000;}
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<header id="header">
header
</header>
<section id="headline">
section
</section>
</body>
</html>
http://jsfiddle.net/Zeggw/
so I keep having this weird problem that I have never seen before ... as we all know, a div is inside a body and we can make body margin 0 and padding 0 to cover the entire page with height and width 100% ... The problem is, when I try to margin a div inside the body THE ENTIRE BODY moves :S .. and to my surprise if I use firebug and hover over the body, its not the entire page. its just slightly bigger than the dive ... here is the code (first part is HTML, second is CSS)
HTML:
<!DOCTYPE HTML>
<html>
<head>
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="styles/general-style.css"/>
<link rel="stylesheet" type="text/css" href="styles/css-buttons.css"/>
<link rel="stylesheet" type="text/css" href="styles/css-colors.css"/>
<!-- Scripts -->
<script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div id="content"></div>
<div id="footer"> <!-- footer div starts here -->
</div> <!-- footer div starts here -->
</body>
</html>
CSS:
html{
}
body{
width: 100%;
height:100%;
padding: 0;
margin: 0;
}
#content{
background: red;
margin-left: auto;
margin-right: auto;
margin-top: 100px
height: 350px
width:350px
}
#footer{
margin-left:auto;
margin-right:auto;
}
#footer-text{
font-size:xx-small;
margin-top:30px;
text-align:center;
}
Thats the way it works, margins collapse. What are you trying to do? You could just set the background-color on the HTML tag, or use CSS's top/left properties to position the div.
See also: http://www.w3.org/TR/CSS21/box.html
As TJHeuvel already said, this is collapsing margin. There are two solutions to this: set padding on the parent element (body in this case) or border. You can read more about it here: http://complexspiral.com/publications/uncollapsing-margins/
HTMl CODE
<!DOCTYPE HTML>
<html>
<head>
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="styles/general-style.css"/>
<link rel="stylesheet" type="text/css" href="styles/css-buttons.css"/>
<link rel="stylesheet" type="text/css" href="styles/css-colors.css"/>
<!-- Scripts -->
<script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div id="content"></div>
<div id="footer"> <!-- footer div starts here -->
</div> <!-- footer div starts here -->
</body>
</html>
CSS
html{
}
body{
padding: 0;
margin: 0;
}
#content{
background: red;
margin-left: auto;
margin-right: auto;
margin-top: 100px
height: 350px
width:350px
}
#footer{
margin-left:auto;
margin-right:auto;
}
#footer-text{
font-size:xx-small;
margin-top:30px;
text-align:center;
}
TRY THIS