I want to set the width of the body to 650px. But its not happening.
Simple css code.
body{
width:650px;
background-color:red;
}
My HTML code!
<html>
<head>
<link rel="stylesheet" type="text/css" href="content.css">
</head>
<body>
<h1>Login Successful <?php echo $_SESSION['username']?></h1>
</body>
</html>
I am getting the red color according to the code but not getting the width, as you see the pic.
Your body width is 650px for All content elements.
But body is magic element to set background-color all including outside margin.
Check this jsfiddle demo , for show you border property to see difference,
But now same things you can done use div element inside body and apply width or background-color to check this Demo jsFiddle difference.
You need to wrap the page by div tag and set the height
.wrapper{
width:650px;
height:500px;
background-color:red;
}
<body>
<div class="wrapper">
<h1>Login Successful <?php echo $_SESSION['username']?></h1>
</div>
</body>
The <body> element is magic. Wrap your page in a <div> and style that instead.
Related
Im trying to design this webpage with multiple pages. For example, when you scroll to the about page, its a different background color than the contact page. However, so far I only got the title of each page color. My webpage is where you scroll down it lands onto another page. I tried
#name{background-color:#ffffff;}
#Portfolio{background-color:#d5f4e6;}
#about{background-color:#fefbd8;}
#ContactMe{background-color:#ffffff;}
in the css style page based on its id. Any clue on how to get the different background color on different pages
html code:
<body id="Portfolio"></body>
<body id="about"></body>
<body id="Contact Me"></body>
When you say "multiple pages" it means "separate pages in separate files!" like "aboutpage.html" or "contact.html". In this case you can work with "body" tag:
<body id="about">
but then you said "when you scroll to the about page" that means "a page with different section that you can use like this:
<p id="about"></p>
<p id="contact"></p>
or
<div id="about"></div >
<div id="contact"></div>
You should specify that the elements containing your targets are 100vh height. With your (original posted) code you can do it like that:
body > div {min-height:100vh;}
This css will catch the container-* div that you use in the code you provide. I recomand continue learning the basics. Start here https://developer.mozilla.org/he/docs/Web/HTML
Enjoy code!
If it's a same page scroller, you should add
#Portfolio,#about,#ContactMe {min-height:100vh;}
To your css.
If you can provide the exact code its much easier to help you.
simple code
$(document).ready(function(){
startFromtop=$(".start").position().top
aboutFromtop=$(".about").position().top
contactFromtop=$(".contact").position().top
endFromtop=$(".end").position().top-100
$(window).scroll(function(){
windowformtop=$(this).scrollTop();
if(windowformtop>=startFromtop && windowformtop<aboutFromtop){
$(document.body).css("background-color","white")
}
else if(windowformtop>=aboutFromtop && windowformtop<contactFromtop){
$(document.body).css("background-color","red")
}else if(windowformtop>=contactFromtop && windowformtop<endFromtop){
$(document.body).css("background-color","green")
}else if(windowformtop>=endFromtop){
$(document.body).css("background-color","blue")
}
})
})
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title></title>
<style type="text/css">
div{height:700px;border:2px solid red;}
</style>
</head>
<body>
<div class="start">Start</div>
<div class="about">ABOUT</div>
<div class="contact">CONTACT</div>
<div class="end">END PAGE</div>
</body>
</html>
Replace <body> with the <div> tag and add the appropriate css. The pages should have the same class but unique ids. You change the background color with CSS property background-color.
HTML:
<html>
<head></head>
<body>
<div class=“page”id=“portfolio”>
</div>
<div class=“page” id=“about”>
</div>
<div class=“page” id=“contactme”>
</div>
</body>
</html>
CSS:
.page{
position:relative;
width:100%;
height: auto;
margin:auto;
}
#portfolio{
background-color:white;
}
#about{
background-color:red;
}
#contactme{
background-color:blue;
}
Hope this works for you.
i was going through this tutorial, to allign two images inside a dive vertically so that there is no space between them, please take a look
http://mynag.kopiblog.com/2012/11/28/solved-remove-space-below-an-image-in-div-when-vertically-align/
i wrote my code like this
<head>
<style type=”text/css”>
.imgclass
{
background-color:#1122CC;
text-align:center;
}
img
{
display:block;
}
</style>
</head>
<body>
<div class=”imgclass”>
<img src=”pictop.jpg”>
</div>
<div>
<img src=”picbottom.jpg”>
</div>
</body>
</html>
but it didnt workrd as shown in the second pic shown in the link i specified.
What am i doing wrong here.
i want them as two pics alined vertically without any space.
please help
Please replace your quotes with the right ones, “ is not ".
The code is missing doctype and opening html-tag.
Try this:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.imgclass
{
background-color:#1122CC;
text-align:center;
}
img
{
display:block;
}
</style>
</head>
<body>
<div class="imgclass">
<img src="http://image.tutorvista.com/cms/images/38/square1.jpg">
</div>
<div>
<img src="http://image.tutorvista.com/cms/images/38/square1.jpg">
</div>
</body>
</html>
Your result should look like this:
http://pbrd.co/1qt52ku
Tested in Chrome. Other browser may need fixes via line-height, margin, and padding.
<body>
<div>
<div class="page1">
</div>
</body>
.page1{
background-image:url(../images/1.jpg);
background-size:cover;
background-position:center;
width:100%;
height:100%;
display:block;
position:relative;
}
This is my code for setting a background image for a webpage, but unfortunately it's not displayed. Can someone help me correct this code?
Ok I understand now, you need to do
html, body{
height: 100%;
width: 100%;
}
Background is not showing because your div needs content.
2 options:
You can set the background for body instead.
body{
background-image:url(../images/1.jpg);
}
Or set the height of the div to the height of the image
First of all you need to put a closing </div>
<div>
<div class="page1"></div>
</div>
The problem now is tha your <div class="page1"></div> is emptry. You need to put some elements inside so that the image can be displayed.
DEMO
Maybe you html document is not well formed.
Try this:
<html>
<head>
<-- style block have to be contained within a <style> tag -->
<style>
.page1{
background-image:url(../images/1.jpg);
background-size:cover;
background-position:center;
width:100%;
height:100%;
display:block;
position:relative;
}
</style>
</head>
<body>
<div>
<div class="page1">
</div>
</div> <-- this tag was missing in your question -->
</body>
Second possibility, your image is not properly linked. The way it is written, it is in a folder 'images' parrallel to the one you html document is hold. So, find what relativity there is between your document and the image and try modifying it's source url(../images/1.jpg); .
When defining the path to another object, I find it easier to define the file path using ~/f1/f2/file rather than trying to work from the current directory using ../f1/f2/file. What the ~ indicates is to start at the top level directory and work its way down the file structure. Much easier.
I am new to programming and have a basic question. I have a background image on my web page, but I want the content area to have a white background. I see this very commonly on the web but being new I cannot seem to figure out how to do it. I have a #wrapper div that centers my content and a css rule to show the image, just can't get the content area background to be white. Help for this newbie is appreciated!
There are several ways to achieve this. You can either set the styles of your HTML tags (div, span, p etc...) by using the style attribute as in the example:
<div style="background-color: white;"></div>
or either define your styles inside the <head></head> tag as follows:
<html>
<head>
<style>
.your_class { background-color: #ffffff; }
</style>
</head>
<body>
<div class="your_class"></div>
</body>
</html>
or either use the link tag to put your CSS code inside a file and link to it as:
<head>
<link rel="stylesheet" type="text/css" href="your_file.css">
</head>
Or sometimes you will need to set your style dynamically. Then javascript enters into the picture:
<html>
<head>
<script>
function changeBg(id, color) {
document.getElementById(id).style.bgColor = color;
}
</script>
</head>
<body onload="changeBg('myDiv', 'white');">
<div id="myDiv"></div>
</body>
</html>
You should read more on HTML and CSS to understand how it works. There are plenty of tutorials on the web.
Assuming a structure like this :
<body>
<div id="wrapper">
<section id="content"> <!-- Or div or whatever -->
Lorem ipsum dolor sit amet
</section>
</div>
</body>
You should apply a background-color to #wrapper :
body{
background-image: url("your_url");
}
#wrapper{
background-color:white;
}
Check this fiddle for a working example.
Put your content inside a div and specify background:#fff; for that div in your CSS.
i'm switching some pages over to HTML5 which contains headlines that need to be set with a really small line height. Now since <!DOCTYPE html> any line-height below the font-size is ignored. I can space them out all I want, but no chance bringing them closer together.
Anyone know why that is and if it's cureable?
Thanks,
thomas
Edit: Found it. My old markup was <a style="line-height:12px;" href="#">something</a> which worked in XHTML 1.0 transitional but not in HTML5.
I changed it to <div style="line-height:12px;">something an that works!
Thanks!
Your <a> tag is an inline element and it appears in HTML5 inline elements defer to its parent 'block' element's line-height ( or all the way up to the <body> style if that is the immediate parent ).
Example:
body { line-height:20px; }
a { line-height:12px; }
and this markup:
<body>
test
</body>
The <a> tag will have a line-height of 20px not 12px.
So your 'inline' <a style="line-height:12px;" href="#">something</a> didn't work but did when you wrapped it in the 'block'-level <div> element because block elements can dictate line-height.
A better way than bloating your markup by wrapping your inline element in a block element, just use CSS to make the tag display 'inline-block'.
<a style="display:inline-block; line-height:12px;" href="#">something</a>
Even better, give your <a> a class (change 'xx' below to something semantic):
<a class="xx" href="#">something</a>
Then in your CSS file set that class to 'inline-block':
.xx { display:inline-block; line-height:12px; }
Hope that helps.
Do you have some code? Do you have some extraneous padding or margins?
This works for me in Firefox, Chrome, and IE8
<!DOCTYPE html>
<html>
<head>
<title>aaa</title>
<style type="text/css">
p {font-size:18px;line-height:3px;background-color:#ccc;}
</style>
</head>
<body>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
</body>
</html>
In my understanding, every block-level element has a width-0 character called "strut". It will participate in the calculation of line box's height. When the children's line-height is smaller than parent's,It looks like the children's line-height is ignored because parent's line-height will hold up the line box when the children's line-height is smaller.
You need to use em as big text size in IE8 and IE7 will not share the same line height...e.g. using 30px font-size:
This example shows that with a 30px text size the line height in IE7 and IE8 are not on par with Chrome and FF.
<!DOCTYPE html>
<html>
<head>
<title>aaa</title>
<style type="text/css">
p {font-size:30px;line-height:3px;background-color:#ccc;}
</style>
</head>
<body>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
</body>
</html>
This example shows using em all browsers display the same line height.em is an old system though we need to use it until IE8 and below dies out. It's good practise.
<!DOCTYPE html>
<html>
<head>
<title>aaa</title>
<style type="text/css">
p {font-size:30px;line-height:0.2em;background-color:#ccc;}
</style>
</head>
<body>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
</body>
</html>