I've been looking for a CSS grid with 100% width and height and no margin/padding on the borders (I want some element to stick on the left and right of the browser window when I'm in regular desktop mode). I can't seem to find one that suits my need: I checked out bootrstrap but it seems way too complicated because I only have to make a simple landing page
Here's a basic format you can use, with some quick CSS/HTML examples. Hope this helps.
In your body, you can apply the .sectional class to any element you want. Be sure to give your contents inside anything with the .sectional class appropriate margin/padding. Use the classes for colors by using any that are color names as background-colors and any with 'fc' as font-coloring.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example - full width</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<style>
*, html, body {box-sizing:border-box; -moz-box-sizing:border-box;}
body {width:100%; height:100%; margin:0em auto; font-size:100%;}
.sectional {margin:0px; padding:0em 0em 0em 0em; width:100%; overflow:hidden;}
.black {background-color:#000000!important;}
.black-fc {color:#000000;}
.blue {background-color:#0000FF; }
.blue-fc {color:#0000FF; }
.coral {background-color:#FF7F50; }
.coral-fc {color:#FF7F50; }
.dark-gray {background-color:#505050!important;}
.dark-gray-fc {color:#505050;}
.gainsboro {background-color:#DCDCDC!important;}
.gainsboro-fc {color:#DCDCDC;}
.midnight {background-color:#252525!important;}
.midnight-fc {color:#252525;}
.scarpa-flow {background-color:#E8E8ED!important;}
.scarpa-flow-fc {color:#E8E8ED;}
.soft-blueberry {background-color:#BCC6CF!important;}
.soft-blueberry-fc {color:#BCC6CF;}
.tomato {background-color:#FF6347!important;}
.tomato-fc {color:#FF6347;}
.white {background-color:#FFFFFF!important;}
.white-fc {color:#FFFFFF;}
.inside {width:97%;margin:0em 1.5% 0em 1.5%;}
.align-left {text-align:left;}
.align-right {text-align:right;}
.align-center {text-align:center;}
.pad-vertical {padding-top:3em;padding-bottom:3em;}
</style>
</head>
<body>
<main class="sectional dark-gray">
<div class="inside white-fc">
<h1 class="scarpa-flow-fc">This is some text.</h1>
<p>This is some paragraph text...</p>
<p class="coral-fc">This is some more text...</p>
</div>
</main>
<section class="sectional align-center scarpa-flow">
<div class="inside midnight-fc">
<h1 class="blue-fc">This is some text.</h1>
<p>This is some paragraph text...</p>
<p class="tomato-fc">This is some more text...</p>
</div>
</section>
<h2 class="sectional pad-vertical midnight soft-blueberry-fc"><span class="inside">A Section Heading</span></h2>
</body>
</html>
Related
In CSS I'm having an issue where the footer isn't being included with the body when in html, the footer is in between the body tags. I have a box-shadow border for the whole body, but the footer doesn't have the box shadow around it. As seen below the footer tags are in between the body tags and in the CSS code the body has box shadows, but the footer doesnt have a box shadow. Here's the code:
body {
font-size: 87.5%;
width: 800px;
display: block;
margin: 0px auto;
box-shadow: 3px 3px 3px black;
border: 3px solid black;
background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title> The Halloween Store </title>
<link rel="stylesheet" href="main1.css">
<link rel="stylesheet" href="normalize.css">
<meta charset="utf-8">
</head>
<body>
<header>
<img src="favicon.ico" alt="Pumpkin" height="80">
<h2>The Halloween Store</h2>
<h3>For the little Goblin in all of us!</h3>
</header>
<main>
<h1> Welcome to my site. Please come in and stay awhile. </h1>
<p>I started this website because Halloween has always been my favorite holiday. But during the last year, I started selling some of my favorite Halloween products, and they've become quite a hit.
</p>
<p>If you click on the Personal link, you can browse my favorite Halloween pictures, stories, and films. And if you join my email list, I will keep you up-to-date on all things Halloween.
</p>
<h3>Product categories</h3>
<ul>
<li>Props</li>
<li>Costumes</li>
<li>Special Effects</li>
<li>Masks</li>
</ul>
<h3>My guarantee</h3>
<p>If you aren't completely satisfied with everything you buy from my site, you can return it for a full refund. <b>No questions asked!</b> </p>
</main>
<footer>
<p>© 2016 Ben Murach</p>
</footer>
</body>
</html>
A box-shadow is outside the border. So if it's on the bodyelement, and that body fully fills or even overflows the screen (fully filling the html element), the box-shadow will be cut off, even if box-sizing is defined as border-box, since that only includes the content area, the padding and the border, but not margins and box-shadows.
The snippet area here is less wide than the 800px you defined as width for body, so that already extends the width of the viewport (i.e. the snippet area), and also the height is more than the default height of the snippet area.
However, if you make your body element narrower than the screen or the html element, and apply some padding-bottom to the html element, there will be space for the bodys box-shadow:
html {
padding-bottom: 6px;
}
body {
font-size: 87.5%;
width: 550px;
display: block;
margin: 0px auto;
box-shadow: 3px 3px 3px black;
border: 3px solid black;
background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title> The Halloween Store </title>
<link rel="stylesheet" href="main1.css">
<link rel="stylesheet" href="normalize.css">
<meta charset="utf-8">
</head>
<body>
<header>
<img src="favicon.ico" alt="Pumpkin" height="80">
<h2>The Halloween Store</h2>
<h3>For the little Goblin in all of us!</h3>
</header>
<main>
<h1> Welcome to my site. Please come in and stay awhile. </h1>
<p>I started this website because Halloween has always been my favorite holiday. But during the last year, I started selling some of my favorite Halloween products, and they've become quite a hit.
</p>
<p>If you click on the Personal link, you can browse my favorite Halloween pictures, stories, and films. And if you join my email list, I will keep you up-to-date on all things Halloween.
</p>
<h3>Product categories</h3>
<ul>
<li>Props</li>
<li>Costumes</li>
<li>Special Effects</li>
<li>Masks</li>
</ul>
<h3>My guarantee</h3>
<p>If you aren't completely satisfied with everything you buy from my site, you can return it for a full refund. <b>No questions asked!</b> </p>
</main>
<footer>
<p>© 2016 Ben Murach</p>
</footer>
</body>
</html>
I was doing research and found out that you are only supposed to have one <body> tag, which after learning that I proceeded to clean up my code because I had 3 different set of body tags and by removing the tags to where I only had one set I messed it up to where it no longer aligns my footer properly.
Sorry if this is a silly issue, I am 15 and I started learning html 3 days ago at this point.
I have tried putting the footer outside of the boundary of the <body> tag and tried putting the class within a div tag right after the first footer tag.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<title> Hub </title>
<h2 style="text-align:center">Home</h2>
<p style="text-align:center"> Welcome to my test website.
<i><b><br> (Currently Under construction) </b></i>
</p>
<p> </p>
<p style="text-align:center">
<a href="https://youtube.com">
<img border=0 src="youtube.png" width="100" height="70"> </a>
</p>
<p></p>
<p class="center">
<img src="razer.jpg" width="640" height=360>
</p>
<br>
<footer class="footer">
Home
About
Contact
Projects
</footer>
</body>
</html>
Here is the css class
.footer {
background-color: white;
color: Orange;
margin: 20px;
padding: 20px;
align-items: center;
text-decoration: none;
}
I expected it to stay aligned with the center, but it ended up reverting to text with no alignment.
Welcome!
Here's a little jsFiddle to help simplify the code a bit - and just to show you how that works.
https://jsfiddle.net/sheriffderek/5Lros2h4/
Here's the basic HTML structure:
<!doctype html>
<html>
<head>
<title>My project</title>
<link rel="stylesheet" href="styles.css">
<style>
.site-footer {
border: 1px solid red;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>Header stuff</h1>
</header>
<main>
<p>Stuff</p>
</main>
<footer class="site-footer">
<nav class="main-menu">
Home
About
</nav>
</footer>
</body>
</html>
You'll spend most of your time in the body - and like you said - you wouldn't have more than one of those tags.
I suggest you keep you css in the css file - or in the styles tag in the head.
For your question - we basically just need to see this in order to help:
<footer class="site-footer">
<nav class="main-menu">
Home
About
</nav>
</footer>
Your align-items: center is a flex-box declaration. You might mean text-align: center
Check out these resources:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
Learn about the box-model and the display types first - and then position and you'll be on the right path. Join a chat-room for something like CSS https://discord.gg/pFc6XmH
and later... when you're feeling ready - watch this: https://flexbox.io
Keep your examples as simple as possible and you'll get the most help. : )
I'm not actually what you mean, but if you want to make the a-tag to be in the middle, you can use
footer{text-align:center;}
But if you want to make each of your a-tag to be separated and in the middle. you should just make the a-tag a block element. You can put it by adding in css
a{ display:block; }
I am writing a website and am having an odd problem.
#Text {
margin-left:15vw;
width:70vw;
background-color:white;
opacity:0.8;
vertical-align:center;
}
body {
margin:0;
}
<!DOCTYPE html>
<html>
<head>
<title>SomeTitle</title>
<link rel="stylesheet" type="text/css" href="./main.css">
</head>
<body>
<img src="someUnimportantImage.jpg" height="100vh">
<div id="text">
<p>Text</p>
<p>More text</p>
<p>Even more text</p>
</div>
</body>
</html>
My problem is that when I load my page in google chrome (I haven't tried other browsers),
there is a mysterious white space at the top that I can't get rid of
the <html> element doesn't fill the browers height, and therefore
setting the images height="100vh" makes it fill the <html> element, but not the page.
What I need is for <html> to fill the page and for the white space at the top to disappear.
EDIT
I got the whitespace to disapear by using the code at meyerweb.com/eric/tools/css/reset.
When you use viewport units, you don't need to worry about the height/width of the <html> element. However you should move the inline height="100vh" into the CSS instead. And I don't see any "mysterious white space at the top" since you already set body{margin:0;}, it might be caused by your other styles if you still see it.
img {
height:100vh;
}
And be aware, CSS class/id names are case sensitive, #Text and #text are not the same.
body {
margin:0;
}
img {
height:100vh;
}
#text {
margin-left:15vw;
width:70vw;
background-color:white;
opacity:0.8;
vertical-align:center;
}
<img src="//dummyimage.com/500">
<div id="text">
<p>Text</p>
<p>More text</p>
<p>Even more text</p>
</div>
Edit: The white space might be from the <p> tag, as it has some default top and bottom margin from the browser.
I'm looking to make a custom CSS webpage, but I'm having difficulty getting all the pictures to show unless I make the min-height around 900px. The index code looks like this,
<head>
<style type="text/css">
#import url("stylesheets/mystyle.css");
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Small Biz Labs</title>
</head>
<body>
<div class="wrap">
<div class="conatiner" align="center">
<div class="header">
<center>
<img src="images/logo.png" width="200" height="100" />
</center>
</div>
<div class="text">
<h1>Maybe a header</h1>
<p>some text</p>
</div>
</div>
</div>
</body>
</html>
and the CSS code looks like this...
/*
Document : mystyle
Created on : Jul 18, 2012, 1:12:14 PM
Author : someguy
Description:
Purpose of the stylesheet follows.
*/
html {
background:url(../images/bodybackground.jpg) repeat;
margin:0px;
max-height:100%
}
body {
background:url(../images/paperbackground.jpg) repeat-y center;
margin:0px;
margin:0px;
max-height:100%;
}
.wrap {
background:url(../images/new_backdrop.png) repeat-x center bottom fixed;
margin:0px;
min-height:1050px;
}
.container {
max-width:600px;
}
.header {
}
.text {
text-align:left;
max-width:600px;
padding-left:10px;
}
I'm trying to get the bottles to float over the two textures I made. Allowing for text/images etc. to be placed in the smaller lighter version of the paper texture. So far I can only make this happen if I set the max-height large enough. Any suggestions on how to adjust my code?
The images I'm using can't be posted until I get more points, but if you want to see them let me know and ill shoot you the jpgs and the one png (the one that floats).
If you want to see a semi live version
jsfiddle: http://jsfiddle.net/wKtGv/
Try adding height:100%; to both body and .wrap
http://jsfiddle.net/wKtGv/13/
I'm not sure what is going on here, I made a very basic HTML/CSS page and it just displays an empty page in my browsers.
<HTML>
<head>
<style type="text/css">
#sidebar {float:left; width:20%;}
.post {float:right; width:79%;}
#footer {clear:both;}
</head>
<body>
<div id="header">
<h1>My interesting life</h1>
</div>
<div id="sidebar">
<h2>Menu</h2>
<ul>
<li>Place Link Here</li>
<li>Place Link2 Here</li>
</ul>
</div>
<div class="post">
<h2>Yesterday</h2>
<p>Today I drank coffee for breakfast. 14 hours later, I went to bed. </p>
</div>
<div class="post">
<h2>Yesterday</h2>
<p>Ran out of coffee, so had orange juice for breakfast. It was from concentrate.</p>
</div>
<div id="footer">
<p><small> This is copyright by Monu. Contact me to negotiate the movie rights. </small></p>
</div>
</body>
</HTML>
You need to close your <style> tag:
<head>
<style type="text/css">
#sidebar {float:left; width:20%;}
.post {float:right; width:79%;}
#footer {clear:both;}
</style>
</head>
You did not close the <style> tag after the CSS. This makes the browser think the entire rest of the page is CSS. So you need to add a </style> tag after the CSS. Hope that helps.
Indeed, you must close the style tag.
To find these errors quickly in the future, consider:
(1) Using HTML and CSS validators such as http://validator.w3.org/
(2) Using Firebug, a Firefox extension, to examine your code for unclosed tags or other oddities.
Please close the style tag. </style> .........
<style type="text/css">
#sidebar {float:left; width:20%;}
.post {float:right; width:79%;}
#footer {clear:both;}
</style>
Use some text editor then it help to solve this kind of error....
You need to close the <style> tag. Another thing several developers swear by is adding the <!DOCTYPE html> before the normal <HTML> tag.`