Inspite of setting all margins and padding to 0, I'm suddenly finding that processing my html & css using a Prepros, is adding extra (unwanted) space under my last item eg. footer. While running the same html & css directly from Notepad++, does not do this (thankfully). Can someone please explain why this is happening since I will eventually be using Prepos and running from a local host.
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf=8">
<title>Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>header
</header>
<div class="wrapper">wrapper1
</div>
<div class="wrapper">wrapper2
</div>
<footer>footer
</footer>
</body>
</html>
Here is the CSS:
html{
margin: 0;
padding: 0;
border: 3px solid green;
}
body{
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
border: 3px solid lightblue;
height: 100vh;
}
header{
flex: 1;
height: 50%;
background-color: red;
border: 3px solid black;
}
.wrapper{
flex: 1;
height: 20%;
background-color: blue;
border: 3px solid black;
}
footer{
height: 5%;
position: absolute:
bottom: 0;
background-color: orange;
margin: 0;
padding: 0;
}
Here are images of the same code running, first from file:/// and the other from localhost:
(edit: addition)Is it possible that this has something to do with the prepros.cfg file that gets added by Prepros? I am also using a trial version of Prepros - could this be causing the issue? Would appreciate any clarification on this matter. NOTE: Above is the discrepancy in every browser i tried it on (Chrome, Firefox and Opera).
Related
I'm copying a website to train with CSS (I'm trying to reproduce this:click here to see the image) but I'm having a problem copying borders, this is the result: click here to see and this is the code that I wrote:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Technology - BBC News</title>
<style>
.topbar {
width: 1000px;
height: 40px;
background-color: #ffffff;
}
body {
margin: 0px;
padding: 0px;
}
.logo {
margin-top: 8px;
width: 100px;
float: left;
margin-left: 16px;
}
.topbar-section {
border-left: 1px solid grey;
height: 40px;
float: left,
}
</style>
</head>
<body>
<div class="topbar">
<img src="bbc-blocks-dark.png" class="logo"></div>
</div>
<div class="topbar-section">Sign in</div>
</body>
</html>
May I have your help please?
When I look at this code in Chrome - I can see the left border on .topbar-section.
When you say you are having problems - can you tell us what is happening? Are they not showing, or showing incorrectly?
From what I can see - the main problem is that you have made 2 separate divs where it should be one div inside another.
You've also got 3 closing and only 2 opening - if you are using an editor such as Atom or Notepad++ this can help you keep track of your opening and closing elements.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Technology - BBC News</title>
<style>
.topbar {
width: 1000px;
height: 40px;
background-color: #ffffff;
}
body {
margin: 0px;
padding: 0px;
}
.logo {
margin-top: 8px;
width: 100px;
float: left;
margin-left: 16px;
border-right: 1px solid grey;
}
.topbar-section {
height: 40px;
float: left;
margin-left: 5px;
}
</style>
</head>
<body>
<div class="topbar">
<img src="bbc-blocks-dark.png" class="logo">
<div class="topbar-section"><p>Sign In</p></div>
</div>
</body>
</html>
I have the following CSS code. For some reason, the background-color is not working. can somebody pls help?
<!DOCTYPE HTML>
<!--Inform the Browser that the document is HTML-->
<html lang="en-US">
<head>
<meta charset="UTF-8">
<head>
<style type="text/css">
.leftpane{
width: 20%;
height: 80%;
border-color: brown;
border-width: .25em;
border-style: double;
float: left;
margin-right: 1em
background-color: orange;
}
</style>
<title>Trying CSS </title>
</head>
<body>
<div class="leftpane">
hi hi hi
<br/>
</div>
</body>
</html>
You forgot to put semicolon after previous rule:
margin-right: 1em /* <------ ooops! */
background-color: orange;
Lack of ; makes parser ignore everything following after, so background-color: orange; is never considered.
semicolon is missing before the background-color, Please correct it, Give semicolon to
margin-right: 1em;
Try this using correct CSS syntax....
.leftpane {
width: 20%;
height: 80%;
border-color: brown;
border-width: .25em;
border-style: double;
float: left;
margin-right: 1em;
background-color: orange;
}
<div class="leftpane">
hi hi hi
<br/>
</div>
In spite of setting all margins and padding to 0, I'm suddenly finding that processing my html & css using Prepros(also tried with XAMPP), is adding extra (unwanted) space under my last item ie. footer. While running the same html & css directly from Notepad++, does not do this (thankfully). Can someone please explain why this is happening since I will eventually be running from a local host.
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf=8">
<title>Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>header</header>
<div class="wrapper">wrapper1</div>
<div class="wrapper">wrapper2</div>
<footer>footer</footer>
</body>
</html>
Here is the CSS:
html {
margin: 0;
padding: 0;
border: 3px solid green;
}
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
border: 3px solid lightblue;
height: 100vh;
}
header {
flex: 1;
height: 50%;
background-color: red;
border: 3px solid black;
}
.wrapper {
flex: 1;
height: 20%;
background-color: blue;
border: 3px solid black;
}
footer {
height: 5%;
position: absolute:
bottom: 0;
background-color: orange;
margin: 0;
padding: 0;
}
Here are images of the same code running, first from file:/// and the other from localhost:
Would appreciate any clarification on this matter. NOTE: Above is the discrepancy in every browser i tried it on (Chrome, Firefox and Opera).
I think it's because you mentionned a position: absolute; for the footer.
You shouldn't, because flex property does not apply anymore on the block.
Try the use flex for each children items, like:
header, .wrapper{
flex: 3;
}
footer{
flex: 1;
}
It works for me.
I have the following HTML5 code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
body {
max-width: 960px;
margin: 0 auto;
font-size: 120%;
}
header, nav {
margin: 0;
padding: 0;
border: 1px solid black;
}
header {
border-color: red;
}
img.mainpicture {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<header>
<img class="mainpicture" src="http://s29.postimg.org/ajjbb0n07/apic.jpg" alt="A picture"/></header><nav>Navigation area.</nav>
</body>
</html>
Can someone please explain why there is about 5 pixels of empty space between the <header> and the <nav> content, and how can I remove it?
By adding
header {
padding-bottom: 1px;
}
to the CSS file, the height of the white space is extended by one pixel, so it doesn't seem to have anything to do with the padding of <header>.
EDIT: I would like to do it without using <nav style="position: relative; top:-7px;">.
Set display block on the image for fixing fitting issues.
body {
max-width: 960px;
margin: 0 auto;
font-size: 120%;
}
header,
nav {
margin: 0;
padding: 0;
border: 1px solid black;
}
img.mainpicture {
width: 100%;
display: block;
}
<header>
<img class="mainpicture" src="//lorempicsum.com/futurama/960/200/2" alt="A picture" />
</header>
<nav>
Navigation area.
</nav>
Just add
img.mainpicture{
.....................
.....................
vertical-align: top;
}
That will fix the issue:)
It could be because of the inner elements having a margin, that is protruding outside! And also since you have an <img />, give a display: block; to it. Try overflow: hidden; for both header, nav:
header, nav {
overflow: hidden;
}
header img {
display: block;
}
Set the property margin-bottom equal to zero.
margin-bottom: 0;
I have the following simple example of an img and a p floated next to each other in a div. If you uncomment the last bit of CSS, the text drops below the image and stays there - but only in IE8 Standards mode. How do I get the image to resize in IE8 without this unfortunate side effect?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.slide {
border-style: solid;
border-color: #DDDDDD;
border-width: 7px;
display: inline-block;
zoom: 1;
*display: inline;
}
.slide img {
border-right-style: solid;
border-color: #DDDDDD;
border-width: 7px;
float: left;
}
.slide .caption {
width: 230px;
float: left;
padding: 10px 10px 10px 20px;
}
/* Here's the issue. */
/*.slide img, .slide, .slide_wrapper {
max-width: 100%;
height: auto;
}*/
</style>
</head>
<body>
<div class="slide_wrapper">
<div class="slide">
<img src="http://placehold.it/362x250" />
<p class="caption">
test2
</p>
</div>
</div>
</body>
</html>
Setting an explicit width makes the text behave as expected:
.slide {
width: 629px;
}
Put this in your <head></head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
It probably fix the problem.