I am new to HTML and CSS so I am doing a online course, I don't understand what went wrong here and I cannot find it in my course.
My footer is smaller then it used to, it was as big as my header and I want it as big as my header. When I added all the .post code, it went wrong. When I edit my .post max-width my footer width is also adjusted. Please help me :)
.container {
max-width: 1000px;
margin: 0 auto;
}
#footer {
background-color: #2f2f2f;
padding: 50px 0;
}
.column {
min-width: 300px;
display: inline-block;
vertical-align: top;
}
#footer h4 {
color: white;
text-transform: uppercase;
letter-spacing: 0.1em
}
#footer p {
color: white;
.post {
max-width: 1000px;
margin: 0 auto;
padding: 60px 0;
Related
this might be a really stupid question, but I recently started getting into web development again as a hobby, and I am trying to create a simple website to remember what I knew.
Unfortunately, I ran into a roadblock: I want a navigation bar that spans 100% of the page, but no matter what I try, there are still tiny margins to each side, like this:
The website
Right now, the relevant CSS looks like this:
body {
background-color: beige;
}
.navbar {
background-color: black;
overflow: hidden;
margin: 0 0 1em 0;
float: left;
width: 100%;
display: inline-block;
}
.navbar a {
background-color: #dddddd;
color: black;
float: left;
font-size: 24px;
padding: 16px 16px;
text-decoration: none;
}
.navbar a:hover {
background-color: #777777;
color: white;
}
.navbar a.active {
background-color: coral;
color: white;
}
Andrew provided a nice answer for you but to not run into this kind of problem again I suggest always adding this to your main .css file.
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
Otherwise just add this to the html and body elements.
The gaps are most probably from your parent body element. Add the following to your CSS to remove those gaps:
body {
background-color: beige;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
I have tried this very same method on a previous website in which it worked. I am not sure why isn't it working now.
body {
max-width: 100%;
}
#header_encapsulator {
max-width: 1000px;
margin: auto;
background-color: orange;
}
header {
position: fixed;
max-width: 60em;
width: 100%;
}
.logo {
float: left;
font-family: 'Tangerine', cursive;
font-size: 3rem;
padding: 0 0 0 1rem;
text-decoration: none;
font-weight: bold;
color: black;
}
nav {
float: right;
padding: 1.5rem 1rem 0 0;
}
nav a {
text-decoration: none;
}
nav a:first-child {
padding-right: .8rem;
}
h1 {
font-size: 2rem;
text-align: center;
padding: 12rem 0 2rem 0;
font-family: 'Roboto Slab', serif;
}
<div id="header_encapsulator">
<header>
<a class="logo" href="/">Logo_name</a>
<nav>
Menu_1
Menu_2
</nav>
</header>
</div>
<h1>Heading</h1>
I am not sure why margin:auto inside #header_encapsulator doesn't center <header> if I don't specify a max-width. The website will break on a monitor with >1000px width. It doesn't take 10000px value not does it take % values too.
Secondly, the header_encapsulator should show a orange background image edge to edge of the display. It doesn't show. I know that empty divs/sections doesn't display it's properties, but I have done it before, the exact same way.
Edit:
I have created a simpler html and css file with the same code. You can download it here and test it locally. I don't get the orange background 100% of the monitor width.
Don't know if there's any reason to have the #header-encapsulator not being fixed itself instead of the header inside (which causes the encapsulator to be "empty", thus, not having a height), but simply moving the position: fixed property to #header-encapsulatorand adding a width: 100% should fix the issue
Edit: Removed 10000px max-width property from #header_encapsulator and width:100% from header.
body {
max-width: 100%;
}
#header_encapsulator {
width: 100%;
background-color: orange;
/*Put it in here*/
position: fixed;
}
header {
/*Removed it from here*/
max-width: 60em;
margin:auto
}
.logo {
float: left;
font-family: 'Tangerine', cursive;
font-size: 3rem;
padding: 0 0 0 1rem;
text-decoration: none;
font-weight: bold;
color: black;
}
nav {
float: right;
padding: 1.5rem 1rem 0 0;
}
nav a {
text-decoration: none;
}
nav a:first-child {
padding-right: .8rem;
}
h1 {
font-size: 2rem;
text-align: center;
padding: 12rem 0 2rem 0;
font-family: 'Roboto Slab', serif;
}
<div id="header_encapsulator">
<header>
<a class="logo" href="/">Logo_name</a>
<nav>
Menu_1
Menu_2
</nav>
</header>
</div>
<h1>Heading</h1>
You are specifying max-width: 100%.
This is the maximum width that will be taken up by the div and in order to reach this width, the div element will require enough content to fill it to 100%.
Use width instead of max-width. This will force any div to be the specified width, regardless of content.
Give a height to your #header_encapsulator like so:
#header_encapsulator {
width: 1000px;
background-color: orange;
height: 100px; // or anything you want
}
plus if you want margin: auto header you should do something like:
#header_encapsulator header {
margin: auto;
//other css if you want
}
i'm starting with responsive design and i'm having the next issue:
when i rezise my div, in a design of two column and the right one is going down.
Ex before rezise:
and after rezise:
I dont jnow why is going down f the design is in %. Maybe somebody can help'me, here the css code that i'm using.
* { margin: 0px; padding: 0px; }
h1 {font: bold 20px verdana, sans-serif; }
h2 {font: bold 14px verdana, sans-serif; }
header, section, footer, aside, nav, article, figure, figcaption, hgroup { display: block; }
body { width: 100%; text-align: center; }
#envoltura { margin: 15px auto; text-align: left; padding: 0px 2% 0px 2%}
#cabecera { background: #FFFBB9; border: 1px solid #999999; padding: 20px; text-align: center; }
#menu { background: #CCCCCC; padding: 5px 15px; text-align: center; }
#menu li { display: inline-block; list-style: none; padding: 5px; font: bold 14px verdana, sans-serif; }
#seccion { float: left; width: 65%; margin: 20px 0px 0px 0px; border: 2px solid #999999; padding: 2%; text-align: center; }
#lateral { float: left; width: 26.4%; margin: 20px 0px 0px 0px; padding: 2%; background: #CCCCCC; border: 2px solid #999999; text-align: center; }
#pie { clear: both; text-align: center; padding: 20px; border-top: 2px solid #999999; }
Because you haven't allowed enough room for the two columns at that window size!
► Declare different layout per media queries:
(method below based on a min and max screen resolution range)
#media only screen and (min-width: 480px) and (max-width: 979px) {
/* Your styles for between these two resolutions here */
}
OR! depending on what you want to do, complete end goal, you may not even need to use media queries
► Define width of each columns in a percentage relevant to either the browser, or a wrapper div.
#wrapper {
position: relative; // the below is relative to this
margin: 0 auto; // center
max-width: 1024px; // max size of container
width: 100%; // 100% between min and max ;)
min-width: 960px; // lowest toggle point
}
.left {
width: 80%; // 80% of above
float:left;
min-width: 500px; // add a min-width to declare stopping point
}
.right {
width: 20%; // 20% of above
float:right;
min-width: 100px; // add a min-width to declare stopping point
}
It is because your divs are equaling more than 100% of your parent try this and edit it as you see fit
If you post your html I can explain it furthur
set your body to an absolute value example body{width:1200px} then set your first media query to #media screen and (max-width: 1199px){body{width: 100%}} This way you know that anything over 1199px the page will break
I have a header with a div inside of it, for some reason there is more space under the div then above. I tried setting all the padding to 0 in hope to see which one was causing it but it seems to not be a padding at all.
HTML
<header>
<div class="logo">
<div class="centrDivInDiv">
<h1>Welcome to Planet Earth</h1>
<p>The best planet after Pluto.</p>
</div>
</div>
</header>
CSS
body {
margin: 0px;
}
h1 {
margin-bottom: 0px;
}
header {
background-color: #E74C3C;
padding: 10px;
}
header p {
line-height: 0%;
}
.logo {
line-height: 80%;
padding: 10px 20px 10px 20px;
margin: 0px;
background-color: #2C3E50;
display: inline-block;
}
.logo p {
margin-top: 24px;
}
.centrDivInDiv {
display: table-cell;
vertical-align: middle;
margin: 0;
}
JsFiddle
Add vertical-align:middle to your .logo div (and you can remove it from .centrDivInDiv):
.logo {
line-height: 80%;
padding: 10px 20px 10px 20px;
margin: 0px;
background-color: #2C3E50;
display: inline-block;
vertical-align: middle;
}
jsFiddle example
Your problem is caused by the display: inline-block of your CSS. If you remove that or change it for display: blockit will be fine. You should also set your width: 50%
All of that in your .logo
check the fiddle
jsFiddle
The problem exists because you're using display: inline-block; in .logo
The best way to solve this problem is to set font-size to 0 in header so it will be like this:
header {
background-color: #E74C3C;
padding: 10px;
font-size: 0;
}
Also you should set font-size in .logo so it will be like this
.logo {
line-height: 80%;
padding: 10px 20px 10px 20px;
margin: 0px;
background-color: #2C3E50;
display: inline-block;
font-size: 16px;
}
Maybe this link will help you, it has more details
Fighting the Space Between Inline Block Elements | CSS-Tricks
So, i'm trying to center three of my divs on the page, #header, #nav, and #headerImg. I can't seem to center my #header and #nav divs using margin: 0 auto; though. They seem to be stuck to the left side of my page when I refresh the page.
Here is my style.css for my page:
div#header{ //I only have one image here.
position:absolute;
padding: 10px 20px;
width: 960px;
height: 49px;
top: 0px;
background-color: #2E5E8D
}
div#nav{ //I have 4 links here
position:absolute;
margin: 0 auto;
padding: 10px 20px;
width: 960px;
height: 20px;
top: 69px;
background-color: #2E5E8D
}
div#headerImg{ //I have one image here,
position: relative;
display: block;
margin: 0 auto;
width: 1000px;
top: 95px;
}
div#content{
position:relative;
top:109px;
width:1000px;
display: block;
margin: 0 auto;
}
div#content a{
color: blue;
text-decoration: none;
}
#content a:hover{
color: red;
text-decoration: underline;
}
#content dt{
margin-top: 10px;
}
div#footer{
position: relative;
margin: 0 auto;
top: 109px;
background-color: #333333;
color: white;
text-align: center;
font-size: 14px;
width: 1000px;
padding: 10px;
}
The width on my #header and #nav have to be set to 960px as per instructors request, and I'm sure he wanted the image inside my #headerImg to be inside my #header div, but i couldn't get the image from overlapping. Therefore, that's the only div of the 3 that I can center.
I tried using margin: 0 auto; and display: block on both but they don't seem to work. I tried using margin: 0 10% which seemed to work on my computer, but it is misaligned on another computer. My comments in the code are just to show what I have in the div.
Try add div#header and div#nav the following rules:
margin-left: -500px;
left: 50%;