<h:head>
<title>Facelet Title</title>
<style>
.top{
margin: 0;
padding: 0;
background-color: blue;
height: 15px;
width: max-content;
}
</style>
</h:head>
<h:body>
<div id="header" class="top" >
</div>
<div id="content" class="middle">
</div>
</h:body>
So,I'm trying to fill with color the whole div, but I always get a white border around it. How can I do this?
Aside from what Lennart answered, you need to make sure there isn't other CSS causing this issue, take note of this:
https://developer.mozilla.org/en-US/docs/Web/CSS/max-width
MDN notes that max-content is an experimental API that should not be used in production code. Unless you are purposely using experimental API I would suggest you stick with percentage values, inherited values, or explicit values.
if you mean that you want to remove margin around div use star *
*{
margin: 0;
padding: 0;
}
but it is not clear if this is want you wanted.
The following should be added to your CSS file, browsers add a padding/margin to their view.
body,
html {
padding: 0;
margin: 0;
}
I'd also suggest that you make sure to follow HTML convention.
You currently have this:
<div id="header" class="top" >
</div>
You should clean up the spacing so that it looks like this:
<div id="header" class="top"> <!--Notice that I cleaned up the spacing here -->
</div>
Related
This CSS works on firefox and chrome, but for some weird reason it wont work on IE =(
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>I hate u, ie :p</title>
<style>
header>nav, main, footer>nav {
max-width: 500px;
padding: 0em;
margin: 0em auto;
}
header, footer { min-width: 100%; background-color: #c0c0c0;}
main { background-color: yellow; }
main>section, main>aside { display: inline-block; }
main>section { background-color: aqua; }
main>aside { background-color: pink; }
</style>
</head>
<body>
<header>
<nav>
<ul><li>Header is centered =)</li></ul>
</nav>
<nav>
<ul><li>Header (nemu 2) is centered =)</li></ul>
</nav>
</header>
<main>
<section>
<h1>Why IE won't center me?</h1>
</section>
<aside>
<p>Stackoverflow: please help me</p>
</aside>
</main>
<footer>
<nav>
<ul><li>Footer is centered =)</li></ul>
</nav>
</footer>
</body>
</html>
I'd appreciate it if you help me fix this, preferably without adding/removing elements. I'd like to keep the current semantic if possible. If not, o well...
It is worth to mention that if I do something like <main><div>...</div></main> and add main>div { margin: 0em auto;} IE (and all other browsers, as expected) center main's content. But like I mentioned, I'd like to not break the semantics.
IE does not support the main element. To get it to work, however, you can just set main { display:block; } and it will work. This is a similar fix to the other new HTML5 elements, such as section and nav, which weren't supported but could be added by just adding that CSS.
As I don't have enough reputation, I post my idea as an answer:
My guess is, that you have to add position: relative; for your .main.
Browsers have a default.css with default values for keys you didn't set. I think (but didn't check) the IE has different std-values than other browsers. That could cause problems.
The main element is not supported in IE:
MDN
caniuse
Which I believe means there is no default styling for the main element, so you will have to add it. Most reset stylesheets will do this for you for the newer, more semantic elements.
Add display: block to your CSS selector for main and it should work.
main {
display: block;
max-width: 500px;
margin: 0 auto;
}
I have a division placed on the bottom of the page. I put an image into this division, but I don't know how to modify the image. The problem may be, that the inline style for <img> is setting modification rules for all images. I have an inline style sheet that has this code and HTML code for <div>.
My CSS code looks like this:
<style type="text/css">
img {
image-align: center;
padding: 10px;
height: 200px;
width: 140px;
}
div {
position: absolute;
right: 10px;
}
</style>
And my HTML code is like that:
<div align="center" >
<img src="images/music_banner.jpg" >
</div>
you can do this:
div img{
}
or give the div a name and do this
#div img{
}
or you give the img an id as below
<div>
<img id="mg"/>
</div>
Use id as #mg in CSS code.
or you can do as define class name in img tag.
<div>
<img class="mg"/>
</div>
Use class as .mg in CSS Code.
You might try learning a little bit more about CSS selectors: these are the rules that tell the browser which element you'd like to apply the following rules to.
I would recommend Code Academy for an easy to follow course. You can skip down to the CSS section if you are already comfortable with HTML.
Note: if you google CSS, you'll get "w3schools" as the first results. That website is generally derided on Stack Overflow. I don't know if it's really that bad, but I tend to skip it just because everyone else has a bad opinion of it. Your call if you find it helpful of course.
I should note that I like to use the W3C (World Wide Web Consortium) website for reference, as they're the ones trying to make everything standard. It is a pretty technical read, though.
Create a div element in your HTML code:
<div class="parent">
<img src="image">
</div>
Than add this to your CSS code:
.parent {
width: 42px; /* I took the width from your post and placed it in css */
height: 42px;
}
/* This will style any <img> element in .parent div */
.parent img {
height: 100%;
width: 100%;
}
I have a quick question, I'm making a simple html document, with an image that I want to fill the entire page.
For some reason, it wants to create a border around the image. I've tried border="0"; and padding 0px 0px 0px 0px;
Here is the code in which I have: (You can also check it out live if you prefer www.kidbomb.com/chefwannabe)
<!DOCTYPE html>
<html>
<head>
<title>Pre-Order Now!</title>
</head>
<body>
<img style="width: 100%; overflow:hidden;" src="http://www.kidbomb.com/chefwannabe/chefwannabepreview.png" />
</body>
</html>
Add the following CSS in your code. Default body will give some margin and padding. So better whenever you start new work, add this style in your css for getting the proper result.
body
{
padding:0;
margin:0;
}
Instead of using the img tag, set the background-image property of the body tag so it encompasses the entirety of the page.
body {
background-image: url("path/to/image.jpg");
height: 100%;
width: 100%;
}
Ok, so I'm brand new here (and to programming) and I'm not even sure If the questions I'm going to ask is worded correctly or makes sense, but here it goes.
I am working on a bootstrap theme for a client, I am trying to change the background colors. I do not want the page to be all the same background color. I would like certain rows to have a different background color from the rest of the page. How can I accomplish this? I've tried adding unique tags to the containers I'm working on with the background color I want, but no matter what I do NOTHING is changing. I know this is something simple and I just need a simple explanation as to how to make this work! HELP!
You have some options to do that.
For the background in the divs:
You can do:
<head>
<style>
body{
background-color: red;
}
.backg1{
background-color: blue;
width: 100%;
padding: 10px;}
.content{
background-color: white;
margin: 10px;
width: 80%;
height: 100px;}
</style>
</head>
<body>
<div class="backg1">
<div class="content">
</div>
</div>
</body>
Is only work with the css properties. You need paste the code to try help you.
Add class="bgColor"
Like:
<div class="bgColor">
....
</div>
Your css:
.bgColor{
background: #dadada;
}
Give all your styles in custom_style.css, in which you can add CSS properties for elements. Inside your custom_style.css you give background color you want.That's it, Its just the work of CSS. No other process or procedure to .
consider #Page 1
/* Include Bootstrap.css and custom_style.css etc */
<body>
<div class="container">
<div id="Web_page_home">
.............
</div>
</div>
/* include JQuery.js and Bootstrap.js */
Consider #page 2
/* Include Bootstrap.css and custom_style.css etc */
<body>
<div class="container">
<div id="Web_page_about">
.............
</div>
</div>
/* include JQuery.js and Bootstrap.js */
Here goes the working of CSS "Custom_style.css" has
#Web_page_home { background-color:red; }
#Web_page_about{ background-color:green; }
The output will b the Page 1 backgorund will b in red and another page 2 will be in green.
if you didn't understand still i will attach fiddle.
MyPage.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Color Flash Cards</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div id="header">
<div id="title">
<h1>Color Flash Cards</h1>
</div>
</div>
</body>
</html>
index.css
body{
background-color: #31859C;
margin-left: 0px;
margin-top: 0px;
overflow-x: hidden;
}
#header{
margin-top: 0px;
height: 120px;
background: #9838CE;
}
#title{
margin-top: 0px;
}
result:
Where is the margin that is at the top (above the purple) coming from? And what do I need to do to get rid of it? I could use negative values for margin-top to do it but is that the "real" solution here?
All headings have a default margin that can be canceled out with:
h1 {
margin: 0;
}
Demo:
I would recommend using a css reset code like this one if you want to avoid these quirks and style them yourself.
One of two things might be causing this:
Padding in the body? Add padding: 0; to body.
The top margin on the H1. To combat this add overflow-hidden; to #header
Adding overflow: hidden to the #header will cause the header DIV to contain it's contents (including the margin on the H1).
Set the margin of h1 tag to 0:
h1 { margin: 0; }
See jsFiddle demo.
Try setting the margins of html to 0 as well.
html {
margin:0;
padding:0;
}
Two things:
You might want to add
body{
padding:0;
}
but that's not the real issue, its the H1 tag that is spoiling the layout
add this to your css
h1{
margin-top:0;
}
here is a little fiddle
use reset css for default browser setting will be reset.
http://meyerweb.com/eric/tools/css/reset/
enter code here