Hi Ive got basic html file + external css file. css file contain font-size class and text-align class but only font-size class actually work. I try VS Studio code, Pycharm, and use .centered class on body, header, footer - still dont work
Html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" >
<link href="styles.css" rel="stylesheet">
<title>Title</title>
</head>
<body class="centered">
<header class="large" >
John Harvard
</header>
<main class="medium">
Welcome to my page!
</main>
<footer class="small" >
Copyright © John Harvard 1636
</footer>
</body>
</html>
CSS code:
<style>
.centered {
text-align: center;
}
.large {
font-size: 70px;
}
.medium {
font-size: medium;
}
.small {
font-size: 3px;
}
</style>
I try VS Studio code, Pycharm, and use .centered class on body, header, footer - still don`t work
Can you explain why?
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
In your CSS file, you can NOT utilize <style> tags. To fix this, change your CSS file to the following:
.centered {
text-align: center;
}
.large {
font-size: 70px;
}
.medium {
font-size: medium;
}
.small {
font-size: 3px;
}
All I did here was delete the first and last lines (<style> and </style>)
That should do it!
If you're trying to align all the text in the body to center then you don't give body a class name, you just call upon it like this:
body {
text-align: center;
}
(Reminder: do not to call upon body in your CSS style sheet like a class or an id, so .body or #body would be wrong, its just body.)
If you want to create a container or wrapper called "centered"
you would create a div as such:
<div class="centered"></div>
then you would use CSS:
.centered {
text-align: center;
}
There are a lot of ways to center a text in HTML, the first one is to type
<center> Your text here </center>
in the HTML file, the other one is put all your text in a div, and add a css style in that div with this code inside
margin: 0 auto;
Basically in your case, i would just replace
<body class="centered">
with
<body style="margin: 0 auto;" class="centered">
Related
This question already has answers here:
How to make an element width: 100% minus padding?
(15 answers)
CSS 100% height with padding/margin
(15 answers)
Closed 2 years ago.
I have
html {
font-family: Arial, Helvetica, sans-serif;
height: 100%;
}
body {
padding: 0;
margin: 0;
height: 100%;
box-sizing: border-box;
background-color: $bgcolor;
}
.main-content {
height: 95%;
}
header {
background-color: $header-bg;
color: $header-text;
text-align: left;
padding: 20px;
height: 5%;
display: flex;
}
and I have a div with class main-content and a header.
For some weird reason I'm seeing extra whitespace at the bottom of my page. (header has a height of 5% - hence giving main-content height of 95%), any ideas why there's extra space there and how I can remove it??
html is
<body>
<%- include ('../partials/header.ejs') %>
<div class="main-content">
<%- body %>
</div>
</body>
header is -
<header>
<a id="aaa" href="/">AAA</a>
<nav id="topnav">
---
</nav>
</header>
Please try the snippet of code I am sharing with you in this response. I added the height: 100vh; corresponding to the 100% of the viewport height, applied to both html and body to keep the consistency of the height to the max of the screen since they don't have a default size. Also, since it is kind of hard to calculate the max width of any screen and subtract the 20px of padding that you have on the HEADER tag in each screen scenario, an overflow:hidden rule has been added to this element.
I also added the P tag to test the div with the class .main-content with some actual content on it to test the whole site with some real content on it.
I am assuming you are using some JavaScript HTML Markup template generator language tool such as EJS to create this page, hence I have temporarily replaced <%- body %> and <%- include ('../partials/header.ejs') %> blocks with real content to see the end result. Don't forget about placing them back instead of my hard-coded content, please.
I certainly hope this helps. Cheers, champion!
html {
font-family: Arial, Helvetica, sans-serif;
height: 100vh;
padding: 0;
}
body {
padding: 0;
margin: 0;
height: 100vh;
min-height: 100%;
color:#b2d8d8;
box-sizing: border-box;
background-color: #004c4c;
overflow: hidden;
}
header {
background-color: #189ad3;
color: #f9fafc;
text-align: left;
height: 5%;
padding: 20px;
display: flex;
width: 100%;
position:relative;
}
.main-content {
height: 100%;
}
p {
padding: 10px;
text-align: justify;
text-justify: inter-word;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 BoilerPlate - Alvison Hunter</title>
<meta name="description" content="HTML5 BoilerPlate - Alvison Hunter">
<meta name="author" content="https://alvisonhunter.com/">
<link rel="stylesheet" href="css/styles.css?v=1.0"> </head>
<body>
<header> <a id="aaa" href="/">AAA</a>
<nav id="topnav"> --- </nav>
</header>
<div class="main-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<script src="js/scripts.js"></script>
</body>
</html>
I am testing my codes parallel to a video tutorial. I have two CSS files. First one is working fine. Second CSS doesn't seems to apply to the HTML. My folder structure is as follows.
/
css (screen_style.css, screen_layout_large.css)
images (banner_large.jpg, logo_large.png, etc)
index.html
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
<title>Lynda.com | Creating a Responsive Web Design</title>
<link rel="stylesheet" type="text/css" href="css/screen_styles.css" />
<link rel="stylesheet" type="text/css" href="css/screen_layout_large.css" />
</head>
<body>
<div class="page">
<header>
<a class="logo" href="#"></a>
</header>
<article>
<h1>Welcome</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
<div class="promo_container">
<div class="promo one">
<div class="content">
<h3>Promo Heading Here</h3>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p><a class="cta" href="">Visit our blog</a></p>
</div>
</div>
<div class="promo two">
<div class="content">
<h3>Promo Heading Here</h3>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit est laborum.</p>
<p><a class="cta" href="">Read the article</a></p>
</div>
</div>
<div class="promo three">
<div class="content">
<h3>Promo Heading Here</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor inci did unt.</p>
<p><a class="cta" href="">Learn more</a></p>
</div>
</div>
</div>
<nav>
About Us
Contact Us
</nav>
<footer>
© AG IT Solutions.
</footer>
</div>
</body>
</html>
CSS/screen_tyle
#charset "UTF-8";
/* Global Content Formatting and Styles */
body {
color: #575c7a;
line-height: 1.5em;
font-family: Arial;
font-size: 14px;
background:#515673 url(../images/background_gradient.jpg) repeat-x 0 0;
}
.page {
max-width: 980px;
margin: 0 auto 0 auto;
padding: 0;
position: relative;
background-color: #fff;
}
h1 {
font-size: 2em;
font-weight: normal;
color: #a6430a;
margin: 0 0 0.5em 0;
}
h2 { font-size: 1.7em; margin: 0 0 1em 0;}
h3 { font-size: 1.5em; margin: 0 0 1em 0;}
p { margin:0 0 0.75em 0;}
a { color:#de9000;}
a:hover {color:#009eff;}
a.cta {
text-transform: uppercase;
font-size:.9em;
font-weight:bold;
text-decoration:none;
margin: .5em 0 0 0;
padding: 0 12px 0 0;
background: url(../images/cta_arrow.png) no-repeat right 0;
}
a.cta:hover {
background-position:right -50px;
}
.promo h3 {font-size: 1.1em; margin:0;}
.promo p {line-height:1.2em; font-size:.9em; margin-bottom:.5em;}
.promo { background-repeat: no-repeat;}
.promo.one { background-image: url(../images/promo_1.jpg);}
.promo.two { background-image: url(../images/promo_2.jpg);}
.promo.three { background-image: url(../images/promo_3.jpg);}
footer {
font-size: .85em;
color: #9ba0bd;
background-color:#575c7a;
padding: 10px 10px 10px 10px;
}
css/screen_layout_large
#charset "UTF-8";
/* Layout (global rules for all sizes) */
body {
margin: 0;
padding: 0;
}
header a.logo {
display: block;
position: absolute;
background-position: 0 0;
background-repeat: no-repeat;
}
/* Layout Large Screens (default for older browsers) */
header {
height: 275px;
background: url(../images/banner_large.jpg) no-repeat right 0;
}
header a.logo {
width: 150px;
height: 85px;
top: 28px;
right: 30px;
background-image: url(../images/logo_large.png);
}
None of the images are loading in header section which are scripted in screen_layout_large.css. Padding also not working. I have tried including !important with css attributes. But problem seems to be the CSS is not linking. When I remove the first CSS, it has only plain HTML.
Try to open your developer tools (F12 for google chrome) and inside head element find your two links to css files. Mouse2 -> Open link in new tab
If both files will not be empty (you should see any your css properties), let us to know. If one of them is empty, it means that you didn't connect it correctly.
Clear browser cash was the solution at this particular issue...
I have a simple page with a navbar and a homepage. The navbar is fixed and the homepage takes up 100% of the screen. The viewer then scrolls down from the homepage to view the rest of the web content.
I'm having an issue with the font not scaling when viewing on a mobile device or devices with smaller screen sizes. I believe this is due to me changing the navbar to take up 100% width and for the homepage to be taking up 100% height. The text under section1 scales correctly (the font gets bigger when the screen is smaller).
How can I have the homepage and the navbar increase in font?
h1{
text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
}
html {
height: 100%;
min-height: 100%;
}
body {
background: #1A3742;
font-family: 'Source Sans Pro', sans-serif;
color: white;
margin: auto 100px;
height: 100%;
}
#header {
background: gray;
padding: 28px 0 26px;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
}
#top{
text-align: center;
height: 100%;
}
#home-content{
position: relative;
top: 50%;
transform: translateY(-50%);
}
a[href="#top"] {
margin-left:100px;
margin-right:50px;
vertical-align: middle;
text-decoration: none;
font-weight: bold;
}
a img{
vertical-align:middle;
}
.content {
margin-left:75px;
margin-top:25px;
overflow: hidden;
}
.content p{
margin-top: 0px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header id="header">
Name
<a href="">
<img src="" alt="img" height="24" width="24">
</a>
</header>
<div id="top">
<div id = "home-content">
<h1>Top</h1>
<h2>Sub title</h2>
<p>
This text does not scale at all.
</p>
</div>
</div>
<div id="section1">
<h1>Section 1</h1>
<div class = "content">
<p>
This scales with the screen.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</body>
</html>
Here is an example on mobile that shows the top text not scaling, but the section1 scaling correctly.
That is a Galaxy S5 in google Chrome. The text in the homepage/top portion and navbar should be scaling similar to the way the section1 text does.
How can I fix it so everything scales to the screen?
First, none of it is scaling. It's applying browser defaults as you've not set any font-size in the css provided. You can test it in the web inspector (remember to reload the page after activating it).
You can use vh (view height) or or vw (view width) as percentage messure for the font.
use media queries to adjust according to screen size
ex:
#media screen and (max-width:1000px){
#top{
font-size : 40px; /change it to whatever you need/
}
}
change the max-width accordingly to manage perfectly for every screen
for more information on media queries
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
I have a block of text that goes on top of a picture. Then below this there is a footer. But the text comes from a database, so sometimes the text is taller than the picture and sometimes shorter. I want the footer to come below the "whole thing" in either case.
Like this -- imagine the XXX's are the picture
Scenario 1:
XXXXXXXXXXXXXXXX
XXXX Short XXXX
XXXX text XXXX
XXXXXXXXXXXXXXXX
-- Footer --
Scenario 2:
XXXXXXXXXXXXXXXX
XXXX Long XXXX
XXXX text XXXX
XXXX runs XXXX
past
the
picture.
-- Footer --
It's easy enough to put the text on top of the picture with position: absolute for one or the other. But then the footer gets positioned without regard to the absolute element.
At the moment I've got two different versions of the screen, one where the picture is static and the text is absolute, for cases where I expect the text to be longer; and one where the text is static and the picture is absolute, for cases where the text is longer. This works, but only because I know what data is in the database today. I could have the program examine the text, but I have no way to know how tall it will lay out without knowing the size of the window the user sets for his browser, not to mention font sizes, etc.
Maybe position: absolute isn't the right way to do this?
Update *
Someone suggested I make a fiddle. I was about to, but I see Adam B Smith made one that illustrates my problem very well: http://jsfiddle.net/DIRTY_SMITH/EgLKV/6183/
That fiddle looks great if the text is taller than the image. Now delete a bunch of text so that the text is shorter than the image, and you see the footer overlaps the image.
OK this one will do it for you http://jsfiddle.net/DIRTY_SMITH/EgLKV/6185/
lol
#container{min-height: 400px;}
#image
{
position:absolute;
z-index:-9999;
left:0;
top:0;
}
#text
{
z-index:9999;
width: 200px;
color:red;
font-size:24px;
font-weight:bold;
}
.footer {
background:#ffab62;
width:100%;
height:100px;
z-index:9999;
bottom:0;
left:0;
}
If you know the size of the image, and set the container's size same as the image, it does work.
.container {
border: 1px solid red;
position: relative;
display: table;
width: 250px;
height: 193px;
}
.container img {
position: absolute;
z-index: -1;
}
.container span {
background: rgba(255,255,255,.7);
display: table;
width: 80%;
margin: auto;
margin-top: 25%;
margin-bottom: 5%;
}
.footer {
background: pink;
}
<div class="container">
<img src="http://albanyvisitors.com/WpContents/wp-content/uploads/2015/06/200px-Big-Lake-Big-Sky-Mt-Washington-by-Bill-Origer-2015-photo-contest.jpg" />
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
</div>
<div class="footer">foooooooter</div>
<br>
<div class="container">
<img src="http://albanyvisitors.com/WpContents/wp-content/uploads/2015/06/200px-Big-Lake-Big-Sky-Mt-Washington-by-Bill-Origer-2015-photo-contest.jpg" />
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</div>
<div class="footer">foooooooter</div>
I'm looking for a way in CSS to place a symbol into the margin of the document to highlight/indicate the position of some special phrase in the text body of the document. Think of the usual text-editors in programming IDEs that place little warning icons in the margin next to lines that contain errors.
This is easy to do if the document consists of non-wrapped single lines. Then I can just check if the line needs the symbol and place it manually.
But it gets tricky if I want to, for example, place an icon for spelling mistakes in a document where the browser automatically breaks the lines. Then I would have to have a way to figure out which line the spelling mistake ended up in. This is probably also possible with JS by checking the y-coordinate of some wrapper-span that marks the spelling mistake, but I'm looking for something more elegant.
Is there some trick with float-left or absolute positioning that allows me to, for example, put this marker symbol into the span that marks the error and have it be placed in the left margin of the document instead of inside the boundaries of the span?
Actually, the answer is exactly as you described. Have spans wrapping your text, and inside the span, include an icon element. Then float it left, and set a negative margin on it. Example:
CSS:
.icon {
display: inline-block;
width: 10px;
height: 10px;
background: blue;
float: left;
margin-left: -15px;
margin-top: 5px;
}
Markup:
<span class="selected"><span class="icon"></span>this is some text in a span. </span>
Working example: http://jsfiddle.net/FQCsn/
I think there's also an application for the position: absolute in the context of the :before pseudoelement. Try this and see if it gives you what you're looking for:
<html>
<head>
<title>Lorem Ipsum</title>
<style>
.allowLeftMargin
{
margin-left: 5em;
}
.highlightThis
{
background-color: yellow;
}
.highlightThis:before
{
background-color: yellow;
content: "Note";
padding-left: 0.25em;
padding-right: 0.25em;
position: absolute;
left: 1em;
}
</style>
</head>
<body>
<div class="allowLeftMargin">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
<span class="highlightThis">Excepteur sint occaecat</span>
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
</div>
</body>
</html>
You can quickly adjust the size of the browser window to confirm that the note moves with the highlighted span.
What you can do is put a strong around the spelling error, add another tag (a span for example) right after that spelling error, and set that span in position: absolute, but without the "top" property (because the top position is variable). Put that span in width: 100% in order to "select" the line, and add another tag inside that span (a i tag for convenience), and use it to put your icon.
p{ line-height:20px; margin:20px;}
strong{ color:red;}
span{ display:block; height:20px; left:0; position:absolute; width:100%;}
i{ background:red; display:block; height:12px; left:0; position:absolute;
top:-16px; width:12px;}
Example: http://jsfiddle.net/fwZqv/1/
Try to change the width of the "Result" window and see how it behaves.
It's not a perfect solution, and I would rather use JS for that matter.