So I am using the CSS framework Bulma.io.
Normally, without it, when doing
body {
background: black;
}
the background turns black.
But when I use Bulma.io, only the background behind a written text turns black and the rest of the website stays white. So does someone know how I can make the entire website turn black like it normally does without a framework?
Can you provide an example of what you're working with? My snippet below shows how you can change the background color. Other than setting the background-color property, I also set the body height to be the full height of the view.
body {
background-color: black;
height: 100vh;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.2/css/bulma.css" rel="stylesheet"/>
</head>
<body>
</body>
</html>
You can make that by modifying body background color from Generic variables [$body-background-color] override this variable before importing Bulma. an easy
explanation is now available https://bulma.io/documentation/customize/variables/
You can apply the background helper
<body class="has-background-grey-lighter"></body>
If you want to change the background of the whole page, you need to give the html tag a color class.
example:
<html lang="en" class="has-background-dark"></html>
Related
Padding property started behave strange (in browser) after i had tried to create one-page scrollable website. Basically initially I had my index.html file linked to the styles.css file. I wanted to create one-page site so I googled it and found this site:
https://www.turnwall.com/articles/adding-single-page-scrolling-navigation-to-your-site/
I followed the instructions: created side-bar and some sections to test it, but without using js script. It all worked perfectly except 1 thing: titles in side bar werent highlithing when scrolling, so I tried to implement the script (I created new file and paste the code from tutorial) and this is the part when it started to behave strangly: basically my title which was located also in side bar got much larger and padding around all page elements appeared. BUT THATS NOT ALL: that padding is still there (even after I deleted all elements and created everything from scratch), which I suppose shoudnt be there.
I want to get rid of it. Here is screenshot from my browser:
here
On the screenshot you can see 1 elemeent with some text. The thing is that I suppose that this text should be in the very top left corner but it is not.
Here are my index.html and styles.css files:
HTML:
<!doctype html>
<html>
<head>
<title>RA TOOLKIT</title>
<meta name="description" content="Our first page">
<meta name="keywords" content="html tutorial template">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="nav-menu">eha</div>
</body>
</html>
CSS:
body{
background-color: red;
display: flex;
flex-direction: row;
padding-top: 0px;}
.nav-menu{
background-color: white;
transition: all .2s;
width: 25vw;
min-height: 100%;
box-sizing: border-box;}
.nav-menu:hover{
background-color: greenyellow;}
Thanks in advance!
(sorry for my english : D )
When I tried to inspect element the page, i found that your html body has an 8px margin that you thought was the padding. I don't really know what caused this, but you can just overwrite the styling by giving a
body {
margin: 0px
}
to your html body. You can always use inspect element to figure out your final style render of your page
I am just beginning to learn HTML and I need help with making an example I found. Here is an image (link):
I know how to make the black background but I have no clue how to add the body in the middle of the page! Extra Information that was provided to me:
Color Code: #fe9;
Font: "Palatino",serif;
Width is 400px;
If anyone could help out even the littlest bit I would appreciate it! It also uses the embedded style!
What you can do is create a div inside your body tag. And then apply css to that div.
Say give it margin: 0 auto;
You need a containing element, usually a div. All your content should be inside this div. Then you can style the div to be a set width and centered, and give the div a background, etc.
Example:
<html>
<head>
<title>Test</title>
<style>
#container {
width: 400px;
margin-left: auto;
margin-right: auto;
background: #fe9;
font-family: "Palatino",serif;
}
</style>
</head>
<body>
<div id="container">
My Content
</div>
</body>
</html>
You should be able to figure out the rest of the content; if you can't, please ask specific questions about what you need to do and give details about what you have already tried.
Question 1:
Is css possible to make the corner of a img or a div to this?
I don't concern browser support problem, are any css1 or css2 or css3 can make this in easy way?
Question 2:
Can I prevent the css for deepLevel1 which not affect to deepLevel2, without adding any css to deepLevel2
I mean the css will only affect to own level, not deeper level
I only want abc is red, and 123 is still black color.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#deepLevel1
{
color:red;
}
#deepLevel2
{
}
</style>
</head>
<body>
<div id="deepLevel1">
abc<div id="deepLevel2">123</div>
</div>
</body>
</html>
Hey now you can do easily as like this
check to this live demo http://jsfiddle.net/pkZ8G/1/
more info http://www.freshdesignweb.com/useful-example-css3-style.html
Question 2: You cannot prevent the color being applied without overriding it in your deepLevel2 id style.
<h2> MyTitle </h2>
I need to put a background-image to MyTitle text but only to MyTitle text.
I dont want any background in the <h2></h2> element.
Is there a way to do that in css?
Code:
<!DOCTYPE HTML>
<title>MyTitle</title>
<style>
head { display: block; }
title { display: inline; background: lime; }
</style>
Demo: http://jsbin.com/abitek
This is an example with a simple background color, but of course you could use background-image as well.
See Displaying hidden elements like <head> using CSS.
Edit now that OP mentioned he meant a heading (e.g. <h1>) and not a <title>:
The key is to use display: inline or display: inline-block.
Code:
<!DOCTYPE HTML>
<title>Test</title>
<style>
h1 { display: inline; background: lime; }
</style>
<h1>Test</h1>
<p>Some content.
Demo: http://jsbin.com/ekusad
Again, this is an example with a simple background color, but of course you could use background-image as well.
I'm not completely sure what you mean with the title element as this is by default an invisible element in the head section, but I think I somehow grasp what you mean with having the background only behind the text. Try this, the background image is applied only to the text and the rest of the title element doesn't get the background image. Note that this doesn't work for the title element in the head section of your html page. It's just to indicate to you how you could set a background to a text only.
HTML
<title> <span>My Text</span> </title>
CSS
title > span {
background-image: url(myimage.png);
}
You can add a bg image to some title text by wrapping the desired text in a span and setting the css like so:
HTML
<h1>My title.<span class="myTitleBG"> My Red Title. </span>More title</h1>
CSS:
h1 span.myTitleBG
{
display: inline-block;
background-color: #f00; /*for example purposes*/
background-image: url(image.png);
}
IE<7 will not see the display: inline-block;. I used this display property so you can add height and width to the span if you need to show more/less of the bg image.
http://jsfiddle.net/b2s9m/
If you mean to put a background in the titlebar, that cannot be done. Browsers only pick up text from the <title> tag and display it according to their standards.
For regular text in the body, you can use CSS to have a background like this,
<p class="backgroundText"> My text </p>
and define backgroundText class in your CSS.
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).