I have an 8 pixel border that I'd like to increase, but I can't find where it's coming from. Also, if I use margin, it disproportionally adds to the border.
The CSS and the entire project is available here:
CSS Resume Project
#font-face {
font-family: "Open Sans";
src: url(Open_Sans/OpenSans-Regular.ttf);
}
.global {
/*border: solid 10px lightgray;*/
border-radius: 25px;
font-family: 'Open Sans', sans-serif;
background-color: white;
/*position: absolute;*/
top: 20px;
margin-bottom: auto;
padding-bottom: 20px;
right: 20px;
left: 20px;
align-self: center;
}
h3 {
font-weight: 300;
}
p {
font-weight: 300;
}
body {
background-color: lightgray;
}
Any help or even a pull request would be greatly appreciated. Thanks.
because it has a margin set by default and the user-agent-stylesheet looks something similar to this:
body {
display: block;
margin: 8px
}
so , simply reset margin in body
body {
margin:0
}
body element has 8px margin set as default by browsers.
You just need to change the margin of the body tag
body {
margin:20px;
}
You can reset/normalize your code by adding this code !
body {
margin: 0
}
Related
I need the width of the whole page to be 1200px, but I must be doing something wrong because when I say for the html to be 1200px (either calling out the html or the body) chrome web dev tools always says its about 1300 px with a large right hand margin? I was looking through similar posts, and added more code that helped other people but it's still there for me. What am I doing wrong?
html,body
{
margin: 0px;
padding: 0px;
display: inline-block;
width: 1200px;
}
#font-face {
font-family: Montserrat-Regular;
src: url('../fonts/Montserrat-Regular.ttf') format('opentype');
font-family: Montserrat-Bold;
src: url('../fonts/Montserrat-Bold.ttf') format('opentype');
}
body{
font-family: 'Montserrat-Regular', sans-serif;
margin: 0;
width: 100%;
}
/*GRID*/
.full-width{
width: 100%;
clear: both;
padding-left: 20px;
}
.half-width{
width:50%;
float: left;
}
.third-width{
width:33%;
float:left;
}
/*HEADER*/
header{
border-bottom: 6px #77a466;
}
ul{
color:#77a466;
list-style-type: none;
}
nav{
float:right;
padding-top: 25px;
}
nav ul li{
display:inline;
text-transform: uppercase;
font-family:'Montserrat-Bold', sans serif;
padding: 0 8px 0 8px;
}
h1{
line-height: 60px;
}
h1, h2, h3{
font-family: 'Montserrat-Bold', sans-serif;
text-transform: uppercase;
}
span{
color: #77a466;
}
/*MAIN*/
img{
background-size: cover;
height: 290px;
width: 1200px;
}
Try adding * {
box-sizing: border-box
} to your css. I also agree with Lux, if you create a live example then it will be much easier to help you come up with a solution.
I can't seem to find a way to keep my footer at the bottom of the page when the user zooms to or so 25%. But keep it in the right place when the user has the default zoom. I can just delete the whole footer section and it works for default zoom. I've been reading a lot but can't seem to get it working.
Here are some screenshots of what I mean:
.footer {
background-color: #171717;
bottom: 0;
width: 100%;
padding: 25px 0;
margin-top: -3em;
}
More context:
html {
height: 100% !important;
}
body, html {
position: relative !important;
}
body {
min-height: 100%;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
overflow-x: hidden !important;
color: #838282;
font-family: 'Open Sans', sans-serif;
}
I am using bootstrap. Please, any idea is appreciated, thanks.
I'm making a webpage, but I can't seem to get my header div at the very top of the page. There is always a little gap above it. I've tried looking around, but all the solutions of tried don't work.
The webpage in progress
#body {
margin: 0 !important; <!--I thought these "importants" would fix it -->
padding: 0 !important;
}
#header {
margin: 0;
padding: 0;
height: 80px;
width: auto;
background-color: #3385FF;
font-family: 'Cabin', serif;
font-size: 60px;
text-align: center;
}
<link href='https://fonts.googleapis.com/css?family=Cabin:400,600' rel='stylesheet' type='text/css'>
<body>
<div id="header"><p id="header_text">The_Grits</p></div> <!-- This is the div I want at the top of the page. -->
</body>
Thanks in advance!
EDIT: The problem has been answered now, thanks for looking anyway.
You need to remove the id selector from body and remove the margin applied to the paragraph element.
Remove the user agent default margin applied to the <p> element and the <body> adding this code:
body, p {
margin: 0;
}
#header {
margin: 0;
padding: 0;
height: 80px;
width: auto;
background-color: #3385FF;
font-family: 'Cabin', serif;
font-size: 60px;
text-align: center;
}
Your paragraph p has default margin, because you have missed to add _text in your css rule #header.
Try this snippet:
#body {
margin: 0;
padding: 0;
}
#header_text {
margin: 0;
padding: 0;
height: 80px;
width: auto;
background-color: #3385FF;
font-family: 'Cabin', serif;
font-size: 60px;
text-align: center;
}
<div id="header">
<p id="header_text">The_Grits</p>
</div>
because you have to add: p {margin:0px;} or add the #header_text { margin:0px }
When you create a new style sheet, try to reset all element's padding and margin to 0px. This would help you.
http://jsfiddle.net/bpmck3wt/
#header {
display:block;
position:absoulute;
top:0;
right:0;
left:0;
margin: 0;
padding: 0;
height: 80px;
background-color: #3385FF;
font-family: 'Cabin', serif;
font-size: 60px;
text-align: center;
}
why don't you specify the position and the dispaly ?
First of all, #body matches the element with id set to body, you don't have such elements so it's completely redundant (it should be just body).
Secondly, "The_Grits" is within p, which adds its own margin. Add
#header_text { margin: 0 }
to your CSS.
See the demo:
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Cabin:400,600' rel='stylesheet' type='text/css'>
<!--Above imports the font I'm using-->
<title>The_Grits Programming</title>
<style>
body {
margin: 0;
padding: 0;
}
#header_text { margin: 0 }
#header {
margin: 0;
padding: 0;
height: 80px;
width: auto;
background-color: #3385FF;
font-family: 'Cabin', serif;
font-size: 60px;
text-align: center;
}
</style>
</head>
<body>
<div id="header"><p id="header_text">The_Grits</p></div> <!-- This is the div I want at the top of the page. -->
</body>
</html>
I have been looking around on stackoverflow to find the answer on my problem but I couldn't find it. The problem is that I have a background img where I want to have text on it. But if I use postition: absolute; the text disappears. I also don't want it in my style because I going to use this on different pages with different images.
Visit problem
HTML:
<body>
<div id="header">
<img src="http://www.larsdejonge.nl/werk/img/background.jpg" class="begin">
<h1>Aangenaam Klassiek</h1>
<h2>Vormgeving & Frontend</h2>
</div>
</body>
And my CSS:
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html, body {
width: 100%;
height: 540px;
background: #efede7;
}
body {
background: #efede7;
font-family: 'Montserrat', sans-serif;
color: #fff;
line-height: 1.3;
}
#header {
}
.begin {
width: 100%;
max-height: 540px;
}
h1 {
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-size: 3em;
font-weight: 700;
color: #fff;
text-align: center;
}
h2 {
font-family: 'ProximaNova', sans-serif;
font-size: 1.5em;
color: #c7c7c7;
text-align: center;
}
h2::after {
content: '';
width: 80px;
display: block;
background: #272f38;
height: 10px;
margin: 30px auto;
text-align: center;
}
I hope someone is smarter than me and could figure this out?
Thanks for already looking into it!
You put your background as image, so it's not just background, but also element with dimension. You should remove your <img /> and put it as background using CSS.
#header {
background: url('http://www.larsdejonge.nl/werk/img/background.jpg');
}
Remove the header image from your html and use CSS properties instead.
See DEMO which uses this updated CSS snippet:
#header {
background-image: url('http://www.larsdejonge.nl/werk/img/background.jpg');
background-size: auto 540px;
background-repeat: no-repeat;
height: 540px;
}
Background-resize is necessary because your image is way too large.
Remove <IMG> and use the img url as background in CCS:
here is an example:
http://jsfiddle.net/act6uasf/5/
I see that you don't want the img in your CSS but if you want that I think you need to find it out your self. I don't see the big problem using a url in your CSS ore is it just me?
My solution
You can better use it for the time this now, if you find later something else you can always change it.
HTML Code:
<body>
<div id="header">
<div class="text">
<h1>Aangenaam Klassiek</h1>
<h2>Vormgeving & Frontend</h2>
</div>
</div>
</body
CCS Code:
#header {
background-image: url(http://www.larsdejonge.nl/werk/img/background.jpg);
background-repeat: no-repeat;
width: 100%;
height: 540px;
}
.text {
padding-top: 150px;
}
h1 {
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-size: 3em;
font-weight: 700;
color: #fff;
text-align: center;
}
h2 {
font-family: 'ProximaNova', sans-serif;
color: #545454;
font-size: 1.25em;
letter-spacing: .06em;
margin: 0;
padding: 0 0 2.5em;
text-align: center;
text-transform: uppercase;
}
h2::after {
content: '';
width: 80px;
display: block;
background: #272f38;
height: 10px;
margin: 30px auto;
text-align: center;
}
If you really want to solve this problem with absolute position, you can use my example
http://jsfiddle.net/act6uasf/2/
here to make absolute property work, you just need to add
position:relative;
to #header, but i recommend you to try solving it with background property.
CSS doesn't prevent you from swapping the image out like you have suggested. I would use a body class.
HTML
<body class="home"><!-- change this class for each page -->
<div class="intro">
<p>
Hello World!
</p>
</div>
</body>
Simply change the class on the body tag for each page, i.e. home, about, contact, etc.
CSS
.home .intro {
background-image: url('path-to-image.jpg');
}
.about .intro {
background-image: url('path-to-some-other-image.jpg');
}
Here is a demo. Swap the class on the body tag from home to about and click Run to see the difference.
I have a demo.
Why are list items overflow out of the white content area and how can i fix it?
body {
line-height: 1;
background:#7D93BD;
font-size: 22px;
}
#content {
width:80%;
height:auto;
margin-left:auto;
margin-right:auto;
padding: 10px 20px 30px 20px;
background-color:#F8F8F8;
color: #333333;
font-family: Helvetica, Arial, sans-serif;
}
#profileInfo {
position: relative;
top: 100px;
}
#profileInfo li {
list-style-type: none;
line-height: 1.4;
}
#profile_info_title {
font-weight: bold;
}
You need to remove top:100px from the #profileInfo ul - it's pushing that content down by 100px.
If you need #profileInfo to be pushed down by 100px, then use margin-top instead of top:
#profileInfo {
margin-top: 100px;
position: relative;
}
http://jsfiddle.net/AhSzg/2/
Remove position:relative from #profileInfo
Only use postion if you need it to act a different way that the default. Or remove the top:100px