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
Related
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.
I am stuck with an extra close curry bracket in CSS that I accidentally put prior writing other lines. If I leave it there, it acually does no harm to the result. However, when I remove it, the position of other elements are repositioned.
(( In lines of code, the extra close curly bracket is where the arrow pointing ))
Please click on the links below to see both results.
Question: Is there any way to remove it without repositioning other elements?
Without the Close Curly Bracket
With the Close Curly Bracket
body{
font: 15px/1.5 Helvetica, Arial, sans-serif;
padding: 0;
margin: 0;
p(color#282f38);
background-color: #F5F2ED;
font:696863;
}
/*Global*/
.container{
width:80%;
margin:auto;
overflow:hidden;
}
ul{
margin:0;
padding:0;
}
/* Header */
#fixed{
position: fixed;
}
header{
position: fixed;
width: 100%;
background:#282f38;
color:#F5F2ED;
padding-top: 10px;
min-height:50px;
border-bottom:#F5F2ED 3px solid;
}
header a{
color:#F5F2ED;
text-decoration:none;
text-transform:uppercase;
font-size: 18px;
}
header li{
float:left;
display: inline;
padding: 0 20px 0 20px;
}
header #resume{
float: left;
}
header #resume h1{
margin: 0;
padding: 0;
}
header nav{
position: relative;
left: 30%;
float: right;
margin-top: 10px;
}
header .highlight, header .current a{
color:#696863 ;
font-weight: bold;
}
header a:hover{
color:#696863;
font-weight: bold;
}
/* Showcase */
#showcase {
min-height: 350px;
background: url('../Resources/Photographer.png') no-repeat 0 -120px;
align-items: center;
color: #ffffff;
overflow: auto;
}
#showcase h1{
text-align: center;
margin-top: 100px;
font-size: 40px;
margin-bottom: 10px;
}
#showcase p{
text-align:justify;
margin:0;
padding:0;
font-size: 14;
text-indent: inherit;
}
/* Social Medias*/
#socialmedias{
position:fixed;
padding-top: : 5px;
right: 20px;
top: 130px;
display: block;
vertical-align: baseline;
font: inherit;
list-style-type: none;
}
} <<-----------------------------------------------------------------------
/* Message Me Box */
#box{
width: 30%;
overflow: hidden;
padding: 1px;
}
/* Box Border */
.fieldset{
display: inline-block;
border: 3px solid;
float: right;
}
/* Message Me Title */
#legend{
font-size: 20px;
font-weight: bold;
color:#282f38;
}
/* Name Input */
#form-name{
display: block;
width: 200px;
margin-bottom: 10px;
}
/* Email Input */
#form-email{
display: block;
width: 200px;
margin-bottom: 10px;
}
/* Message Input */
#form-message{
display: block;
margin-bottom: 10px;
}
/* Contact */
.button_contact{
position: relative;
height: 30px;
width: 100%;
background:#696863;
color: #F5F2ED;
font-size: 14px;
text-transform: uppercase;
border: 0;
}
The extra curly bracket is being treated as part of the selector for the next rule. i.e. the rule is
} #box {
width: 30%;
overflow: hidden;
padding: 1px;
}
So } #box matches nothing. When you remove the }, the selector is #box and matches the element with id "box".
If you don't want the effect you get when removing the extra }, remove the entire rule.
Not just one error,
Check the comments I added in your code.
Best way to avoid these errors are using an IDE.
There are so many open source tools available. For example NetBeans.
They can help you to identify your errors.
Check this screenshot, they are easy to use also.
/* Social Medias*/
#socialmedias{
position:fixed;
padding-top: : 5px; // Error 1,
right: 20px;
top: 130px;
display: block;
vertical-align: baseline;
font: inherit;
list-style-type: none;
}
} // Error 2
body{
font: 15px/1.5 Helvetica, Arial, sans-serif;
padding: 0;
margin: 0;
p(color#282f38); // Error 3
background-color: #F5F2ED;
font:696863;
}
You have many errors in your css. I've validated your css on W3C CSS Validator
I've changed your CSS. See below:
body {
font: 15px/1.5 Helvetica, Arial, sans-serif;
padding: 0;
margin: 0;
background-color: #F5F2ED;
}
p {
color: #282f38;
}
/*Global*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
/* Header */
#fixed {
position: fixed;
}
header {
position: fixed;
width: 100%;
background: #282f38;
color: #F5F2ED;
padding-top: 10px;
min-height: 50px;
border-bottom: #F5F2ED 3px solid;
}
header a {
color: #F5F2ED;
text-decoration: none;
text-transform: uppercase;
font-size: 18px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #resume {
float: left;
}
header #resume h1 {
margin: 0;
padding: 0;
}
header nav {
position: relative;
left: 30%;
float: right;
margin-top: 10px;
}
header .highlight, header .current a {
color: #696863;
font-weight: bold;
}
header a:hover {
color: #696863;
font-weight: bold;
}
/* Showcase */
#showcase {
min-height: 350px;
background: url('../Resources/Photographer.png') no-repeat 0 -120px;
align-items: center;
color: #ffffff;
overflow: auto;
}
#showcase h1 {
text-align: center;
margin-top: 100px;
font-size: 40px;
margin-bottom: 10px;
}
#showcase p {
text-align: justify;
margin: 0;
padding: 0;
font-size: 14px;
text-indent: inherit;
}
/* Social Medias*/
#socialmedias {
position: fixed;
padding-top: 5px;
right: 20px;
top: 130px;
display: block;
vertical-align: baseline;
font: inherit;
list-style-type: none;
}
/* Message Me Box */
#box {
width: 30%;
overflow: hidden;
padding: 1px;
}
/* Box Border */
.fieldset {
display: inline-block;
border: 3px solid;
float: right;
}
/* Message Me Title */
#legend {
font-size: 20px;
font-weight: bold;
color: #282f38;
}
/* Name Input */
#form-name {
display: block;
width: 200px;
margin-bottom: 10px;
}
/* Email Input */
#form-email {
display: block;
width: 200px;
margin-bottom: 10px;
}
/* Message Input */
#form-message {
display: block;
margin-bottom: 10px;
}
/* Contact */
.button_contact {
position: relative;
height: 30px;
width: 100%;
background: #696863;
color: #F5F2ED;
font-size: 14px;
text-transform: uppercase;
border: 0;
}
/* Header */
----------------->#fixed{<------------------
position: fixed;
}
Try to change the id where the arrow is pointed, use class for that, because there are so many conflicts, if we use IDs directly. For more information please find the link below:
https://github.com/CSSLint/csslint/wiki/disallow-ids-in-selectors
i think there is something to do with "#fixed" id name in the html and css.
try to change the name to something else. The property and your name might be colliding with each other. So change it...
so I'm trying to get a handle on web designing and such (again). Haven't practiced in a long long time, I've been doing tutorials via codecademy.
Now I wanted to edit the code myself and change things as much as i could.
I can't seem to get the drop down menu to work. I got it to work using javascript toggle but I don't like that I have to reclick the menu to close it, and I'd much prefer the hover method via css as its also simpler (or so i thought lol).
now a lot of the examples I've seen use the pound sign " # ", I don't understand why, I've always known to use " .whatever " for my class selector.
my html code for the section i wanted the drop down menu for:
<ul class="menu">
<li class="dropdown">Join a Clan<b class="caret"></b>
<ul class="dropdown-menu">
<li>Warriors[WAR]
</li>
<li>Twizted[TWIZ]
</li>
</ul>
</li>
and entire CSS for it:
.container {
width: 960px;
}
/* Header */
.header {
background-color: rgba(255, 255, 255, 0.95);
border-bottom: 1px solid #ddd;
font-family:'Oswald', sans-serif;
font-weight: 300;
font-size: 17px;
padding: 15px;
}
/* Menu */
.header .menu {
float: right;
list-style: none;
margin-top: 5px;
}
.menu > li {
display: inline;
padding-left: 20px;
padding-right: 20px;
}
.menu a {
color: #898989;
}
/* Dropdown */
.dropdown-menu:hover {
font-size: 16px;
margin-top: 5px;
min-width: 105px;
}
.dropdown-menu:hover li a {
color: #898989;
padding: 6px 20px;
font-weight: 300;
}
/* Carousel */
.slider {
position: relative;
width: 100%;
height: 470px;
border-bottom: 1px solid #ddd;
}
.slide {
background-size: cover;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slide-copy h1 {
color: #363636;
font-family:'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin-top: 105px;
margin-bottom: 0px;
}
.slide-copy h2 {
color: #b7b7b7;
font-family:'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin: 5px;
}
.slide-copy p {
color: #959595;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.15em;
line-height: 1.75em;
margin-bottom: 15px;
margin-top: 16px;
}
.slide-img {
text-align: right;
}
/* Slide feature */
.slide-feature {
text-align: center;
height: 470px;
}
.slide-feature img {
margin-top: 112px;
margin-bottom: 28px;
}
.slide-feature a {
display: block;
color: #6fc5e0;
font-family:"HelveticaNeueMdCn", Helvetica, sans-serif;
font-family:'Oswald', sans-serif;
font-weight: 400;
font-size: 20px;
}
.slider-nav {
text-align: center;
margin-top: 20px;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #363636;
You are putting :hover on the wrong element. Try this:
.dropdown-menu {
font-size: 16px;
margin-top: 5px;
min-width: 105px;
display: none;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown .dropdown-menu li a {
color: #898989;
padding: 6px 20px;
font-weight: 300;
}
I've been having trouble fitting some content into a border. When entering more text, instead of extending to fit vertically it just continues past the border as shown in the attached screenshot:
And my CSS file is as follows:
body {
background-image:url(http://www.cs.aub.edu.lb/hsafa/cmps278/hw2/background.png);
background-repeat:repeat;
background-attachment:fixed;
margin: 0px;
padding: 0px;
font-family: Verdana, Tahoma, sans-serif;
}
h1 {
text-align: center;
font-family: Tahoma, Verdana, sans-serif;
font-size: 24pt;
text-shadow: 3px 3px #999999;
font-weight: bold;
}
p {
font-size: 8pt;
}
#content {
width: 800px;
margin: auto;
border: 4px solid gray;
border-radius: 20px;
background-color: #A2B964;
}
#banner {
height: 50px;
background-image:url(http://www.cs.aub.edu.lb/hsafa/cmps278/hw2/bannerbg.png);
background-repeat:repeat;
}
#banner img {
display: block;
margin:auto;
overflow: hidden;
}
#general {
float: right;
width: 250px;
border-radius: 0px 20px 0px 0px;
}
dl {
margin: 10pt;
font-size: 8pt;
font-family: Ariel, sans-serif;
}
dt {
font-weight: bold;
margin-top: 10pt;
}
ul {
list-style-type: none;
}
li {
margin-left:0px;
}
#leftsection {
width: 550px;
overflow:hidden;
background-image:url(http://www.cs.aub.edu.lb/hsafa/cmps278/hw2/background.png);
background-repeat:repeat;
background-attachment:fixed;
}
#rating {
height: 83px;
background-image:url(http://www.cs.aub.edu.lb/hsafa/cmps278/hw2/rbg.png);
background-repeat: repeat;
overflow: hidden;
border-radius: 20px 0px 0px 0px;
}
#rating img {
border-radius: 20px;
}
.special {
vertical-align: top;
font-size: 48pt;
font-weight: bold;
color: red;
}
.review {
font-size: 8pt;
font-family: Verdana, Tahoma, sans-serif;
font-weight: bold;
background-color: #E8DC9B;
border: 2px solid gray;
border-radius: 10px;
padding-left: 8px;
padding-right: 8px;
}
.personal {
margin-bottom: 20pt;
}
.italic {
font-style: italic;
margin-left: 40px;
}
img.review {
padding-right: 5px;
}
#leftcol {
margin-top: 2%;
margin-left: 2%;
margin-right: 2%;
float: left;
width: 47%;
}
#rightcol {
margin-top: 2%;
margin-right: 2%;
float: right;
width: 47%;
}
#pages {
text-align:center;
margin: 5px;
}
#validated {
position: fixed;
top: 90%;
left:80%;
width: 600px;
}
#validated img {
opacity: 0.5;
}
I've added the HTML code on CSSDeck: http://cssdeck.com/labs/full/bldwwaec
It would be better if you put the HTML codes too.
The right side element is either fixed (or absolute) or float. If it is float, you can simple fix it with adding a <br /> at the end of its parent element and set clear: both; on it. Like this:
<div id="parent">
<div>aaa</div>
<div class="float-right">bbbb</div>
<br style="clear: both;" />
</div>
Now, the div#parent fits with the content and if you set a border on it, your problem would fix.
In absolute case, however, it is not as easy as I explained and recommend revising the use of absolute (or fixed) for that part.
Good luck,
Mohammad Ali Sharpasand
Of course today, float is no longer needed, as the flexbox is available:
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
Also, grid is amazing:
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids
you have to put one more div over the id=content and you can call the calss=pagewrapper.
.pagewrapper{
margin: 0 auto;
width: 800px;
}
put float:left in your ID
#content{
float: left;
}
The problem appears to be the floating right column.
#rightcol {
float: right;
}
It would appear you need to clear the float, since floating elements are removed from normal page flow, the parent element will not expand to match the height. A simple solution is to add a clearfix to your parent element or class (in our case ID)
#content:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
This should solve your issue, if you have more questions about this I would suggest looking here.
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'