Basically I created one component which has just a title and a color for background that should cover the whole page (but it's not, apparently there's a top margin and I don't know how to remove it) and also I created a componenent to be the footer. This component should stay at the botom of the page and it should go down with the addition of content, but it doesn't, the content overlaps it and even crosses it. How can I fix it?
Background CSS:
<style scoped>
*{
margin: 0%;
padding: 0%;
}
.background{
position: relative;
height: 88vh;
background-color: #3B3B3B;
}
.title{
border: 1px solid #707070;
border-left: none;
border-right: none;
}
.title h2{
text-align: left;
color: #B16DFF;
padding-top: 0.8em;
font-size: 2em;
padding-bottom: 0.5em;
margin-left: 1.5em;
font-weight: 600;
}
Footer CSS:
<style scoped>
.container{
width: 100%;
margin: 0%;
position: absolute;
bottom: 0%;
background-color: #232323;
}
.container h2{
font-weight: bold;
color: #B16DFF;
font-size: 1.5rem;
padding-top: 1.1em;
}
.container #text{
position: relative;
float: left;
padding-left: 5em;
text-align: justify;
padding-bottom: 2em;
}
.container p{
font-weight: 600;
font-size: 0.8rem;
color: white;
}
.container #title{
padding-bottom: 0.4em;
}
.container #description{
padding-bottom: 1.3rem;
}
.container #images{
position: relative;
padding-top: 3em;
float: left;
padding-left: 5em;
}
.container ul li{
display: inline-block;
padding-left: 2em;
}
On your background css, you have a scoped style so it doesn't apply to everything.
Also when you use 0 as value for a css property, you don't need to specify units.
Related
I am trying to create the following resume using html/css, and the actual resume is not filling up the body of the html.
resume 1
resume2
The CSS code for the resume is as follows.
<style>
body {
background-color: white;
width: 612px;
height: 792px;
}
h1 {
margin-top: 15px;
margin-bottom: 0px;
text-align: center;
color: black;
font-size: 70px;
}
html, body {
overflow: auto;
}
h1:after {
content:' ';
display:block;
border:3px solid black;
margin-bottom: 0px;
}
p{
font-weight: bold;
font-size: 30px;
color: black;
margin-bottom: 15px;
margin-top: 15px;
}
dt {
display: list-item;
list-style-type: disc;
list-style-position: inside;
}
dl {
margin-top: 15px;
}
h3 {
text-align: left;
font-size: 19px;
color: black;
margin-bottom: 4px;
}
</style>
I was wondering if there is any CSS line that can fix this issue
This is probably the reason:
body {
width: 612px;
height: 792px;
}
You're forcing the whole body of your website to be set at 612x792 pixels, so of course it won't fill up the entire view
I am unable to get my aside element to align properly with the rest of my page. It sits above the main element and spills into the header. How do I fix that?
Here's what it looks like on the page:
Here's the CSS Style code I'm using:
* {
margin:0;
padding:0;
}
body {
font-size:1.1em;
font-family: Arial, Helvetica, sans-serif;
background-color:darkseagreen;
}
header {
padding: 1%;
margin-bottom: 3%;
text-align: center;
font-size:2em;
font-family: Arial, Helvetica, sans-serif;
text: white;
background-color: #4EEE94;
}
aside {
width: 25%;
padding: 0.5%;
margin: 0 5px 5px 0;
background-color: #1C86EE;
float: right;
border-radius: 20px;
position: relative;
min-height: 100%;
display: block;
}
#main {
width: 446px;
margin-right: 27%;
padding: 0.5%;
background-color: #EE6363;
text: white;
position: relative;
border-radius: 4%;
}
.map {
padding: 2em;
margin: 3em auto 3em auto;
position: relative;
display: block;
text-align: center;
width: 95%;
.image {
padding: 5%;
margin: 4em;
float: left;
position: relative;
left: 10px;
top: 15px;
}
}
div {
box-shadow: 10px 10px 5px #888888;
border: 2px solid;
border-radius: 25px;
}
nav ul li {
margin-right: 1em;
display: inline;
list-style-type: none;
}
nav li a {
padding: 1em;
color: white;
text-decoration: none;
}
nav li a:hover {
color: yellow;
text-decoration: underline;
}
footer {
margin: 0.5% 27% 0 0;
border-top: solid thick teal;
padding: 0.5%;
background-color: lime;
}
first issue with your css remove the braces after .image class.
.image {
padding: 5%;
margin: 4em;
float: left;
position: relative;
left: 10px;
top: 15px;
}
}
second thing use px or % or em do not use all (recommended) .
Third use id something like this
<div id="xyz"></div>
Not <div id="#xyz"></div> # is the css selector
also do not use multiple id like <div id="abc xyz"></div> u cannot use multiple id's use class instead of <div class="abc xyz"></div>
I am trying to change <h1> and <p> text's width and height dynamically. I want to get parents height and width, then use percentage for changing child's. But all my attempts are failed.
Here is my css example code:
#main-holder #category1 {
height: 80px;
width: 15%;
float: left;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
border: thin solid #999;
margin-top: 5%;
margin-right: 2%;
margin-bottom: 0px;
margin-left: 6%;
text-align: center;
vertical-align: top;
}
#main-holder #category1 h1 {
font-weight: bold;
color: #FFF;
text-align: center;
vertical-align: middle;
line-height: 20%;
text-decoration: none;
}
#main-holder #category1 h1 a {
color: #FFF;
text-decoration: none;
}
#main-holder #category1 h1 a:hover {
color: #999;
text-decoration: none;
}
#main-holder #category1 p {
color: #CCC;
}
in html I am using like this:
<div id="category1">
<h1>MOVIES</h1>
<p>FOR ALL AGES</p>
</div>
I added width and height like below, but it didn't help:
#main-holder #category1 h1 {
height: 50%;
width: 50%;
}
In your code, you dont have #mainholder, but used all the css with that.so none of the styles applied. So I removed that from css and used line-height as 100% along with height. As the parent div have height as 80px, hope this is working fine and this is what you expected.
Updated Demo
Added font-size:2.9vw; for h1
#category1 {
height: 80px;
width: 15%;
float: left;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
border: thin solid #999;
margin-top: 5%;
margin-right: 2%;
margin-bottom: 0px;
margin-left: 6%;
text-align: center;
vertical-align: top;
background-color:#666;
}
#category1 h1 {
font-weight: bold;
color: #FFF;
text-align: center;
vertical-align: middle;
line-height: 100%;
height: 100%;
text-decoration: none;
font-size:2.9vw;
}
#category1 h1 a {
color: #FFF;
text-decoration: none;
}
#category1 h1 a:hover {
color: #999;
text-decoration: none;
}
#category1 p {
color: #CCC;
}
You can use viewport value instead of ems, pxs or pts.
1vw = 1% of viewport width
1vh = 1% of viewport height
Update: Demo
For <p> Height alignment problem, Use background and border for <h1> along with height and line-height like this:
CSS:
#category1 {
height: 80px;
width: 15%;
float: left;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 5%;
margin-right: 2%;
margin-bottom: 0px;
margin-left: 6%;
text-align: center;
vertical-align: top;
}
#category1 h1 {
font-weight: bold;
color: #FFF;
text-align: center;
vertical-align: middle;
line-height: 80px;
height: auto;
text-decoration: none;
font-size:2.9vw;
background-color:#666;
border: thin solid #999;
}
Why dont you use vw for font-size ?
font-size: 5vw;
Documentation
To change the text size you should use font-size:72px; or font-size:3em;.
One of the options it to use CSSStyleSheet JS object.
Check this tutorial: http://davidwalsh.name/add-rules-stylesheets
This answer provides another approach: modify a css rule object with javascript
You can get stylesheet object and manually modify properties:
var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;
rules[0].style.height = '80px';
I have my code set up so I have the hero image at the bottom and the overlay on top with the text and button in overlay. I also have the navigation bar with a z-index but for some reason the button for my resume in overlay isn't working.
HTML
<div id="header">
<a href="index.html"><div id="leftHeader">
<img src="assets/logo2.jpg" alt="Logo" style="width:65px;height:65px">
<h1>Amanda Farrington</h1>
</div>
<div id="nav">
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
<li>Notes</li>
</ul>
</div>
</div>
<div id="hero">
<div id="heroImage">
<img src="assets/trees.jpg" alt="trees" style="width:100%;height:10%">
</div>
<div id="overlay">
<h2>Amanda Farrington</h2>
<h3>Graphic Artist | Web Designer</h3>
View Resume
</div>
</div>
CSS
#header {
color: #D7DADB;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size : 15px;
text-align: left;
width: 100%;
padding-left: 3em;
position: relative;
height: 15%;
box-sizing: border-box;
padding-top: 1em;
}
#header img
{
float: left;
padding-left: 3em;
}
h1{
width: 9em;
float: left;
padding-left: 0.5em;
color: #45CCCC;
padding-bottom: 1px;
}
#nav {
width: 50%;
margin:0;
padding:0;
text-align: right;
color: red;
font-size:20px;
float: right;
padding-right: 2em;
z-index: 99;
}
#nav ul {
padding: 1px;
}
#nav li {
display: inline;
padding: 38px;
}
#nav li a {
color: #2C3E50;
text-decoration: none;
}
#nav li a:hover {
color: #45CCCC;
}
/*----------hero image styles-------------*/
#hero{
padding-top: 25em;
width: 100%;
height: 30em;
position: relative;
z-index: -1;
}
#heroImage
{
top: 9%;
width: 100%;
z-index: 1;
position: absolute;
}
#overlay{
width: 34em;
top: -15%;
margin-left: 30%;
z-index: 2;
position: relative;
clear: left;
}
h2{
width: 100%;
position: relative;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 60px;
float: center;
color: white;
opacity: 1.0;
text-shadow: 2px 2px 3px #000000;
text-align: center;
}
h3{
width: 100%;
position: relative;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 30px;
color: #e5e5e5;
opacity: 1.0;
text-shadow: 2px 3px 2px #000000;
text-align: center;
}
a.down{
z-index: 100;
font-family: 'Roboto', sans-serif;
font-weight: 400;
text-decoration: none;
color: #181b1e;
background: #45CCCC;
position: relative;
padding: 0.6em 0.2em;
font-size: 1.2em;
-webkit-border-radius: 6px;
width: 30%;
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
a.down:hover{
text-decoration: underline;
color: white;
}
Because z-index works only on elements which are NOT set asposition: static. Bear in mind that every element is set as default to position:static.
Try set to position:absolute; or relative your element.
Also all other types of positioning, like position:fixed, position:sticky.
So I've taken a look at your code and the reason your button doesn’t work is because the div with the ID of #hero (which contains the button) is below the body because it has a z-index of -1.
Set the z-index for #hero to 0 or higher and the button will work.
#hero {
padding-top: 25em;
width: 100%;
height: 30em;
position: relative;
z-index: 0;
}
Check out this JS Fiddle I've created for you:
https://jsfiddle.net/8fqwr6ca/
Edit: Oh, and I forgot to mention–since you want the image to be below, set the #hero 's z-index to 1, set #heroImage to 0, and overlay to 2. That should do the trick (if what I think you want is correct).
I'm trying to get my background image to show at the top center of the page. The image works fine if I do:
<style>
body {
background: #FFF url('img/top_logo_blank_small.png') no-repeat fixed;
}
</style>
I can't seem to work out where I've gone wrong. There must be something I've managed to mess up, I just can't see it. Here is the CSS:
body {
font-family: 'Quattrocento Sans', helvetica, sans-serif;
background: #EEE url('img/top_logo_blank_small.png') no-repeat fixed;
color: #fff;
margin: 0;
padding: 0;
}
a {
color: black;
text-decoration: none;
}
/* Typography */
.header h1 {
position: absolute;
width:100%;
top: 50%;
margin-top: -20px;
text-align: center;
letter-spacing: 4px;
}
.header h1 em {
font-size: 1.200em;
font-style: normal;
}
h1 {
font-size: 2.2em;
color: #fff;
}
.content h2 {
font-size: 1.75em;
color: #fff;
letter-spacing: 4px;
text-align: center;
}
.content h2 em {
font-size: 1.2em;
font-style: normal;
}
.content h3 {
text-align: center;
font-size: 1.0em;
font-weight: normal;
color: #ede0ed;
letter-spacing: 1px;
margin-bottom: 25px;
}
.content h4 {
margin-top: 0;
text-align: center;
font-size: 0.8em;
font-weight: normal;
color: #ede0ed;
letter-spacing: 1px;
}
#banner p {
text-align: center;
}
/* Navigation */
#nav {
margin: 4px 4px 40px;
}
#nav ul {
padding: 0;
margin: auto;
list-style: none;
}
#nav ul li {
width: 50%;
color: #BBB;
float: left;
font-family: 'Cabin Sketch';
font-size: 1.75em;
text-align: center;
background: url(img/scribble_dark.png);
}
#nav ul li a {
display: block;
/*padding: 5px 20px;*/
}
#nav ul li a:hover {
background: #e0d0e0;
}
/* Content */
.container{
max-width: 720px;
margin: 50px auto 0;
background: #FFF url('img/top_logo_blank_small.png') no-repeat fixed 0 0;
}
.header {
position: relative;
background-color: #b88fb8;
border-top: 5px solid #ede0ed;
height: 75px;
}
.content {
background-color: #000;
padding: 15px;
margin-bottom: 10px;
}
div#about {
padding:25px;
min-height: 255px;
}
img#portrait {
float: left;
margin-right: 25px;
width: 256px;
height: 256px;
}
div#footer {
width: 100%;
max-width: 720px;
margin: auto;
color: black;
text-align: right;
padding: 0 10px;
font-size: 0.850em;
}
#media screen and (max-width: 650px) {
.container {
width: 90%;
max-width: none;
}
div#footer {
width: 90%;
}
}
Try to change your path for example:
background: #EEE url('../img/top_logo_blank_small.png') no-repeat fixed top;
Because you are in a subfolder, you have to go up of a level I think
Most likely your css file is in a different folder and therefore needs another path to the image file.
The common way is to put css in a separate css/* folder, so the path should be:
url('../img/top_logo_blank_small.png')
This CSS seems to work fine, are you certain that the image exists?
http://jsfiddle.net/ghsNR/
I've just tried it here and it works fine with an image from http://placehold.it/
body {
font-family: 'Quattrocento Sans', helvetica, sans-serif;
background: #EEE url('http://placehold.it/500x500') no-repeat fixed top;
color: white;
margin: 0px;
padding: 0px;
}
The most likely cause after observing this is that your CSS isn't actually locating your image correctly. I suggest using tools like the Chrome dev tools, or Firebug to inspect the absolute path that the browser is trying to use to load the image and moving forward from there.
Is the css in the same folder as the page? If you have a different folders, you need to change the URL accordingly.
Maybe change the URL to
'../img/top_logo_blank_small.png'