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...
Related
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">
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>
.rightDiv {
position: absolute;
right: 0;
height: 80px;
width: 350px;
}
.content{
width:50%;
position:relative;
margin:auto;
padding:0px;
text-align:center;
top:10px;
}
#spandiv {
display: block;
font-size:16px;
background-color: #232F34;
color:#FFFFFF;
opacity:1;
top:5px;
overflow-wrap: break-word !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="test.css"/>
</head>
<body>
<div class="rightDiv">
<input type="text"/>
<div class="content">
<p id="spandiv">10122019(tjwmxuwmiihcxdfryfgfhrunlfsxrkhvmyqjjuwjddknjaybnrobpzferxaenxzenbkmlqqzesvfbnnsxwydfbzgbaxkccvoplgjxbikxjifojjmvqxmbjbrtmvbngq)</p>
</div>
</div>
</body>
</html>
I am new to CSS, I want CSS style property that grows the text in both the direction from center of parent element till it reaches end of the screen. I am not familiar with CSS properties, If such a property doesn't exist at all, can I create my own custom style ( I am stuck in my project I want to UI to look as I shown in the description below)
Check this code you have ask like this
Demo
.mainDiv {
height: auto;
width: 100%;
float: left;
text-align: center;
}
.content {
width: 100%;
position: relative;
margin: auto;
padding: 0px;
text-align: center;
top: 10px;
}
.content p {
font-size: 16px;
line-height: 18px;
background-color: #232F34;
color: #FFFFFF;
overflow-wrap: break-word;
padding: 15px 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<title>StackOver flow</title>
</head>
<body>
<div class="mainDiv">
<input type="text" />
<div class="content">
<p>10122019(tjwmxuwmiihcxdfryfgfhrunlfsxrkhvmyqjjuwjddknjaybnrobpzferxaenxzenbkmlqqzesvfbnnsxwydfbzgbaxkccvoplgjxbikxjifojjmvqxmbjbrtmvbngq)</p>
</div>
</div>
</body>
</html>
Weird request, but follow this; you should create a parent with a ceratin width and height and make the child absolute and give it left: 0 right: 0 to center it inside the parent:
#parent {
width: 500px;
height: 150px;
border: 4px solid;
margin: auto;
}
#child {
text-align: center;
}
<div id="parent"></div>
<div id="child">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.
</div>
I've tried alot of solutions and maybe I just implemented them wrongly for my code but I need help as my yr 11 task is due in 1 more day! Someone save me aha.
I apologize for not having a fiddle example to use as I don't know how to set it up or whatever, also the site just wants me to add more details so I'm just gonna keep writing till it lets me post cause I'm tired af and can't think. Whoever helps me your a bloody legend, cheers from straya :)
.slideshow {
display: none;
padding: 10px 0 10px 0;
margin-top: -50px;
font-size: 25px;
overflow-y: hidden;
}
.slide_selection {
display: inline-block;
padding: 20px 30px;
}
.slide_selection img {
height: 40px;
padding: 5px;
border-radius: 250px;
border: #00000099 2px solid;
transition: all .3s ease-in-out, border .5s;
}
.slide_selection img:hover {
background-color: #00000099;
}
.slide_icon {
display: inline;
float: left;
padding: 0 30px 0 30px;
transition: all .15s ease-in-out;
}
.slide_icon:hover {
transform: scale(1.3);
}
figcaption {
font-size: 10px;
font-weight: bold;
}
.slide_content {
background-color: #00000025;
box-shadow: inset 0 15px 10px -15px black, inset 0 -13px 10px -15px black;
margin: -10px 0 0 0;
padding: 30px 0;
display: inline-block;
}
.slide_content img {
height: 95px;
}
.slide_image {
width: 25%;
height: 100%;
float: left;
}
.slide_info {
display: inline-block;
float: right;
width: 75%;
text-align: left;
}
<div class="slideshow">
<div class="slide_selection">
<div onclick="test(1);" class="slide_icon"> <img src="https://i.stack.imgur.com/iplpF.png" alt="" />
<figcaption>WinRar</figcaption>
</div>
<div class="slide_icon"> <img src="https://i.stack.imgur.com/iplpF.png" alt="" />
<figcaption>OllyDBG</figcaption>
</div>
<div class="slide_icon"> <img src="https://i.stack.imgur.com/iplpF.png" alt="" />
<figcaption>NortonAV</figcaption>
</div>
</div>
<div class="slide_content">
<div class="slide_image">
<img src="https://i.stack.imgur.com/iplpF.png" alt="" />
</div>
<div class="slide_info">
<h4>Software Type: </h4>
<h4>Release Date: </h4>
<p>Winrar 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>
</div>
Can I be consider as bloody legend?
Codepen: http://codepen.io/anon/pen/NpoGPr
What I did is use flexbox to center the image.
justify-content is for horizontal centering
align-items is for vertical centering
.slideshow {
padding: 10px 0 10px 0;
margin-top: -50px;
font-size: 25px;
overflow-y: hidden;
}
.slide_selection {
display: inline-block;
padding: 20px 30px;
}
.slide_selection img {
height: 40px;
padding: 5px;
border-radius: 250px;
border: #00000099 2px solid;
transition: all .3s ease-in-out, border .5s;
}
.slide_selection img:hover {
background-color: #00000099;
}
.slide_icon {
display: inline;
float: left;
padding: 0 30px 0 30px;
transition: all .15s ease-in-out;
}
.slide_icon:hover {
transform: scale(1.3);
}
figcaption {
font-size: 10px;
font-weight: bold;
}
.slide_content {
background-color: #00000025;
box-shadow: inset 0 15px 10px -15px black, inset 0 -13px 10px -15px black;
margin: -10px 0 0 0;
padding: 30px 0;
display: flex;
height: 100%;
}
.slide_content img {
height: 95px;
}
.slide_image {
width: 25%;
display: flex;
align-items: center;
justify-content: center;
}
.slide_info {
display: inline-block;
width: 75%;
text-align: left;
}
<div class="slideshow">
<div class="slide_selection">
<div onclick="test(1);" class="slide_icon"> <img src="https://i.stack.imgur.com/iplpF.png" alt="" />
<figcaption>WinRar</figcaption>
</div>
<div class="slide_icon"> <img src="https://i.stack.imgur.com/iplpF.png" alt="" />
<figcaption>OllyDBG</figcaption>
</div>
<div class="slide_icon"> <img src="https://i.stack.imgur.com/iplpF.png" alt="" />
<figcaption>NortonAV</figcaption>
</div>
</div>
<div class="slide_content">
<div class="slide_image">
<img src="https://i.stack.imgur.com/iplpF.png" alt="" />
</div>
<div class="slide_info">
<h4>Software Type: </h4>
<h4>Release Date: </h4>
<p>Winrar 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>
</div>
i did nt understand your code but i think you need a div container you divise it as much as you need then you put your image in the middle of the page here is an simple example
<div class="container">
<div class="row">
<div class="igreen col-sm-5 col-md-5 col-lg-5">this is will be green area</div>
<div class="col-sm-2 col-md-2 col-lg-2"></div>
<div class="col-sm-5 col-md-5 col-lg-5">step1</div>
<div class="col-sm-5 col-md-5 col-lg-5">step1</div>
<div class="col-sm-2 col-md-2 col-lg-2"> <img src="my_image.png"></div>
<div class="ired col-sm-5 col-md-5 col-lg-5">this is will be a red area</div>
<div class="col-sm-5 col-md-5 col-lg-5">step1</div>
<div class="iblue col-sm-2 col-md-2 col-lg-2">this is the blue </div>
<div class="col-sm-5 col-md-5 col-lg-5">step1</div>
</div>
this is a container
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