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".
Related
I made a simple page using html and ccs only, it contains two colored div blocks which isn't rendered on a page: there should be yellow and green div's appear on a page, but instead blank page.
I checked for an errors - browser shows no errors.
HTML:
<html>
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<title>Keyboard Test</title>
</head>
<body>
<div class="field"></div>
<div class="key" id="a key"></div>
</body>
</html>
CSS:
.field {
background-color:yellow;
}
.key {
background-color: green;
}
They both in the same folder, name of files containing html and css are index.html and styles.css.
Add some padding or content
.field {
background-color:yellow;
padding:20px;
}
.key {
background-color: green;
padding:20px;
}
<html>
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<title>Keyboard Test</title>
</head>
<body>
<div class="field">test</div>
<div class="key" id="a key">test</div>
</body>
</html>
the divs are empty so their computed height is 0.
Use a min-height or add a character like a
Because they're empty.
<div class="field">text</div>
<div class="key" id="a key">text</div>
put something in them and youll see them
The divs are empty, ie they have no children and have no height assigned. If you add content to the divs, such as images or text or give them some sort of height property, you will see them.
You don`t have any dimensions.
Add them like this:
.field {
background-color:yellow;
height: 50px;
}
.key {
background-color: green;
height: 50px;
}
Div is a block element and when you use it it expect some content from you.
You can make the divs visible in following ways:
div{
min-height:27px;
}
.heights-a{
background-color:green;
}
.heights-b{
background-color:yellow;
}
.space-div{
background-color:orange;
}
.content-div{
background-color:white;
position:relative;
text-align:center;
}
.chakar{
border-radius:50%;
border:1px solid blue;
width:25px;
height:24px;
position:absolute;
left:44%;
top:0%
}
<!-- Using Space-->
<div class="space-div"> </div>
<!-- Using Content-->
<div class="content-div">
<div class="chakar">
</div>
</div>
<!-- Using Height-->
<div class="heights-a"></div>
<div class="content-div"> INDIA!!!</div>
I'm just trying to make my website layout. Now I have a problem: right navigation div stays under the Left navigation one. The blue one should be in the same line as the green.
Any suggestions?
I was following this tutorial: http://www.subcide.com/articles/creating-a-css-layout-from-scratch/P6/ and done the same, but it doesn't work as it should be.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" -->
<html>
<head>
<!-- Svetaines dizainas -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<div id="topmenu">TOPMENU</div>
<div id="topheader">TOP HEADER</div>
<div id="lnav">Left Navigation<div>
<div id="rnav">Right Navigation</div>
<div id="footer">FOOTER</div>
</div>
</body>
</html>
CSS:
body, h1
{
margin:0;
padding:0;
}
#container
{
width:1024px;
margin:auto;
}
#topmenu
{
width: 1024px;
background-color:red;
height:53px;
}
#topheader
{
width:1024px;
height:170px;
background-color:orange;
}
#lnav
{
width:1024px;
background-color:green;
}
#rnav
{
width:373px;
float:right;
background-color:blue;
}
#footer
{
width:1024px;
height:190px;
background-color:pink;
}
#lnav
{
width:1024px;
background-color:green;
}
This shouldn't be 1024 right?
Change it to 651px (from my head) to make it fit.
You could ofcourse put it inside the leftmenu and float it right aswell, (make sure the html of right would be above the content of left). But I wouldn't recommend this.
Arghh my own silly mistake:
<div id="lnav">Left Navigation<div>
I think you can understand what's wrong :D
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
I have a website in which the layout look something like the following:
The css for the main content is as follows:
.home {margin:178px 0 0 100px;width:800px;padding:0 10px 0px 10px;float:left;height:auto!important;height:310px;min-height:310px;}
The problem is whenver I resize the browser, the main content div instead of staying there and the browser getting horizontal scrollbars
moves down automatically.
If I resize the browser back to its original size, the main div doesn't even come back to its original place. How do I correct this thing?
Add the two elements (left,right) inside a container div, and give this container a min-width
<head>
<style type="text/css">
body {
min-width:750px;
min-height:500px;
}
div.container {
min-width:600px;
min-height:450px;
}
div.left, div.right {
min-height:400px;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</body>
This is two column full screen layout with colorized column background (if necessary) & jsfiddle:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%;
background-color:#ccc;
}
#header {
background-color:#ccf;
}
#container {
position:relative;
min-height:80%;
border:4px solid red;
overflow:hidden;
}
#left {
float:left;
width:200px;
background-color:#cfc;
padding-bottom:9999px;
margin-bottom:-9999px;
}
#main {
position:relative;
margin-left:200px;
background-color:#ffc;
padding-bottom:9999px;
margin-bottom:-9999px;
}
#footer {
background-color:#fcc;
}
</style>
</head>
<body>
<div id="header">HEADER</div>
<div id="container">
<div id="left">LEFT</div>
<div id="main">MAIN</div>
<div style="clear:both"></div>
</div>
<div id="footer">FOOTER</div>
</body>
</html>
Something interesting is happening with my HTML code and I was hoping someone could explain what is going on here.
I have a very simple website with a container div, header div, and body div and it looks like the html elements aren't responding at all to the divs(They aren't going in the div they are between in the html markup).
Was wondering why its behaving this way.
Here is the html:
<html>
<head>
<title>Andy</title>
<link rel="stylesheet" href="style-andy.css" type="text/css" media="screen" />
</head>
<body>
<div id='container'>
<div id='header'>
<h1>Andy </h1>
</div>
<div id='image'>
<img src='main.jpg' />
</div>
</div>
</body>
</html>
Here is the CSS:
html, body
{
margin:0;
padding:0;
}
#container
{
width:1024;
margin:0 auto;
}
#header
{
width:1024;
padding-bottom:10px;
border:1px solid black;
}
#header h1
{
float: right;
display: inline;
color: black;
font-family: helvetica, arial;
font-weight: 100;
}
#image
{
width:1024;
height:100;
border:1px dotted yellow;
}
Your HTML looks fine, but your CSS is missing the px measurement on your widths and heights and your h1 tag is being made to float: right; meaning that the header div probably won't have a height (You will need to 'clear' the header div)
Edit:
FYI, a simple way to clear is to just put a div with a class of clear under the content you need to clear, then use the CSS to tell that div to clear, for example:
HTML:
<div id="header">
<h1>Andy</h1>
<div class="clear"></div>
</div>
CSS:
.clear {
clear: both;
}
There are other ways of doing this, for example: http://www.webtoolkit.info/css-clearfix.html