CSS Centering a div in different Screens - html

I am wondering if the div in this css and html will stay at the center if I i view this site on a larger screen. since I am only working on a 16 inch screen/ monitor. will the div in this code will stay at the center even if I move or view it in a larger/different screen? ?
The Html
<html>
<head>
<title>Midterm Practice</title>
<link rel = "stylesheet" type = "text/css" href = "layout.css"/>
</head>
<body>
<div id = "container">
<div id = "navbar">
<ul>
</ul>
</div>
</div>
</body>
</html>
The CSS rules
body{background-color: pink;}
#container{background-color: white;margin-left: auto;margin-right: auto;border: 1px solid white;border-radius: 15px;width: 1000px;height: 800px;}
#navbar{position:absolute;}
I am just starting out with CSS please don't add advance or above average answers

Using margin-left: auto; margin-right: auto; should have the desired effect for you. They will basically centre the "container" div in the body tag. You could always test it out yourself by reducing the width of the container to something you can test in your browser (Chrome and Firefox's dev tools are useful for playing with CSS within the browser).

Related

IText7 html2pdf fixed footer using CSS

I am currently trying to convert HTML to PDF using itext7 and itext7.pdfhtml but have a small problem.
I have a fixed footer (.footer) which works well when opened with a browser but when converted using below code, the div is not fixed to the bottom of the page. The div sits just after the other div content before it.
C# .net core code
string fullBody = System.IO.File.ReadAllText("index.html");
var stream = new MemoryStream();
var writer = new iText.Kernel.Pdf.PdfWriter(stream);
writer.SetCloseStream(false);
iText.Html2pdf.HtmlConverter.ConvertToPdf(fullBody , writer);
writer.Close();
stream.Seek(0, SeekOrigin.Begin);
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="header">
<img src="header1.bmp" width="100%" />
<img src="header2.bmp" width="100%"/>
</div>
...
<div class="footer">
Fixed footer
</div>
</body>
</html>
CSS
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
}
Have tried several other examples but it still won't stay at the bottom.
Even this similar question Similar question doesnt work
Any help would be greatly appreciated.
In PDF
In browser (print view)
Just a small note - this pdf will only have 1 page so a hard coded solution might be considered.
The footers belong to the page margin area. #page media is the right way to configure it. CSS running element functionality can be used to put the element into the desired location and exclude it from the rest of the layout. Major tools converting HTML into page-based representation support it.
Here is a sample HTML:
<!DOCTYPE html>
<html>
<head>
<style>
#footer {
position: running(footer);
}
#page {
#bottom-center {
content: element(footer);
}
}
</style>
</head>
<body>
<p>Hello world</p>
<div id="footer">I am a footer</div>
</body>
</html>
Result looks like this:

different page different color

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.

Resizing my page make items disappear

When the webpage become too small some part of it disappear but I would like to make it stay the way it's positioned but resize with the page no matter how small it becomes.
Here's the problem
Here's the code
<!DOCTYPE html>
<html>
<style>
body{
background-color: #1C1C1C;
}
#picture {
text-align: center;
position:fixed;
padding:0;
margin:0;
top:0;
left:0;
width: 100%;
height: 100%;
}
</style>
<title>lllllllllll</title>
<body>
<div id="picture">
<img src="c.png" alt="llllll" width="33%" height="100%" />
<img src="n.png" alt="llllll" width="33%" height="100%" />
<img src="m.png" alt="llllll" width="33%" height="100%" />
</div>
</body>
Welcome to Stack Overflow!
First and foremost, Your basic HTML structure should be as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- CONTENT -->
</body>
</html>
And about Your main problem, try and use CSS to style your layout instead of assigning inline properties like width="33%" and others alike. Right now, your images are stretching because of the inlined properties which are not the same as a style applied to them.
By using these properties on your images, you are telling them to be 33% of their container, but images are not block elments so therefore, they need to be in a container, for example a div.
e.g.
<div class="imageContainer">
<img src="img.jpg" alt=""/>
</div>
I have made a JS Fiddle for you to try it yourself.
When someone here on StackOverflow says "here is a Fiddle" or something similar, what they mean is, they have created a small online coding environment that acts as a sandbox for your project. You have your HTMl, CSS, Javascript and Output, alongside options for adding external content as well. https://jsfiddle.net/
I have changed a few things here and there to show you an example of basic usage. Please feel free to ask what You dont understand.

How to make website scroll down

I have made an image 100% height and width. But I had some headings and paragraphs underneath. When viewing my website I cannot scroll down further to see the headings and paragraphs? Also, I want a small burger navigation bar over the top of the image, at the top. But since making the image full screen, this has been "pushed away" as well?
<!doctype html>
<html lang="en">
<head>
<meta charset = "utf-8"/>
<title>XXXXX</title>
<link rel = "stylesheet" href="s.css"/>
</head>
<body>
<nav id = "burger">
</nav>
<section id = "top_image">
<img src="images/bg1.png"/>
</section>
<section id = "description">
<article>
<header>
<h4>DESCRIPTION</h4>
</header>
<p>
XXXXXX<br />
XXXXXXXXXXX<br />
XXXXXXXX
</p>
<p>
XXXXXXX<br />
XXXXXXX<br />
cXXXX<br />
XXXXXXX
</p>
</article>
</section>
CSS
img {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
When you make the image (or in this case, all img tags) position: absolute, you take them out of the page layout flow. That means everything else renders like that image isn't there. Your menu bar and paragraphs are there underneath the image, but you can't see them. If you make the paragraph text long enough it will poke out the bottom. If you want the image to be part of the page layout, get rid of the position: absolute.
Add this temporarily to your CSS to see what's going on:
#description {
position: relative;
z-index: 100;
}
You'll suddenly see your text on top of the image.
The issue isn't that things are being pushed down, the issue is that your image is covering every other element on the page because you've positioned it absolutely. You can't scroll because there's nothing to scroll to.
If you are trying to use the image as a background image, then you should code it as a background image.
body {
background:url('http://placehold.it/1024x768');
background-size:cover;
}
JSFiddle

How to make content background white

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.