Why do the bg and header not overlap?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>My First CSS Webpage</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<body>
<img class="bg" src="bg.jpg"/>
<img class="header" src="header.png"/>
</body>
</html>
#bg{
position:absolute;
left:0px;
top:0px;
}
#header{
position:absolute;
top:0px;
left:0px;
}
Use a . instead of a # or change class= to id=
I recommend the latter because I'm assuming that bg and header are unique.
<img id="bg" src="bg.jpg"/>
<img id="header" src="header.png"/>
See here for more info.
The two images in the html have been given classes, while in your css you define styles for ids.
If the element has a class, target it in css using .classname, if it has an id target it using #idname. If the element only occurs once in the html, use id. If there are multiple occurences, use a class.
also, I would suggest for 2 elements which use the same basic properties
to define them as:
#element1, #element2
{
/* css properties */
}
This will save space on your css file, and can add up to quite alot.
In the CSS, a class selector is a name preceded by a full stop (“.”) and an ID selector is a name preceded by a hash character (“#”).
The HTML refers to the CSS by using the attributes id and class.
The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.
you can not use class in your HTML file and use a hash character (“#”) in your CSS file to style a particular element.
Related
Edited after seeing a few copy& paste errors
Until I read the question HTML5 - Can I use Width and Height in IMG? I thought that there is only 1 way of defining the width/height of elements. 1 way in the
sense of that it always works the same.
Now that question has intrigued me and I began to wonder. With separate .css files I only know of 1 way to define height/width for elements:
img#myexample { width: 48px; height: 48px }
Now in the linked question there were 2 different ways of how the width were defined (corrected the error there in the original question where px were mentioned in the first variant):
<img src="...(here image)...." width="50" height="50" />
<img src="...(here image)..." style="width: 50px; height: 50px;" />
I did not know until that question that both of these have different results. So my question is how
would I need to adapt the above .css line to include both variants (or is that possible / adviceable at all)?
To be add to use an external css stylesheet you have link it in the head of your HTML page.
HTML
<!doctype html>
<html>
<head>
//Link to your stylesheet below
<link rel="stylesheet" href="yourstylesheet.css" />
</head>
<body>
<h1>Blah Blah</h1>
<img src="your image source" alt="Some text"/>
</body>
</html>
Now that you have external stylesheet linked in your HTML now you can modify the elements in the body of your HTML page.
yourstylesheet.css
h1{
font-size: 14px;
}
img{
width: 50px;
height: 50px;
}
The stylesheet will overwrite what you define in the attributes.
So if you define img{width:100px;} in a stylesheet and use an img tag like <img src="pic.png" width="200px" />, the image will be 100 pixels wide. If you do not define a width in your stylesheet, the attribute will be used of course.
You can define the css either in your html document like with surrounding tags or have a .css-file that you link like this (which is usually cleaner in a large project).
<link rel="stylesheet" type="text/css" href="style.css">
I run into this, and I am not sure why it is happening...
Taking the html below as an example, as it is, it will display grey areas for the sections as instructed by the CSS. However, when I include <!Doctype html> in the first line it breaks down.. Furthermore, the code below does not work at all with IE9.. why?
Many thanks in advance.
<html>
<head>
<style type="text/css">
.sec_class{
width:50%;
height:15%;
border:1px black solid;
padding:0px;
position:relative;
background-color:grey;
}
</style>
</head>
<body>
<section class = 'sec_class'></section>
<section class = 'sec_class'></section>
<section class = 'sec_class'></section>
</body>
</html>
Your sections have basically no height, because height given in the percentage (height: 15%;) will always be relative to the parent's height. body has zero height in your case, and the 15% of that is still zero.
This should help:
html, body { height: 100%; }
jsFiddle Demo
Be sure to ALWAYS include the doctype.
In order to make IE styles HTML5 tags (section, nav...) you must use a polyfill, because it can't by default. You can use: http://code.google.com/p/html5shiv/
It's just a JS file that you must include on your HTML (using IE conditional comments):
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Also you should not use single quotes:
<section class="sec_class"></section>
Also, of course, if you are setting a porcentual height on your section elements, his parent must have also a defined height. On your case, a 15% height of nothing (body has no height) is… nothing.
I'm learning css and trying to change background-color of all html except one div tag using :not element.
When i put like body:not(.one) it is changing background-color of whole html but not excluding the div mentioned in :not condition. Same problem if i use *:not(.one) Am i doing correct?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
body:not(.one)
{
background-color:blue;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div class="one">
this is first div
</div>
<div >
this is second div
</div>
<p>
this is a paragraph
</p>
</body>
</html>
The background color of your div is transparent. It looks to me like you're setting the body color and then expecting the div to be white or such like.
Given the CSS rule you're using, it's only styling the body tag anyway. You don't need to tell it not to style the div because it wasn't going to anyway.
The not() selector comes in handy when you want to style all divs for example, except ones that have a given class, such as:
div:not(.items){ /* some styles */}
This makes sens because there may be many div that we want to style, except div with the class items.
Your example in the question doesn't make so much sense because you're styling the body of which there's only one.
Your statement actually says:
Style all body tags except any body tag that has the class name one.
The :not selector is a CCS3 feature which not many browser support. Which browser are you testing in?
If all browsers are to be supported you should probably look into a javascript/jquery solution.
I'm trying to make a page with an image meant for being loaded in an iframe. But there is 4px of space at the bottom of the body tag that I can't seem to get rid of. Heres my simplified source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
body, a, head, img
{ margin: 0;
padding: 0;
border: none;
border-width: 0px;
}
</style>
</head>
<body>
<a><img src="http://www.halolz.com/wp-content/uploads/2008/09/portals.jpg"></a>
</body>
</html>
You'll notice if you shrink your window within 4 pixels of the bottom of the image, you'll get a scroll bar. Where the crap is that space coming from?
The image is placed on the base line of the text line that it's in. The space below the image is the distance between the base line and the bottom of the character cell, where there is space for hanging characters like g and j. With the default font and font size of your browser that happens to be four pixels, you will get slightly different results in other browsers.
One solution is to make the image a block element, that way it's not part of a text line, and doesn't have a space below the base line. The anchor tag is an inline element and it can't have a block element inside it, so to make the elements make sense after the style is applied you have to make the anchor tag a block element also:
a, img { display: block; }
(To make the code valid XHTML you would also need a block element outside the anchor tag, the body tag can't contain inline elements directly. Making the anchor tag a block element using style doesn't help, the structure has to be valid also before the style is applied.)
All browsers come with default styles. Although you are resetting your tags for the page, there's no such tag as image in your CSS.
I suggest using a more global reset stylesheet. I like the one from Eric Meyer. Something as simple as this can help level the playing field between browsers.
replace image with img on your style
Put your "a" and "img" tag inside a div like this
<div><a><img src="http://www.halolz.com/wp-content/uploads/2008/09/portals.jpg"></a></div>
This is a follow-on to hallie's answer, here is a full working example that has been updated in a number of ways to make it actually XHTML 1.0 Transitional compliant as well as not showing the spaces. Make sure NOT to introduce whitespace after the </a>
<!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>This is the title</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<style type="text/css">
body, a, head, img
{
margin: 0px;
padding: 0px;
border: none;
border-width: 0px;
}
</style>
</head>
<body>
<div><a><img alt="Cat In Portal" src="http://www.halolz.com/wp-content/uploads/2008/09/portals.jpg" /></a></div>
</body>
</html>
All Internet browsers have a small bit of padding they add to the pages themselves. One surefire way to get rid of it is to simply nuke all margin and padding from every element.
*
{
margin: 0px;
padding: 0px;
}
Of course, this will remove margin and padding form every element on your pages, so use this with caution, overriding this default whenever you need padding and margin (every other selector has a higher priority than this global one, so it's easy to do).
The code is as below:
<html>
<head>
<title>test</title>
</head>
<body>
<div><span>shanghai</span><span class="margin"> </span><span>male</span></div>
</body>
</html>
.margin {
width:40px;
height:auto;
}
You can't give it a width because it is an inline element.
This property specifies the content
width of boxes generated by
block-level and replaced elements.
This property does not apply to
non-replaced inline-level elements.
-- CSS 2.1 Width property
You can fix this by making it a block or inline-block element instead:
display:inline-block
However, this may not be supported by some browsers. You can probably achieve the same result with this, however:
margin-left:40px
CSS should go into the head section and should also be wrapped in < style > tags...
Unless you are accessing this value from a stylesheet. You would need to reference this in the head section of your document:
<link rel="stylesheet" type="text/css" title="RSS" href="MyStyleSheet.css">
You should indicate that this is a CSS rule : Ways to include CSS in your page.
put
<style>
.margin {
width:40px;
height:auto;
}
</style>
I think the problem is that the tag is empty. Just put " " between the two tags.
Try changing you class name maybe?
margin is an attribute. I'm not sure if CSS has reserved keywords though.