I am trying to give the date a margin of 15px between the bottom of the header and the text itself, but it doesn't move no matter what I tried.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<script src="myscripts.js"></script>
<title>The Impertus ยท Understand the News</title>
</head>
<body>
<div id="Preheader">
<img src="images/masthead.png">
<div class ="ph" id="hd"></div>
<p class="ph">May 14, 2016</p>
</div>
</body>
</html>
CSS:
#import url('https://fonts.googleapis.com/css?family=Oswald');
html, body {
background-color: #E1D4C0;
margin: 0 0 0 0;
}
.ph {
display: inline-block;
margin-bottom: 15px;
}
#Preheader {
height: 150px;
width:100%;
background-color: #104386;
font-family: Oswald;
color: #F5EDE3;
}
Created Fiddle here: https://jsfiddle.net/fhkh6ae0/
Add .ph { vertical-align:15px; }
See https://jsfiddle.net/fhkh6ae0/2/
Try
.ph {
padding-bottom: 15px;
}
I think your issue lies in your html elements display property.
I see you are using this for the .ph class:
display: inline-block;
In order for your elements to align next to each other, but I think what you are trying to achieve here is possible by applying a float to your #hd and .ph elements:
float: left;
Here is some detailed information on CSS Floats by CSS-Tricks. The method you are using can be a good thing to do in a lot of specific situations, but for your specific case, I think this is the right path to take.
Here is a Fiddle for you.
You can see I changed some things and I added new things. One is the float property I am referencing above, and I have added an overflow: hidden property to the main container #Preheader , this is a fix for floating elements that try to escape their position or break your layout in bits. Remember the last one.
Just add a padding in #Preheader and it will be okay. take a look https://jsfiddle.net/fhkh6ae0/3/
#Preheader {
height: 150px;
width:100%;
background-color: #104386;
font-family: Oswald;
color: #F5EDE3;
padding-bottom:15px; /*added*/
}
Related
I have the following HTML:
pre {}
div.uncovered {
background-color: red;
}
<!doctype html>
<html>
<head>
<title>Line numbering test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<pre>
<div class="uncovered"><code>def f(a, b):</code></div>
<div><code> return a+b</code></div>
</pre>
</body>
</html>
I need to have div elements because I would like the background color to span the width of my entire browser window. However, the div element also adds whitespace between the code elements, which I do not want. I tried adjusting the margins and padding of the div element in my CSS to 0, but this had no effect. I also tried playing around with the white-space property of the div, some of the options (like nowrap) would remove the whitespace, but would also remove the spaces before my return statement, which is also not desirable.
I don't understand why div is adding this whitespace. Div is a block element and following the box model, all whitespace should be accounted for by either the margin or padding. Why is this happening, and how I can fix it?
Pre can contain phrasing content i.e. not divs - you need to put the pre inside the divs
You need to reset all the elements (you can limit yourself to pre, code and div if needed
Here the <pre> is enough so we can remove the <code>
* { margin:0; padding:0;}
div.uncovered {
background-color: red;
}
<!doctype html>
<html>
<head>
<title>Line numbering test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="uncovered"><pre>def f(a, b):</pre></div>
<div><pre> return a+b</pre></div>
</body>
</html>
Perhaps better alternative
We can have the code tag AND assign white-space: pre to it. Then we have semantic and visual consistency
* { margin:0; padding:0;}
code { display:block; white-space: pre;}
code.uncovered {
background-color: red;
}
<code class="uncovered">def f(a, b):</code>
<code> if a < b:
return a+b
else:
return b-a</code>
Please do not put nothing inside a CSS selector properties, e.g.:
pre {}
Next, negative padding values will not work, but margins will:
.box {
position: absolute;
width: 50px;
height: 50px;
padding: -20px; /* Will not work */
margin: -20px;
font-size: 8px;
background: #f1f1f1;
text-align: center;
}
<div class="box">You may not be able to see this box</div>
Finally, you can clean and fix the code.
div.uncovered {
background-color: red;
}
code {
margin: 0 !important;
padding: 0;
white-space: auto;
}
<!doctype html>
<html>
<head>
<title>Line numbering test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<pre>
<div class="uncovered"><code>def f(a, b):</code></div>
<code> return a+b</code>
</pre>
</body>
</html>
In HTML avoid using more than one space because HTML will ignore the rest. I replaced (whitespace), with the unicode alternative .
You can also apply display: block; + white-space: pre; and only use the <code> tag to achieve a similar result:
code {
display: block;
white-space: pre;
/* for more space between lines */
/* margin-bottom: 10px; */
}
code.uncovered {
background-color: red;
}
<!DOCTYPE html>
<html>
<body>
<code class="uncovered">def f(a, b):</code>
<code> if a > b:</code>
<code> return a - b</code>
<code> else:</code>
<code> return a + b</code>
</body>
</html>
I am making a website for some work and I have successfully made the background for the headers and all. But the problem is, I want to join it to the top of my webpage but it refuses to do that. How do I prevent it? (Not a duplicate of where the answer was adding !Important to the code)
Here is my code:
HTML:
<!DOCTYPE html>
<html class="html">
<head>
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>LMUN - Home</title>
<div class="header"></div>
</head>
</html>
CSS:
.html
{
background-color: #FFFFFF;
}
.header
{
background-color: #70A5DA;
height: 4.5%;
width: 90%;
box-sizing: content-box;
position:absolute;
margin-left:5%;
margin-right:5%;
margin-top:0 !important;
padding:0 !important;
}
Note: I want to keep position absolute as it allows me to set everything in percentage values which is very essential for me.
Try this
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>LMUN - Home</title>
</head>
<body>
<div class="header"></div>
</body>
</html>
CSS
body {
margin:0;
}
.html
{
background-color: #FFFFFF;
}
.header
{
background-color: #70A5DA;
height: 4.5%;
width: 90%;
box-sizing: content-box;
position:absolute;
margin-left:5%;
margin-right:5%;
margin-top:0 !important;
padding:0 !important;
}
Yes for this you need to set the margin for body and also you can add same for html as 0.Then it will reduce unnecessary spaces. Like for example.
html{margin:0;}
body{margin:0}
I am trying to place a solid color banner that stretches across the top of the screen like on this website, facebook, and others. For some reason I am encountering difficulties doing this
I created a div tag in my HTML file for the banner and tried to apply CSS to the div tag but nothing is working.
<!DOCTYPE html>
<html>
<head>
<style>
#banner {
background-color: #333FF;
font-family: Arial;
position: absolute;
left: 0;
right: 0;
padding:15px;
height:800px;
background-size:100%;
}
</style>
<title>Random Password Generator</title>
</head>
<body>
<div id="banner"><h1>fdsfdsfdsfds</h1></div>
</body>
</html>
I also tried linking to an external CSS file but that isn't working either.
How can I make a simple, solid color banner at the top of the page, on every page?
#333FF is an incorrect color. It should be like this: #333FFF. See the W3C Specification for more info on the length of hex codes (hint: they need to be six characters long).
Working example : http://jsfiddle.net/ntim/SKnxP/
position:absolute; also doesn't seem necessary in your case.
You don't actually need to use position absolute unless you want it to be over the top of anything. Instead, you can just use the following:
<style>
#banner {
background-color: #333FFF;
font-family: Arial;
padding:15px;
height:800px;
background-size:100% 100%;
}
</style>
here is something based on a template I use:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="CSS-STYLE-SHEET.css">
<style type="text/css">
body
{
background-color: #E7E7E7;
text-align: center;
font-family: Arial, Helvetica;
font-size: 15px;
color: #000000;
border-spacing: 0;
border-collapse:collapse;
padding: 0;
margin: 0;
}
#Banner {
background-color: #333FFF;
top: 0; /* Probably not necessary... */
height: 40px;
width: 100%; /* Also probably not necessary */
}
#ContentMain
{
background-color: #FFFFFF;
height: 100%;
}
</style>
</head>
<body>
<div id="ContentMain">
<div id="Banner">Banner goes here</div>
Content goes here
</div>
</body>
</html>
should work.. the grey bit at the back is because the html and body tags dont fill the entire screen - something like this should fix it (I would use min-height), but I have not included it here as then if you want a page taller than the browser window and works in Internet Explorer things get annoying...
Jsfiddle here
I am playing around with webdesign, I always assumed that div's that are positioned relative, always are ordered in the way they are coded. But now I have a div that jumps above another although they are both relative.
A screenshot of the problem:
Here is the code of my index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/layout.css">
<link rel="stylesheet" type="text/css" href="CSS/nav.css">
<meta name="description" content="Website template 1">
<meta name="keywords" content="template">
<meta name="author" content="">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="MainContainer">
<div id="HeaderContainer">
<div id="NavigatieContainer">
<ul id="nav">
<!-- LVL 1 -->
<li>
Home
</li>
<li>
About
</li>
</ul>
</div>
</div>
<div id="BodyContainer">
<p>test</p>
</div>
</div>
</body>
</html>
And here is the code of my layout css:
/*Basic tags*/
body {
background-color: #efebdf;
}
/*DIV ID's*/
div#MainContainer {
width: 60%;
margin-left:auto;
margin-right:auto;
}
div#HeaderContainer {
position: relative;
}
div#NavigatieContainer {
float: right;
}
div#BodyContainer {
position: relative;
background-color: brown;
}
and the code of my navigation css so far, although I don't think the problem is here:
a {
color:#333333;
}
#nav {
/*-webkit-box-shadow:rgba(0, 0, 0, 0.4) 0 1px 3px;*/
border-radius: 0.3em;
position: relative;
z-index: 5;
}
#nav li {
margin-right: 10px; /*spacing tussen de list items*/
float:left;/*zorgt voor naast elkaar te plaatsen*/
list-style:none;/*Haalt list bolletjes weg*/
position:relative;
border-radius: 0.3em;
background-color: #e2e0d3;
}
#nav a {
color:black;
display:block;
font-weight:bold;
margin:0;
padding:8px 20px;
text-decoration: none;
}
#Adrift almost got it right, but he mentioned the wrong div. The overflow property should be on the HeaderContainer.
div#HeaderContainer {
position: relative;
overflow: auto;
}
I've created a jsfiddle for you with the result. You might want to add it to any following questions as it allows us to easier detect the problem.
http://jsfiddle.net/7Kx9g/
A little more background informations; once an image floats it is no longer in the document and therefor does not reserve it's own height. A trick called clearfix can be used to prevent it, but it's an advanced way of using overflow: auto; or overflow: hidden;
Do you know how to use inline-block? IMO, it's much easier to organize things with display:inline-block; than to use floats, because float makes it ignore several CSS rules, and the larger your project becomes, the more troublesome this "rule-ignoring" has the POTENTIAL to become.
The problem is caused by the float. Put clear:both; in the css for div#BodyContainer.
Look here. http://jsfiddle.net/aKy67/
Total agree #HC_
Edit: I had some code posted here but I couldn't get it to reproduce. So here is the link to the problem:
http://stackmobile.quickmediasolutions.com/questions.php?site=stackoverflow
No matter what I do, there is still a gap between the table and the DIV. This occurs on Google Chrome 5.0.375.70 beta on Linux. (And it seems to occur on other Webkit-based browsers too.)
How can I get rid of the space?
There might be a space character between the div and the table. If yes then try removing that.
Try giving
body
{
font-size: 1px;
}
and check whether the 4px has been reduced or not.
Try using the following CSS:-
div {
margin: 0px;
padding: 0px;
}
table {
margin: 0px;
border-collapse: collapse;
padding: 0px;
}
Try zeroing the div margin too:
div {
margin:0;
}
This is the full page I used, it seemed to work for me:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/\
xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Test</title>
<style type="text/css">
div {
width:2em;
height:2em;
background-color:black;
}
table {
background-color:red;
margin: 0px;
border-collapse: collapse;
padding: 0px;
}
</style>
</head>
<body>
<div></div>
<table>
<tr><td>Test</td></tr>
</table>
</body>
</html>
I finally fixed it!
All I needed to add was
height: 40px;
to
#topbar_logo {
float: left;
}