I'm using this code to center/position a fixed width image as my background. I need to add color around the image that fills the margins in the browser window. I've tried background color, border color...
So, the width of the image is 1050px. If the browser window is 1500px I want to make the remaining area black (for instance). How can I do this?
#content {
text-align: left;
width: 1050px;
height: 825px;
margin: 0 auto;
padding: 0px;
background-image: url(file:///X|/CarFingers/tabback1_hor.png);
background-repeat: no-repeat;
}
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
color: #333333;
text-align: center;
}
<div id="content">
<body>
</body>
</div>
First: put the div INSIDE your body. Then you can just edit your body background like this:
body{
background-color: black;
}
Your HTML is invalid, you should not have a div tag enclosing the body tag. If you put the div within the body you should be able to simply set the background color of the body.
If you are wanting to know how to color a border in CSS it would be
border: 10x solid #000;
or
border-width: 10px;
border-color: #000;
border-style: solid;
#content {
text-align: left;
width: 1050px;
height: 825px;
margin: 0 auto;
padding: 0px;
background-image: url('file:///X|/CarFingers/tabback1_hor.png');
background-repeat: no-repeat;
}
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
color: #333333;
text-align: center;
background-color: #000; /* Add this to your code */
}
In your html you should do something like this:
<body>
<div id="content">
</div>
</body>
You should never enclose the BODY in DIV
Related
How would I fit a small logo like - Image - in the top right of my border so it fits in and does not resize the border?
My code:
<html>
<head>
body {
text-align: center;
background-color: white;
margin: 0;
padding: 0;}
h1 {
font-family: 'Fjalla One', sans-serif;
color: #000;}
p {
font-family: 'Roboto', sans-serif;
font-size: 14px;}
<style>
#logo {
border-style: solid
border-color: #000;
border-width: 100%;}
</style>
</head>
<body>
<div id="logo">
<h1>example.com</h1>
<p>Examples examples examples.</p>
</div>
</body>
It's really hard to tell what you want to achieve because your code is buggy and you haven't showed how you want to put this image.
One possible solution is for example:
<html>
<head>
<style>
body {
text-align: center;
background-color: white;
margin: 0;
padding: 0;}
h1 {
font-family: 'Fjalla One', sans-serif;
color: #000;}
p {
font-family: 'Roboto', sans-serif;
font-size: 14px;}
#logo {
border-style: solid;
border-color: #000;
border-width: 100%;
background: url('WdP7OUV.jpg') top right no-repeat;
}
</style>
</head>
<body>
<div id="logo">
<h1>example.com</h1>
<p>Examples examples examples.</p>
</div>
</body>
If the image is too big I would strongly recommend you to resize it using any software. However you can also do it the other way adding after:
background: url('WdP7OUV.jpg') top right no-repeat;
line
background-size:80px 80px;
But in this case you unnecessary load too big image and it's a waste of transfer so better to scale it in graphic software.
Whenever i give padding to text in div the whole height of div changes, and I have to manage the height according to div.
I have tried with this
its my html
<div>Home</div>
its the css i use
div {
font-size: 27px;
text-align: center;
margin: 5px 3px 0 0;
margin: 75px 0 0 0;
float: right;
width: 208px;
height:100px;
border-radius:2px;
font-family: "Comic Sans MS", cursive;
background-color: #F00;
color:#FFF;
}
Here, the text is on top while I want the text to be in centred. Can anybody help?
Use line-height: 100px; for center text
Demo Here
So I'm trying to get into html/css again, and having some issues with the border property.
If the border of the div ONE is 1, padding misbehaves in the div TWO. This can be "fixed" by using margins on TWO instead of padding.
If there is no border on ONE, the margins on TWO push ONE down with it. Using padding instead of margins fixes this, however, it does not make sense.
Anyone have any words of wisdom on the use of borders and divs? Pretty confused here.
The code below is for margins, and no border.
HTML Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/tyle.css" />
</head>
<body>
<div class="ONE">
<div class="TWO">This is some text as a test.</div>
</div>
</body>
</html>
CSS style:
body {
background: #e3f1e2;
margin: 0px;
padding: 0px;
font-family: arial;
font-size: 12px;
color: #000000;
}
a:link {text-decoration: none; color: #FFFFFF}
a.menu:link {text-decoration: none; color: #FFFFFF}
a:visited {text-decoration: none; color: #FFFFFF}
div.ONE {
/*border: 1px solid #CCCCCC;*/
background-image: url("../test.jpg");
background-repeat: no-repeat;
text-align: left;
width: 1024px;
height: 800px;
padding: 0px;
margin: 0px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
}
div.TWO {
margin-top: 80px;
margin-left: 120px;
}
borders are usually are on the outside. You can use box-sizing:border-box; in your css to behave. also see : Placing border inside of div and not on its edge
I have a to most probably simple problem.
My page has a background color and contains a container, then a contentcontainer to put the page in the middle. Now this content container has a different background color, but a small space where we see the original page background color is visible at the top and bottom.
The CSS file is like this:
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #E0EBED;
}
#container {
width: 100%;
}
#contentcontainer {
background-color: #FFFFFF;
width: 1000px;
margin: 0 auto;
}
The body looks like this:
<div id="container">
<div id="contentcontainer">
<p>Some content</p>
</div>
</div>
What do I have to to to make this small space disappear.
I have already tried to add 0 top padding to the container div and body.
After a few answers I have discovered that margin: 0; the body css takes out the space at the top. I still have the same kind of space at the bottom though.
To show people what I mean:
NOW THIS IS THE FIX:
CSS:
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #E0EBED;
margin: 0;
}
#container {
width: 100%;
}
#contentcontainer {
background-color: #FFFFFF;
width: 1000px;
height: 100%;
margin: 0 auto;
}
I added margin: 0; to body and height: 100%; to content container. If you have the same problem do not forget to add the margin: 0; to the body as it will not work without that.
Thanks to all that answered this question and helped me solve this!
Add this to your CSS:
* {
margin: 0;
padding: 0; }
body has padding by default. Make it 0px by -
body{padding:0px;}
In my CSS, I've created a menubar <div> and a header <div>. My intention is to have the menu line flush with the BOTTOM of the header's background image, so I've nested the menu inside the header. Alas, it's not working, and I can't figure out why.
I've created a fiddle, but I can't figure out how to upload the associated image file, so I've attached the header placeholder image. I've also uploaded a Wireframe demonstrating what I'm trying to make happen.
If you're not able to view the fiddle, here's my HTML and CSS:
HTML:
<!DOCTYPE html PUBLIC "-//W3c/DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- ------------------------------------------------------------------------>
<head>
<title>Test</title>
<LINK rel="stylesheet" href="t2.css" type="text/css">
</head>
<!-- ------------------------------------------------------------------------>
<body>
<div id="header" >
<div id="menubar">
home | about | contact
</div>
</div>
</body>
</html>
CSS:
body {
background-color: #FFFFFF;
color: #000064;
font-family: "Calibri", sans-serif;
font-size: 12px;
}
h1 {
background-color: #FFFFFF;
color: #000064;
font-family: "Calibri", sans-serif;
font-size: 2em;
}
h2 {
background-color: #FFFFFF;
color: #000064;
font-family: "Calibri", sans-serif;
font-size: 1.5em;
margin-left: 5%;
}
h3 {
background-color: #FFFFFF;
color: #000064;
font-family: "Calibri", sans-serif;
font-size: 1em;
margin-left: 20%;
}
p {
background-color: #FFFFFF;
color: #000064;
font-family: "Calibri", sans-serif
font-size: 12px;
padding: 0px 0px 0px 600px;
margin: 0px:
float: bottom;
}
a {
color: #000064;
text-decoration: none;
font-family: "Calibri", sans-serif;
font-size: 14px;
}
a.visited {
color: #640064;
weight: bold;
text-decoration: none;
}
#header {
height: 120px;
background-color: #ffffff;
background-image: url(headerblock.jpg);
background-repeat: no-repeat;
background-position: top left;
float: bottom;
}
#menubar {
border-width: 1px 0px 1px 0px;
border-color: #000064;
border-style: solid;
font-family: "Calibri", sans-serif;
font-size: 14px;
line-height: 16px;
float: bottom;
padding: 0px 0px 0px 600px;
margin: 0px 0px 0px 0px;
}
#menubar a {
text-decoration: none;
color: #000064;
float: bottom;
}
#menubar a.visited {
text-decoration: bold;
color: #000000;
float: bottom;
}
Anyone have any ideas?
Put the image in a separate div, all inside the header, like so:
<div id="header">
<div id="banner"></div><!--
--><div id="menubar"></div>
</div>
Then use display: inline-block; on #banner and #menubar.
Note the HTML comment after #banner and before #menubar. It's to remove the white space between those elements, you can remove it if you don't care about the blank space. Look at this for more info: Fighting the Space Between Inline Block Elements.
Check this fiddle.
By the way, you should use <ul> and <li> for your navigation.
And use borders on your separators, instead of |. That's for presentation, and presentation should be handled with css, not html.
Your #menubar has a padding 600px left that pushes the div out. Also Float can not be Bottom, It is either Left or Right.
To make it perfect place a position:relative to the header div and position:absolute; bottom:0px; left:0px; to the child div place it exactly
The float parameter accepts left or right. There is no such thing as float: bottom.
But if you add position: relative to the header div. You can position the menu with position: absolute; left: 0; bottom: 0;
Update
You might have to specify a width for the menu bar, te prevent the text from wrapping downwards.